Professional dashboard: strategy detail panel with chart, trades, and signal reasons
This commit is contained in:
ramseshk
+234
-210
@@ -2,255 +2,279 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>FTDT Quant Lab — Live Strategy Dashboard</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<title>FTDT Quant Lab — Professional Dashboard</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lightweight-charts@4.2.3/dist/lightweight-charts.standalone.production.js"></script>
|
||||
<style>
|
||||
:root{--bg:#0a0a0c;--surface:#111115;--border:#1e1e26;--hover:#252530;--text:#8b8b96;--bright:#e2e2e8;--green:#22c55e;--red:#ef4444;--blue:#3b82f6;--amber:#f59e0b;--purple:#a855f7;--radius:10px;--font:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',monospace}
|
||||
:root{--bg:#050508;--srf:#0b0b12;--ln:#181825;--hr:#222230;--tx:#6b6b7b;--hi:#d4d4e0;--gr:#22c55e;--rd:#ef4444;--bl:#3b82f6;--am:#f59e0b;--pu:#a855f7;--cy:#06b6d4;--pk:#ec4899;--ra:8px;--f:'Inter',system-ui,sans-serif;--m:'JetBrains Mono',monospace}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
|
||||
.wrap{max-width:1280px;margin:0 auto;padding:20px 16px}
|
||||
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap}
|
||||
.logo h1{font-size:20px;font-weight:700;color:var(--bright);letter-spacing:-0.5px}
|
||||
.logo span{font-size:11px;color:var(--text);display:flex;align-items:center;gap:5px;margin-top:2px}
|
||||
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.dot.live{background:var(--green);animation:pulse 2s infinite}.dot.dead{background:var(--red)}
|
||||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
|
||||
.totals{text-align:right}.totals .pnl{font-family:var(--mono);font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1}
|
||||
.totals .pnl.up{color:var(--green)}.totals .pnl.dn{color:var(--red)}
|
||||
.totals .sub{font-size:11px;color:var(--text);margin-top:4px;text-transform:uppercase;letter-spacing:0.5px}
|
||||
.tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--border)}
|
||||
.tab{padding:10px 20px;font-size:13px;font-weight:500;cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;color:var(--text);font-family:var(--font);transition:all 0.15s}
|
||||
.tab:hover{color:var(--bright)}.tab.on{color:var(--bright);border-bottom-color:var(--blue)}
|
||||
.panel{display:none}.panel.show{display:block}
|
||||
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
|
||||
.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
|
||||
.stat-box .lbl{font-size:10px;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
|
||||
.stat-box .val{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--bright)}
|
||||
.stat-box .val.up{color:var(--green)}.stat-box .val.dn{color:var(--red)}
|
||||
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px}
|
||||
.card h3{font-size:13px;font-weight:600;color:var(--bright);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
|
||||
.card h3 .desc{font-weight:400;color:var(--text);font-size:11px}
|
||||
.chart-wrap{width:100%;height:220px;position:relative}
|
||||
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:14px}
|
||||
.strat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:all 0.2s;cursor:pointer}
|
||||
.strat:hover{border-color:var(--hover)}.strat.open{border-color:var(--blue);grid-column:1/-1}
|
||||
.strat .hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
|
||||
.strat .name{font-size:12px;font-weight:600;color:var(--bright);line-height:1.3}
|
||||
.strat .alloc{font-size:10px;color:var(--text);margin-top:1px}
|
||||
.strat .status{font-size:10px;padding:2px 8px;border-radius:4px;font-weight:500}
|
||||
.strat .status.run{background:rgba(34,197,94,0.1);color:var(--green)}
|
||||
.strat .status.idle{background:rgba(245,158,11,0.1);color:var(--amber)}
|
||||
.strat .big{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1.1;margin-bottom:2px}
|
||||
.strat .big.up{color:var(--green)}.strat .big.dn{color:var(--red)}
|
||||
.strat .pct{font-size:10px;color:var(--text);margin-bottom:10px;font-family:var(--mono)}
|
||||
.strat .r{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;color:var(--text)}
|
||||
.strat .r b{font-family:var(--mono);color:var(--bright)}
|
||||
.strat-detail{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
|
||||
.strat.open .strat-detail{display:block}
|
||||
.strat-detail .desc-text{font-size:11px;color:var(--text);margin-bottom:12px;line-height:1.5}
|
||||
.strat-detail .mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
|
||||
.strat-detail .signal-log{font-size:9px;color:var(--text);max-height:80px;overflow-y:auto}
|
||||
.strat-detail .signal-log .sig{padding:3px 0;border-bottom:1px solid rgba(255,255,255,0.02);display:flex;justify-content:space-between}
|
||||
.strat-detail .signal-log .sig.buy{color:var(--green)}.strat-detail .signal-log .sig.sell{color:var(--red)}
|
||||
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
|
||||
table{width:100%;border-collapse:collapse;min-width:550px}
|
||||
th{font-size:9px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}
|
||||
td{font-family:var(--mono);font-size:11px;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,0.02)}
|
||||
.green{color:var(--green)}.red{color:var(--red)}
|
||||
.bt-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all 0.15s;margin-bottom:6px;gap:12px;flex-wrap:wrap}
|
||||
.bt-row:hover{border-color:var(--hover);background:var(--hover)}.bt-row.sel{border-color:var(--blue)}
|
||||
.bt-row .n{font-weight:600;font-size:13px;color:var(--bright)}.bt-row .m{font-size:10px;color:var(--text)}
|
||||
.bt-row .k{display:flex;gap:20px;flex-shrink:0}.bt-row .k .kv{text-align:right}.bt-row .k .kl{font-size:9px;color:var(--text);text-transform:uppercase}.bt-row .k .kd{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--bright)}
|
||||
.bt-detail{display:none;margin-top:12px}.bt-detail.on{display:block}
|
||||
.data-badge{display:inline-block;font-size:9px;padding:3px 8px;border-radius:4px;font-weight:500;margin-left:8px}
|
||||
.data-badge.mainnet{background:rgba(168,85,247,0.15);color:var(--purple)}
|
||||
.data-badge.testnet{background:rgba(245,158,11,0.15);color:var(--amber)}
|
||||
.data-badge.normal{background:rgba(34,197,94,0.15);color:var(--green)}
|
||||
.data-badge.low_vol{background:rgba(59,130,246,0.15);color:var(--blue)}
|
||||
.data-badge.high_vol{background:rgba(239,68,68,0.15);color:var(--red)}
|
||||
footer{text-align:center;padding:20px;font-size:10px;color:#3f3f46}footer a{color:#52525b;text-decoration:none}footer a:hover{color:var(--text)}
|
||||
@media(max-width:640px){
|
||||
.wrap{padding:12px 8px}.top{flex-direction:column;align-items:flex-start}.totals{text-align:left;width:100%}
|
||||
.totals .pnl{font-size:24px}.stats{grid-template-columns:repeat(3,1fr);gap:6px}.stat-box{padding:10px}.stat-box .val{font-size:14px}
|
||||
.grid{grid-template-columns:1fr 1fr;gap:8px}.strat .big{font-size:16px}.chart-wrap{height:160px}
|
||||
.bt-row{flex-direction:column;align-items:flex-start}.bt-row .k{width:100%;justify-content:space-between;gap:8px}
|
||||
.strat-detail .mini-stats{grid-template-columns:repeat(2,1fr)}
|
||||
body{background:var(--bg);color:var(--hi);font-family:var(--f);min-height:100vh;-webkit-font-smoothing:antialiased}
|
||||
.topbar{position:sticky;top:0;z-index:100;background:rgba(5,5,8,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--ln);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
|
||||
.topbar h1{font-size:17px;font-weight:700;letter-spacing:-0.5px;display:flex;align-items:center;gap:8px}
|
||||
.topbar h1 span{font-size:10px;color:var(--tx);font-weight:400}
|
||||
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--gr);animation:pulse 2s infinite}
|
||||
.status-dot.off{background:var(--rd);animation:none}
|
||||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
|
||||
.portfolio{text-align:right;min-width:140px}
|
||||
.portfolio .pnl{font-family:var(--m);font-size:28px;font-weight:700;letter-spacing:-1px}
|
||||
.portfolio .pnl.up{color:var(--gr)}.portfolio .pnl.dn{color:var(--rd)}
|
||||
.portfolio .sub{font-size:10px;color:var(--tx);text-transform:uppercase;letter-spacing:.5px}
|
||||
.tabs{display:flex;gap:0;padding:0 24px;border-bottom:1px solid var(--ln);position:sticky;top:52px;z-index:99;background:rgba(5,5,8,.95);backdrop-filter:blur(20px)}
|
||||
.tab{padding:10px 20px;font-size:12px;font-weight:500;cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;color:var(--tx);font-family:var(--f);transition:all .15s}
|
||||
.tab:hover{color:var(--hi)}.tab.on{color:var(--hi);border-bottom-color:var(--bl)}
|
||||
.badge{font-size:8px;padding:2px 7px;border-radius:3px;font-weight:600;margin-left:6px;text-transform:uppercase;letter-spacing:.5px}
|
||||
.badge.test{background:rgba(245,158,11,.15);color:var(--am)}.badge.main{background:rgba(168,85,247,.15);color:var(--pu)}
|
||||
.main-wrap{max-width:1440px;margin:0 auto;padding:20px 24px;display:flex;gap:20px}
|
||||
.panel{display:none;flex:1;min-width:0}.panel.show{display:block}
|
||||
|
||||
/* Summary stats */
|
||||
.stats-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px}
|
||||
.stat{background:var(--srf);border:1px solid var(--ln);border-radius:var(--ra);padding:12px 14px}
|
||||
.stat .lbl{font-size:9px;color:var(--tx);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
|
||||
.stat .val{font-family:var(--m);font-size:17px;font-weight:600}
|
||||
.stat .val.up{color:var(--gr)}.stat .val.dn{color:var(--rd)}
|
||||
|
||||
/* Strategy grid */
|
||||
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:20px}
|
||||
.scard{background:var(--srf);border:1px solid var(--ln);border-radius:var(--ra);padding:16px;cursor:pointer;transition:all .2s;position:relative}
|
||||
.scard:hover{border-color:var(--hr);transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.3)}
|
||||
.scard.selected{border-color:var(--bl);box-shadow:0 0 0 1px rgba(59,130,246,.3)}
|
||||
.scard .sh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
|
||||
.scard .sname{font-size:12px;font-weight:600;line-height:1.3;max-width:70%}
|
||||
.scard .salloc{font-size:9px;color:var(--tx);margin-top:2px}
|
||||
.scard .stag{font-size:8px;padding:2px 7px;border-radius:3px;font-weight:500;white-space:nowrap}
|
||||
.scard .stag.run{background:rgba(34,197,94,.1);color:var(--gr)}
|
||||
.scard .stag.idle{background:rgba(245,158,11,.1);color:var(--am)}
|
||||
.scard .stag.maker{background:rgba(59,130,246,.1);color:var(--bl)}
|
||||
.scard .stag.taker{background:rgba(239,68,68,.1);color:var(--rd)}
|
||||
.scard .spnl{font-family:var(--m);font-size:20px;font-weight:700;margin-bottom:6px}
|
||||
.scard .spnl.up{color:var(--gr)}.scard .spnl.dn{color:var(--rd)}
|
||||
.scard .smeta{display:flex;gap:12px;font-size:9px;color:var(--tx);flex-wrap:wrap}
|
||||
|
||||
/* Detail panel */
|
||||
.detail-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:200;display:none}
|
||||
.detail-overlay.on{display:flex;align-items:flex-start;justify-content:center;padding-top:40px}
|
||||
.detail-panel{background:var(--bg);border:1px solid var(--ln);border-radius:12px;width:95%;max-width:1100px;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
|
||||
.detail-header{position:sticky;top:0;background:var(--srf);padding:16px 20px;border-bottom:1px solid var(--ln);display:flex;align-items:center;justify-content:space-between;z-index:5}
|
||||
.detail-header h2{font-size:16px;font-weight:700}
|
||||
.close-btn{background:none;border:1px solid var(--ln);color:var(--hi);padding:6px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-family:var(--f);transition:all .15s}
|
||||
.close-btn:hover{background:var(--hr)}
|
||||
.detail-body{padding:20px}
|
||||
.detail-body .chart-wrap{width:100%;height:280px;margin-bottom:16px;border-radius:var(--ra);overflow:hidden}
|
||||
.detail-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px}
|
||||
.detail-section{margin-bottom:20px}
|
||||
.detail-section h4{font-size:11px;font-weight:600;color:var(--tx);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--ln)}
|
||||
.trade-table{width:100%;border-collapse:collapse;font-family:var(--m)}
|
||||
.trade-table th{font-size:9px;font-weight:600;color:var(--tx);text-transform:uppercase;text-align:left;padding:8px 10px;border-bottom:1px solid var(--ln)}
|
||||
.trade-table td{font-size:11px;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.02);color:var(--hi)}
|
||||
.trade-table td.reason{font-size:10px;color:var(--tx);max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--f)}
|
||||
.green{color:var(--gr)}.red{color:var(--rd)}
|
||||
.desc-text{font-size:12px;color:var(--tx);line-height:1.6;padding:12px;background:var(--srf);border-radius:var(--ra);border:1px solid var(--ln);margin-bottom:16px}
|
||||
|
||||
/* Footer */
|
||||
footer{text-align:center;padding:30px;font-size:10px;color:#2a2a35}
|
||||
footer a{color:#3f3f4a;text-decoration:none}footer a:hover{color:var(--tx)}
|
||||
|
||||
@media(max-width:768px){
|
||||
.topbar{padding:10px 14px;flex-direction:column;align-items:flex-start}
|
||||
.tabs{padding:0 14px;top:88px;overflow-x:auto;white-space:nowrap}
|
||||
.main-wrap{padding:12px 14px}
|
||||
.stats-row{grid-template-columns:repeat(3,1fr)}.sgrid{grid-template-columns:1fr 1fr}
|
||||
.detail-stats{grid-template-columns:repeat(3,1fr)}
|
||||
.portfolio .pnl{font-size:22px}
|
||||
}
|
||||
@media(max-width:380px){.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}
|
||||
@media(max-width:380px){.stats-row{grid-template-columns:repeat(2,1fr)}.sgrid{grid-template-columns:1fr}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="top">
|
||||
<div class="logo"><h1>FTDT Quant Lab</h1><span><span class="dot live" id="sdot"></span> <span id="scnx">connecting…</span> · <span id="swlt">—</span></span></div>
|
||||
<div class="totals"><div class="label" style="font-size:10px;color:var(--text);text-transform:uppercase;letter-spacing:0.5px">Portfolio PnL</div><div class="pnl" id="stpnl">$0.00</div><div class="sub" id="stpct">0.00%</div></div>
|
||||
<!-- Top bar -->
|
||||
<div class="topbar">
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<span class="status-dot" id="sdot"></span><div><h1>FTDT Quant Lab<span>Professional Quant Dashboard</span></h1></div>
|
||||
</div>
|
||||
<div class="portfolio">
|
||||
<div style="font-size:9px;color:var(--tx);text-transform:uppercase;letter-spacing:.5px">Portfolio Equity</div>
|
||||
<div class="pnl" id="stpnl">$0.00</div>
|
||||
<div class="sub" id="stpct">—</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<div class="tabs">
|
||||
<button class="tab on" id="tab-live" onclick="sw('live')">Live<span class="data-badge testnet">Testnet</span></button>
|
||||
<button class="tab" id="tab-paper" onclick="sw('paper')">Paper<span class="data-badge mainnet">Mainnet</span></button>
|
||||
<button class="tab" id="tab-backtest" onclick="sw('backtest')">Backtest</button>
|
||||
<button class="tab on" id="tl-live" onclick="switchTab('live')">Live<span class="badge test">Testnet</span></button>
|
||||
<button class="tab" id="tl-paper" onclick="switchTab('paper')">Paper<span class="badge main">$100K Mainnet</span></button>
|
||||
<button class="tab" id="tl-backtest" onclick="switchTab('backtest')">Backtest</button>
|
||||
</div>
|
||||
|
||||
<!-- LIVE -->
|
||||
<!-- Main -->
|
||||
<div class="main-wrap">
|
||||
<div class="panel show" id="pnl-live">
|
||||
<div class="stats" id="live-stats"></div>
|
||||
<div class="card"><h3>Equity Curve <span class="desc">real-time · Hyperliquid Testnet</span></h3><div class="chart-wrap" id="eq-chart"></div></div>
|
||||
<div class="grid" id="live-grid"></div>
|
||||
<div class="card"><h3>Trade Log</h3><div class="tbl-scroll"><table><thead><tr><th>Time</th><th>Strategy</th><th>Side</th><th>Size</th><th>Price</th><th>Fee</th><th>PnL</th></tr></thead><tbody id="trade-tb"></tbody></table></div></div>
|
||||
<div class="stats-row" id="live-stats"></div>
|
||||
<div class="sgrid" id="live-sgrid"></div>
|
||||
</div>
|
||||
|
||||
<!-- PAPER -->
|
||||
<div class="panel" id="pnl-paper">
|
||||
<div class="stats" id="paper-stats"></div>
|
||||
<div class="card"><h3>Equity Curves <span class="desc">per-strategy · <span id="paper-regime">—</span></span></h3><div class="chart-wrap" id="paper-chart" style="height:300px"></div></div>
|
||||
<div class="grid" id="paper-grid"></div>
|
||||
<div class="card"><h3>Trade Log</h3><div class="tbl-scroll"><table><thead><tr><th>Time</th><th>Strategy</th><th>Side</th><th>Size</th><th>Price</th><th>Fee</th><th>PnL</th></tr></thead><tbody id="paper-tb"></tbody></table></div></div>
|
||||
<div class="stats-row" id="paper-stats"></div>
|
||||
<div class="sgrid" id="paper-sgrid"></div>
|
||||
</div>
|
||||
<div class="panel" id="pnl-backtest">
|
||||
<div class="sgrid" id="bt-sgrid"></div>
|
||||
</div>
|
||||
</div>
|
||||
<footer><a href="https://git.ftdt.io/rams/ftdt-quant-lab" target="_blank">rams/ftdt-quant-lab</a> · 12 strategies · $100K paper · Hyperliquid</footer>
|
||||
|
||||
<!-- BACKTEST -->
|
||||
<div class="panel" id="pnl-bt">
|
||||
<div class="card" id="bt-detail" style="display:none"><h3 id="bt-title">—</h3><div class="stats" id="bt-stats"></div><div class="chart-wrap" id="bt-chart"></div></div>
|
||||
<div class="card"><h3>Saved Backtests <span class="desc">click to view</span></h3><div id="bt-list"></div></div>
|
||||
<!-- Detail Overlay -->
|
||||
<div class="detail-overlay" id="detail-overlay" onclick="event.target===this&&closeDetail()">
|
||||
<div class="detail-panel" id="detail-panel">
|
||||
<div class="detail-header">
|
||||
<h2 id="det-name">Strategy Detail</h2>
|
||||
<button class="close-btn" onclick="closeDetail()">✕ Close</button>
|
||||
</div>
|
||||
<div class="detail-body">
|
||||
<div class="desc-text" id="det-desc"></div>
|
||||
<div class="detail-stats" id="det-stats"></div>
|
||||
<div class="chart-wrap" id="det-chart-wrap"><div id="det-chart"></div></div>
|
||||
<div class="detail-section"><h4>Trade History</h4>
|
||||
<div style="overflow-x:auto"><table class="trade-table"><thead><tr><th>Time</th><th>Side</th><th>Size</th><th>Price</th><th>PnL</th><th>Fee</th><th>Reason / Signal</th></tr></thead><tbody id="det-trades"></tbody></table></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<footer><a href="https://git.ftdt.io/rams/ftdt-quant-lab" target="_blank">rams/ftdt-quant-lab</a> · 7 strategies · $5,000 paper / $898 live · Hyperliquid</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tab='live',lastData=null,lastPaper=null;
|
||||
function mkChart(el,w,h){var c=LightweightCharts.createChart(el,{layout:{background:{color:'transparent'},textColor:'#8b8b96'},grid:{vertLines:{color:'rgba(255,255,255,0.03)'},horzLines:{color:'rgba(255,255,255,0.03)'}},rightPriceScale:{borderColor:'rgba(255,255,255,0.06)'},timeScale:{borderColor:'rgba(255,255,255,0.06)',timeVisible:true},crosshair:{mode:0},width:w,height:h});return c}
|
||||
var eqChart=mkChart(document.getElementById('eq-chart'),0,0);var eqSer=eqChart.addAreaSeries({lineColor:'#3b82f6',topColor:'rgba(59,130,246,0.15)',bottomColor:'rgba(59,130,246,0.02)',lineWidth:2});
|
||||
var paperChart=mkChart(document.getElementById('paper-chart'),0,0);
|
||||
// Per-strategy equity series (7 strategies, 7 colors)
|
||||
var STRAT_COLORS = ['#22c55e','#3b82f6','#a855f7','#f59e0b','#ef4444','#06b6d4','#ec4899'];
|
||||
var paperStrataSeries = {};
|
||||
function getStratSeries(name){
|
||||
if(!paperStrataSeries[name]){
|
||||
var idx = Object.keys(paperStrataSeries).length;
|
||||
var color = STRAT_COLORS[idx % STRAT_COLORS.length];
|
||||
paperStrataSeries[name] = paperChart.addAreaSeries({
|
||||
lineColor: color, topColor: color+'26', bottomColor: color+'05', lineWidth: 1.5
|
||||
});
|
||||
}
|
||||
return paperStrataSeries[name];
|
||||
}
|
||||
var btChart=mkChart(document.getElementById('bt-chart'),0,0);var btSer=btChart.addAreaSeries({lineColor:'#a855f7',topColor:'rgba(168,85,247,0.12)',bottomColor:'rgba(168,85,247,0.02)',lineWidth:2});
|
||||
// ═══════════ State ═══════════
|
||||
var currentTab='live', lastData=null, lastPaper=null, lastBT=null;
|
||||
var STRAT_COLORS=['#22c55e','#3b82f6','#a855f7','#f59e0b','#ef4444','#06b6d4','#ec4899','#84cc16','#6366f1','#14b8a6','#f97316','#8b5cf6'];
|
||||
|
||||
function fitCharts(){
|
||||
eqChart.applyOptions({width:document.getElementById('eq-chart').offsetWidth,height:document.getElementById('eq-chart').offsetHeight});
|
||||
paperChart.applyOptions({width:document.getElementById('paper-chart').offsetWidth,height:document.getElementById('paper-chart').offsetHeight});
|
||||
btChart.applyOptions({width:document.getElementById('bt-chart').offsetWidth,height:document.getElementById('bt-chart').offsetHeight});
|
||||
// ═══════════ Chart for detail view ═══════════
|
||||
var detChart=null, detSer=null;
|
||||
function initDetChart(){
|
||||
var el=document.getElementById('det-chart');
|
||||
if(!el)return;
|
||||
el.style.width='100%'; el.style.height='280px';
|
||||
detChart=LightweightCharts.createChart(el,{
|
||||
layout:{background:{color:'transparent'},textColor:'#d4d4e0'},
|
||||
grid:{vertLines:{color:'rgba(255,255,255,.03)'},horzLines:{color:'rgba(255,255,255,.03)'}},
|
||||
rightPriceScale:{borderColor:'rgba(255,255,255,.08)'},
|
||||
timeScale:{borderColor:'rgba(255,255,255,.08)',timeVisible:true},
|
||||
crosshair:{mode:0},width:el.offsetWidth,height:280
|
||||
});
|
||||
detSer=detChart.addAreaSeries({lineColor:'#3b82f6',topColor:'rgba(59,130,246,.15)',bottomColor:'rgba(59,130,246,.02)',lineWidth:2});
|
||||
}
|
||||
window.addEventListener('resize',fitCharts);setTimeout(fitCharts,300);
|
||||
|
||||
function sw(t){
|
||||
tab=t;
|
||||
['live','paper','backtest'].forEach(function(x){document.getElementById('tab-'+x).className=t===x?'tab on':'tab'});
|
||||
// ═══════════ Tab switching ═══════════
|
||||
function switchTab(t){
|
||||
currentTab=t;
|
||||
['live','paper','backtest'].forEach(function(x){document.getElementById('tl-'+x).className=t===x?'tab on':'tab'});
|
||||
document.getElementById('pnl-live').className=t==='live'?'panel show':'panel';
|
||||
document.getElementById('pnl-paper').className=t==='paper'?'panel show':'panel';
|
||||
document.getElementById('pnl-bt').className=t==='backtest'?'panel show':'panel';
|
||||
document.getElementById('pnl-backtest').className=t==='backtest'?'panel show':'panel';
|
||||
if(t==='live'&&lastData)renLive(lastData);
|
||||
if(t==='paper'){if(lastPaper)renPaper(lastPaper);setTimeout(fitCharts,200)}
|
||||
if(t==='backtest'){setTimeout(fitCharts,200);loadBt()}
|
||||
if(t==='paper'&&lastPaper)renPaper(lastPaper);
|
||||
if(t==='backtest')loadBT();
|
||||
}
|
||||
|
||||
// WebSocket
|
||||
var ws,wsPaper;
|
||||
function conn(){
|
||||
if(ws)try{ws.close()}catch(e){}
|
||||
ws=new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'/cv/ws');
|
||||
ws.onopen=function(){document.getElementById('scnx').innerHTML='<span style=\"color:#22c55e\">live</span>';document.getElementById('sdot').className='dot live'};
|
||||
ws.onclose=function(){document.getElementById('sdot').className='dot dead';setTimeout(conn,3000)};
|
||||
ws.onmessage=function(e){try{lastData=JSON.parse(e.data)}catch(ex){return};if(tab==='live')renLive(lastData)};
|
||||
// Paper WS
|
||||
if(wsPaper)try{wsPaper.close()}catch(e){}
|
||||
wsPaper=new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'/cv/ws/paper');
|
||||
wsPaper.onmessage=function(e){try{lastPaper=JSON.parse(e.data)}catch(ex){return};if(tab==='paper')renPaper(lastPaper)};
|
||||
}
|
||||
|
||||
// ═══════════ Render helpers ═══════════
|
||||
function renGrid(containerId, ss, baseEq, reserve, headerStatsId, tradesTbId, chartId, chartSer, hist, trades){
|
||||
var keys=Object.keys(ss),tr=0,fe=0,fu=0;
|
||||
for(var i=0;i<keys.length;i++){var s=ss[keys[i]];tr+=s.trades_today||0;fe+=s.fee_paid||0;if(s.status==='running')fu++};
|
||||
var pnl=0;for(var j=0;j<keys.length;j++)pnl+=ss[keys[j]].pnl||0;
|
||||
document.getElementById(headerStatsId).innerHTML=
|
||||
'<div class="stat-box"><div class="lbl">Equity</div><div class="val">$'+((baseEq||0)+pnl).toFixed(0)+'</div></div>'+
|
||||
'<div class="stat-box"><div class="lbl">Reserve</div><div class="val">$'+(reserve||0)+'</div></div>'+
|
||||
'<div class="stat-box"><div class="lbl">Trades</div><div class="val">'+tr+'</div></div>'+
|
||||
'<div class="stat-box"><div class="lbl">Fees</div><div class="val dn">$'+fe.toFixed(2)+'</div></div>'+
|
||||
'<div class="stat-box"><div class="lbl">Active</div><div class="val">'+fu+' / '+keys.length+'</div></div>';
|
||||
var g='';
|
||||
// ═══════════ Render strategy cards ═══════════
|
||||
function renCards(sgridId,ss,baseEq,tab,statsRowId){
|
||||
var keys=Object.keys(ss),totalPnl=0,trades=0,fees=0,active=0;
|
||||
for(var i=0;i<keys.length;i++){var s=ss[keys[i]];totalPnl+=s.pnl||0;trades+=s.trades_today||0;fees+=s.fee_paid||0;if(s.status==='running')active++}
|
||||
if(statsRowId){
|
||||
document.getElementById(statsRowId).innerHTML='<div class="stat"><div class="lbl">Equity</div><div class="val">$'+((baseEq||0)+totalPnl).toFixed(0)+'</div></div>'+
|
||||
'<div class="stat"><div class="lbl">PnL</div><div class="val '+(totalPnl>=0?'up':'dn')+'">'+(totalPnl>=0?'+':'')+'$'+Math.abs(totalPnl).toFixed(2)+'</div></div>'+
|
||||
'<div class="stat"><div class="lbl">Trades</div><div class="val">'+trades+'</div></div>'+
|
||||
'<div class="stat"><div class="lbl">Fees</div><div class="val dn">$'+fees.toFixed(2)+'</div></div>'+
|
||||
'<div class="stat"><div class="lbl">Active</div><div class="val">'+active+'/'+keys.length+'</div></div>'+
|
||||
'<div class="stat"><div class="lbl">Alloc</div><div class="val">$'+(keys[0]?ss[keys[0]].allocation||0:0)+'k/strat</div></div>';
|
||||
}
|
||||
var h='';
|
||||
for(var k=0;k<keys.length;k++){
|
||||
var name=keys[k],s=ss[name],sp=s.pnl||0,cls=sp>=0?'up':'dn',pStr=(sp>=0?'+':'')+'$'+Math.abs(sp).toFixed(2);
|
||||
var signals=s.signals||[],sigHtml='';
|
||||
if(signals.length>0){for(var si=Math.max(0,signals.length-5);si<signals.length;si++){var sg=signals[si];var sc=sg.signal&&sg.signal.indexOf('BUY')>=0?'buy':'sell';sigHtml+='<div class="sig '+sc+'"><span>'+new Date(sg.time*1000).toLocaleTimeString('en-US',{hour12:false})+'</span><span>'+sg.signal+'</span></div>'}}
|
||||
g+='<div class="strat" id="strat-'+name.replace(/\s/g,'')+'" onclick="toggleStrat(\''+name.replace(/\s/g,'')+'\')">'+
|
||||
'<div class="hdr"><div><div class="name">'+name+'</div><div class="alloc">'+(s.allocation||'?')+' USDC · '+(s.type||'')+'</div></div><span class="status '+(s.status==='running'?'run':'idle')+'">'+(s.status==='running'?'RUNNING':'IDLE')+'</span></div>'+
|
||||
'<div class="big '+cls+'">'+pStr+'</div><div class="pct">'+(s.pnl_pct>=0?'+':'')+(s.pnl_pct||0).toFixed(2)+'% | Fee: $'+(s.fee_paid||0).toFixed(2)+'</div>'+
|
||||
'<div class="r"><span>Trades: <b>'+(s.trades_today||0)+'</b></span><span>Win: <b>'+Math.round((s.win_rate||0)*100)+'%</b></span><span>Pos: <b>'+(s.position||0).toFixed(4)+'</b></span></div>'+
|
||||
'<div class="strat-detail"><div class="desc-text">'+(s.description||'')+'</div>'+
|
||||
'<div class="mini-stats"><div class="stat-box"><div class="lbl">PnL</div><div class="val '+(sp>=0?'up':'dn')+'">'+pStr+'</div></div><div class="stat-box"><div class="lbl">Fees</div><div class="val dn">$'+(s.fee_paid||0).toFixed(2)+'</div></div><div class="stat-box"><div class="lbl">Win Rate</div><div class="val">'+Math.round((s.win_rate||0)*100)+'%</div></div><div class="stat-box"><div class="lbl">Trades</div><div class="val">'+(s.trades_today||0)+'</div></div></div>'+
|
||||
(signals.length>0?'<div class="signal-log" style="max-height:100px;overflow-y:auto"><div style="font-size:10px;color:var(--bright);margin-bottom:6px">Recent Signals</div>'+sigHtml+'</div>':'')+
|
||||
'</div></div>';
|
||||
var fm=s.fee_model||'taker';
|
||||
h+='<div class="scard" onclick="openDetail(\''+name+'\',\''+tab+'\')" id="scard-'+tab+'-'+name.replace(/\s/g,'_')+'">'+
|
||||
'<div class="sh"><div><div class="sname">'+name+'</div><div class="salloc">$'+s.allocation+' · '+s.type+'</div></div>'+
|
||||
'<div><span class="stag '+(s.status==='running'?'run':'idle')+'">'+(s.status==='running'?'RUNNING':'IDLE')+'</span>'+
|
||||
'<span class="stag '+fm+'">'+fm.toUpperCase()+'</span></div></div>'+
|
||||
'<div class="spnl '+cls+'">'+pStr+'</div>'+
|
||||
'<div class="smeta"><span>PnL: <b class="'+(sp>=0?'green':'red')+'">'+(s.pnl_pct>=0?'+':'')+(s.pnl_pct||0).toFixed(2)+'%</b></span><span>Trades: <b>'+(s.trades_today||0)+'</b></span><span>Win: <b>'+Math.round((s.win_rate||0)*100)+'%</b></span><span>Pos: <b>'+(s.position||0).toFixed(4)+'</b></span></div>'+
|
||||
'</div>';
|
||||
}
|
||||
document.getElementById(containerId).innerHTML=g;
|
||||
// Chart (skip if chartSer is null — caller handles separately)
|
||||
if(chartSer && hist && hist.length>0){var pts=[];for(var m=0;m<hist.length;m++)pts.push({time:hist[m].t,value:hist[m].v});chartSer.setData(pts);chartId.timeScale().fitContent()}
|
||||
document.getElementById(sgridId).innerHTML=h;
|
||||
}
|
||||
|
||||
// ═══════════ Open strategy detail ═══════════
|
||||
function openDetail(name,tab){
|
||||
document.getElementById('detail-overlay').classList.add('on');
|
||||
document.getElementById('det-name').textContent=name;
|
||||
var ss=null, equity={}, trades=[];
|
||||
if(tab==='paper'&&lastPaper){
|
||||
ss=lastPaper.strategies||{}; equity=lastPaper.strategy_equity||{};
|
||||
trades=(lastPaper.per_strategy_trades||{})[name]||[];
|
||||
} else if(tab==='live'&&lastData){
|
||||
ss=lastData.strategies||{};
|
||||
} else if(tab==='backtest'&&lastBT){
|
||||
ss={}; ss[name]=lastBT;
|
||||
}
|
||||
var s=ss?ss[name]:null;
|
||||
if(!s){closeDetail();return}
|
||||
|
||||
// Description
|
||||
document.getElementById('det-desc').textContent=s.description||'No description available.';
|
||||
|
||||
// Stats
|
||||
var sp=s.pnl||0;
|
||||
document.getElementById('det-stats').innerHTML='<div class="stat"><div class="lbl">PnL</div><div class="val '+(sp>=0?'up':'dn')+'">'+(sp>=0?'+':'')+'$'+Math.abs(sp).toFixed(4)+'</div></div>'+
|
||||
'<div class="stat"><div class="lbl">PnL%</div><div class="val '+(sp>=0?'up':'dn')+'">'+(s.pnl_pct>=0?'+':'')+(s.pnl_pct||0).toFixed(2)+'%</div></div>'+
|
||||
'<div class="stat"><div class="lbl">Trades</div><div class="val">'+(s.trades_today||0)+'</div></div>'+
|
||||
'<div class="stat"><div class="lbl">Win Rate</div><div class="val">'+Math.round((s.win_rate||0)*100)+'%</div></div>'+
|
||||
'<div class="stat"><div class="lbl">Fees Paid</div><div class="val dn">$'+(s.fee_paid||0).toFixed(4)+'</div></div>'+
|
||||
'<div class="stat"><div class="lbl">Position</div><div class="val">'+(s.position||0).toFixed(4)+'</div></div>';
|
||||
|
||||
// Equity chart
|
||||
if(!detChart)initDetChart();
|
||||
var eqData=equity[name]||[];
|
||||
if(eqData.length>0){
|
||||
var pts=[];for(var i=0;i<eqData.length;i++){if(eqData[i]&&eqData[i].t)pts.push({time:eqData[i].t,value:eqData[i].v})}
|
||||
detSer.setData(pts);detChart.timeScale().fitContent();
|
||||
}
|
||||
|
||||
// Trades
|
||||
var rows='',trs=(trades||[]).slice(-20).reverse();
|
||||
for(var n=0;n<trs.length;n++){var t=trs[n];rows+='<tr><td>'+t.time+'</td><td>'+t.strategy+'</td><td class="'+(t.side.indexOf('BUY')>=0?'green':'red')+'">'+t.side+'</td><td>'+t.size+'</td><td>'+(t.price||'—')+'</td><td class="red">$'+(t.fee||0).toFixed(4)+'</td><td class="'+(t.pnl>=0?'green':'red')+'">'+(t.pnl>=0?'+':'')+'$'+Math.abs(t.pnl).toFixed(4)+'</td></tr>'}
|
||||
document.getElementById(tradesTbId).innerHTML=rows;
|
||||
}
|
||||
|
||||
function renLive(d){
|
||||
if(!d)return;
|
||||
var pnl=d.total_pnl||0;document.getElementById('stpnl').textContent=(pnl>=0?'+':'')+'$'+Math.abs(pnl).toFixed(2);document.getElementById('stpnl').className='pnl '+(pnl>=0?'up':'dn');
|
||||
document.getElementById('stpct').textContent='Testnet · Equity: $'+((d.base_equity||898)+pnl).toFixed(2);document.getElementById('swlt').textContent=(d.wallet||'').slice(0,10)+'…';
|
||||
renGrid('live-grid',d.strategies||{},d.base_equity||898,d.reserve||398,'live-stats','trade-tb',eqChart,eqSer,d.equity_history||[],d.trades||[]);
|
||||
}
|
||||
|
||||
function renPaper(d){
|
||||
if(!d)return;
|
||||
var pnl=d.total_pnl||0;document.getElementById('stpnl').textContent=(pnl>=0?'+':'')+'$'+Math.abs(pnl).toFixed(2);document.getElementById('stpnl').className='pnl '+(pnl>=0?'up':'dn');
|
||||
document.getElementById('stpct').textContent='Mainnet Paper · Equity: $'+(d.total_equity||100000).toFixed(0)+' · BTC: $'+(d.btc_price||0).toLocaleString('en-US',{maximumFractionDigits:0});
|
||||
// Regime badge
|
||||
var regime = d.regime || 'NORMAL';
|
||||
var regimeLabel = regime.replace('_',' ').toLowerCase();
|
||||
var regimeClass = regime.toLowerCase().replace('_','-');
|
||||
document.getElementById('paper-regime').innerHTML = 'Regime: <span class="data-badge '+regimeClass+'">'+regimeLabel+'</span>';
|
||||
renGrid('paper-grid',d.strategies||{},d.base_equity||100000,d.reserve||30000,'paper-stats','paper-tb',paperChart,null,d.equity_history||[],d.trades||[]);
|
||||
// Per-strategy equity curves
|
||||
var seq = d.strategy_equity || {};
|
||||
var keyz = Object.keys(seq);
|
||||
for(var i=0;i<keyz.length;i++){
|
||||
var name=keyz[i],pts=seq[name],ser=getStratSeries(name);
|
||||
if(pts&&pts.length>0){
|
||||
var arr=[];for(var j=0;j<pts.length;j++) if(pts[j]&&pts[j].t) arr.push({time:pts[j].t,value:pts[j].v});
|
||||
ser.setData(arr);
|
||||
}
|
||||
var rows='';
|
||||
for(var j=Math.max(0,trades.length-50);j<trades.length;j++){
|
||||
var t=trades[j],tp=t.pnl||0;
|
||||
rows+='<tr><td>'+t.time+'</td><td class="'+(t.side==='BUY'?'green':'red')+'">'+t.side+'</td><td>'+t.size+'</td><td>$'+t.price+'</td><td class="'+(tp>=0?'green':'red')+'">'+(tp>=0?'+':'')+'$'+Math.abs(tp).toFixed(4)+'</td><td class="red">$'+(t.fee||0).toFixed(4)+'</td><td class="reason" title="'+t.reason+'">'+(t.reason||'—')+'</td></tr>';
|
||||
}
|
||||
paperChart.timeScale().fitContent();
|
||||
document.getElementById('det-trades').innerHTML=rows||'<tr><td colspan="7" style="text-align:center;color:var(--tx);padding:20px">No trades yet</td></tr>';
|
||||
|
||||
// Resize chart
|
||||
setTimeout(function(){if(detChart){detChart.applyOptions({width:document.getElementById('det-chart').offsetWidth,height:280});detChart.timeScale().fitContent()}},300);
|
||||
}
|
||||
|
||||
function toggleStrat(sid){var el=document.getElementById('strat-'+sid);if(!el)return;el.classList.toggle('open');setTimeout(fitCharts,200)}
|
||||
function closeDetail(){document.getElementById('detail-overlay').classList.remove('on')}
|
||||
document.addEventListener('keydown',function(e){if(e.key==='Escape')closeDetail()});
|
||||
|
||||
// Backtests
|
||||
function loadBt(){
|
||||
// ═══════════ WebSocket + render ═══════════
|
||||
var ws,wsPaper;
|
||||
function connect(){
|
||||
if(ws)try{ws.close()}catch(e){}
|
||||
ws=new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'/cv/ws');
|
||||
ws.onopen=function(){document.getElementById('sdot').className='status-dot'};
|
||||
ws.onclose=function(){document.getElementById('sdot').className='status-dot off';setTimeout(connect,5000)};
|
||||
ws.onmessage=function(e){try{lastData=JSON.parse(e.data)}catch(ex){return};if(currentTab==='live')renLive(lastData)};
|
||||
if(wsPaper)try{wsPaper.close()}catch(e){}
|
||||
wsPaper=new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'/cv/ws/paper');
|
||||
wsPaper.onmessage=function(e){try{lastPaper=JSON.parse(e.data)}catch(ex){return};if(currentTab==='paper')renPaper(lastPaper)};
|
||||
}
|
||||
|
||||
function renLive(d){if(!d)return;var p=d.total_pnl||0;document.getElementById('stpnl').textContent=(p>=0?'+':'')+'$'+Math.abs(p).toFixed(2);document.getElementById('stpnl').className='pnl '+(p>=0?'up':'dn');document.getElementById('stpct').textContent='Testnet · Equity: $'+((d.base_equity||898)+p).toFixed(2);renCards('live-sgrid',d.strategies||{},d.base_equity||898,'live','live-stats')}
|
||||
function renPaper(d){if(!d)return;var p=d.total_pnl||0;document.getElementById('stpnl').textContent=(p>=0?'+':'')+'$'+Math.abs(p).toFixed(2);document.getElementById('stpnl').className='pnl '+(p>=0?'up':'dn');document.getElementById('stpct').textContent='Paper · '+d.total_equity+' · Regime: '+(d.regime||'—');renCards('paper-sgrid',d.strategies||{},d.base_equity||100000,'paper','paper-stats')}
|
||||
|
||||
// ═══════════ Backtests ═══════════
|
||||
function loadBT(){
|
||||
fetch('/cv/api/backtests').then(function(r){return r.json()}).then(function(data){
|
||||
var h='';for(var i=0;i<data.length;i++){var b=data[i];h+='<div class="bt-row" onclick="viewBt(\''+b.name+'\')" id="btr-'+b.name+'"><div><div class="n">'+b.strategy+'</div><div class="m">30-day · '+b.name+'</div></div><div class="k"><div class="kv"><div class="kl">PnL</div><div class="kd '+(b.pnl_pct>=0?'green':'red')+'">'+(b.pnl_pct>=0?'+':'')+b.pnl_pct.toFixed(2)+'%</div></div><div class="kv"><div class="kl">Sharpe</div><div class="kd">'+b.sharpe.toFixed(2)+'</div></div><div class="kv"><div class="kl">DD</div><div class="kd red">'+b.max_dd.toFixed(2)+'%</div></div><div class="kv"><div class="kl">Win</div><div class="kd">'+(b.win_rate*100).toFixed(0)+'%</div></div></div></div>'}
|
||||
document.getElementById('bt-list').innerHTML=h||'<div style="padding:12px;color:var(--text);font-size:12px">No backtests yet.</div>';
|
||||
})
|
||||
}
|
||||
function viewBt(name){
|
||||
fetch('/cv/api/backtest/'+name).then(function(r){return r.json()}).then(function(b){
|
||||
document.getElementById('bt-detail').style.display='block';document.getElementById('bt-title').innerHTML=b.strategy+' <span class="desc">'+b.description+'</span>';
|
||||
document.querySelectorAll('.bt-row').forEach(function(e){e.classList.remove('sel')});document.getElementById('btr-'+name).classList.add('sel');
|
||||
document.getElementById('bt-stats').innerHTML='<div class="stat-box"><div class="lbl">Return</div><div class="val '+(b.pnl>=0?'up':'dn')+'">'+(b.pnl>=0?'+':'')+b.pnl.toFixed(2)+'%</div></div><div class="stat-box"><div class="lbl">Ann.</div><div class="val '+(b.ann_return_pct>=0?'up':'dn')+'">'+(b.ann_return_pct>=0?'+':'')+b.ann_return_pct.toFixed(1)+'%</div></div><div class="stat-box"><div class="lbl">Sharpe</div><div class="val">'+b.sharpe.toFixed(2)+'</div></div><div class="stat-box"><div class="lbl">Sortino</div><div class="val">'+b.sortino.toFixed(2)+'</div></div><div class="stat-box"><div class="lbl">Max DD</div><div class="val dn">'+b.max_dd_pct.toFixed(2)+'%</div></div><div class="stat-box"><div class="lbl">Win</div><div class="val">'+(b.win_rate*100).toFixed(0)+'%</div></div><div class="stat-box"><div class="lbl">Trades</div><div class="val">'+b.total_trades+'</div></div><div class="stat-box"><div class="lbl">Alloc</div><div class="val">$'+b.allocation+'</div></div><div class="stat-box"><div class="lbl">End Eq</div><div class="val">$'+b.end_equity.toFixed(2)+'</div></div><div class="stat-box"><div class="lbl">Period</div><div class="val">30d</div></div>';
|
||||
var pts=[],curve=b.equity_curve||[];for(var i=0;i<curve.length;i++)pts.push({time:(new Date(curve[i].t).getTime()/1000),value:curve[i].v});btSer.setData(pts);btChart.timeScale().fitContent();setTimeout(fitCharts,200);
|
||||
var h='';for(var i=0;i<data.length;i++){var b=data[i];h+='<div class="scard" onclick="openDetail(\''+b.strategy+'\',\'backtest\')\"><div class="sh"><div><div class="sname">'+b.strategy+'</div><div class="salloc">30-day · $'+b.allocation+'</div></div><span class="stag run">BACKTEST</span></div><div class="spnl '+(b.pnl>=0?'up':'dn')+'">'+(b.pnl>=0?'+':'')+b.pnl.toFixed(2)+'%</div><div class="smeta"><span>Sharpe: <b>'+b.sharpe.toFixed(2)+'</b></span><span>DD: <b class="red">'+b.max_dd_pct.toFixed(2)+'%</b></span><span>Win: <b>'+Math.round(b.win_rate*100)+'%</b></span></div></div>';lastBT=b}
|
||||
document.getElementById('bt-sgrid').innerHTML=h||'<div style="padding:20px;color:var(--tx)">No backtests.</div>';
|
||||
})
|
||||
}
|
||||
|
||||
fitCharts();conn();loadBt();
|
||||
// ═══════════ Init ═══════════
|
||||
initDetChart();connect();loadBT();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user