backtest_dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backtest Results — Trading System</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<style>

:root{--bg:#0d1117;--card:#161b22;--border:#30363d;--text:#c9d1d9;--dim:#8b949e;--green:#3fb950;--red:#f85149;--blue:#58a6ff;--yellow:#d29922;--accent:#388bfd}

*{margin:0;padding:0;box-sizing:border-box}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}

.header{background:var(--card);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:100}

.header h1{font-size:20px;font-weight:600}

.header a{color:var(--blue);font-size:13px;text-decoration:none}

.header a:hover{text-decoration:underline}

select{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:8px 12px;border-radius:6px;font-size:13px;max-width:400px}

.container{max-width:1400px;margin:0 auto;padding:20px 24px}

.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}

.kpi{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px 16px}

.kpi .label{font-size:11px;text-transform:uppercase;color:var(--dim);letter-spacing:.5px;margin-bottom:4px}

.kpi .value{font-size:22px;font-weight:700}

.kpi .sub{font-size:11px;color:var(--dim);margin-top:2px}

.pos{color:var(--green)}.neg{color:var(--red)}

.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}

.chart-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px}

.chart-card h3{font-size:13px;color:var(--dim);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}

canvas{width:100%!important;max-height:280px}

.tbl-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:20px;overflow-x:auto}

.tbl-card h3{font-size:13px;color:var(--dim);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}

table{width:100%;border-collapse:collapse;font-size:13px}

th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--border);color:var(--dim);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;cursor:pointer;user-select:none}

th:hover{color:var(--blue)}

th.sorted-asc::after{content:" ▲";color:var(--blue)}

th.sorted-desc::after{content:" ▼";color:var(--blue)}

td{padding:7px 10px;border-bottom:1px solid var(--border);white-space:nowrap}

tr:hover{background:rgba(56,139,253,.06)}

.pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}

.pill-buy{background:rgba(63,185,80,.15);color:var(--green)}

.pill-sell{background:rgba(248,81,73,.15);color:var(--red)}

.filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:center}

.filter-row label{font-size:12px;color:var(--dim)}

.filter-row input,.filter-row select{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:5px 8px;border-radius:4px;font-size:12px}

.loading{text-align:center;padding:60px;color:var(--dim);font-size:16px}

.badge{display:inline-block;background:var(--accent);color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;margin-left:8px}

</style>
</head>
<body>
<div class="header">
  <h1>📊 Backtest Results</h1>
  <select id="runSelect"><option value="">Loading…</option></select>
  <a href="/">← Live Dashboard</a>
</div>
<div class="container" id="app">
  <div class="loading" id="loadingMsg">Select a backtest run to view results</div>
</div>

<script>

const API = '';

const $ = s => document.querySelector(s);

const $$ = s => document.querySelectorAll(s);

let trades = [], dailyPnl = [], currentSort = {col: null, asc: true};



// ── Load run list ──

async function loadRuns(){

  const res = await fetch(`${API}/api/backtest/list`);

  const runs = await res.json();

  const sel = $('#runSelect');

  sel.innerHTML = '<option value="">— Select backtest run —</option>';

  runs.sort((a,b) => b.end.localeCompare(a.end));

  for(const r of runs){

    const o = document.createElement('option');

    o.value = r.key;

    o.textContent = `${r.symbol_count} symbols | ${r.start} → ${r.end}`;

    sel.appendChild(o);

  }

  // Auto-select the latest (largest symbol count)

  const best = runs.reduce((a,b) => b.symbol_count > a.symbol_count ? b : a, runs[0]);

  if(best){ sel.value = best.key; loadRun(best.key); }

}



async function loadRun(key){

  if(!key){ $('#app').innerHTML = '<div class="loading">Select a backtest run to view results</div>'; return; }

  $('#app').innerHTML = '<div class="loading">Loading backtest data…</div>';

  const [tRes, pRes] = await Promise.all([

    fetch(`${API}/api/backtest/trades/${encodeURIComponent(key)}`),

    fetch(`${API}/api/backtest/daily_pnl/${encodeURIComponent(key)}`)

  ]);

  trades = await tRes.json();

  dailyPnl = await pRes.json();

  render();

}



function render(){

  // ── Compute stats ──

  const symbols = [...new Set(trades.map(t=>t.symbol))];

  const totalPnl = trades.reduce((s,t)=>s+t.pnl,0);

  const wins = trades.filter(t=>t.pnl>0);

  const losses = trades.filter(t=>t.pnl<=0);

  const winRate = trades.length ? (wins.length/trades.length*100) : 0;

  const avgWin = wins.length ? wins.reduce((s,t)=>s+t.pnl,0)/wins.length : 0;

  const avgLoss = losses.length ? losses.reduce((s,t)=>s+t.pnl,0)/losses.length : 0;

  const avgDuration = trades.length ? trades.reduce((s,t)=>s+(t.duration_min||0),0)/trades.length : 0;



  // Per-symbol stats

  const bySymbol = {};

  for(const t of trades){

    if(!bySymbol[t.symbol]) bySymbol[t.symbol] = {trades:0,pnl:0,wins:0,buys:0,sells:0};

    bySymbol[t.symbol].trades++;

    bySymbol[t.symbol].pnl += t.pnl;

    if(t.pnl > 0) bySymbol[t.symbol].wins++;

    if(t.side==='buy') bySymbol[t.symbol].buys++;

    else bySymbol[t.symbol].sells++;

  }



  // Equity curve from daily PnL

  let cumPnl = 0;

  const eqCurve = dailyPnl.map(d => { cumPnl += d.pnl; return {date:d.date, cum:cumPnl}; });



  // Max drawdown

  let peak = 0, maxDD = 0;

  for(const e of eqCurve){

    if(e.cum > peak) peak = e.cum;

    const dd = peak - e.cum;

    if(dd > maxDD) maxDD = dd;

  }



  // Daily stats

  const profitDays = dailyPnl.filter(d=>d.pnl>0).length;

  const lossDays = dailyPnl.filter(d=>d.pnl<=0).length;

  const bestDay = dailyPnl.length ? Math.max(...dailyPnl.map(d=>d.pnl)) : 0;

  const worstDay = dailyPnl.length ? Math.min(...dailyPnl.map(d=>d.pnl)) : 0;



  // Exit reasons

  const exitReasons = {};

  for(const t of trades){ exitReasons[t.exit_reason] = (exitReasons[t.exit_reason]||0) + 1; }



  const pnlClass = totalPnl >= 0 ? 'pos' : 'neg';



  $('#app').innerHTML = `

    <div class="kpi-row">

      <div class="kpi"><div class="label">Total P&L</div><div class="value ${pnlClass}">$${totalPnl.toFixed(2)}</div></div>

      <div class="kpi"><div class="label">Total Trades</div><div class="value">${trades.length}</div><div class="sub">${symbols.length} symbols</div></div>

      <div class="kpi"><div class="label">Win Rate</div><div class="value">${winRate.toFixed(1)}%</div><div class="sub">${wins.length}W / ${losses.length}L</div></div>

      <div class="kpi"><div class="label">Avg Win</div><div class="value pos">$${avgWin.toFixed(2)}</div></div>

      <div class="kpi"><div class="label">Avg Loss</div><div class="value neg">$${avgLoss.toFixed(2)}</div></div>

      <div class="kpi"><div class="label">Max Drawdown</div><div class="value neg">$${maxDD.toFixed(2)}</div></div>

      <div class="kpi"><div class="label">Profit Days</div><div class="value pos">${profitDays}</div><div class="sub">of ${dailyPnl.length} days</div></div>

      <div class="kpi"><div class="label">Best / Worst Day</div><div class="value"><span class="pos">$${bestDay.toFixed(2)}</span> / <span class="neg">$${worstDay.toFixed(2)}</span></div></div>

    </div>

    <div class="charts-row">

      <div class="chart-card"><h3>Equity Curve (Cumulative P&L)</h3><canvas id="eqChart"></canvas></div>

      <div class="chart-card"><h3>Daily P&L</h3><canvas id="dailyChart"></canvas></div>

    </div>

    <div class="charts-row">

      <div class="chart-card"><h3>P&L by Symbol</h3><canvas id="symbolChart"></canvas></div>

      <div class="chart-card"><h3>Exit Reasons</h3><canvas id="exitChart"></canvas></div>

    </div>

    <div class="tbl-card">

      <h3>Per-Symbol Summary <span class="badge">${symbols.length} symbols</span></h3>

      <table id="symbolTable">

        <thead><tr>

          <th data-col="symbol">Symbol</th>

          <th data-col="trades">Trades</th>

          <th data-col="pnl">P&L</th>

          <th data-col="winRate">Win Rate</th>

          <th data-col="buys">Buys</th>

          <th data-col="sells">Sells</th>

        </tr></thead>

        <tbody id="symbolBody"></tbody>

      </table>

    </div>

    <div class="tbl-card">

      <h3>Trade Log <span class="badge">${trades.length} trades</span></h3>

      <div class="filter-row">

        <label>Symbol:</label>

        <select id="filterSymbol"><option value="">All</option></select>

        <label>Side:</label>

        <select id="filterSide"><option value="">All</option><option value="buy">Buy</option><option value="sell">Sell</option></select>

        <label>P&L:</label>

        <select id="filterPnl"><option value="">All</option><option value="win">Winners</option><option value="loss">Losers</option></select>

      </div>

      <table>

        <thead><tr>

          <th>Symbol</th><th>Side</th><th>Entry</th><th>Exit</th><th>Qty</th><th>P&L</th><th>Entry Time</th><th>Exit Time</th><th>Duration</th><th>Exit Reason</th>

        </tr></thead>

        <tbody id="tradeBody"></tbody>

      </table>

    </div>

  `;



  // ── Charts ──

  // Equity curve

  new Chart($('#eqChart'), {type:'line', data:{labels:eqCurve.map(e=>e.date),datasets:[{

    label:'Cumulative P&L ($)',data:eqCurve.map(e=>e.cum),borderColor:'#58a6ff',backgroundColor:'rgba(88,166,255,.1)',fill:true,tension:.3,pointRadius:2

  }]},options:{responsive:true,plugins:{legend:{display:false}},scales:{x:{ticks:{color:'#8b949e',maxTicksLimit:10},grid:{color:'#21262d'}},y:{ticks:{color:'#8b949e',callback:v=>'$'+v.toFixed(2)},grid:{color:'#21262d'}}}}});



  // Daily PnL bar

  new Chart($('#dailyChart'), {type:'bar', data:{labels:dailyPnl.map(d=>d.date),datasets:[{

    label:'Daily P&L ($)',data:dailyPnl.map(d=>d.pnl),backgroundColor:dailyPnl.map(d=>d.pnl>=0?'rgba(63,185,80,.7)':'rgba(248,81,73,.7)')

  }]},options:{responsive:true,plugins:{legend:{display:false}},scales:{x:{ticks:{color:'#8b949e',maxTicksLimit:12},grid:{color:'#21262d'}},y:{ticks:{color:'#8b949e',callback:v=>'$'+v.toFixed(2)},grid:{color:'#21262d'}}}}});



  // Symbol PnL horizontal bar

  const symEntries = Object.entries(bySymbol).sort((a,b)=>b[1].pnl-a[1].pnl);

  new Chart($('#symbolChart'), {type:'bar', data:{labels:symEntries.map(e=>e[0]),datasets:[{

    label:'P&L ($)',data:symEntries.map(e=>e[1].pnl),backgroundColor:symEntries.map(e=>e[1].pnl>=0?'rgba(63,185,80,.7)':'rgba(248,81,73,.7)')

  }]},options:{indexAxis:'y',responsive:true,plugins:{legend:{display:false}},scales:{x:{ticks:{color:'#8b949e',callback:v=>'$'+v.toFixed(2)},grid:{color:'#21262d'}},y:{ticks:{color:'#8b949e',font:{size:10}},grid:{display:false}}}}});



  // Exit reasons doughnut

  const erLabels = Object.keys(exitReasons);

  const erColors = ['#58a6ff','#3fb950','#f85149','#d29922','#bc8cff','#f0883e','#8b949e'];

  new Chart($('#exitChart'), {type:'doughnut', data:{labels:erLabels,datasets:[{

    data:Object.values(exitReasons),backgroundColor:erColors.slice(0,erLabels.length)

  }]},options:{responsive:true,plugins:{legend:{position:'bottom',labels:{color:'#c9d1d9',font:{size:11}}}}}});



  // ── Symbol table ──

  const symRows = Object.entries(bySymbol).map(([sym,d])=>({

    symbol:sym, trades:d.trades, pnl:d.pnl, winRate:d.trades?d.wins/d.trades*100:0, buys:d.buys, sells:d.sells

  }));

  renderSymbolTable(symRows);

  $$('#symbolTable th').forEach(th => th.addEventListener('click', ()=> sortSymbolTable(th.dataset.col, symRows)));



  // ── Filters ──

  const fSel = $('#filterSymbol');

  symbols.sort().forEach(s => { const o=document.createElement('option'); o.value=s; o.textContent=s; fSel.appendChild(o); });

  $('#filterSymbol').addEventListener('change', renderTradeTable);

  $('#filterSide').addEventListener('change', renderTradeTable);

  $('#filterPnl').addEventListener('change', renderTradeTable);

  renderTradeTable();

}



function renderSymbolTable(rows){

  const body = $('#symbolBody');

  body.innerHTML = rows.map(r=>`<tr>

    <td><strong>${r.symbol}</strong></td>

    <td>${r.trades}</td>

    <td class="${r.pnl>=0?'pos':'neg'}">$${r.pnl.toFixed(2)}</td>

    <td>${r.winRate.toFixed(1)}%</td>

    <td>${r.buys}</td>

    <td>${r.sells}</td>

  </tr>`).join('');

}



function sortSymbolTable(col, rows){

  $$('#symbolTable th').forEach(th=>th.classList.remove('sorted-asc','sorted-desc'));

  if(currentSort.col===col) currentSort.asc=!currentSort.asc;

  else { currentSort.col=col; currentSort.asc=col==='symbol'; }

  rows.sort((a,b)=>{

    let va=a[col],vb=b[col];

    if(typeof va==='string') return currentSort.asc?va.localeCompare(vb):vb.localeCompare(va);

    return currentSort.asc?va-vb:vb-va;

  });

  const th = $(`#symbolTable th[data-col="${col}"]`);

  th.classList.add(currentSort.asc?'sorted-asc':'sorted-desc');

  renderSymbolTable(rows);

}



function renderTradeTable(){

  const symF = $('#filterSymbol').value;

  const sideF = $('#filterSide').value;

  const pnlF = $('#filterPnl').value;

  let filtered = trades;

  if(symF) filtered = filtered.filter(t=>t.symbol===symF);

  if(sideF) filtered = filtered.filter(t=>t.side===sideF);

  if(pnlF==='win') filtered = filtered.filter(t=>t.pnl>0);

  if(pnlF==='loss') filtered = filtered.filter(t=>t.pnl<=0);

  // Show max 200 rows for perf

  const shown = filtered.slice(0, 200);

  const body = $('#tradeBody');

  body.innerHTML = shown.map(t=>`<tr>

    <td><strong>${t.symbol}</strong></td>

    <td><span class="pill ${t.side==='buy'?'pill-buy':'pill-sell'}">${t.side.toUpperCase()}</span></td>

    <td>$${Number(t.entry_price).toFixed(2)}</td>

    <td>$${Number(t.exit_price).toFixed(2)}</td>

    <td>${Number(t.qty).toFixed(4)}</td>

    <td class="${t.pnl>=0?'pos':'neg'}">$${Number(t.pnl).toFixed(2)}</td>

    <td>${(t.entry_time||'').replace('+00:00','Z').slice(0,19)}</td>

    <td>${(t.exit_time||'').replace('+00:00','Z').slice(0,19)}</td>

    <td>${Number(t.duration_min).toFixed(0)}m</td>

    <td>${t.exit_reason||''}</td>

  </tr>`).join('');

  if(filtered.length>200) body.innerHTML += `<tr><td colspan="10" style="color:var(--dim);text-align:center">… showing 200 of ${filtered.length} trades</td></tr>`;

}



$('#runSelect').addEventListener('change', e => loadRun(e.target.value));

loadRuns();

</script>
</body>
</html>