diff --git a/src/app/components/FireCalculatorForm.tsx b/src/app/components/FireCalculatorForm.tsx index d6bf676..3c4e4ec 100644 --- a/src/app/components/FireCalculatorForm.tsx +++ b/src/app/components/FireCalculatorForm.tsx @@ -175,7 +175,6 @@ export default function FireCalculatorForm() { // Simulate retirement phase for chart data (using 4% withdrawal adjusted for inflation) let simulationCapital = currentCapital; let simulationAge = retirementAge; - let simulationAllowance = finalInflationAdjustedAllowance!; // Mark retirement phase in existing data yearlyData.forEach((data) => { @@ -214,7 +213,6 @@ export default function FireCalculatorForm() { while (age < lifeExpectancy && iterations < maxIterations) { // Simulate one year of saving and growth - let yearStartCapital = currentCapital; for (let month = 0; month < 12; month++) { currentCapital += monthlySavings; currentCapital *= 1 + monthlyGrowthRate; @@ -238,16 +236,12 @@ export default function FireCalculatorForm() { // Simulate retirement phase to check sufficiency while (testAge < lifeExpectancy) { - let yearlyStartCapital = testCapital; - let yearlyGrowth = 0; - let yearlyWithdrawal = 0; + const yearlyStartCapital = testCapital; for (let month = 0; month < 12; month++) { - let withdrawal = testAllowance; - yearlyWithdrawal += withdrawal; + const withdrawal = testAllowance; testCapital -= withdrawal; - let growth = testCapital * monthlyGrowthRate; - yearlyGrowth += growth; + const growth = testCapital * monthlyGrowthRate; testCapital += growth; // Apply growth *after* withdrawal for the month testAllowance *= 1 + monthlyInflationRate; // Inflate allowance for next month } diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx index a05c72b..ddb4e09 100644 --- a/src/components/ui/chart.tsx +++ b/src/components/ui/chart.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unsafe-assignment */ "use client"; import * as React from "react"; @@ -8,15 +9,16 @@ import { cn } from "@/lib/utils"; // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const; -export type ChartConfig = { - [k in string]: { +export type ChartConfig = Record< + string, + { label?: React.ReactNode; icon?: React.ComponentType; } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } - ); -}; + ) +>; type ChartContextProps = { config: ChartConfig; @@ -47,7 +49,7 @@ function ChartContainer({ >["children"]; }) { const uniqueId = React.useId(); - const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`; + const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`; return ( @@ -71,7 +73,7 @@ function ChartContainer({ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( - ([, config]) => config.theme || config.color, + ([, config]) => config.theme ?? config.color, ); if (!colorConfig.length) { @@ -88,7 +90,7 @@ ${prefix} [data-chart=${id}] { ${colorConfig .map(([key, itemConfig]) => { const color = - itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || + itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color; return color ? ` --color-${key}: ${color};` : null; }) @@ -134,11 +136,11 @@ function ChartTooltipContent({ } const [item] = payload; - const key = `${labelKey || item?.dataKey || item?.name || "value"}`; + const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`; const itemConfig = getPayloadConfigFromPayload(config, item, key); const value = !labelKey && typeof label === "string" - ? config[label as keyof typeof config]?.label || label + ? (config[label]?.label ?? label) : itemConfig?.label; if (labelFormatter) { @@ -180,9 +182,11 @@ function ChartTooltipContent({ {!nestLabel ? tooltipLabel : null}
{payload.map((item, index) => { - const key = `${nameKey || item.name || item.dataKey || "value"}`; + const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`; const itemConfig = getPayloadConfigFromPayload(config, item, key); - const indicatorColor = color || item.payload.fill || item.color; + const indicatorColor: string | undefined = + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + color ?? item.payload.fill ?? item.color; return (
{formatter && item?.value !== undefined && item.name ? ( + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument formatter(item.value, item.name, item, index, item.payload) ) : ( <> @@ -229,7 +234,7 @@ function ChartTooltipContent({
{nestLabel ? tooltipLabel : null} - {itemConfig?.label || item.name} + {itemConfig?.label ?? item.name}
{item.value && ( @@ -276,7 +281,8 @@ function ChartLegendContent({ )} > {payload.map((item) => { - const key = `${nameKey || item.dataKey || "value"}`; + // eslint-disable-next-line @typescript-eslint/restrict-template-expressions + const key = `${nameKey ?? item.dataKey ?? "value"}`; const itemConfig = getPayloadConfigFromPayload(config, item, key); return ( @@ -338,9 +344,7 @@ function getPayloadConfigFromPayload( ] as string; } - return configLabelKey in config - ? config[configLabelKey] - : config[key as keyof typeof config]; + return configLabelKey in config ? config[configLabelKey] : config[key]; } export {