Add new chart
This commit is contained in:
@@ -0,0 +1,90 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Plot from 'react-plotly.js';
|
||||||
|
|
||||||
|
interface Fitness3DPlotProps {
|
||||||
|
results: any[];
|
||||||
|
theme: { secondary: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
const Fitness3DPlot: React.FC<Fitness3DPlotProps> = ({ results, theme }) => {
|
||||||
|
const LOOPBACK_CONFIG = {
|
||||||
|
singleIndicator: 1,
|
||||||
|
multipleIndicators: { min: 5, max: 15 },
|
||||||
|
};
|
||||||
|
|
||||||
|
const plotData = results.length > 0 ? [
|
||||||
|
{
|
||||||
|
type: 'scatter3d' as const,
|
||||||
|
mode: 'markers' as const,
|
||||||
|
x: results.map(r => r.fitness),
|
||||||
|
y: results.map(r => r.backtest?.score || 0),
|
||||||
|
z: results.map(r => r.backtest?.winRate || 0),
|
||||||
|
marker: {
|
||||||
|
size: 5,
|
||||||
|
color: results.map(r => r.generation),
|
||||||
|
colorscale: 'Viridis' as const,
|
||||||
|
opacity: 0.8,
|
||||||
|
},
|
||||||
|
text: results.map(r => {
|
||||||
|
const loopbackPeriod = r.individual.indicators.length === 1
|
||||||
|
? LOOPBACK_CONFIG.singleIndicator
|
||||||
|
: '5-15';
|
||||||
|
const indicatorDetails = r.individual.indicators.map((indicator: any, index: number) => {
|
||||||
|
let details = indicator.type.toString();
|
||||||
|
if (indicator.period) details += ` (${indicator.period})`;
|
||||||
|
if (indicator.fastPeriods && indicator.slowPeriods) details += ` (${indicator.fastPeriods}/${indicator.slowPeriods})`;
|
||||||
|
if (indicator.multiplier) details += ` (${indicator.multiplier.toFixed(1)}x)`;
|
||||||
|
return details;
|
||||||
|
}).join(', ');
|
||||||
|
const riskRewardRatio = r.individual.takeProfit / r.individual.stopLoss;
|
||||||
|
const riskRewardColor = riskRewardRatio >= 2 ? '🟢' : riskRewardRatio >= 1.5 ? '🟡' : '🔴';
|
||||||
|
const maxDrawdownPc = Math.abs(r.backtest?.statistics?.maxDrawdownPc || 0);
|
||||||
|
const drawdownColor = maxDrawdownPc <= 10 ? '🟢' : maxDrawdownPc <= 25 ? '🟡' : '🔴';
|
||||||
|
return `Phase: ${r.phase || 'Unknown'}<br>` +
|
||||||
|
`Gen: ${r.generation}<br>` +
|
||||||
|
`Fitness: ${r.fitness.toFixed(2)}<br>` +
|
||||||
|
`PnL: $${r.backtest?.statistics?.totalPnL?.toFixed(2) || 'N/A'}<br>` +
|
||||||
|
`Win Rate: ${r.backtest?.winRate?.toFixed(1) || 'N/A'}%<br>` +
|
||||||
|
`Max Drawdown: ${drawdownColor} ${maxDrawdownPc.toFixed(1)}%<br>` +
|
||||||
|
`SL: ${r.individual.stopLoss.toFixed(1)}%<br>` +
|
||||||
|
`TP: ${r.individual.takeProfit.toFixed(1)}%<br>` +
|
||||||
|
`R/R: ${riskRewardColor} ${riskRewardRatio.toFixed(2)}<br>` +
|
||||||
|
`Leverage: ${r.individual.leverage}x<br>` +
|
||||||
|
`Cooldown: ${r.individual.cooldownPeriod} candles<br>` +
|
||||||
|
`Max Loss Streak: ${r.individual.maxLossStreak}<br>` +
|
||||||
|
`Max Time: ${r.individual.maxPositionTimeHours}h<br>` +
|
||||||
|
`Indicators: ${indicatorDetails}<br>` +
|
||||||
|
`Loopback: ${loopbackPeriod}`;
|
||||||
|
}),
|
||||||
|
hovertemplate: '%{text}<extra></extra>',
|
||||||
|
},
|
||||||
|
] : [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Plot
|
||||||
|
data={plotData}
|
||||||
|
layout={{
|
||||||
|
title: {text: 'Fitness Score vs Score vs Win Rate'},
|
||||||
|
scene: {
|
||||||
|
xaxis: {title: {text: 'Fitness Score'}},
|
||||||
|
yaxis: {title: {text: 'Score'}},
|
||||||
|
zaxis: {title: {text: 'Win Rate (%)'}},
|
||||||
|
},
|
||||||
|
width: 750,
|
||||||
|
height: 600,
|
||||||
|
margin: {
|
||||||
|
b: 20,
|
||||||
|
l: 0,
|
||||||
|
pad: 0,
|
||||||
|
r: 0,
|
||||||
|
t: 0,
|
||||||
|
},
|
||||||
|
paper_bgcolor: '#121212',
|
||||||
|
plot_bgcolor: theme.secondary,
|
||||||
|
}}
|
||||||
|
config={{displayModeBar: false}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Fitness3DPlot;
|
||||||
@@ -0,0 +1,479 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import Plot from 'react-plotly.js'
|
||||||
|
import useTheme from '../../../hooks/useTheme'
|
||||||
|
import {Backtest} from '../../../generated/ManagingApi'
|
||||||
|
|
||||||
|
interface StrategyResult {
|
||||||
|
individual: {
|
||||||
|
stopLoss: number
|
||||||
|
takeProfit: number
|
||||||
|
leverage: number
|
||||||
|
indicators: Array<{
|
||||||
|
type: string
|
||||||
|
period?: number
|
||||||
|
fastPeriods?: number
|
||||||
|
slowPeriods?: number
|
||||||
|
signalPeriods?: number
|
||||||
|
multiplier?: number
|
||||||
|
stochPeriods?: number
|
||||||
|
smoothPeriods?: number
|
||||||
|
cyclePeriods?: number
|
||||||
|
}>
|
||||||
|
}
|
||||||
|
backtest?: {
|
||||||
|
statistics?: {
|
||||||
|
totalPnL?: number
|
||||||
|
maxDrawdownPc?: number
|
||||||
|
sharpeRatio?: number
|
||||||
|
hodlPnL?: number // Assume this is available in statistics
|
||||||
|
numPositions?: number // Number of trades/positions
|
||||||
|
}
|
||||||
|
winRate?: number
|
||||||
|
score?: number
|
||||||
|
}
|
||||||
|
fitness: number
|
||||||
|
generation: number
|
||||||
|
phase: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IndicatorsComparisonProps {
|
||||||
|
results: StrategyResult[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const IndicatorsComparison: React.FC<IndicatorsComparisonProps> = ({ results }) => {
|
||||||
|
const theme = useTheme().themeProperty();
|
||||||
|
// Filter results to only include successful backtests
|
||||||
|
const validResults = results.filter(r => r.backtest && r.backtest.statistics)
|
||||||
|
|
||||||
|
if (validResults.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="card bg-base-100 shadow-xl">
|
||||||
|
<div className="card-body">
|
||||||
|
<h3 className="card-title">Strategy Comparison</h3>
|
||||||
|
<p className="text-center text-gray-500">No valid results to display</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Group results by indicator type and calculate average metrics
|
||||||
|
const indicatorStats = new Map<string, {
|
||||||
|
type: string
|
||||||
|
count: number
|
||||||
|
totalPnl: number
|
||||||
|
totalWinRate: number
|
||||||
|
totalScore: number
|
||||||
|
totalFitness: number
|
||||||
|
totalDrawdown: number
|
||||||
|
bestFitness: number
|
||||||
|
bestPnl: number
|
||||||
|
bestWinRate: number
|
||||||
|
bestScore: number
|
||||||
|
bestSharpe: number
|
||||||
|
bestHodlPnl: number
|
||||||
|
bestPnlVsHodl: number
|
||||||
|
bestNumPositions: number
|
||||||
|
bestMaxDrawdown: number
|
||||||
|
avgDrawdown: number
|
||||||
|
phase: string
|
||||||
|
generation: number
|
||||||
|
}>()
|
||||||
|
|
||||||
|
validResults.forEach(result => {
|
||||||
|
result.individual.indicators.forEach(indicator => {
|
||||||
|
const key = indicator.type
|
||||||
|
const existing = indicatorStats.get(key)
|
||||||
|
const sharpe = result.backtest?.statistics?.sharpeRatio ?? 0
|
||||||
|
const hodlPnl = result.backtest?.statistics?.hodlPnL ?? 0
|
||||||
|
const pnl = result.backtest?.statistics?.totalPnL ?? 0
|
||||||
|
const pnlVsHodl = pnl - hodlPnl
|
||||||
|
const numPositions = (result.backtest as Backtest).positions?.length ?? 0
|
||||||
|
const avgDrawdown = Math.abs(result.backtest?.statistics?.maxDrawdownPc ?? 0)
|
||||||
|
|
||||||
|
console.log(result.backtest)
|
||||||
|
if (existing) {
|
||||||
|
existing.count++
|
||||||
|
existing.totalPnl += pnl
|
||||||
|
existing.totalWinRate += result.backtest?.winRate || 0
|
||||||
|
existing.totalScore += result.backtest?.score || 0
|
||||||
|
existing.totalFitness += result.fitness
|
||||||
|
existing.totalDrawdown += avgDrawdown
|
||||||
|
|
||||||
|
// Track best performance
|
||||||
|
if (result.fitness > existing.bestFitness) {
|
||||||
|
existing.bestFitness = result.fitness
|
||||||
|
existing.bestPnl = pnl
|
||||||
|
existing.bestWinRate = result.backtest?.winRate || 0
|
||||||
|
existing.bestScore = result.backtest?.score || 0
|
||||||
|
existing.bestSharpe = sharpe
|
||||||
|
existing.bestHodlPnl = hodlPnl
|
||||||
|
existing.bestPnlVsHodl = pnlVsHodl
|
||||||
|
existing.bestNumPositions = numPositions
|
||||||
|
existing.bestMaxDrawdown = avgDrawdown
|
||||||
|
existing.avgDrawdown = existing.totalDrawdown / existing.count
|
||||||
|
existing.phase = result.phase
|
||||||
|
existing.generation = result.generation
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
indicatorStats.set(key, {
|
||||||
|
type: key,
|
||||||
|
count: 1,
|
||||||
|
totalPnl: pnl,
|
||||||
|
totalWinRate: result.backtest?.winRate || 0,
|
||||||
|
totalScore: result.backtest?.score || 0,
|
||||||
|
totalFitness: result.fitness,
|
||||||
|
totalDrawdown: avgDrawdown,
|
||||||
|
bestFitness: result.fitness,
|
||||||
|
bestPnl: pnl,
|
||||||
|
bestWinRate: result.backtest?.winRate || 0,
|
||||||
|
bestScore: result.backtest?.score || 0,
|
||||||
|
bestSharpe: sharpe,
|
||||||
|
bestHodlPnl: hodlPnl,
|
||||||
|
bestPnlVsHodl: pnlVsHodl,
|
||||||
|
bestNumPositions: numPositions,
|
||||||
|
bestMaxDrawdown: avgDrawdown,
|
||||||
|
avgDrawdown: avgDrawdown,
|
||||||
|
phase: result.phase,
|
||||||
|
generation: result.generation,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// Convert to array and calculate averages
|
||||||
|
const indicatorData = Array.from(indicatorStats.values()).map(stat => ({
|
||||||
|
...stat,
|
||||||
|
avgPnl: stat.totalPnl / stat.count,
|
||||||
|
avgWinRate: stat.totalWinRate / stat.count,
|
||||||
|
avgScore: stat.totalScore / stat.count,
|
||||||
|
avgFitness: stat.totalFitness / stat.count,
|
||||||
|
avgDrawdown: stat.totalDrawdown / stat.count,
|
||||||
|
}))
|
||||||
|
|
||||||
|
// Sort by best fitness score
|
||||||
|
const sortedIndicators = indicatorData.sort((a, b) => b.bestFitness - a.bestFitness)
|
||||||
|
|
||||||
|
// Find max values for normalization
|
||||||
|
const maxPnl = Math.max(...sortedIndicators.map(d => Math.abs(d.bestPnl))) || 1
|
||||||
|
const maxWinRate = Math.max(...sortedIndicators.map(d => d.bestWinRate)) || 1
|
||||||
|
const maxScore = Math.max(...sortedIndicators.map(d => Math.abs(d.bestScore))) || 1
|
||||||
|
const maxFitness = Math.max(...sortedIndicators.map(d => d.bestFitness)) || 1
|
||||||
|
const maxSharpe = Math.max(...sortedIndicators.map(d => Math.abs(d.bestSharpe))) || 1
|
||||||
|
const maxPnlVsHodl = Math.max(...sortedIndicators.map(d => Math.abs(d.bestPnlVsHodl))) || 1
|
||||||
|
const maxNumPositions = Math.max(...sortedIndicators.map(d => d.bestNumPositions)) || 1
|
||||||
|
const maxAvgDrawdown = Math.max(...sortedIndicators.map(d => d.avgDrawdown)) || 1
|
||||||
|
|
||||||
|
// Normalize values between 0 and 1
|
||||||
|
const normalizedIndicators = sortedIndicators.map(d => ({
|
||||||
|
...d,
|
||||||
|
normPnl: d.bestPnl / maxPnl,
|
||||||
|
normWinRate: d.bestWinRate / maxWinRate,
|
||||||
|
normScore: d.bestScore / maxScore,
|
||||||
|
normFitness: d.bestFitness / maxFitness,
|
||||||
|
normSharpe: d.bestSharpe / maxSharpe,
|
||||||
|
normPnlVsHodl: d.bestPnlVsHodl / maxPnlVsHodl,
|
||||||
|
normNumPositions: d.bestNumPositions / maxNumPositions,
|
||||||
|
normAvgDrawdown: d.avgDrawdown / maxAvgDrawdown,
|
||||||
|
}))
|
||||||
|
|
||||||
|
// Create stacked bar chart data (normalized)
|
||||||
|
const barData = [
|
||||||
|
{
|
||||||
|
type: 'bar' as const,
|
||||||
|
x: normalizedIndicators.map(d => d.type),
|
||||||
|
y: normalizedIndicators.map(d => d.normPnl),
|
||||||
|
name: 'PnL',
|
||||||
|
marker: {
|
||||||
|
color: '#FF6B6B',
|
||||||
|
opacity: 0.8
|
||||||
|
},
|
||||||
|
hovertemplate:
|
||||||
|
'<b>%{x}</b><br>' +
|
||||||
|
'<b>PnL (raw):</b> $%{customdata[0]:.2f}<br>' +
|
||||||
|
'<b>Normalized:</b> %{y:.2f}<br>' +
|
||||||
|
'<b>Count:</b> %{customdata[1]}<br>' +
|
||||||
|
'<b>Best Gen:</b> %{customdata[2]}<br>' +
|
||||||
|
'<b>Phase:</b> %{customdata[3]}<br>' +
|
||||||
|
'<extra></extra>',
|
||||||
|
customdata: normalizedIndicators.map(d => [d.bestPnl, d.count, d.generation, d.phase])
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar' as const,
|
||||||
|
x: normalizedIndicators.map(d => d.type),
|
||||||
|
y: normalizedIndicators.map(d => d.normWinRate),
|
||||||
|
name: 'Win Rate',
|
||||||
|
marker: {
|
||||||
|
color: '#4ECDC4',
|
||||||
|
opacity: 0.8
|
||||||
|
},
|
||||||
|
hovertemplate:
|
||||||
|
'<b>%{x}</b><br>' +
|
||||||
|
'<b>Win Rate (raw):</b> %{customdata[0]:.1f}%<br>' +
|
||||||
|
'<b>Normalized:</b> %{y:.2f}<br>' +
|
||||||
|
'<b>Count:</b> %{customdata[1]}<br>' +
|
||||||
|
'<b>Best Gen:</b> %{customdata[2]}<br>' +
|
||||||
|
'<b>Phase:</b> %{customdata[3]}<br>' +
|
||||||
|
'<extra></extra>',
|
||||||
|
customdata: normalizedIndicators.map(d => [d.bestWinRate, d.count, d.generation, d.phase])
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar' as const,
|
||||||
|
x: normalizedIndicators.map(d => d.type),
|
||||||
|
y: normalizedIndicators.map(d => d.normScore),
|
||||||
|
name: 'Score',
|
||||||
|
marker: {
|
||||||
|
color: '#45B7D1',
|
||||||
|
opacity: 0.8
|
||||||
|
},
|
||||||
|
hovertemplate:
|
||||||
|
'<b>%{x}</b><br>' +
|
||||||
|
'<b>Score (raw):</b> %{customdata[0]:.2f}<br>' +
|
||||||
|
'<b>Normalized:</b> %{y:.2f}<br>' +
|
||||||
|
'<b>Count:</b> %{customdata[1]}<br>' +
|
||||||
|
'<b>Best Gen:</b> %{customdata[2]}<br>' +
|
||||||
|
'<b>Phase:</b> %{customdata[3]}<br>' +
|
||||||
|
'<extra></extra>',
|
||||||
|
customdata: normalizedIndicators.map(d => [d.bestScore, d.count, d.generation, d.phase])
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar' as const,
|
||||||
|
x: normalizedIndicators.map(d => d.type),
|
||||||
|
y: normalizedIndicators.map(d => d.normFitness),
|
||||||
|
name: 'Fitness',
|
||||||
|
marker: {
|
||||||
|
color: '#96CEB4',
|
||||||
|
opacity: 0.8
|
||||||
|
},
|
||||||
|
hovertemplate:
|
||||||
|
'<b>%{x}</b><br>' +
|
||||||
|
'<b>Fitness (raw):</b> %{customdata[0]:.3f}<br>' +
|
||||||
|
'<b>Normalized:</b> %{y:.2f}<br>' +
|
||||||
|
'<b>Count:</b> %{customdata[1]}<br>' +
|
||||||
|
'<b>Best Gen:</b> %{customdata[2]}<br>' +
|
||||||
|
'<b>Phase:</b> %{customdata[3]}<br>' +
|
||||||
|
'<extra></extra>',
|
||||||
|
customdata: normalizedIndicators.map(d => [d.bestFitness, d.count, d.generation, d.phase])
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar' as const,
|
||||||
|
x: normalizedIndicators.map(d => d.type),
|
||||||
|
y: normalizedIndicators.map(d => d.normSharpe),
|
||||||
|
name: 'Sharpe Ratio',
|
||||||
|
marker: {
|
||||||
|
color: '#FFD700',
|
||||||
|
opacity: 0.8
|
||||||
|
},
|
||||||
|
hovertemplate:
|
||||||
|
'<b>%{x}</b><br>' +
|
||||||
|
'<b>Sharpe Ratio (raw):</b> %{customdata[0]:.3f}<br>' +
|
||||||
|
'<b>Normalized:</b> %{y:.2f}<br>' +
|
||||||
|
'<b>Count:</b> %{customdata[1]}<br>' +
|
||||||
|
'<b>Best Gen:</b> %{customdata[2]}<br>' +
|
||||||
|
'<b>Phase:</b> %{customdata[3]}<br>' +
|
||||||
|
'<extra></extra>',
|
||||||
|
customdata: normalizedIndicators.map(d => [d.bestSharpe, d.count, d.generation, d.phase])
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar' as const,
|
||||||
|
x: normalizedIndicators.map(d => d.type),
|
||||||
|
y: normalizedIndicators.map(d => d.normPnlVsHodl),
|
||||||
|
name: 'PnL vs HODL',
|
||||||
|
marker: {
|
||||||
|
color: '#A259F7',
|
||||||
|
opacity: 0.8
|
||||||
|
},
|
||||||
|
hovertemplate:
|
||||||
|
'<b>%{x}</b><br>' +
|
||||||
|
'<b>PnL vs HODL (raw):</b> %{customdata[0]:.2f}<br>' +
|
||||||
|
'<b>Normalized:</b> %{y:.2f}<br>' +
|
||||||
|
'<b>Count:</b> %{customdata[1]}<br>' +
|
||||||
|
'<b>Best Gen:</b> %{customdata[2]}<br>' +
|
||||||
|
'<b>Phase:</b> %{customdata[3]}<br>' +
|
||||||
|
'<extra></extra>',
|
||||||
|
customdata: normalizedIndicators.map(d => [d.bestPnlVsHodl, d.count, d.generation, d.phase])
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar' as const,
|
||||||
|
x: normalizedIndicators.map(d => d.type),
|
||||||
|
y: normalizedIndicators.map(d => d.normNumPositions),
|
||||||
|
name: 'Num Positions',
|
||||||
|
marker: {
|
||||||
|
color: '#FF8C00',
|
||||||
|
opacity: 0.8
|
||||||
|
},
|
||||||
|
hovertemplate:
|
||||||
|
'<b>%{x}</b><br>' +
|
||||||
|
'<b>Num Positions (raw):</b> %{y}<br>' +
|
||||||
|
'<b>Count:</b> %{customdata[0]}<br>' +
|
||||||
|
'<b>Best Gen:</b> %{customdata[1]}<br>' +
|
||||||
|
'<b>Phase:</b> %{customdata[2]}<br>' +
|
||||||
|
'<extra></extra>',
|
||||||
|
customdata: normalizedIndicators.map(d => [d.count, d.generation, d.phase])
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar' as const,
|
||||||
|
x: normalizedIndicators.map(d => d.type),
|
||||||
|
y: normalizedIndicators.map(d => d.normAvgDrawdown),
|
||||||
|
name: 'Avg Drawdown',
|
||||||
|
marker: {
|
||||||
|
color: '#B22222',
|
||||||
|
opacity: 0.8
|
||||||
|
},
|
||||||
|
hovertemplate:
|
||||||
|
'<b>%{x}</b><br>' +
|
||||||
|
'<b>Avg Drawdown (raw):</b> %{customdata[0]:.2f}%<br>' +
|
||||||
|
'<b>Normalized:</b> %{y:.2f}<br>' +
|
||||||
|
'<b>Count:</b> %{customdata[1]}<br>' +
|
||||||
|
'<b>Best Gen:</b> %{customdata[2]}<br>' +
|
||||||
|
'<b>Phase:</b> %{customdata[3]}<br>' +
|
||||||
|
'<extra></extra>',
|
||||||
|
customdata: normalizedIndicators.map(d => [d.avgDrawdown, d.count, d.generation, d.phase])
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card bg-base-100 shadow-xl">
|
||||||
|
<div className="card-body">
|
||||||
|
<h3 className="card-title">Indicator Performance Comparison</h3>
|
||||||
|
<div className="text-sm text-gray-500 mb-4">
|
||||||
|
Stacked bar chart showing <b>normalized</b> performance metrics (0-1) for each indicator type.
|
||||||
|
Each bar represents the best performance achieved by that indicator across all generations.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Plot
|
||||||
|
data={barData}
|
||||||
|
layout={{
|
||||||
|
title: {
|
||||||
|
text: 'Indicator Performance by Metrics (Normalized 0-1)',
|
||||||
|
font: { color: '#ffffff' }
|
||||||
|
},
|
||||||
|
barmode: 'stack' as const,
|
||||||
|
xaxis: {
|
||||||
|
title: {
|
||||||
|
text: 'Indicator Type',
|
||||||
|
font: { color: '#ffffff' }
|
||||||
|
},
|
||||||
|
tickfont: { color: '#ffffff' },
|
||||||
|
gridcolor: '#374151',
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: {
|
||||||
|
text: 'Normalized Performance (0-1)',
|
||||||
|
font: { color: '#ffffff' }
|
||||||
|
},
|
||||||
|
tickfont: { color: '#ffffff' },
|
||||||
|
gridcolor: '#374151',
|
||||||
|
rangemode: 'tozero' as const, // y-axis starts at zero
|
||||||
|
autorange: true,
|
||||||
|
range: [0, 1]
|
||||||
|
},
|
||||||
|
showlegend: true,
|
||||||
|
legend: {
|
||||||
|
font: { color: '#ffffff' },
|
||||||
|
bgcolor: 'rgba(0,0,0,0)',
|
||||||
|
bordercolor: 'rgba(0,0,0,0)'
|
||||||
|
},
|
||||||
|
paper_bgcolor: theme['base-100'],
|
||||||
|
plot_bgcolor: theme['base-100'],
|
||||||
|
width: 1200,
|
||||||
|
height: 600,
|
||||||
|
margin: {
|
||||||
|
b: 100, // Extra space for x-axis labels
|
||||||
|
l: 80,
|
||||||
|
pad: 0,
|
||||||
|
r: 50,
|
||||||
|
t: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
config={{ displayModeBar: false }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Detailed indicator table */}
|
||||||
|
<div className="mt-6">
|
||||||
|
<h4 className="font-semibold mb-4">Detailed Indicator Performance:</h4>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table table-zebra w-full">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Indicator</th>
|
||||||
|
<th>Count</th>
|
||||||
|
<th>Best PnL</th>
|
||||||
|
<th>Best Win Rate</th>
|
||||||
|
<th>Best Score</th>
|
||||||
|
<th>Best Fitness</th>
|
||||||
|
<th>Sharpe Ratio</th>
|
||||||
|
<th>PnL vs HODL</th>
|
||||||
|
<th>Num Positions</th>
|
||||||
|
<th>Avg Drawdown</th>
|
||||||
|
<th>Best Gen</th>
|
||||||
|
<th>Phase</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{normalizedIndicators.map((indicator, index) => (
|
||||||
|
<tr key={indicator.type}>
|
||||||
|
<td className="font-medium">{indicator.type}</td>
|
||||||
|
<td>{indicator.count}</td>
|
||||||
|
<td className={indicator.bestPnl >= 0 ? 'text-success' : 'text-error'}>
|
||||||
|
${indicator.bestPnl.toFixed(2)} <span className="text-xs">({indicator.normPnl.toFixed(2)})</span>
|
||||||
|
</td>
|
||||||
|
<td>{indicator.bestWinRate.toFixed(1)}% <span className="text-xs">({indicator.normWinRate.toFixed(2)})</span></td>
|
||||||
|
<td>{indicator.bestScore.toFixed(2)} <span className="text-xs">({indicator.normScore.toFixed(2)})</span></td>
|
||||||
|
<td className="font-semibold">{indicator.bestFitness.toFixed(3)} <span className="text-xs">({indicator.normFitness.toFixed(2)})</span></td>
|
||||||
|
<td>{indicator.bestSharpe.toFixed(3)} <span className="text-xs">({indicator.normSharpe.toFixed(2)})</span></td>
|
||||||
|
<td>{indicator.bestPnlVsHodl.toFixed(2)} <span className="text-xs">({indicator.normPnlVsHodl.toFixed(2)})</span></td>
|
||||||
|
<td>{indicator.bestNumPositions} <span className="text-xs">({indicator.normNumPositions.toFixed(2)})</span></td>
|
||||||
|
<td>{indicator.avgDrawdown.toFixed(2)}% <span className="text-xs">({indicator.normAvgDrawdown.toFixed(2)})</span></td>
|
||||||
|
<td>{indicator.generation}</td>
|
||||||
|
<td className="badge badge-outline">{indicator.phase}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Performance summary */}
|
||||||
|
<div className="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||||
|
<div className="stat bg-base-200 rounded-lg">
|
||||||
|
<div className="stat-title">Top Performer</div>
|
||||||
|
<div className="stat-value text-lg">{normalizedIndicators[0]?.type}</div>
|
||||||
|
<div className="stat-desc">Fitness: {normalizedIndicators[0]?.bestFitness.toFixed(3)} ({normalizedIndicators[0]?.normFitness.toFixed(2)})</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="stat bg-base-200 rounded-lg">
|
||||||
|
<div className="stat-title">Best PnL</div>
|
||||||
|
<div className="stat-value text-lg">
|
||||||
|
{normalizedIndicators.reduce((max, curr) => curr.bestPnl > max.bestPnl ? curr : max).type}
|
||||||
|
</div>
|
||||||
|
<div className="stat-desc">
|
||||||
|
${normalizedIndicators.reduce((max, curr) => curr.bestPnl > max.bestPnl ? curr : max).bestPnl.toFixed(2)} ({normalizedIndicators.reduce((max, curr) => curr.bestPnl > max.bestPnl ? curr : max).normPnl.toFixed(2)})
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="stat bg-base-200 rounded-lg">
|
||||||
|
<div className="stat-title">Best Win Rate</div>
|
||||||
|
<div className="stat-value text-lg">
|
||||||
|
{normalizedIndicators.reduce((max, curr) => curr.bestWinRate > max.bestWinRate ? curr : max).type}
|
||||||
|
</div>
|
||||||
|
<div className="stat-desc">
|
||||||
|
{normalizedIndicators.reduce((max, curr) => curr.bestWinRate > max.bestWinRate ? curr : max).bestWinRate.toFixed(1)}% ({normalizedIndicators.reduce((max, curr) => curr.bestWinRate > max.bestWinRate ? curr : max).normWinRate.toFixed(2)})
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="stat bg-base-200 rounded-lg">
|
||||||
|
<div className="stat-title">Most Tested</div>
|
||||||
|
<div className="stat-value text-lg">
|
||||||
|
{normalizedIndicators.reduce((max, curr) => curr.count > max.count ? curr : max).type}
|
||||||
|
</div>
|
||||||
|
<div className="stat-desc">
|
||||||
|
{normalizedIndicators.reduce((max, curr) => curr.count > max.count ? curr : max).count} tests
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IndicatorsComparison
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Plot from 'react-plotly.js';
|
||||||
|
|
||||||
|
interface TPvsSLvsPnL3DPlotProps {
|
||||||
|
results: any[];
|
||||||
|
theme: { secondary: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
const LOOPBACK_CONFIG = {
|
||||||
|
singleIndicator: 1,
|
||||||
|
multipleIndicators: { min: 5, max: 15 },
|
||||||
|
};
|
||||||
|
|
||||||
|
const TPvsSLvsPnL3DPlot: React.FC<TPvsSLvsPnL3DPlotProps> = ({ results, theme }) => {
|
||||||
|
const plotDataTPvsSL = results.length > 0 ? [
|
||||||
|
{
|
||||||
|
type: 'scatter3d' as const,
|
||||||
|
mode: 'markers' as const,
|
||||||
|
x: results.map(r => r.individual.takeProfit),
|
||||||
|
y: results.map(r => r.individual.stopLoss),
|
||||||
|
z: results.map(r => r.backtest?.statistics?.totalPnL || 0),
|
||||||
|
marker: {
|
||||||
|
size: 5,
|
||||||
|
color: results.map(r => {
|
||||||
|
const pnl = r.backtest?.statistics?.totalPnL || 0;
|
||||||
|
return pnl > 0 ? pnl : 0;
|
||||||
|
}),
|
||||||
|
colorscale: 'RdYlGn' as const,
|
||||||
|
opacity: 0.8,
|
||||||
|
colorbar: {
|
||||||
|
title: 'PnL ($)',
|
||||||
|
titleside: 'right',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
text: results.map(r => {
|
||||||
|
const loopbackPeriod = r.individual.indicators.length === 1
|
||||||
|
? LOOPBACK_CONFIG.singleIndicator
|
||||||
|
: '5-15';
|
||||||
|
const indicatorDetails = r.individual.indicators.map((indicator: any, index: number) => {
|
||||||
|
let details = indicator.type.toString();
|
||||||
|
if (indicator.period) details += ` (${indicator.period})`;
|
||||||
|
if (indicator.fastPeriods && indicator.slowPeriods) details += ` (${indicator.fastPeriods}/${indicator.slowPeriods})`;
|
||||||
|
if (indicator.multiplier) details += ` (${indicator.multiplier.toFixed(1)}x)`;
|
||||||
|
return details;
|
||||||
|
}).join(', ');
|
||||||
|
const riskRewardRatio = r.individual.takeProfit / r.individual.stopLoss;
|
||||||
|
const riskRewardColor = riskRewardRatio >= 2 ? '🟢' : riskRewardRatio >= 1.5 ? '🟡' : '🔴';
|
||||||
|
const maxDrawdownPc = Math.abs(r.backtest?.statistics?.maxDrawdownPc || 0);
|
||||||
|
const drawdownColor = maxDrawdownPc <= 10 ? '🟢' : maxDrawdownPc <= 25 ? '🟡' : '🔴';
|
||||||
|
return `Phase: ${r.phase || 'Unknown'}<br>` +
|
||||||
|
`Gen: ${r.generation}<br>` +
|
||||||
|
`Fitness: ${r.fitness.toFixed(2)}<br>` +
|
||||||
|
`PnL: $${r.backtest?.statistics?.totalPnL?.toFixed(2) || 'N/A'}<br>` +
|
||||||
|
`Win Rate: ${r.backtest?.winRate?.toFixed(1) || 'N/A'}%<br>` +
|
||||||
|
`Max Drawdown: ${drawdownColor} ${maxDrawdownPc.toFixed(1)}%<br>` +
|
||||||
|
`SL: ${r.individual.stopLoss.toFixed(1)}%<br>` +
|
||||||
|
`TP: ${r.individual.takeProfit.toFixed(1)}%<br>` +
|
||||||
|
`R/R: ${riskRewardColor} ${riskRewardRatio.toFixed(2)}<br>` +
|
||||||
|
`Leverage: ${r.individual.leverage}x<br>` +
|
||||||
|
`Cooldown: ${r.individual.cooldownPeriod} candles<br>` +
|
||||||
|
`Max Loss Streak: ${r.individual.maxLossStreak}<br>` +
|
||||||
|
`Max Time: ${r.individual.maxPositionTimeHours}h<br>` +
|
||||||
|
`Indicators: ${indicatorDetails}<br>` +
|
||||||
|
`Loopback: ${loopbackPeriod}`;
|
||||||
|
}),
|
||||||
|
hovertemplate: '%{text}<extra></extra>',
|
||||||
|
},
|
||||||
|
] : [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Plot
|
||||||
|
data={plotDataTPvsSL}
|
||||||
|
layout={{
|
||||||
|
title: {text: 'Take Profit % vs Stop Loss % vs PnL'},
|
||||||
|
scene: {
|
||||||
|
xaxis: {title: {text: 'Take Profit (%)'}},
|
||||||
|
yaxis: {title: {text: 'Stop Loss (%)'}},
|
||||||
|
zaxis: {title: {text: 'PnL ($)'}},
|
||||||
|
},
|
||||||
|
width: 750,
|
||||||
|
height: 600,
|
||||||
|
margin: {
|
||||||
|
b: 20,
|
||||||
|
l: 0,
|
||||||
|
pad: 0,
|
||||||
|
r: 0,
|
||||||
|
t: 0,
|
||||||
|
},
|
||||||
|
paper_bgcolor: '#121212',
|
||||||
|
plot_bgcolor: theme.secondary,
|
||||||
|
}}
|
||||||
|
config={{displayModeBar: false}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TPvsSLvsPnL3DPlot;
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
import React, {useCallback, useState} from 'react'
|
import React, {useCallback, useState} from 'react'
|
||||||
import {useQuery} from '@tanstack/react-query'
|
import {useQuery} from '@tanstack/react-query'
|
||||||
import Plot from 'react-plotly.js'
|
|
||||||
import {useForm} from 'react-hook-form'
|
import {useForm} from 'react-hook-form'
|
||||||
|
|
||||||
import useApiUrlStore from '../../app/store/apiStore'
|
import useApiUrlStore from '../../app/store/apiStore'
|
||||||
@@ -24,7 +23,10 @@ import {
|
|||||||
} from '../../generated/ManagingApi'
|
} from '../../generated/ManagingApi'
|
||||||
import {Toast} from '../../components/mollecules'
|
import {Toast} from '../../components/mollecules'
|
||||||
import BacktestTable from '../../components/organism/Backtest/backtestTable'
|
import BacktestTable from '../../components/organism/Backtest/backtestTable'
|
||||||
|
import IndicatorsComparison from '../../components/organism/Charts/IndicatorsComparison'
|
||||||
import useTheme from '../../hooks/useTheme'
|
import useTheme from '../../hooks/useTheme'
|
||||||
|
import Fitness3DPlot from '../../components/organism/Charts/Fitness3DPlot'
|
||||||
|
import TPvsSLvsPnL3DPlot from '../../components/organism/Charts/TPvsSLvsPnL3DPlot'
|
||||||
|
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
// CONFIGURABLE PARAMETERS - ADJUST THESE TO CUSTOMIZE THE GENETIC ALGORITHM
|
// CONFIGURABLE PARAMETERS - ADJUST THESE TO CUSTOMIZE THE GENETIC ALGORITHM
|
||||||
@@ -2033,29 +2035,7 @@ const BacktestGenetic: React.FC = () => {
|
|||||||
<div className="card bg-base-100 shadow-xl">
|
<div className="card bg-base-100 shadow-xl">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<h3 className="card-title">Fitness vs Score vs Win Rate</h3>
|
<h3 className="card-title">Fitness vs Score vs Win Rate</h3>
|
||||||
<Plot
|
<Fitness3DPlot results={results} theme={theme} />
|
||||||
data={plotData}
|
|
||||||
layout={{
|
|
||||||
title: {text: 'Fitness Score vs Score vs Win Rate'},
|
|
||||||
scene: {
|
|
||||||
xaxis: {title: {text: 'Fitness Score'}},
|
|
||||||
yaxis: {title: {text: 'Score'}},
|
|
||||||
zaxis: {title: {text: 'Win Rate (%)'}},
|
|
||||||
},
|
|
||||||
width: 750,
|
|
||||||
height: 600,
|
|
||||||
margin: {
|
|
||||||
b: 20,
|
|
||||||
l: 0,
|
|
||||||
pad: 0,
|
|
||||||
r: 0,
|
|
||||||
t: 0,
|
|
||||||
},
|
|
||||||
paper_bgcolor: '#121212',
|
|
||||||
plot_bgcolor: theme.secondary,
|
|
||||||
}}
|
|
||||||
config={{displayModeBar: false}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -2063,33 +2043,16 @@ const BacktestGenetic: React.FC = () => {
|
|||||||
<div className="card bg-base-100 shadow-xl">
|
<div className="card bg-base-100 shadow-xl">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<h3 className="card-title">Take Profit vs Stop Loss vs PnL</h3>
|
<h3 className="card-title">Take Profit vs Stop Loss vs PnL</h3>
|
||||||
<Plot
|
<TPvsSLvsPnL3DPlot results={results} theme={theme} />
|
||||||
data={plotDataTPvsSL}
|
|
||||||
layout={{
|
|
||||||
title: {text: 'Take Profit % vs Stop Loss % vs PnL'},
|
|
||||||
scene: {
|
|
||||||
xaxis: {title: {text: 'Take Profit (%)'}},
|
|
||||||
yaxis: {title: {text: 'Stop Loss (%)'}},
|
|
||||||
zaxis: {title: {text: 'PnL ($)'}},
|
|
||||||
},
|
|
||||||
width: 750,
|
|
||||||
height: 600,
|
|
||||||
margin: {
|
|
||||||
b: 20,
|
|
||||||
l: 0,
|
|
||||||
pad: 0,
|
|
||||||
r: 0,
|
|
||||||
t: 0,
|
|
||||||
},
|
|
||||||
paper_bgcolor: '#121212',
|
|
||||||
plot_bgcolor: theme.secondary,
|
|
||||||
}}
|
|
||||||
config={{displayModeBar: false}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Strategy Comparison Radar Chart */}
|
||||||
|
<div className="mt-6">
|
||||||
|
<IndicatorsComparison results={results} />
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Results Table */}
|
{/* Results Table */}
|
||||||
<div className="card bg-base-100 shadow-xl">
|
<div className="card bg-base-100 shadow-xl">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
|
|||||||
Reference in New Issue
Block a user