diff --git a/src/app/components/FireCalculatorForm.tsx b/src/app/components/FireCalculatorForm.tsx index 72ec911..bbb54eb 100644 --- a/src/app/components/FireCalculatorForm.tsx +++ b/src/app/components/FireCalculatorForm.tsx @@ -11,11 +11,12 @@ import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; -import { ChartContainer, ChartTooltip } from '@/components/ui/chart'; +import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'; import { Area, AreaChart, CartesianGrid, + Line, XAxis, YAxis, ReferenceLine, @@ -93,15 +94,7 @@ const tooltipRenderer = ({ active, payload }: TooltipProps) return (

{`Year: ${data.year.toString()} (Age: ${data.age.toString()})`}

- {data.balanceP50 !== undefined ? ( - <> -

{`Median Balance: ${formatNumber(data.balanceP50)}`}

-

{`10th %: ${formatNumber(data.balanceP10 ?? 0)}`}

-

{`90th %: ${formatNumber(data.balanceP90 ?? 0)}`}

- - ) : ( -

{`Balance: ${formatNumber(data.balance)}`}

- )} +

{`Median Balance: ${formatNumber(data.balanceP50 ?? data.balance)}`}

{`Monthly allowance: ${formatNumber(data.monthlyAllowance)}`}

{`Phase: ${data.phase === 'accumulation' ? 'Accumulation' : 'Retirement'}`}

@@ -113,10 +106,10 @@ const tooltipRenderer = ({ active, payload }: TooltipProps) export default function FireCalculatorForm({ initialValues, autoCalculate = false, -}: { +}: Readonly<{ initialValues?: Partial; autoCalculate?: boolean; -}) { +}>) { const [result, setResult] = useState(null); const irlYear = new Date().getFullYear(); const [copied, setCopied] = useState(false); @@ -220,7 +213,7 @@ export default function FireCalculatorForm({ const simulationMode = values.simulationMode; const volatility = values.volatility; - const numSimulations = simulationMode === 'monte-carlo' ? 500 : 1; + const numSimulations = simulationMode === 'monte-carlo' ? 2000 : 1; const simulationResults: number[][] = []; // [yearIndex][simulationIndex] -> balance // Prepare simulation runs @@ -298,9 +291,9 @@ export default function FireCalculatorForm({ // Sort to find percentiles balancesForYear.sort((a, b) => a - b); - const p10 = balancesForYear[Math.floor(numSimulations * 0.1)]; + const p10 = balancesForYear[Math.floor(numSimulations * 0.4)]; const p50 = balancesForYear[Math.floor(numSimulations * 0.5)]; - const p90 = balancesForYear[Math.floor(numSimulations * 0.9)]; + const p90 = balancesForYear[Math.floor(numSimulations * 0.6)]; // Calculate other metrics (using deterministic logic for "untouched" etc for simplicity, or p50) // We need to reconstruct the "standard" fields for compatibility with the chart @@ -402,6 +395,13 @@ export default function FireCalculatorForm({ }); }; + const isMonteCarlo = form.watch('simulationMode') === 'monte-carlo'; + const chartData = + result?.yearlyData.map((row) => ({ + ...row, + mcRange: (row.balanceP90 ?? 0) - (row.balanceP10 ?? 0), + })) ?? []; + return ( <> @@ -719,7 +719,7 @@ export default function FireCalculatorForm({ Simulation Mode - +