feat(dashboard): 3 components for the strategy page
TickerScorecardTable: bridge-status badges (WOULD-TRADE/HOLDING/etc), conviction bar, unrealised P&L, manual-close button. BacktestRunHistory: sortable run list with return/sharpe/alpha columns, row click selects a run for detail view. StrategyVsBenchmarkCurve: dual lightweight-charts line (strategy blue, SPY dashed grey) with legend.
This commit is contained in:
parent
90cf21521f
commit
5f5529ef09
3 changed files with 371 additions and 0 deletions
122
dashboard/src/components/meetKevin/BacktestRunHistory.tsx
Normal file
122
dashboard/src/components/meetKevin/BacktestRunHistory.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
import type { BacktestRun, BacktestRunStatus } from '../../types/meetKevin';
|
||||||
|
|
||||||
|
const STATUS_BADGE: Record<BacktestRunStatus, { label: string; cls: string }> = {
|
||||||
|
running: { label: 'Running', cls: 'bg-blue-600/30 text-blue-300 border-blue-500/40' },
|
||||||
|
completed: { label: 'Completed', cls: 'bg-green-600/30 text-green-300 border-green-500/40' },
|
||||||
|
failed: { label: 'Failed', cls: 'bg-red-600/30 text-red-300 border-red-500/40' },
|
||||||
|
};
|
||||||
|
|
||||||
|
function fmt(v: number | null | undefined, suffix = '%', decimals = 2): string {
|
||||||
|
if (v == null) return '—';
|
||||||
|
return `${v >= 0 ? '+' : ''}${v.toFixed(decimals)}${suffix}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
runs: BacktestRun[];
|
||||||
|
isLoading: boolean;
|
||||||
|
selectedRunUuid: string | null;
|
||||||
|
onSelect: (runUuid: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BacktestRunHistory({ runs, isLoading, selectedRunUuid, onSelect }: Props) {
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center py-10">
|
||||||
|
<span className="inline-block w-6 h-6 border-2 border-blue-400/30 border-t-blue-400 rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (runs.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-800 border border-slate-700 rounded-xl p-10 text-center text-slate-400">
|
||||||
|
No backtest runs yet — click “Run Backtest” to start one.
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-800 border border-slate-700 rounded-xl overflow-hidden">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead className="bg-slate-900/50">
|
||||||
|
<tr>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Started
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Return
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Sharpe
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Max DD
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Alpha
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Trades
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Source
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-slate-700">
|
||||||
|
{runs.map((run) => {
|
||||||
|
const badge = STATUS_BADGE[run.status];
|
||||||
|
const m = run.metrics_json;
|
||||||
|
const isSelected = run.run_uuid === selectedRunUuid;
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
key={run.run_uuid}
|
||||||
|
onClick={() => onSelect(run.run_uuid)}
|
||||||
|
className={`cursor-pointer transition-colors ${
|
||||||
|
isSelected
|
||||||
|
? 'bg-blue-600/10'
|
||||||
|
: 'hover:bg-slate-700/30'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<td className="px-5 py-3.5 text-slate-300 font-mono text-xs">
|
||||||
|
{new Date(run.started_at).toLocaleString()}
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5">
|
||||||
|
<span className={`px-2 py-0.5 text-xs font-semibold uppercase rounded-md border ${badge.cls}`}>
|
||||||
|
{badge.label}
|
||||||
|
</span>
|
||||||
|
{run.error_message && (
|
||||||
|
<span className="ml-2 text-xs text-red-400 truncate max-w-[180px] inline-block align-middle">
|
||||||
|
{run.error_message}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className={`px-5 py-3.5 font-mono ${m && m.total_return_pct >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||||
|
{m ? fmt(m.total_return_pct) : '—'}
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5 text-slate-300 font-mono">
|
||||||
|
{m?.sharpe_ratio != null ? m.sharpe_ratio.toFixed(2) : '—'}
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5 font-mono text-red-400">
|
||||||
|
{m?.max_drawdown_pct != null ? `${m.max_drawdown_pct.toFixed(2)}%` : '—'}
|
||||||
|
</td>
|
||||||
|
<td className={`px-5 py-3.5 font-mono ${m?.alpha_vs_spy_pct != null && m.alpha_vs_spy_pct >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||||
|
{m ? fmt(m.alpha_vs_spy_pct) : '—'}
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5 text-slate-300">
|
||||||
|
{m?.trade_count ?? '—'}
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5 text-slate-400 text-xs capitalize">
|
||||||
|
{run.trigger_source}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
108
dashboard/src/components/meetKevin/StrategyVsBenchmarkCurve.tsx
Normal file
108
dashboard/src/components/meetKevin/StrategyVsBenchmarkCurve.tsx
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import { createChart, type IChartApi, LineSeries } from 'lightweight-charts';
|
||||||
|
import type { EquityCurvePoint } from '../../types/meetKevin';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
strategy: EquityCurvePoint[];
|
||||||
|
benchmark: EquityCurvePoint[] | null;
|
||||||
|
height?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toChartData(points: EquityCurvePoint[]) {
|
||||||
|
const byDay = new Map<string, number>();
|
||||||
|
for (const p of points) {
|
||||||
|
const day = p.timestamp.split('T')[0];
|
||||||
|
byDay.set(day, p.value);
|
||||||
|
}
|
||||||
|
return Array.from(byDay.entries())
|
||||||
|
.sort(([a], [b]) => a.localeCompare(b))
|
||||||
|
.map(([time, value]) => ({ time, value }));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StrategyVsBenchmarkCurve({ strategy, benchmark, height = 350 }: Props) {
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const chartRef = useRef<IChartApi | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!containerRef.current) return;
|
||||||
|
|
||||||
|
const chart = createChart(containerRef.current, {
|
||||||
|
height,
|
||||||
|
layout: {
|
||||||
|
background: { color: '#1e293b' },
|
||||||
|
textColor: '#94a3b8',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
vertLines: { color: '#334155' },
|
||||||
|
horzLines: { color: '#334155' },
|
||||||
|
},
|
||||||
|
crosshair: { mode: 0 },
|
||||||
|
rightPriceScale: { borderColor: '#475569' },
|
||||||
|
timeScale: { borderColor: '#475569', timeVisible: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
const strategySeries = chart.addSeries(LineSeries, {
|
||||||
|
color: '#3b82f6',
|
||||||
|
lineWidth: 2,
|
||||||
|
title: 'Strategy',
|
||||||
|
priceFormat: {
|
||||||
|
type: 'custom',
|
||||||
|
formatter: (price: number) =>
|
||||||
|
'$' + price.toLocaleString('en-US', { minimumFractionDigits: 2 }),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const benchmarkSeries = chart.addSeries(LineSeries, {
|
||||||
|
color: '#94a3b8',
|
||||||
|
lineWidth: 1,
|
||||||
|
title: 'SPY',
|
||||||
|
lineStyle: 1, // dashed
|
||||||
|
priceFormat: {
|
||||||
|
type: 'custom',
|
||||||
|
formatter: (price: number) =>
|
||||||
|
'$' + price.toLocaleString('en-US', { minimumFractionDigits: 2 }),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
chartRef.current = chart;
|
||||||
|
|
||||||
|
if (strategy.length > 0) {
|
||||||
|
strategySeries.setData(toChartData(strategy) as { time: string; value: number }[]);
|
||||||
|
}
|
||||||
|
if (benchmark && benchmark.length > 0) {
|
||||||
|
benchmarkSeries.setData(toChartData(benchmark) as { time: string; value: number }[]);
|
||||||
|
}
|
||||||
|
|
||||||
|
chart.timeScale().fitContent();
|
||||||
|
|
||||||
|
const handleResize = () => {
|
||||||
|
if (containerRef.current) {
|
||||||
|
chart.applyOptions({ width: containerRef.current.clientWidth });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
handleResize();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
chart.remove();
|
||||||
|
chartRef.current = null;
|
||||||
|
};
|
||||||
|
}, [height, strategy, benchmark]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center gap-4 text-xs text-slate-400">
|
||||||
|
<span className="flex items-center gap-1.5">
|
||||||
|
<span className="inline-block w-4 h-0.5 bg-blue-400" />
|
||||||
|
Strategy
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1.5">
|
||||||
|
<span className="inline-block w-4 h-0.5 bg-slate-400 border-dashed" />
|
||||||
|
SPY benchmark
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div ref={containerRef} className="w-full rounded-lg overflow-hidden" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
141
dashboard/src/components/meetKevin/TickerScorecardTable.tsx
Normal file
141
dashboard/src/components/meetKevin/TickerScorecardTable.tsx
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
import type { BridgeStatus, StrategyTicker } from '../../types/meetKevin';
|
||||||
|
import { ActionChip } from './ActionChip';
|
||||||
|
import { ConvictionBar } from './ConvictionBar';
|
||||||
|
|
||||||
|
const BRIDGE_BADGE: Record<BridgeStatus, { label: string; cls: string }> = {
|
||||||
|
emitted: { label: 'WOULD-TRADE', cls: 'bg-blue-600/30 text-blue-300 border-blue-500/40' },
|
||||||
|
dry_run: { label: 'WOULD-TRADE', cls: 'bg-blue-600/30 text-blue-300 border-blue-500/40' },
|
||||||
|
skipped_non_tradable: { label: 'NOT TRADABLE', cls: 'bg-slate-600/30 text-slate-400 border-slate-500/40' },
|
||||||
|
skipped_blocklist: { label: 'BLOCKLISTED', cls: 'bg-rose-600/30 text-rose-300 border-rose-500/40' },
|
||||||
|
skipped_caps: { label: 'CAP HIT', cls: 'bg-yellow-600/30 text-yellow-300 border-yellow-500/40' },
|
||||||
|
deferred: { label: 'DEFERRED', cls: 'bg-slate-600/30 text-slate-400 border-slate-500/40' },
|
||||||
|
broker_rejected: { label: 'REJECTED', cls: 'bg-red-600/30 text-red-300 border-red-500/40' },
|
||||||
|
};
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
tickers: StrategyTicker[];
|
||||||
|
isLoading: boolean;
|
||||||
|
onClose: (symbol: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TickerScorecardTable({ tickers, isLoading, onClose }: Props) {
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center py-16">
|
||||||
|
<span className="inline-block w-8 h-8 border-2 border-blue-400/30 border-t-blue-400 rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (tickers.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-800 border border-slate-700 rounded-xl p-12 text-center text-slate-400">
|
||||||
|
No ticker signals yet
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-800 border border-slate-700 rounded-xl overflow-hidden">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead className="bg-slate-900/50">
|
||||||
|
<tr>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Symbol
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Signal
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Conviction
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Price
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
P&L
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Mentions
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
|
||||||
|
Last seen
|
||||||
|
</th>
|
||||||
|
<th className="px-5 py-3" />
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-slate-700">
|
||||||
|
{tickers.map((t) => {
|
||||||
|
const badge = t.bridge_status ? BRIDGE_BADGE[t.bridge_status] : null;
|
||||||
|
const pnl = t.unrealized_pnl_pct;
|
||||||
|
return (
|
||||||
|
<tr key={t.symbol} className="hover:bg-slate-700/30 transition-colors">
|
||||||
|
<td className="px-5 py-3.5">
|
||||||
|
<span className="font-mono font-bold text-white">${t.symbol}</span>
|
||||||
|
{t.is_held && (
|
||||||
|
<span className="ml-2 px-1.5 py-0.5 text-xs bg-green-600/20 text-green-400 border border-green-500/30 rounded">
|
||||||
|
HOLDING
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5">
|
||||||
|
<ActionChip action={t.latest_action} />
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5">
|
||||||
|
<div className="flex items-center gap-2 min-w-[120px]">
|
||||||
|
<div className="flex-1">
|
||||||
|
<ConvictionBar value={t.latest_conviction} />
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-slate-400 shrink-0">
|
||||||
|
{(t.latest_conviction * 100).toFixed(0)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5 text-slate-300 font-mono">
|
||||||
|
{t.current_price != null
|
||||||
|
? `$${t.current_price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
|
||||||
|
: '—'}
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5 font-mono">
|
||||||
|
{pnl != null ? (
|
||||||
|
<span className={pnl >= 0 ? 'text-green-400' : 'text-red-400'}>
|
||||||
|
{pnl >= 0 ? '+' : ''}{pnl.toFixed(2)}%
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="text-slate-500">—</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5">
|
||||||
|
{badge ? (
|
||||||
|
<span className={`px-2 py-0.5 text-xs font-semibold uppercase rounded-md border ${badge.cls}`}>
|
||||||
|
{badge.label}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="text-slate-500">—</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5 text-slate-300">{t.mention_count}</td>
|
||||||
|
<td className="px-5 py-3.5 text-slate-400">
|
||||||
|
{new Date(t.last_mention_at).toLocaleDateString()}
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-3.5">
|
||||||
|
{t.is_held && (
|
||||||
|
<button
|
||||||
|
onClick={() => onClose(t.symbol)}
|
||||||
|
className="px-2.5 py-1 text-xs bg-red-600/20 hover:bg-red-600/40 text-red-300 border border-red-500/30 rounded transition-colors"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue