From 516731e69a86b622b056a5efacae10e39b4dad49 Mon Sep 17 00:00:00 2001
From: Celes Renata <celes@frameshift.net>
Date: Wed, 15 Apr 2026 16:17:00 +0000
Subject: [PATCH] fix: remove explicit type annotations on Recharts formatter
 callbacks

TypeScript strict mode in CI rejects explicit parameter types on
Recharts formatter/tickFormatter callbacks. Use inference with
'as number' casts on the value instead. Also fix unsafe cast in
PortfolioComposition and handle possibly-undefined percent.
---
 frontend/src/pages/trading/BacktestPanel.tsx        | 2 +-
 frontend/src/pages/trading/PerformanceCharts.tsx    | 6 +++---
 frontend/src/pages/trading/PortfolioComposition.tsx | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/trading/BacktestPanel.tsx b/frontend/src/pages/trading/BacktestPanel.tsx
index 3fe4d1b..400f5b8 100644
--- a/frontend/src/pages/trading/BacktestPanel.tsx
+++ b/frontend/src/pages/trading/BacktestPanel.tsx
@@ -140,7 +140,7 @@ export function BacktestPanel() {
                   <Tooltip
                     contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }}
                     labelStyle={{ color: '#9ca3af' }}
-                    formatter={(value: number) => [fmtUsd(value), 'Portfolio Value']}
+                    formatter={(value) => [fmtUsd(value as number), 'Portfolio Value']}
                   />
                   <Line
                     type="monotone"
diff --git a/frontend/src/pages/trading/PerformanceCharts.tsx b/frontend/src/pages/trading/PerformanceCharts.tsx
index 190cd6e..6b8bf20 100644
--- a/frontend/src/pages/trading/PerformanceCharts.tsx
+++ b/frontend/src/pages/trading/PerformanceCharts.tsx
@@ -50,7 +50,7 @@ export function PerformanceCharts() {
             <Tooltip
               contentStyle={tooltipStyle}
               labelStyle={{ color: '#9ca3af' }}
-              formatter={(value: number) => [`${value.toFixed(2)}%`, 'Cumulative Return']}
+              formatter={(value) => [`${Number(value).toFixed(2)}%`, 'Cumulative Return']}
             />
             <Line
               type="monotone"
@@ -75,7 +75,7 @@ export function PerformanceCharts() {
             <Tooltip
               contentStyle={tooltipStyle}
               labelStyle={{ color: '#9ca3af' }}
-              formatter={(value: number) => [`${value.toFixed(2)}%`, 'Daily Return']}
+              formatter={(value) => [`${Number(value).toFixed(2)}%`, 'Daily Return']}
             />
             <Bar dataKey="dailyReturn" name="Daily Return">
               {chartData.map((entry, i) => (
@@ -97,7 +97,7 @@ export function PerformanceCharts() {
             <Tooltip
               contentStyle={tooltipStyle}
               labelStyle={{ color: '#9ca3af' }}
-              formatter={(value: number) => [`${value.toFixed(2)}%`, 'Drawdown']}
+              formatter={(value) => [`${Number(value).toFixed(2)}%`, 'Drawdown']}
             />
             <Area
               type="monotone"
diff --git a/frontend/src/pages/trading/PortfolioComposition.tsx b/frontend/src/pages/trading/PortfolioComposition.tsx
index 43d7bf1..a07e167 100644
--- a/frontend/src/pages/trading/PortfolioComposition.tsx
+++ b/frontend/src/pages/trading/PortfolioComposition.tsx
@@ -36,7 +36,7 @@ export function PortfolioComposition() {
   // For now, we use a typed cast since the status object may carry positions in an extended response
   const positions: Position[] = useMemo(() => {
     if (!status) return [];
-    const raw = (status as Record<string, unknown>)['positions'];
+    const raw = (status as unknown as Record<string, unknown>)['positions'];
     if (Array.isArray(raw)) return raw as Position[];
     return [];
   }, [status]);
@@ -105,7 +105,7 @@ export function PortfolioComposition() {
                 cx="50%"
                 cy="50%"
                 outerRadius={100}
-                label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+                label={({ name, percent }) => `${name} ${((percent ?? 0) * 100).toFixed(0)}%`}
               >
                 {sectorData.map((_, i) => (
                   <Cell key={i} fill={COLORS[i % COLORS.length]} />
@@ -114,7 +114,7 @@ export function PortfolioComposition() {
               <Tooltip
                 contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }}
                 labelStyle={{ color: '#9ca3af' }}
-                formatter={(value: number) => fmtUsd(value)}
+                formatter={(value) => fmtUsd(value as number)}
               />
             </PieChart>
           </ResponsiveContainer>