boki/stock-bot
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

messy work. backtests / mock-data

Browse source
This commit is contained in:
Boki 2025-07-03 08:37:23 -04:00
parent 4e4a048988
commit fa70ada2bb
51 changed files with 2576 additions and 887 deletions
Download patch file Download diff file Expand all files Collapse all files

111
apps/stock/web-app/src/features/backtest/components/BacktestResults.tsx
View file

@ -1,7 +1,10 @@
import type { BacktestResult, BacktestStatus } from '../types';
import type { BacktestStatus } from '../types';
import type { BacktestResult } from '../services/backtestApi';
import { MetricsCard } from './MetricsCard';
import { PositionsTable } from './PositionsTable';
import { TradeLog } from './TradeLog';
import { Chart } from '../../../components/charts';
import { useState, useMemo } from 'react';
interface BacktestResultsProps {
status: BacktestStatus;
@ -10,6 +13,11 @@ interface BacktestResultsProps {
}
export function BacktestResults({ status, results, currentTime }: BacktestResultsProps) {
// Debug logging
console.log('BacktestResults - results:', results);
console.log('BacktestResults - ohlcData keys:', results?.ohlcData ? Object.keys(results.ohlcData) : 'No ohlcData');
console.log('BacktestResults - first symbol data:', results?.ohlcData && Object.keys(results.ohlcData).length > 0 ? results.ohlcData[Object.keys(results.ohlcData)[0]] : 'No data');
console.log('BacktestResults - equity data:', results?.equity);
if (status === 'idle') {
return (
<div className="bg-surface-secondary p-8 rounded-lg border border-border h-full flex items-center justify-center">
@ -99,41 +107,98 @@ export function BacktestResults({ status, results, currentTime }: BacktestResult
title="Total Trades"
value={results.metrics.totalTrades.toString()}
/>
<MetricsCard
title="Profitable Trades"
value={results.metrics.profitableTrades.toString()}
/>
{results.metrics.profitFactor && (
<MetricsCard
title="Profit Factor"
value={results.metrics.profitFactor.toFixed(2)}
trend={results.metrics.profitFactor >= 1 ? 'up' : 'down'}
/>
)}
</div>
{/* Performance Chart Placeholder */}
{/* Performance Chart */}
<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>
{(() => {
const hasOhlcData = results.ohlcData && Object.keys(results.ohlcData).length > 0;
const hasEquityData = results.equity && results.equity.length > 0;
console.log('Chart section - hasOhlcData:', hasOhlcData);
console.log('Chart section - hasEquityData:', hasEquityData);
if (hasOhlcData) {
const firstSymbol = Object.keys(results.ohlcData)[0];
const ohlcData = results.ohlcData[firstSymbol];
console.log('Chart section - using OHLC data for symbol:', firstSymbol);
console.log('Chart section - OHLC data points:', ohlcData?.length);
return (
<Chart
data={ohlcData}
height={400}
type="candlestick"
showVolume={true}
theme="dark"
overlayData={hasEquityData ? [
{
name: 'Portfolio Value',
data: results.equity.map(point => ({
time: Math.floor(new Date(point.date).getTime() / 1000),
value: point.value
})),
color: '#10b981',
lineWidth: 3
}
] : []}
className="rounded"
/>
);
} else if (hasEquityData) {
console.log('Chart section - using equity data only');
return (
<Chart
data={results.equity.map(point => ({
time: Math.floor(new Date(point.date).getTime() / 1000),
value: point.value
}))}
height={400}
type="area"
showVolume={false}
theme="dark"
className="rounded"
/>
);
} else {
console.log('Chart section - showing no data message');
return (
<div className="h-96 bg-background rounded border border-border flex items-center justify-center">
<p className="text-sm text-text-muted">
No data available
</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 && (
{results.trades && 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} />
<TradeLog trades={results.trades.map(trade => ({
id: crypto.randomUUID(),
timestamp: trade.entryDate,
symbol: trade.symbol,
side: 'buy' as const,
quantity: trade.quantity,
price: trade.entryPrice,
commission: 0,
pnl: trade.pnl
}))} />
</div>
)}
</div>