6c118d1f53
Phase 5: Trading dashboard with candlestick chart (TradingView lightweight-charts v5), order book, positions table, order form, and orders table with cancel support. Phase 6: Risk dashboard with radial gauges (VaR, position utilization, drawdown), drawdown chart, WebSocket-fed alerts panel, and emergency stop controls. Phase 7: ML dashboard with model cards (DQN/PPO/TFT/Mamba2), ensemble voting panel, regime state indicator, and training job progress tracking. Phase 8: Performance dashboard with metric cards and P&L charts, backtesting dashboard with strategy form and trade list, config dashboard with tabbed category editor and audit log. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
interface Props {
|
|
model: string;
|
|
signal?: 'buy' | 'sell' | 'hold';
|
|
confidence?: number;
|
|
predictedReturn?: number;
|
|
}
|
|
|
|
export function ModelCard({ model, signal, confidence, predictedReturn }: Props) {
|
|
const signalColor = {
|
|
buy: 'text-[var(--color-green)]',
|
|
sell: 'text-[var(--color-red)]',
|
|
hold: 'text-[var(--color-yellow)]',
|
|
}[signal ?? 'hold'];
|
|
|
|
const signalBg = {
|
|
buy: 'bg-green-500/10',
|
|
sell: 'bg-red-500/10',
|
|
hold: 'bg-yellow-500/10',
|
|
}[signal ?? 'hold'];
|
|
|
|
return (
|
|
<div className="p-3 space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">{model}</span>
|
|
<span className={`text-xs px-2 py-0.5 rounded ${signalColor} ${signalBg}`}>
|
|
{signal?.toUpperCase() ?? 'N/A'}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-[var(--color-text-secondary)]">Confidence</span>
|
|
<span>{confidence !== undefined ? `${(confidence * 100).toFixed(1)}%` : '--'}</span>
|
|
</div>
|
|
<div className="w-full bg-[var(--color-bg-primary)] rounded-full h-1.5">
|
|
<div
|
|
className="h-1.5 rounded-full bg-[var(--color-accent)]"
|
|
style={{ width: `${(confidence ?? 0) * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-[var(--color-text-secondary)]">Predicted Return</span>
|
|
<span
|
|
className={
|
|
(predictedReturn ?? 0) >= 0
|
|
? 'text-[var(--color-green)]'
|
|
: 'text-[var(--color-red)]'
|
|
}
|
|
>
|
|
{predictedReturn !== undefined
|
|
? `${predictedReturn >= 0 ? '+' : ''}${(predictedReturn * 100).toFixed(2)}%`
|
|
: '--'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|