initial charts / backtest

2025-07-02 19:58:43 -04:00 · 2025-07-02 19:58:43 -04:00 · 1b9010ebf4
commit 1b9010ebf4
parent 11c24b2280
37 changed files with 3888 additions and 23 deletions
--- a/apps/stock/web-app/src/features/backtest/components/BacktestResults.tsx
+++ b/apps/stock/web-app/src/features/backtest/components/BacktestResults.tsx
@ -0,0 +1,141 @@
+import type { BacktestResult, BacktestStatus } from '../types';
+import { MetricsCard } from './MetricsCard';
+import { PositionsTable } from './PositionsTable';
+import { TradeLog } from './TradeLog';
+
+interface BacktestResultsProps {
+  status: BacktestStatus;
+  results: BacktestResult | null;
+  currentTime: number | null;
+}
+
+export function BacktestResults({ status, results, currentTime }: BacktestResultsProps) {
+  if (status === 'idle') {
+    return (
+      <div className="bg-surface-secondary p-8 rounded-lg border border-border h-full flex items-center justify-center">
+        <div className="text-center">
+          <h3 className="text-lg font-medium text-text-primary mb-2">
+            Configure Your Backtest
+          </h3>
+          <p className="text-sm text-text-secondary">
+            Set up your strategy parameters and click "Configure Backtest" to begin.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (status === 'configured') {
+    return (
+      <div className="bg-surface-secondary p-8 rounded-lg border border-border h-full flex items-center justify-center">
+        <div className="text-center">
+          <h3 className="text-lg font-medium text-text-primary mb-2">
+            Ready to Start
+          </h3>
+          <p className="text-sm text-text-secondary">
+            Click the "Start" button to begin backtesting your strategy.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (status === 'running' && !results) {
+    return (
+      <div className="bg-surface-secondary p-8 rounded-lg border border-border h-full flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-primary-500 mx-auto mb-4"></div>
+          <h3 className="text-lg font-medium text-text-primary mb-2">
+            Running Backtest...
+          </h3>
+          <p className="text-sm text-text-secondary">
+            Processing historical data and executing trades.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!results) {
+    return (
+      <div className="bg-surface-secondary p-8 rounded-lg border border-border h-full flex items-center justify-center">
+        <div className="text-center">
+          <h3 className="text-lg font-medium text-text-primary mb-2">
+            No Results Yet
+          </h3>
+          <p className="text-sm text-text-secondary">
+            Results will appear here once the backtest is complete.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 h-full overflow-y-auto">
+      {/* Metrics Overview */}
+      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+        <MetricsCard
+          title="Total Return"
+          value={`${results.metrics.totalReturn >= 0 ? '+' : ''}${results.metrics.totalReturn.toFixed(2)}%`}
+          trend={results.metrics.totalReturn >= 0 ? 'up' : 'down'}
+        />
+        <MetricsCard
+          title="Sharpe Ratio"
+          value={results.metrics.sharpeRatio.toFixed(2)}
+          trend={results.metrics.sharpeRatio >= 1 ? 'up' : 'down'}
+        />
+        <MetricsCard
+          title="Max Drawdown"
+          value={`${results.metrics.maxDrawdown.toFixed(2)}%`}
+          trend="down"
+        />
+        <MetricsCard
+          title="Win Rate"
+          value={`${results.metrics.winRate.toFixed(1)}%`}
+          trend={results.metrics.winRate >= 50 ? 'up' : 'down'}
+        />
+        <MetricsCard
+          title="Total Trades"
+          value={results.metrics.totalTrades.toString()}
+        />
+        <MetricsCard
+          title="Profitable Trades"
+          value={results.metrics.profitableTrades.toString()}
+        />
+      </div>
+
+      {/* Performance Chart Placeholder */}
+      <div className="bg-surface-secondary p-4 rounded-lg border border-border">
+        <h3 className="text-base font-medium text-text-primary mb-4">
+          Portfolio Performance
+        </h3>
+        <div className="h-64 bg-background rounded border border-border flex items-center justify-center">
+          <p className="text-sm text-text-muted">
+            Performance chart will be displayed here (requires recharts)
+          </p>
+        </div>
+      </div>
+
+      {/* Positions Table */}
+      {results.positions.length > 0 && (
+        <div className="bg-surface-secondary p-4 rounded-lg border border-border">
+          <h3 className="text-base font-medium text-text-primary mb-4">
+            Current Positions
+          </h3>
+          <PositionsTable positions={results.positions} />
+        </div>
+      )}
+
+      {/* Trade Log */}
+      {results.trades.length > 0 && (
+        <div className="bg-surface-secondary p-4 rounded-lg border border-border">
+          <h3 className="text-base font-medium text-text-primary mb-4">
+            Trade History
+          </h3>
+          <TradeLog trades={results.trades} />
+        </div>
+      )}
+    </div>
+  );
+}