ramseshk
358fc3d230
Replaced Chart.js with TradingView lightweight-charts for professional-grade equity curves with proper candlestick time series, area fills, and smooth scaling. Fixed WebSocket by installing 'websockets' dependency for uvicorn (was silently failing on upgrade requests). Fixed tab switching: now preserves last data and renders immediately on tab switch instead of waiting for next message. Fixed all API/WS URLs to include /cv prefix for Caddy routing. Design improvements: - Refined dark theme with proper spacing and typography - TradingView charts with gradient fills - 5-column stats bar with key metrics - Per-strategy cards with RUNNING/IDLE badges - Responsive layout (640px and 380px breakpoints)
330 lines
18 KiB
HTML
330 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<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">
|
|
<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;
|
|
}
|
|
*{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}
|
|
|
|
/* Header */
|
|
.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 */
|
|
.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)}
|
|
|
|
/* Panels */
|
|
.panel{display:none}.panel.show{display:block}
|
|
|
|
/* Stats bar */
|
|
.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)}
|
|
|
|
/* Chart */
|
|
.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}
|
|
|
|
/* Strategy grid */
|
|
.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:border-color 0.2s}
|
|
.strat:hover{border-color:var(--hover)}
|
|
.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)}
|
|
|
|
/* Trade table */
|
|
.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)}
|
|
|
|
/* Backtest list */
|
|
.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}
|
|
|
|
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}
|
|
}
|
|
@media(max-width:380px){.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<!-- Header -->
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<button class="tab on" id="tab-live" onclick="sw('live')">Live Trading</button>
|
|
<button class="tab" id="tab-bt" onclick="sw('backtest')">Backtesting</button>
|
|
</div>
|
|
|
|
<!-- LIVE PANEL -->
|
|
<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 · all strategies</span></h3>
|
|
<div class="chart-wrap" id="eq-chart"></div>
|
|
</div>
|
|
<div class="grid" id="live-grid"></div>
|
|
<div class="card">
|
|
<h3>Trade Log <span class="desc">most recent 15</span></h3>
|
|
<div class="tbl-scroll"><table><thead><tr><th>Time</th><th>Strategy</th><th>Side</th><th>Size</th><th>Price</th><th>PnL</th></tr></thead><tbody id="trade-tb"></tbody></table></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BACKTEST PANEL -->
|
|
<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>
|
|
</div>
|
|
|
|
<footer><a href="https://git.ftdt.io/rams/ftdt-quant-lab" target="_blank">rams/ftdt-quant-lab</a> · 5 strategies · 100 USDC each · Hyperliquid Testnet</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// ═══════════════════════ State ═══════════════════════
|
|
var tab = 'live', lastData = null, lastBts = [];
|
|
|
|
// ═══════════════════════ TradingView charts ═══════════════════════
|
|
var eq = LightweightCharts.createChart(document.getElementById('eq-chart'),{
|
|
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,secondsVisible:false},
|
|
crosshair:{mode:0},width:0,height:0
|
|
});
|
|
var eqSer = eq.addAreaSeries({lineColor:'#3b82f6',topColor:'rgba(59,130,246,0.15)',bottomColor:'rgba(59,130,246,0.02)',lineWidth:2});
|
|
|
|
var btChart = LightweightCharts.createChart(document.getElementById('bt-chart'),{
|
|
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)'},
|
|
crosshair:{mode:0},width:0,height:0
|
|
});
|
|
var btSer = btChart.addAreaSeries({lineColor:'#a855f7',topColor:'rgba(168,85,247,0.12)',bottomColor:'rgba(168,85,247,0.02)',lineWidth:2});
|
|
|
|
function fitCharts(){
|
|
eq.applyOptions({width:document.getElementById('eq-chart').offsetWidth,height:document.getElementById('eq-chart').offsetHeight});
|
|
btChart.applyOptions({width:document.getElementById('bt-chart').offsetWidth,height:document.getElementById('bt-chart').offsetHeight});
|
|
}
|
|
window.addEventListener('resize',fitCharts);
|
|
setTimeout(fitCharts,300);
|
|
|
|
// ═══════════════════════ Tab switch ═══════════════════════
|
|
function sw(t){
|
|
tab = t;
|
|
document.getElementById('tab-live').className = t==='live'?'tab on':'tab';
|
|
document.getElementById('tab-bt').className = t==='backtest'?'tab on':'tab';
|
|
document.getElementById('pnl-live').className = t==='live'?'panel show':'panel';
|
|
document.getElementById('pnl-bt').className = t==='backtest'?'panel show':'panel';
|
|
if(t==='live' && lastData) renLive(lastData);
|
|
if(t==='backtest'){ setTimeout(fitCharts,200); loadBt(); }
|
|
}
|
|
|
|
// ═══════════════════════ WebSocket ═══════════════════════
|
|
var ws, reconnectTimer;
|
|
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('scnx').innerHTML='<span style=\"color:#f59e0b\">reconnecting…</span>';
|
|
document.getElementById('sdot').className='dot dead';
|
|
clearTimeout(reconnectTimer);reconnectTimer=setTimeout(conn,2000);
|
|
};
|
|
ws.onmessage = function(e){
|
|
try{lastData=JSON.parse(e.data)}catch(ex){return}
|
|
if(tab==='live') renLive(lastData);
|
|
};
|
|
}
|
|
|
|
// ═══════════════════════ Render Live ═══════════════════════
|
|
function renLive(d){
|
|
if(!d)return;
|
|
var pnl = d.total_pnl||0, eqty = d.base_equity||898;
|
|
document.getElementById('stpnl').textContent=(pnl>=0?'+':'')+'$'+Math.abs(pnl).toFixed(2);
|
|
document.getElementById('stpnl').className='pnl '+(pnl>=0?'up':'dn');
|
|
document.getElementById('stpct').textContent='Equity: $'+((eqty+pnl)).toFixed(2)+' · '+(d.total_pnl_pct||0).toFixed(2)+'%';
|
|
document.getElementById('swlt').textContent=(d.wallet||'').slice(0,10)+'…';
|
|
|
|
var ss = d.strategies||{}, keys = Object.keys(ss);
|
|
var tr=0,wr=0,ru=0;
|
|
for(var i=0;i<keys.length;i++){var s=ss[keys[i]];tr+=s.trades_today||0;wr+=s.win_rate||0;if(s.status==='running')ru++}
|
|
wr=keys.length>0?Math.round(wr/keys.length*100):0;
|
|
|
|
document.getElementById('live-stats').innerHTML =
|
|
'<div class="stat-box"><div class="lbl">Total Equity</div><div class="val">$'+(eqty+pnl).toFixed(0)+'</div></div>'+
|
|
'<div class="stat-box"><div class="lbl">Reserve</div><div class="val">$'+(d.reserve||398)+'</div></div>'+
|
|
'<div class="stat-box"><div class="lbl">Total Trades</div><div class="val">'+tr+'</div></div>'+
|
|
'<div class="stat-box"><div class="lbl">Avg Win Rate</div><div class="val">'+wr+'%</div></div>'+
|
|
'<div class="stat-box"><div class="lbl">Active Strategies</div><div class="val">'+ru+' / '+keys.length+'</div></div>';
|
|
|
|
// Strategy cards
|
|
var g='';
|
|
for(var j=0;j<keys.length;j++){
|
|
var name=keys[j],s=ss[name];
|
|
var sp=s.pnl||0,cls=sp>=0?'up':'dn',pStr=(sp>=0?'+':'')+'$'+Math.abs(sp).toFixed(2);
|
|
g+='<div class="strat">'+
|
|
'<div class="hdr"><div><div class="name">'+name+'</div><div class="alloc">Allocation: '+(s.allocation||100)+' USDC</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)+'%</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>Position: <b>'+(s.position||0).toFixed(4)+' BTC</b></span></div>'+
|
|
'</div>';
|
|
}
|
|
document.getElementById('live-grid').innerHTML=g;
|
|
|
|
// Equity chart
|
|
var hist=d.equity_history||[];
|
|
if(hist.length>0){
|
|
var pts=[];for(var k=0;k<hist.length;k++) pts.push({time:hist[k].t,value:hist[k].v});
|
|
eqSer.setData(pts);eq.timeScale().fitContent();
|
|
}
|
|
|
|
// Trades
|
|
var trades=(d.trades||[]).slice(-15).reverse(),rows='';
|
|
for(var m=0;m<trades.length;m++){
|
|
var t=trades[m];
|
|
rows+='<tr><td>'+t.time+'</td><td>'+t.strategy+'</td><td class="'+(t.side==='BUY'?'green':'red')+'">'+(t.side||'')+'</td><td>'+t.size+'</td><td>'+(t.price||'—')+'</td><td class="'+(t.pnl>=0?'green':'red')+'">'+(t.pnl>=0?'+':'')+'$'+Math.abs(t.pnl).toFixed(4)+'</td></tr>';
|
|
}
|
|
document.getElementById('trade-tb').innerHTML=rows;
|
|
}
|
|
|
|
// ═══════════════════════ Backtests ═══════════════════════
|
|
function loadBt(){
|
|
fetch('/cv/api/backtests').then(function(r){return r.json()}).then(function(data){
|
|
lastBts=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 sim · '+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">Max 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. Run: python backtests/run.py --strategy all</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(el){el.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">Annualized</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 Drawdown</div><div class="val dn">'+b.max_dd_pct.toFixed(2)+'%</div></div>'+
|
|
'<div class="stat-box"><div class="lbl">Win Rate</div><div class="val">'+(b.win_rate*100).toFixed(0)+'%</div></div>'+
|
|
'<div class="stat-box"><div class="lbl">Total Trades</div><div class="val">'+b.total_trades+'</div></div>'+
|
|
'<div class="stat-box"><div class="lbl">Allocation</div><div class="val">$'+b.allocation+'</div></div>'+
|
|
'<div class="stat-box"><div class="lbl">End Equity</div><div class="val">$'+b.end_equity.toFixed(2)+'</div></div>'+
|
|
'<div class="stat-box"><div class="lbl">Period</div><div class="val">30 days</div></div>';
|
|
|
|
var curve=b.equity_curve||[],pts=[];
|
|
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);
|
|
|
|
document.getElementById('pnl-bt').scrollIntoView({behavior:'smooth',block:'start'});
|
|
});
|
|
}
|
|
|
|
// Start
|
|
fitCharts();conn();loadBt();
|
|
</script>
|
|
</body>
|
|
</html>
|