initial backtests
This commit is contained in:
parent
fa70ada2bb
commit
5a3a23a2ba
6 changed files with 400 additions and 129 deletions
|
|
@ -1,5 +1,5 @@
|
|||
import * as LightweightCharts from 'lightweight-charts';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useCallback } from 'react';
|
||||
|
||||
export interface ChartData {
|
||||
time: number;
|
||||
|
|
@ -40,20 +40,16 @@ export function Chart({
|
|||
const mainSeriesRef = useRef<LightweightCharts.ISeriesApi<any> | null>(null);
|
||||
const volumeSeriesRef = useRef<LightweightCharts.ISeriesApi<any> | null>(null);
|
||||
const overlaySeriesRef = useRef<Map<string, LightweightCharts.ISeriesApi<any>>>(new Map());
|
||||
|
||||
// Debug logging
|
||||
console.log('Chart - data received:', data);
|
||||
console.log('Chart - data length:', data?.length);
|
||||
console.log('Chart - data type:', Array.isArray(data) ? 'array' : typeof data);
|
||||
console.log('Chart - first data point:', data?.[0]);
|
||||
|
||||
// Reset zoom handler
|
||||
const resetZoom = useCallback(() => {
|
||||
if (chartRef.current) {
|
||||
chartRef.current.timeScale().fitContent();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!chartContainerRef.current || !data || !data.length) {
|
||||
console.log('Chart - early return:', {
|
||||
hasContainer: !!chartContainerRef.current,
|
||||
hasData: !!data,
|
||||
dataLength: data?.length
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -89,11 +85,27 @@ export function Chart({
|
|||
borderColor: theme === 'dark' ? '#1f2937' : '#e5e7eb',
|
||||
timeVisible: true,
|
||||
secondsVisible: false,
|
||||
rightOffset: 12,
|
||||
barSpacing: 3,
|
||||
fixLeftEdge: true,
|
||||
fixRightEdge: true,
|
||||
},
|
||||
});
|
||||
|
||||
chartRef.current = chart;
|
||||
|
||||
// Filter and validate data
|
||||
const validateAndFilterData = (rawData: any[]) => {
|
||||
const seen = new Set<number>();
|
||||
return rawData.filter((item, index) => {
|
||||
if (seen.has(item.time)) {
|
||||
return false;
|
||||
}
|
||||
seen.add(item.time);
|
||||
return true;
|
||||
});
|
||||
};
|
||||
|
||||
// Create main series
|
||||
if (type === 'candlestick' && data[0].open !== undefined) {
|
||||
mainSeriesRef.current = chart.addCandlestickSeries({
|
||||
|
|
@ -104,7 +116,8 @@ export function Chart({
|
|||
wickUpColor: '#10b981',
|
||||
wickDownColor: '#ef4444',
|
||||
});
|
||||
mainSeriesRef.current.setData(data as LightweightCharts.CandlestickData[]);
|
||||
const validData = validateAndFilterData(data);
|
||||
mainSeriesRef.current.setData(validData as LightweightCharts.CandlestickData[]);
|
||||
} else if (type === 'line' || (type === 'candlestick' && data[0].value !== undefined)) {
|
||||
mainSeriesRef.current = chart.addLineSeries({
|
||||
color: '#3b82f6',
|
||||
|
|
@ -114,7 +127,8 @@ export function Chart({
|
|||
time: d.time,
|
||||
value: d.value ?? d.close ?? 0
|
||||
}));
|
||||
mainSeriesRef.current.setData(lineData);
|
||||
const validData = validateAndFilterData(lineData);
|
||||
mainSeriesRef.current.setData(validData);
|
||||
} else if (type === 'area') {
|
||||
mainSeriesRef.current = chart.addAreaSeries({
|
||||
lineColor: '#3b82f6',
|
||||
|
|
@ -126,7 +140,8 @@ export function Chart({
|
|||
time: d.time,
|
||||
value: d.value ?? d.close ?? 0
|
||||
}));
|
||||
mainSeriesRef.current.setData(areaData);
|
||||
const validData = validateAndFilterData(areaData);
|
||||
mainSeriesRef.current.setData(validData);
|
||||
}
|
||||
|
||||
// Add volume if available
|
||||
|
|
@ -177,12 +192,46 @@ export function Chart({
|
|||
});
|
||||
}
|
||||
|
||||
series.setData(overlay.data);
|
||||
// Filter out duplicate timestamps and ensure ascending order
|
||||
const uniqueData = overlay.data.reduce((acc: any[], curr) => {
|
||||
if (!acc.length || curr.time > acc[acc.length - 1].time) {
|
||||
acc.push(curr);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
series.setData(uniqueData);
|
||||
overlaySeriesRef.current.set(overlay.name, series);
|
||||
});
|
||||
|
||||
// Fit content
|
||||
chart.timeScale().fitContent();
|
||||
// Fit content with a slight delay to ensure all series are loaded
|
||||
setTimeout(() => {
|
||||
chart.timeScale().fitContent();
|
||||
|
||||
// Also set the visible range to ensure all data is shown
|
||||
if (data.length > 0) {
|
||||
const firstTime = data[0].time;
|
||||
const lastTime = data[data.length - 1].time;
|
||||
chart.timeScale().setVisibleRange({
|
||||
from: firstTime as any,
|
||||
to: lastTime as any,
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// Enable mouse wheel zoom and touch gestures
|
||||
chart.applyOptions({
|
||||
handleScroll: {
|
||||
mouseWheel: true,
|
||||
pressedMouseMove: true,
|
||||
horzTouchDrag: true,
|
||||
vertTouchDrag: true,
|
||||
},
|
||||
handleScale: {
|
||||
mouseWheel: true,
|
||||
pinch: true,
|
||||
axisPressedMouseMove: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Handle resize
|
||||
const handleResize = () => {
|
||||
|
|
@ -210,6 +259,13 @@ export function Chart({
|
|||
ref={chartContainerRef}
|
||||
style={{ width: '100%', height: `${height}px` }}
|
||||
/>
|
||||
<button
|
||||
onClick={resetZoom}
|
||||
className="absolute top-2 right-2 px-2 py-1 text-xs bg-surface-primary border border-border rounded hover:bg-surface-secondary transition-colors"
|
||||
title="Reset zoom"
|
||||
>
|
||||
Reset Zoom
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -32,40 +32,10 @@ export function BacktestPage() {
|
|||
// Current time is not available in the new API, so we'll estimate it based on progress
|
||||
const currentTime = null;
|
||||
|
||||
// Adapt the results when they come in
|
||||
// No adaptation needed - results are already in the correct format
|
||||
useEffect(() => {
|
||||
if (results && config) {
|
||||
setAdaptedResults({
|
||||
id: backtest?.id || '',
|
||||
config,
|
||||
metrics: {
|
||||
totalReturn: results.metrics.totalReturn,
|
||||
sharpeRatio: results.metrics.sharpeRatio,
|
||||
maxDrawdown: results.metrics.maxDrawdown,
|
||||
winRate: results.metrics.winRate,
|
||||
totalTrades: results.metrics.totalTrades,
|
||||
profitableTrades: Math.round(results.metrics.totalTrades * results.metrics.winRate / 100),
|
||||
},
|
||||
positions: [], // Not provided by current API
|
||||
trades: results.trades?.map(t => ({
|
||||
id: `${t.symbol}-${t.entryDate}`,
|
||||
timestamp: t.exitDate,
|
||||
symbol: t.symbol,
|
||||
side: t.pnl > 0 ? 'buy' : 'sell',
|
||||
quantity: t.quantity,
|
||||
price: t.exitPrice,
|
||||
commission: 0,
|
||||
pnl: t.pnl,
|
||||
})) || [],
|
||||
performanceData: results.equity.map(e => ({
|
||||
timestamp: e.date,
|
||||
portfolioValue: e.value,
|
||||
pnl: 0, // Would need to calculate from equity curve
|
||||
drawdown: 0, // Would need to calculate
|
||||
})),
|
||||
});
|
||||
}
|
||||
}, [results, config, backtest]);
|
||||
setAdaptedResults(results);
|
||||
}, [results]);
|
||||
|
||||
const handleConfigSubmit = useCallback(async (newConfig: BacktestConfig) => {
|
||||
setConfig(newConfig);
|
||||
|
|
|
|||
|
|
@ -13,11 +13,6 @@ 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">
|
||||
|
|
@ -125,14 +120,9 @@ export function BacktestResults({ status, results, currentTime }: BacktestResult
|
|||
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
|
||||
|
|
@ -156,7 +146,6 @@ export function BacktestResults({ status, results, currentTime }: BacktestResult
|
|||
/>
|
||||
);
|
||||
} else if (hasEquityData) {
|
||||
console.log('Chart section - using equity data only');
|
||||
return (
|
||||
<Chart
|
||||
data={results.equity.map(point => ({
|
||||
|
|
@ -171,7 +160,6 @@ export function BacktestResults({ status, results, currentTime }: BacktestResult
|
|||
/>
|
||||
);
|
||||
} 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">
|
||||
|
|
@ -190,13 +178,13 @@ export function BacktestResults({ status, results, currentTime }: BacktestResult
|
|||
Trade History
|
||||
</h3>
|
||||
<TradeLog trades={results.trades.map(trade => ({
|
||||
id: crypto.randomUUID(),
|
||||
timestamp: trade.entryDate,
|
||||
id: trade.id,
|
||||
timestamp: trade.exitDate || trade.entryDate,
|
||||
symbol: trade.symbol,
|
||||
side: 'buy' as const,
|
||||
side: trade.side as 'buy' | 'sell',
|
||||
quantity: trade.quantity,
|
||||
price: trade.entryPrice,
|
||||
commission: 0,
|
||||
price: trade.exitPrice,
|
||||
commission: trade.commission,
|
||||
pnl: trade.pnl
|
||||
}))} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,26 +24,43 @@ export interface BacktestJob {
|
|||
}
|
||||
|
||||
export interface BacktestResult {
|
||||
// Identification
|
||||
backtestId: string;
|
||||
status: 'completed' | 'failed' | 'cancelled';
|
||||
completedAt: string;
|
||||
|
||||
// Configuration
|
||||
config: {
|
||||
name: string;
|
||||
strategy: string;
|
||||
symbols: string[];
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
initialCapital: number;
|
||||
commission: number;
|
||||
slippage: number;
|
||||
dataFrequency: string;
|
||||
};
|
||||
|
||||
// Performance metrics
|
||||
metrics: {
|
||||
totalReturn: number;
|
||||
sharpeRatio: number;
|
||||
maxDrawdown: number;
|
||||
winRate: number;
|
||||
totalTrades: number;
|
||||
profitFactor?: number;
|
||||
profitFactor: number;
|
||||
profitableTrades: number;
|
||||
avgWin: number;
|
||||
avgLoss: number;
|
||||
expectancy: number;
|
||||
calmarRatio: number;
|
||||
sortinoRatio: number;
|
||||
};
|
||||
|
||||
// Chart data
|
||||
equity: Array<{ date: string; value: number }>;
|
||||
trades?: Array<{
|
||||
symbol: string;
|
||||
entryDate: string;
|
||||
exitDate: string;
|
||||
entryPrice: number;
|
||||
exitPrice: number;
|
||||
quantity: number;
|
||||
pnl: number;
|
||||
}>;
|
||||
ohlcData?: Record<string, Array<{
|
||||
ohlcData: Record<string, Array<{
|
||||
time: number;
|
||||
open: number;
|
||||
high: number;
|
||||
|
|
@ -51,6 +68,41 @@ export interface BacktestResult {
|
|||
close: number;
|
||||
volume?: number;
|
||||
}>>;
|
||||
|
||||
// Trade history
|
||||
trades: Array<{
|
||||
id: string;
|
||||
symbol: string;
|
||||
entryDate: string;
|
||||
exitDate: string | null;
|
||||
entryPrice: number;
|
||||
exitPrice: number;
|
||||
quantity: number;
|
||||
side: string;
|
||||
pnl: number;
|
||||
pnlPercent: number;
|
||||
commission: number;
|
||||
duration: number;
|
||||
}>;
|
||||
|
||||
// Positions
|
||||
positions: Array<{
|
||||
symbol: string;
|
||||
quantity: number;
|
||||
averagePrice: number;
|
||||
currentPrice: number;
|
||||
unrealizedPnl: number;
|
||||
realizedPnl: number;
|
||||
}>;
|
||||
|
||||
// Analytics
|
||||
analytics: {
|
||||
drawdownSeries: Array<{ timestamp: number; value: number }>;
|
||||
dailyReturns: number[];
|
||||
monthlyReturns: Record<string, number>;
|
||||
exposureTime: number;
|
||||
riskMetrics: Record<string, number>;
|
||||
};
|
||||
}
|
||||
|
||||
export const backtestApi = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue