Add new chart

src/Managing.WebApp/src/components/organism/Charts/Fitness3DPlot.tsx

@@ -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; 

src/Managing.WebApp/src/components/organism/Charts/IndicatorsComparison.tsx

@@ -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

src/Managing.WebApp/src/components/organism/Charts/TPvsSLvsPnL3DPlot.tsx

@@ -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; 

src/Managing.WebApp/src/pages/backtestPage/backtestGenetic.tsx

@@ -1,6 +1,5 @@
 import React, {useCallback, useState} from 'react'
 import {useQuery} from '@tanstack/react-query'
-import Plot from 'react-plotly.js'
 import {useForm} from 'react-hook-form'
 
 import useApiUrlStore from '../../app/store/apiStore'
@@ -24,7 +23,10 @@ import {
 } from '../../generated/ManagingApi'
 import {Toast} from '../../components/mollecules'
 import BacktestTable from '../../components/organism/Backtest/backtestTable'
+import IndicatorsComparison from '../../components/organism/Charts/IndicatorsComparison'
 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
@@ -2033,29 +2035,7 @@ const BacktestGenetic: React.FC = () => {
             <div className="card bg-base-100 shadow-xl">
               <div className="card-body">
                 <h3 className="card-title">Fitness vs Score vs Win Rate</h3>
-                <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}}
-                />
+                <Fitness3DPlot results={results} theme={theme} />
               </div>
             </div>
             
@@ -2063,33 +2043,16 @@ const BacktestGenetic: React.FC = () => {
             <div className="card bg-base-100 shadow-xl">
               <div className="card-body">
                 <h3 className="card-title">Take Profit vs Stop Loss vs PnL</h3>
-                <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}}
-                />
+                <TPvsSLvsPnL3DPlot results={results} theme={theme} />
               </div>
             </div>
           </div>
           
+          {/* Strategy Comparison Radar Chart */}
+          <div className="mt-6">
+            <IndicatorsComparison results={results} />
+          </div>
+          
           {/* Results Table */}
           <div className="card bg-base-100 shadow-xl">
             <div className="card-body">