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.
This commit is contained in:
Celes Renata
2026-04-15 16:17:00 +00:00
parent 4ffde8cc06
commit 516731e69a
3 changed files with 7 additions and 7 deletions
+1 -1
View File
@@ -140,7 +140,7 @@ export function BacktestPanel() {
<Tooltip <Tooltip
contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }} contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }}
labelStyle={{ color: '#9ca3af' }} labelStyle={{ color: '#9ca3af' }}
formatter={(value: number) => [fmtUsd(value), 'Portfolio Value']} formatter={(value) => [fmtUsd(value as number), 'Portfolio Value']}
/> />
<Line <Line
type="monotone" type="monotone"
@@ -50,7 +50,7 @@ export function PerformanceCharts() {
<Tooltip <Tooltip
contentStyle={tooltipStyle} contentStyle={tooltipStyle}
labelStyle={{ color: '#9ca3af' }} labelStyle={{ color: '#9ca3af' }}
formatter={(value: number) => [`${value.toFixed(2)}%`, 'Cumulative Return']} formatter={(value) => [`${Number(value).toFixed(2)}%`, 'Cumulative Return']}
/> />
<Line <Line
type="monotone" type="monotone"
@@ -75,7 +75,7 @@ export function PerformanceCharts() {
<Tooltip <Tooltip
contentStyle={tooltipStyle} contentStyle={tooltipStyle}
labelStyle={{ color: '#9ca3af' }} 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"> <Bar dataKey="dailyReturn" name="Daily Return">
{chartData.map((entry, i) => ( {chartData.map((entry, i) => (
@@ -97,7 +97,7 @@ export function PerformanceCharts() {
<Tooltip <Tooltip
contentStyle={tooltipStyle} contentStyle={tooltipStyle}
labelStyle={{ color: '#9ca3af' }} labelStyle={{ color: '#9ca3af' }}
formatter={(value: number) => [`${value.toFixed(2)}%`, 'Drawdown']} formatter={(value) => [`${Number(value).toFixed(2)}%`, 'Drawdown']}
/> />
<Area <Area
type="monotone" type="monotone"
@@ -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 // For now, we use a typed cast since the status object may carry positions in an extended response
const positions: Position[] = useMemo(() => { const positions: Position[] = useMemo(() => {
if (!status) return []; 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[]; if (Array.isArray(raw)) return raw as Position[];
return []; return [];
}, [status]); }, [status]);
@@ -105,7 +105,7 @@ export function PortfolioComposition() {
cx="50%" cx="50%"
cy="50%" cy="50%"
outerRadius={100} outerRadius={100}
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`} label={({ name, percent }) => `${name} ${((percent ?? 0) * 100).toFixed(0)}%`}
> >
{sectorData.map((_, i) => ( {sectorData.map((_, i) => (
<Cell key={i} fill={COLORS[i % COLORS.length]} /> <Cell key={i} fill={COLORS[i % COLORS.length]} />
@@ -114,7 +114,7 @@ export function PortfolioComposition() {
<Tooltip <Tooltip
contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }} contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }}
labelStyle={{ color: '#9ca3af' }} labelStyle={{ color: '#9ca3af' }}
formatter={(value: number) => fmtUsd(value)} formatter={(value) => fmtUsd(value as number)}
/> />
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>