Verbose dashboard with backtesting tab and per-strategy 100 USDC allocation
Dashboard overhaul: - Tabbed interface: Live Trading | Backtesting - Live tab shows: global stats (equity, reserve, trades, win rate, active strategies), equity curve, per-strategy cards with allocation and PnL, real-time trade log - Backtest tab: lists saved backtests with Sharpe, PnL, max DD, win rate; click to view full equity curve and detailed metrics - Reads real data from /tmp/ftdt-metrics.json written by live node Live node update: - 5 strategies each with 100 USDC allocation (398 USDC reserve) - Writes real-time metrics to shared JSON file - Runs signal generators for each strategy type - Logs tick-by-tick status Backtest runner: - Simulates 30 days of hourly data per strategy - Different return profiles for each strategy type - Saves results to backtests/results/ as JSON - Accessible via dashboard API and frontend Backtest results (30-day sim): Avellaneda-Stoikov: +3.72% Sharpe 2.53 DD 5.12% Order Book Imbalance: +3.83% Sharpe 1.60 DD 9.86% Pairs Trading: +0.54% Sharpe 0.41 DD 7.83% Funding Rate Arb: +0.17% Sharpe 0.35 DD 2.94% Iceberg Detection: -9.15% Sharpe -4.39 DD 11.94%
This commit is contained in:
ramseshk
+290
-471
@@ -4,321 +4,110 @@
|
||||
<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</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0c;
|
||||
--surface: #131316;
|
||||
--border: #1e1e24;
|
||||
--text: #a1a1aa;
|
||||
--text-bright: #e4e4e7;
|
||||
--green: #22c55e;
|
||||
--red: #ef4444;
|
||||
--blue: #3b82f6;
|
||||
--amber: #f59e0b;
|
||||
--purple: #a855f7;
|
||||
--radius: 8px;
|
||||
--font: 'Inter', system-ui, sans-serif;
|
||||
--bg: #0a0a0c; --surface: #131316; --border: #1e1e24;
|
||||
--text: #a1a1aa; --text-bright: #e4e4e7;
|
||||
--green: #22c55e; --red: #ef4444; --blue: #3b82f6;
|
||||
--amber: #f59e0b; --purple: #a855f7;
|
||||
--radius: 8px; --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; }
|
||||
.container { max-width:1200px; margin:0 auto; padding:16px 12px; }
|
||||
|
||||
* { 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;
|
||||
/* Tabs */
|
||||
.tabs { display:flex; gap:0; margin-bottom:16px; border-bottom:1px solid var(--border); }
|
||||
.tab-btn {
|
||||
background:none; border:none; color:var(--text); font-family:var(--font);
|
||||
font-size:13px; font-weight:500; padding:8px 16px; cursor:pointer;
|
||||
border-bottom:2px solid transparent; transition:all 0.15s;
|
||||
}
|
||||
.tab-btn:hover { color:var(--text-bright); }
|
||||
.tab-btn.active { color:var(--text-bright); border-bottom-color:var(--blue); }
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
/* ── Header ─────────────────────── */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.brand h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.brand .sub {
|
||||
font-size: 11px;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 3px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary {
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.summary .pnl {
|
||||
font-family: var(--mono);
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.summary .pnl.positive { color: var(--green); }
|
||||
.summary .pnl.negative { color: var(--red); }
|
||||
|
||||
.summary .label {
|
||||
font-size: 10px;
|
||||
color: var(--text);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-dot.live { background: var(--green); animation: pulse 2s infinite; }
|
||||
.status-dot.idle { background: var(--amber); }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
/* ── Equity Chart ───────────────── */
|
||||
.chart-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.chart-card h2 {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.chart-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
/* ── Strategy Grid ──────────────── */
|
||||
.strategy-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.strategy-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 12px 14px;
|
||||
transition: border-color 0.2s;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.strategy-card:hover { border-color: #2a2a32; }
|
||||
|
||||
.strategy-card .name {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.strategy-card .pnl {
|
||||
font-family: var(--mono);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.strategy-card .pnl.pos { color: var(--green); }
|
||||
.strategy-card .pnl.neg { color: var(--red); }
|
||||
|
||||
.strategy-card .meta {
|
||||
font-size: 10px;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.strategy-card .meta .val {
|
||||
color: var(--text-bright);
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* ── Trade Log ──────────────────── */
|
||||
.trade-log {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.trade-log h2 {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.trade-scroll {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.trade-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.trade-table th {
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
text-align: left;
|
||||
padding: 7px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trade-table td {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
padding: 5px 12px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.02);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trade-table td.pos { color: var(--green); }
|
||||
.trade-table td.neg { color: var(--red); }
|
||||
.trade-table td.buy { color: var(--green); }
|
||||
.trade-table td.sell { color: var(--red); }
|
||||
|
||||
/* ── Footer ─────────────────────── */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
font-size: 10px;
|
||||
color: #3f3f46;
|
||||
}
|
||||
|
||||
footer a { color: #52525b; text-decoration: none; }
|
||||
footer a:hover { color: var(--text); }
|
||||
|
||||
/* ── Mobile: < 480px ────────────── */
|
||||
@media (max-width: 480px) {
|
||||
.container { padding: 10px 8px; }
|
||||
|
||||
header {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.summary .pnl { font-size: 22px; }
|
||||
|
||||
.brand h1 { font-size: 16px; }
|
||||
|
||||
.strategy-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.strategy-card {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.strategy-card .pnl { font-size: 14px; }
|
||||
.strategy-card .meta { gap: 4px; }
|
||||
.strategy-card .meta .val { font-size: 9px; }
|
||||
|
||||
.chart-wrap { height: 140px; }
|
||||
|
||||
.trade-table th,
|
||||
.trade-table td { padding: 5px 8px; font-size: 10px; }
|
||||
|
||||
/* Hide less critical columns on very small screens */
|
||||
.trade-table th:nth-child(3),
|
||||
.trade-table td:nth-child(3) { display: none; }
|
||||
|
||||
footer { font-size: 9px; padding: 10px; }
|
||||
}
|
||||
|
||||
/* ── Small phone: < 360px ───────── */
|
||||
@media (max-width: 360px) {
|
||||
.strategy-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.chart-wrap { height: 120px; }
|
||||
|
||||
.trade-table th:nth-child(4),
|
||||
.trade-table td:nth-child(4) { display: none; }
|
||||
}
|
||||
|
||||
/* ── Tablet: 481-768px ──────────── */
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.container { padding: 18px 14px; }
|
||||
.strategy-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Desktop: 769px+ ────────────── */
|
||||
@media (min-width: 769px) {
|
||||
.container { padding: 24px 20px; }
|
||||
.strategy-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
}
|
||||
.chart-wrap { height: 200px; }
|
||||
/* Header */
|
||||
header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border); gap:12px; }
|
||||
.brand h1 { font-size:18px; font-weight:600; color:var(--text-bright); letter-spacing:-0.3px; }
|
||||
.brand .sub { font-size:11px; color:var(--text); display:flex; align-items:center; gap:4px; margin-top:3px; flex-wrap:wrap; }
|
||||
.summary { text-align:right; flex-shrink:0; }
|
||||
.summary .big-pnl { font-family:var(--mono); font-size:28px; font-weight:700; letter-spacing:-0.5px; line-height:1.1; }
|
||||
.summary .big-pnl.pos { color:var(--green); } .summary .big-pnl.neg { color:var(--red); }
|
||||
.summary .label { font-size:10px; color:var(--text); text-transform:uppercase; letter-spacing:0.5px; }
|
||||
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; flex-shrink:0; }
|
||||
.status-dot.live { background:var(--green); animation:pulse 2s infinite; }
|
||||
.status-dot.idle { background:var(--amber); }
|
||||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
|
||||
|
||||
/* Cards */
|
||||
.chart-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px; margin-bottom:12px; }
|
||||
.chart-card h2 { font-size:12px; font-weight:500; color:var(--text-bright); margin-bottom:8px; display:flex; justify-content:space-between; }
|
||||
.chart-wrap { position:relative; width:100%; height:200px; }
|
||||
|
||||
/* Stats row */
|
||||
.stats-row { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:12px; }
|
||||
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; }
|
||||
.stat-card .name { font-size:10px; color:var(--text); text-transform:uppercase; letter-spacing:0.3px; }
|
||||
.stat-card .val { font-family:var(--mono); font-size:16px; font-weight:600; color:var(--text-bright); margin-top:2px; }
|
||||
.stat-card .val.pos { color:var(--green); } .stat-card .val.neg { color:var(--red); }
|
||||
|
||||
/* Strategy grid */
|
||||
.strategy-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:10px; margin-bottom:12px; }
|
||||
.strategy-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; transition:border-color 0.2s; min-width:0; }
|
||||
.strategy-card:hover { border-color:#2a2a32; }
|
||||
.strategy-card .name { font-size:12px; font-weight:500; color:var(--text-bright); margin-bottom:6px; display:flex; align-items:center; gap:5px; }
|
||||
.strategy-card .alloc { font-size:10px; color:var(--text); margin-bottom:8px; }
|
||||
.strategy-card .pnl { font-family:var(--mono); font-size:18px; font-weight:600; margin-bottom:4px; }
|
||||
.strategy-card .pnl.pos { color:var(--green); } .strategy-card .pnl.neg { color:var(--red); }
|
||||
.strategy-card .meta { font-size:10px; color:var(--text); display:flex; flex-wrap:wrap; gap:8px; }
|
||||
.strategy-card .meta .val { color:var(--text-bright); font-family:var(--mono); font-size:10px; }
|
||||
|
||||
/* Trade log */
|
||||
.trade-log { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
|
||||
.trade-log h2 { font-size:12px; font-weight:500; color:var(--text-bright); padding:12px 14px; border-bottom:1px solid var(--border); }
|
||||
.trade-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
|
||||
.trade-table { width:100%; border-collapse:collapse; min-width:500px; }
|
||||
.trade-table th { font-size:9px; font-weight:500; color:var(--text); text-transform:uppercase; letter-spacing:0.4px; text-align:left; padding:7px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
|
||||
.trade-table td { font-family:var(--mono); font-size:11px; padding:5px 10px; border-bottom:1px solid rgba(255,255,255,0.02); white-space:nowrap; }
|
||||
.trade-table td.pos { color:var(--green); } .trade-table td.neg { color:var(--red); } .trade-table td.buy { color:var(--green); } .trade-table td.sell { color:var(--red); }
|
||||
|
||||
/* Backtest list */
|
||||
.bt-list { display:flex; flex-direction:column; gap:6px; }
|
||||
.bt-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; cursor:pointer; transition:border-color 0.15s; display:flex; justify-content:space-between; align-items:center; gap:12px; }
|
||||
.bt-item:hover { border-color:#2a2a32; }
|
||||
.bt-item.selected { border-color:var(--blue); }
|
||||
.bt-item .bt-name { font-size:13px; font-weight:500; color:var(--text-bright); }
|
||||
.bt-item .bt-meta { font-size:10px; color:var(--text); }
|
||||
.bt-item .bt-stats { display:flex; gap:16px; flex-shrink:0; }
|
||||
.bt-item .bt-stat { text-align:right; }
|
||||
.bt-item .bt-stat .lbl { font-size:9px; color:var(--text); text-transform:uppercase; }
|
||||
.bt-item .bt-stat .v { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--text-bright); }
|
||||
.bt-item .bt-stat .v.g { color:var(--green); } .bt-item .bt-stat .v.r { color:var(--red); }
|
||||
|
||||
.bt-detail { margin-top:12px; display:none; }
|
||||
.bt-detail.active { display:block; }
|
||||
|
||||
footer { text-align:center; padding:16px; font-size:10px; color:#3f3f46; }
|
||||
footer a { color:#52525b; text-decoration:none; } footer a:hover { color:var(--text); }
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width:480px) {
|
||||
.container { padding:10px 8px; }
|
||||
header { flex-direction:column; gap:8px; }
|
||||
.summary { text-align:left; width:100%; }
|
||||
.summary .big-pnl { font-size:22px; }
|
||||
.stats-row { grid-template-columns:repeat(3,1fr); }
|
||||
.strategy-grid { grid-template-columns:1fr 1fr; gap:6px; }
|
||||
.strategy-card { padding:10px; }
|
||||
.strategy-card .pnl { font-size:14px; }
|
||||
.chart-wrap { height:140px; }
|
||||
.bt-item { flex-direction:column; align-items:flex-start; }
|
||||
.bt-item .bt-stats { width:100%; justify-content:space-between; }
|
||||
}
|
||||
@media (max-width:360px) { .strategy-grid { grid-template-columns:1fr; } .stats-row { grid-template-columns:repeat(2,1fr); } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -329,225 +118,255 @@
|
||||
<div class="brand">
|
||||
<h1>FTDT Quant Lab</h1>
|
||||
<div class="sub">
|
||||
<span class="status-dot live"></span>
|
||||
Hyperliquid Testnet ·
|
||||
<span class="status-dot live" id="status-dot"></span>
|
||||
<span id="connection-status">connecting...</span>
|
||||
· <span id="wallet-display">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary">
|
||||
<div class="label">Total PnL</div>
|
||||
<div class="pnl" id="total-pnl">$0.00</div>
|
||||
<div class="big-pnl" id="total-pnl">$0.00</div>
|
||||
<div class="label" id="total-pnl-pct" style="margin-top:2px;">0.00%</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Equity Curve -->
|
||||
<div class="chart-card">
|
||||
<h2>Equity Curve</h2>
|
||||
<div class="chart-wrap">
|
||||
<canvas id="equity-chart"></canvas>
|
||||
<!-- Tabs -->
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" onclick="switchTab('live')">Live Trading</button>
|
||||
<button class="tab-btn" onclick="switchTab('backtest')">Backtesting</button>
|
||||
</div>
|
||||
|
||||
<!-- LIVE TAB -->
|
||||
<div id="tab-live">
|
||||
|
||||
<!-- Global Stats -->
|
||||
<div class="stats-row" id="stats-row"></div>
|
||||
|
||||
<!-- Equity Chart -->
|
||||
<div class="chart-card">
|
||||
<h2>Equity Curve <span style="font-weight:400;color:var(--text);">— all strategies combined</span></h2>
|
||||
<div class="chart-wrap"><canvas id="equity-chart"></canvas></div>
|
||||
</div>
|
||||
|
||||
<!-- Strategy Cards -->
|
||||
<div class="strategy-grid" id="strategy-grid"></div>
|
||||
|
||||
<!-- Trade Log -->
|
||||
<div class="trade-log">
|
||||
<h2>Recent Trades</h2>
|
||||
<div class="trade-scroll">
|
||||
<table class="trade-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-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Strategy Cards -->
|
||||
<div class="strategy-grid" id="strategy-grid"></div>
|
||||
|
||||
<!-- Trade Log -->
|
||||
<div class="trade-log">
|
||||
<h2>Recent Trades</h2>
|
||||
<div class="trade-scroll">
|
||||
<table class="trade-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Strategy</th>
|
||||
<th>Side</th>
|
||||
<th>Size</th>
|
||||
<th>PnL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="trade-body"></tbody>
|
||||
</table>
|
||||
<!-- BACKTEST TAB -->
|
||||
<div id="tab-backtest" style="display:none;">
|
||||
<div class="chart-card" id="bt-detail-card" style="display:none;">
|
||||
<h2>Backtest: <span id="bt-title">—</span></h2>
|
||||
<div class="stats-row" id="bt-stats-row"></div>
|
||||
<div class="chart-wrap"><canvas id="bt-chart"></canvas></div>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<h2>Saved Backtests <span style="font-weight:400;color:var(--text);">— click to view details</span></h2>
|
||||
<div class="bt-list" id="bt-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<a href="https://git.ftdt.io/rams/ftdt-quant-lab" target="_blank">rams/ftdt-quant-lab</a>
|
||||
· Part of my quant trading portfolio
|
||||
· 5 strategies · 100 USDC each · Hyperliquid Testnet
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Chart setup
|
||||
// State
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
let currentTab = 'live';
|
||||
let liveData = null;
|
||||
let backtests = [];
|
||||
let selectedBacktest = null;
|
||||
|
||||
const ctx = document.getElementById('equity-chart').getContext('2d');
|
||||
const equityChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: 'Equity',
|
||||
data: [],
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: 'rgba(59,130,246,0.08)',
|
||||
borderWidth: 1.5,
|
||||
fill: true,
|
||||
pointRadius: 0,
|
||||
tension: 0.3,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: false,
|
||||
interaction: { intersect: false, mode: 'index' },
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: { color: 'rgba(255,255,255,0.03)' },
|
||||
ticks: { color: '#52525b', font: { size: 10 }, maxTicksLimit: 6 }
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
grid: { color: 'rgba(255,255,255,0.03)' },
|
||||
ticks: {
|
||||
color: '#52525b',
|
||||
font: { size: 10 },
|
||||
maxTicksLimit: 5,
|
||||
callback: function(v) { return '$' + v.toLocaleString(); }
|
||||
}
|
||||
}
|
||||
}
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Charts
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
const equityChart = new Chart(document.getElementById('equity-chart').getContext('2d'), {
|
||||
type: 'line', data: {labels:[],datasets:[{label:'Equity',data:[],borderColor:'#3b82f6',backgroundColor:'rgba(59,130,246,0.08)',borderWidth:1.5,fill:true,pointRadius:0,tension:0.3}]},
|
||||
options: {responsive:true,maintainAspectRatio:false,animation:false,plugins:{legend:{display:false}},scales:{x:{grid:{color:'rgba(255,255,255,0.03)'},ticks:{color:'#52525b',font:{size:10},maxTicksLimit:6}},y:{grid:{color:'rgba(255,255,255,0.03)'},ticks:{color:'#52525b',font:{size:10},maxTicksLimit:5,callback:function(v){return'$'+v.toLocaleString()}}}}}
|
||||
});
|
||||
|
||||
const btChart = new Chart(document.getElementById('bt-chart').getContext('2d'), {
|
||||
type: 'line', data: {labels:[],datasets:[{label:'Equity',data:[],borderColor:'#a855f7',backgroundColor:'rgba(168,85,247,0.08)',borderWidth:2,fill:true,pointRadius:0,tension:0.3}]},
|
||||
options: {responsive:true,maintainAspectRatio:false,animation:false,plugins:{legend:{display:false}},scales:{x:{grid:{color:'rgba(255,255,255,0.03)'},ticks:{color:'#52525b',font:{size:10},maxTicksLimit:6}},y:{grid:{color:'rgba(255,255,255,0.03)'},ticks:{color:'#52525b',font:{size:10},maxTicksLimit:5,callback:function(v){return'$'+v.toFixed(1)}}}}
|
||||
}
|
||||
});
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// WebSocket
|
||||
// Tab switching
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
|
||||
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = protocol + '//' + location.host + '/ws';
|
||||
let ws;
|
||||
let reconnectTimer;
|
||||
|
||||
function connect() {
|
||||
if (ws) { ws.close(); }
|
||||
ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.onopen = function() {
|
||||
var statusEl = document.getElementById('connection-status');
|
||||
statusEl.innerHTML = '<span style="color:#22c55e">live</span>';
|
||||
var dot = statusEl.parentElement.querySelector('.status-dot');
|
||||
if (dot) dot.className = 'status-dot live';
|
||||
console.log('WS connected');
|
||||
};
|
||||
|
||||
ws.onclose = function() {
|
||||
var statusEl = document.getElementById('connection-status');
|
||||
statusEl.innerHTML = '<span style="color:#f59e0b">reconnecting...</span>';
|
||||
clearTimeout(reconnectTimer);
|
||||
reconnectTimer = setTimeout(connect, 2000);
|
||||
};
|
||||
|
||||
ws.onerror = function() {
|
||||
console.log('WS error');
|
||||
};
|
||||
|
||||
ws.onmessage = function(event) {
|
||||
try {
|
||||
var data = JSON.parse(event.data);
|
||||
updateDashboard(data);
|
||||
} catch(e) {
|
||||
console.log('Parse error:', e);
|
||||
}
|
||||
};
|
||||
function switchTab(tab) {
|
||||
currentTab = tab;
|
||||
document.querySelectorAll('.tab-btn').forEach(function(b){b.classList.remove('active');});
|
||||
document.getElementById('tab-live').style.display = tab === 'live' ? 'block' : 'none';
|
||||
document.getElementById('tab-backtest').style.display = tab === 'backtest' ? 'block' : 'none';
|
||||
if (tab === 'live') document.querySelectorAll('.tab-btn')[0].classList.add('active');
|
||||
if (tab === 'backtest') { document.querySelectorAll('.tab-btn')[1].classList.add('active'); loadBacktests(); }
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Dashboard update
|
||||
// WebSocket
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
let ws;
|
||||
function connectWS() {
|
||||
ws = new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'/ws');
|
||||
ws.onopen = function() {
|
||||
document.getElementById('connection-status').innerHTML = '<span style="color:#22c55e">live</span>';
|
||||
document.getElementById('status-dot').className = 'status-dot live';
|
||||
};
|
||||
ws.onclose = function() { document.getElementById('connection-status').innerHTML = '<span style="color:#f59e0b">reconnecting...</span>'; setTimeout(connectWS,2000); };
|
||||
ws.onmessage = function(e) { try { liveData = JSON.parse(e.data); if(currentTab==='live') renderLive(); } catch(ex){} };
|
||||
}
|
||||
|
||||
function updateDashboard(data) {
|
||||
// Total PnL
|
||||
var pnl = data.total_pnl || 0;
|
||||
var pnlEl = document.getElementById('total-pnl');
|
||||
var prefix = pnl >= 0 ? '+' : '';
|
||||
pnlEl.textContent = prefix + '$' + Math.abs(pnl).toFixed(2);
|
||||
pnlEl.className = 'pnl ' + (pnl >= 0 ? 'positive' : 'negative');
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Render Live
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function renderLive() {
|
||||
var d = liveData;
|
||||
if (!d) return;
|
||||
|
||||
var equity = data.total_equity || 10000;
|
||||
var pnlPct = (pnl / equity * 100);
|
||||
var pctEl = document.getElementById('total-pnl-pct');
|
||||
pctEl.textContent = (pnlPct >= 0 ? '+' : '') + pnlPct.toFixed(2) + '%';
|
||||
pctEl.style.color = pnl >= 0 ? '#22c55e' : '#ef4444';
|
||||
// Header
|
||||
var pnl = d.total_pnl || 0;
|
||||
var el = document.getElementById('total-pnl');
|
||||
el.textContent = (pnl>=0?'+':'') + '$' + Math.abs(pnl).toFixed(2);
|
||||
el.className = 'big-pnl ' + (pnl>=0?'pos':'neg');
|
||||
document.getElementById('total-pnl-pct').textContent = ((d.total_pnl_pct||0)>=0?'+':'') + (d.total_pnl_pct||0).toFixed(2) + '%';
|
||||
document.getElementById('wallet-display').textContent = (d.wallet||'').slice(0,10)+'...';
|
||||
|
||||
// Stats row
|
||||
var strats = d.strategies || {};
|
||||
var allTrades = 0; var avgWin = 0; var running = 0;
|
||||
var keys = Object.keys(strats);
|
||||
for (var i=0;i<keys.length;i++) {
|
||||
var s = strats[keys[i]];
|
||||
allTrades += s.trades_today || 0;
|
||||
avgWin += s.win_rate || 0;
|
||||
if (s.status==='running') running++;
|
||||
}
|
||||
avgWin = keys.length>0 ? Math.round(avgWin/keys.length*100) : 0;
|
||||
|
||||
document.getElementById('stats-row').innerHTML =
|
||||
'<div class="stat-card"><div class="name">Equity</div><div class="val">$' + ((d.base_equity||0)+(pnl)).toFixed(0) + '</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Reserve</div><div class="val">$' + (d.reserve||0).toFixed(0) + '</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Trades</div><div class="val">' + allTrades + '</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Avg Win Rate</div><div class="val">' + avgWin + '%</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Active</div><div class="val">' + running + '/' + keys.length + '</div></div>';
|
||||
|
||||
// Strategy cards
|
||||
var grid = document.getElementById('strategy-grid');
|
||||
var strategies = data.strategies || {};
|
||||
var cardsHtml = '';
|
||||
|
||||
var keys = Object.keys(strategies);
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
var name = keys[i];
|
||||
var s = strategies[name];
|
||||
var spnl = s.pnl || 0;
|
||||
var pClass = spnl >= 0 ? 'pos' : 'neg';
|
||||
var pStr = (spnl >= 0 ? '+' : '') + '$' + Math.abs(spnl).toFixed(2);
|
||||
var dotClass = s.status === 'running' ? 'live' : 'idle';
|
||||
|
||||
cardsHtml += '<div class="strategy-card">' +
|
||||
'<div class="name"><span class="status-dot ' + dotClass + '"></span>' + name + '</div>' +
|
||||
'<div class="pnl ' + pClass + '">' + pStr + '</div>' +
|
||||
var html = '';
|
||||
for (var j=0;j<keys.length;j++) {
|
||||
var name = keys[j], s = strats[name];
|
||||
var spnl = s.pnl||0, pClass = spnl>=0?'pos':'neg';
|
||||
var pStr = (spnl>=0?'+':'') + '$' + Math.abs(spnl).toFixed(2);
|
||||
var dot = s.status==='running'?'live':'idle';
|
||||
var pct = (s.pnl_pct||0)>=0?'+':'';
|
||||
html += '<div class="strategy-card">' +
|
||||
'<div class="name"><span class="status-dot '+dot+'"></span>'+name+'</div>' +
|
||||
'<div class="alloc">Allocation: '+(s.allocation||100)+' USDC | PnL: '+pct+(s.pnl_pct||0).toFixed(2)+'%</div>' +
|
||||
'<div class="pnl '+pClass+'">'+pStr+'</div>' +
|
||||
'<div class="meta">' +
|
||||
'<span>Trades: <span class="val">' + (s.trades_today || 0) + '</span></span>' +
|
||||
'<span>Win: <span class="val">' + Math.round((s.win_rate || 0) * 100) + '%</span></span>' +
|
||||
'<span>DD: <span class="val">' + ((s.max_drawdown || 0) * 100).toFixed(1) + '%</span></span>' +
|
||||
'<span>Trades: <span class="val">'+(s.trades_today||0)+'</span></span>' +
|
||||
'<span>Win: <span class="val">'+Math.round((s.win_rate||0)*100)+'%</span></span>' +
|
||||
'<span>Pos: <span class="val">'+(s.position||0).toFixed(4)+'</span></span>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
}
|
||||
grid.innerHTML = cardsHtml;
|
||||
grid.innerHTML = html;
|
||||
|
||||
// Equity chart
|
||||
var history = data.equity_history || [];
|
||||
if (history.length > 0) {
|
||||
var labels = [];
|
||||
var values = [];
|
||||
for (var j = 0; j < history.length; j++) {
|
||||
var ts = history[j].t * 1000;
|
||||
labels.push(new Date(ts).toLocaleTimeString('en-US', { hour12: false }));
|
||||
values.push(history[j].v);
|
||||
}
|
||||
|
||||
var hist = d.equity_history || [];
|
||||
if (hist.length > 0) {
|
||||
var labels=[]; var values=[];
|
||||
for (var k=0;k<hist.length;k++) { labels.push(new Date(hist[k].t*1000).toLocaleTimeString('en-US',{hour12:false})); values.push(hist[k].v); }
|
||||
equityChart.data.labels = labels;
|
||||
equityChart.data.datasets[0].data = values;
|
||||
equityChart.update('none');
|
||||
}
|
||||
|
||||
// Trade log
|
||||
var trades = (data.trades || []).slice(-15).reverse();
|
||||
var tbody = document.getElementById('trade-body');
|
||||
var rowsHtml = '';
|
||||
for (var k = 0; k < trades.length; k++) {
|
||||
var t = trades[k];
|
||||
var tpnlClass = (t.pnl || 0) >= 0 ? 'pos' : 'neg';
|
||||
var tpnlStr = ((t.pnl || 0) >= 0 ? '+' : '') + '$' + Math.abs(t.pnl || 0).toFixed(4);
|
||||
var sideClass = t.side === 'BUY' ? 'buy' : 'sell';
|
||||
rowsHtml += '<tr>' +
|
||||
'<td>' + (t.time || '') + '</td>' +
|
||||
'<td>' + (t.strategy || '') + '</td>' +
|
||||
'<td class="' + sideClass + '">' + (t.side || '') + '</td>' +
|
||||
'<td>' + (t.size || '') + '</td>' +
|
||||
'<td class="' + tpnlClass + '">' + tpnlStr + '</td>' +
|
||||
'</tr>';
|
||||
var trades = (d.trades||[]).slice(-15).reverse();
|
||||
var rows = '';
|
||||
for (var m=0;m<trades.length;m++) {
|
||||
var t = trades[m], tpClass = (t.pnl||0)>=0?'pos':'neg';
|
||||
var tpStr = ((t.pnl||0)>=0?'+':'') + '$' + Math.abs(t.pnl||0).toFixed(4);
|
||||
var sideClass = t.side==='BUY'?'buy':'sell';
|
||||
rows += '<tr><td>'+t.time+'</td><td>'+t.strategy+'</td><td class="'+sideClass+'">'+t.side+'</td><td>'+t.size+'</td><td>'+(t.price||'—')+'</td><td class="'+tpClass+'">'+tpStr+'</td></tr>';
|
||||
}
|
||||
tbody.innerHTML = rowsHtml;
|
||||
document.getElementById('trade-body').innerHTML = rows;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Backtests
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function loadBacktests() {
|
||||
fetch('/api/backtests').then(function(r){return r.json();}).then(function(data){
|
||||
backtests = data;
|
||||
var list = document.getElementById('bt-list');
|
||||
var html = '';
|
||||
for (var i=0;i<data.length;i++) {
|
||||
var bt = data[i];
|
||||
var pClass = bt.pnl_pct>=0?'g':'r';
|
||||
html += '<div class="bt-item" onclick="viewBacktest(\''+bt.name+'\')" id="bt-item-'+bt.name+'">' +
|
||||
'<div><div class="bt-name">'+bt.strategy+'</div><div class="bt-meta">'+bt.name+'</div></div>' +
|
||||
'<div class="bt-stats">' +
|
||||
'<div class="bt-stat"><div class="lbl">PnL</div><div class="v '+pClass+'">'+(bt.pnl_pct>=0?'+':'')+bt.pnl_pct.toFixed(2)+'%</div></div>' +
|
||||
'<div class="bt-stat"><div class="lbl">Sharpe</div><div class="v">'+bt.sharpe.toFixed(2)+'</div></div>' +
|
||||
'<div class="bt-stat"><div class="lbl">Max DD</div><div class="v r">'+bt.max_dd.toFixed(2)+'%</div></div>' +
|
||||
'<div class="bt-stat"><div class="lbl">Win Rate</div><div class="v">'+(bt.win_rate*100).toFixed(0)+'%</div></div>' +
|
||||
'</div>';
|
||||
}
|
||||
list.innerHTML = html || '<div style="color:var(--text);padding:12px;font-size:12px;">No backtests yet. Run: python backtests/run.py --strategy all</div>';
|
||||
});
|
||||
}
|
||||
|
||||
function viewBacktest(name) {
|
||||
fetch('/api/backtest/'+name).then(function(r){return r.json();}).then(function(bt){
|
||||
selectedBacktest = bt;
|
||||
document.getElementById('bt-detail-card').style.display = 'block';
|
||||
document.getElementById('bt-title').textContent = bt.strategy + ' — ' + bt.description;
|
||||
document.querySelectorAll('.bt-item').forEach(function(el){el.classList.remove('selected');});
|
||||
document.getElementById('bt-item-'+name).classList.add('selected');
|
||||
|
||||
document.getElementById('bt-stats-row').innerHTML =
|
||||
'<div class="stat-card"><div class="name">PnL</div><div class="val '+(bt.pnl>=0?'pos':'neg')+'">'+(bt.pnl>=0?'+':'')+bt.pnl.toFixed(2)+'%</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Annual Return</div><div class="val '+(bt.ann_return_pct>=0?'pos':'neg')+'">'+(bt.ann_return_pct>=0?'+':'')+bt.ann_return_pct.toFixed(1)+'%</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Sharpe</div><div class="val">'+bt.sharpe.toFixed(2)+'</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Sortino</div><div class="val">'+bt.sortino.toFixed(2)+'</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Max DD</div><div class="val neg">'+bt.max_dd_pct.toFixed(2)+'%</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Win Rate</div><div class="val">'+(bt.win_rate*100).toFixed(0)+'%</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Trades</div><div class="val">'+bt.total_trades+'</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Allocation</div><div class="val">$'+bt.allocation+'</div></div>' +
|
||||
'<div class="stat-card"><div class="name">End Equity</div><div class="val">$'+bt.end_equity.toFixed(2)+'</div></div>' +
|
||||
'<div class="stat-card"><div class="name">Period</div><div class="val" style="font-size:13px;">30d</div></div>';
|
||||
|
||||
var labels=[],values=[];
|
||||
var curve = bt.equity_curve || [];
|
||||
for (var i=0;i<curve.length;i++) { labels.push(new Date(curve[i].t).toLocaleDateString('en-US',{month:'short',day:'numeric'})); values.push(curve[i].v); }
|
||||
btChart.data.labels = labels;
|
||||
btChart.data.datasets[0].data = values;
|
||||
btChart.update();
|
||||
|
||||
document.getElementById('tab-backtest').scrollIntoView({behavior:'smooth'});
|
||||
});
|
||||
}
|
||||
|
||||
// Start
|
||||
connect();
|
||||
connectWS();
|
||||
loadBacktests();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user