viktor/trading
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(dashboard): /meet-kevin/strategy page wired
Some checks failed
ci/woodpecker/push/woodpecker Pipeline was canceled
Details

Browse source 
Strategy.tsx composes 6-up metrics header, StrategyVsBenchmarkCurve
equity chart, TickerScorecardTable and BacktestRunHistory. Selecting a
backtest run replaces the chart with that run's equity curve. Run
Backtest button fires POST and polls for completion.
App.tsx: +route /meet-kevin/strategy.
Layout.tsx: +sidebar entry 'MK Strategy' under Meet Kevin group.
This commit is contained in:
Viktor Barzin 2026-05-24 00:48:27 +00:00
parent 5f5529ef09
commit 6636054742
3 changed files with 216 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dashboard/src/App.tsx
View file

@ -13,6 +13,7 @@ import MeetKevinVideos from './pages/meetKevin/Videos';
import MeetKevinVideoDetail from './pages/meetKevin/VideoDetail';
import MeetKevinStocks from './pages/meetKevin/Stocks';
import MeetKevinStockDetail from './pages/meetKevin/StockDetail';
import MeetKevinStrategy from './pages/meetKevin/Strategy';
export default function App() {
return (
@ -41,6 +42,7 @@ export default function App() {
<Route path="meet-kevin/videos/:id" element={<MeetKevinVideoDetail />} />
<Route path="meet-kevin/stocks" element={<MeetKevinStocks />} />
<Route path="meet-kevin/stocks/:symbol" element={<MeetKevinStockDetail />} />
<Route path="meet-kevin/strategy" element={<MeetKevinStrategy />} />
</Route>
{/* Catch-all redirect */}

1
dashboard/src/components/Layout.tsx
View file

@ -9,6 +9,7 @@ const navItems = [
{ to: '/news', label: 'News', icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2' },
{ to: '/backtest', label: 'Backtest', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
{ to: '/meet-kevin', label: 'Meet Kevin', icon: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z' },
{ to: '/meet-kevin/strategy', label: 'MK Strategy', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
];
export function Layout() {

213
dashboard/src/pages/meetKevin/Strategy.tsx Normal file
View file

@ -0,0 +1,213 @@
import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { TickerScorecardTable } from '../../components/meetKevin/TickerScorecardTable';
import { BacktestRunHistory } from '../../components/meetKevin/BacktestRunHistory';
import { StrategyVsBenchmarkCurve } from '../../components/meetKevin/StrategyVsBenchmarkCurve';
import {
runBacktest,
listBacktestRuns,
getBacktestRun,
getStrategyTickers,
getStrategyEquityCurve,
getStrategyPerformance,
closeKevinPosition,
} from '../../api/meetKevinStrategy';
import type { BacktestRunStatus } from '../../types/meetKevin';
function MetricCard({ label, value, color = 'text-white' }: { label: string; value: string; color?: string }) {
return (
<div className="bg-slate-800 border border-slate-700 rounded-xl p-5">
<p className="text-xs text-slate-400 uppercase tracking-wide mb-1">{label}</p>
<p className={`text-2xl font-semibold font-mono ${color}`}>{value}</p>
</div>
);
}
function fmt(v: number | null | undefined, suffix = '%', decimals = 2): string {
if (v == null) return '—';
return `${v >= 0 ? '+' : ''}${v.toFixed(decimals)}${suffix}`;
}
const POLL_STATUSES: BacktestRunStatus[] = ['running'];
export default function MeetKevinStrategy() {
const queryClient = useQueryClient();
const [selectedRunUuid, setSelectedRunUuid] = useState<string | null>(null);
const { data: performance } = useQuery({
queryKey: ['meet-kevin', 'strategy', 'performance'],
queryFn: getStrategyPerformance,
refetchInterval: 60_000,
});
const { data: tickers, isLoading: tickersLoading } = useQuery({
queryKey: ['meet-kevin', 'strategy', 'tickers'],
queryFn: getStrategyTickers,
refetchInterval: 60_000,
});
const { data: equityCurve } = useQuery({
queryKey: ['meet-kevin', 'strategy', 'equity-curve'],
queryFn: () => getStrategyEquityCurve({ include_benchmark: 'spy' }),
refetchInterval: 120_000,
});
const { data: runs, isLoading: runsLoading } = useQuery({
queryKey: ['meet-kevin', 'backtest', 'runs'],
queryFn: () => listBacktestRuns(20),
refetchInterval: 30_000,
});
const { data: selectedRun } = useQuery({
queryKey: ['meet-kevin', 'backtest', 'run', selectedRunUuid],
queryFn: () => getBacktestRun(selectedRunUuid!),
enabled: selectedRunUuid != null,
refetchInterval: (query) => {
const data = query.state.data;
if (data && POLL_STATUSES.includes(data.status)) return 3_000;
return false;
},
});
const backtestMutation = useMutation({
mutationFn: runBacktest,
onSuccess: (data) => {
setSelectedRunUuid(data.run_uuid);
void queryClient.invalidateQueries({ queryKey: ['meet-kevin', 'backtest', 'runs'] });
},
});
const closeMutation = useMutation({
mutationFn: closeKevinPosition,
onSuccess: () => {
void queryClient.invalidateQueries({ queryKey: ['meet-kevin', 'strategy', 'tickers'] });
},
});
const equityData = selectedRun?.equity_curve_json ?? equityCurve?.strategy ?? [];
const benchmarkData = selectedRun?.benchmark_curve_json ?? equityCurve?.benchmark ?? null;
return (
<div className="space-y-6">
{/* Page header */}
<div className="flex items-center justify-between">
<div>
<h2 className="text-2xl font-bold text-white">Meet Kevin — Strategy</h2>
<p className="text-sm text-slate-400 mt-0.5">
Backtest history, ticker scorecard, and equity vs SPY
</p>
</div>
<button
onClick={() => backtestMutation.mutate({})}
disabled={backtestMutation.isPending}
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-600 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
>
{backtestMutation.isPending ? (
<>
<span className="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
Running…
</>
) : (
<>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Run Backtest
</>
)}
</button>
</div>
{/* Headline metrics */}
{performance && (
<div className="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4">
<MetricCard
label="Total Return"
value={fmt(performance.total_return_pct)}
color={performance.total_return_pct >= 0 ? 'text-green-400' : 'text-red-400'}
/>
<MetricCard
label="Ann. Return"
value={fmt(performance.annualized_return_pct)}
color={(performance.annualized_return_pct ?? 0) >= 0 ? 'text-green-400' : 'text-red-400'}
/>
<MetricCard
label="Sharpe"
value={performance.sharpe_ratio != null ? performance.sharpe_ratio.toFixed(2) : '—'}
color={(performance.sharpe_ratio ?? 0) >= 1 ? 'text-green-400' : 'text-yellow-400'}
/>
<MetricCard
label="Max Drawdown"
value={performance.max_drawdown_pct != null ? `${performance.max_drawdown_pct.toFixed(2)}%` : '—'}
color="text-red-400"
/>
<MetricCard
label="Alpha vs SPY"
value={fmt(performance.alpha_vs_spy_pct)}
color={(performance.alpha_vs_spy_pct ?? 0) >= 0 ? 'text-green-400' : 'text-red-400'}
/>
<MetricCard
label="Open Positions"
value={performance.open_positions.toString()}
/>
</div>
)}
{/* Equity curve */}
{equityData.length > 0 && (
<div className="bg-slate-800 border border-slate-700 rounded-xl p-6">
<h3 className="text-lg font-semibold text-white mb-4">
{selectedRunUuid ? 'Backtest Equity Curve' : 'Strategy vs SPY'}
</h3>
<StrategyVsBenchmarkCurve
strategy={equityData}
benchmark={benchmarkData}
height={350}
/>
</div>
)}
{/* Ticker scorecard */}
<div className="space-y-3">
<h3 className="text-lg font-semibold text-white">Ticker Scorecard</h3>
<TickerScorecardTable
tickers={tickers ?? []}
isLoading={tickersLoading}
onClose={(symbol) => closeMutation.mutate(symbol)}
/>
</div>
{/* Backtest run history */}
<div className="space-y-3">
<h3 className="text-lg font-semibold text-white">Backtest History</h3>
<BacktestRunHistory
runs={runs ?? []}
isLoading={runsLoading}
selectedRunUuid={selectedRunUuid}
onSelect={setSelectedRunUuid}
/>
</div>
{/* Selected run detail */}
{selectedRun?.status === 'running' && (
<div className="bg-slate-800 border border-slate-700 rounded-xl p-6 text-center">
<span className="inline-block w-8 h-8 border-2 border-blue-400/30 border-t-blue-400 rounded-full animate-spin mb-3" />
<p className="text-white font-medium">Backtest running…</p>
<p className="text-sm text-slate-400 mt-1">Results will appear automatically</p>
</div>
)}
{selectedRun?.status === 'failed' && (
<div className="bg-red-900/20 border border-red-700 rounded-xl p-6">
<p className="text-red-400 font-medium">Backtest Failed</p>
<p className="text-sm text-red-300 mt-1">
{selectedRun.error_message ?? 'An unknown error occurred'}
</p>
</div>
)}
</div>
);
}