diff --git a/src/components/reports/CategoryOverTimeChart.tsx b/src/components/reports/CategoryOverTimeChart.tsx index 184b464..7941c53 100644 --- a/src/components/reports/CategoryOverTimeChart.tsx +++ b/src/components/reports/CategoryOverTimeChart.tsx @@ -27,7 +27,7 @@ function formatMonth(month: string): string { return date.toLocaleDateString("default", { month: "short", year: "2-digit" }); } -export type CategoryOverTimeChartType = "line" | "area"; +export type CategoryOverTimeChartType = "bar" | "area"; interface CategoryOverTimeChartProps { data: CategoryOverTimeData; @@ -37,10 +37,10 @@ interface CategoryOverTimeChartProps { onViewDetails: (item: CategoryBreakdownItem) => void; showAmounts?: boolean; /** - * Visual rendering mode. `line` (default) keeps the legacy stacked bars — - * preserved for backward compatibility. `area` stacks Recharts layers - * (stackId="1") showing total composition over time. Both modes share the - * same palette and SVG grayscale patterns (existing signature visual). + * Visual rendering mode. `bar` (default) keeps the legacy stacked-bar + * composition. `area` stacks Recharts layers (stackId="1") for a + * smoother flow view. Both modes share the same palette and SVG grayscale + * patterns (existing signature visual). */ chartType?: CategoryOverTimeChartType; } @@ -52,7 +52,7 @@ export default function CategoryOverTimeChart({ onShowAll, onViewDetails, showAmounts, - chartType = "line", + chartType = "bar", }: CategoryOverTimeChartProps) { const { t } = useTranslation(); const hoveredRef = useRef(null); diff --git a/src/components/reports/TrendsChartTypeToggle.test.ts b/src/components/reports/TrendsChartTypeToggle.test.ts index 810570d..7584a09 100644 --- a/src/components/reports/TrendsChartTypeToggle.test.ts +++ b/src/components/reports/TrendsChartTypeToggle.test.ts @@ -21,13 +21,18 @@ describe("readTrendsChartType", () => { vi.stubGlobal("localStorage", mockLocalStorage); }); - it("returns 'line' fallback when key is missing", () => { - expect(readTrendsChartType()).toBe("line"); + it("returns 'bar' fallback when key is missing", () => { + expect(readTrendsChartType()).toBe("bar"); }); - it("returns 'line' when stored value is 'line'", () => { + it("returns 'bar' when stored value is 'bar'", () => { + store.set(TRENDS_CHART_TYPE_STORAGE_KEY, "bar"); + expect(readTrendsChartType()).toBe("bar"); + }); + + it("migrates legacy 'line' stored value to 'bar'", () => { store.set(TRENDS_CHART_TYPE_STORAGE_KEY, "line"); - expect(readTrendsChartType()).toBe("line"); + expect(readTrendsChartType()).toBe("bar"); }); it("returns 'area' when stored value is 'area'", () => { diff --git a/src/components/reports/TrendsChartTypeToggle.tsx b/src/components/reports/TrendsChartTypeToggle.tsx index 1229214..a1c54b0 100644 --- a/src/components/reports/TrendsChartTypeToggle.tsx +++ b/src/components/reports/TrendsChartTypeToggle.tsx @@ -1,6 +1,6 @@ import { useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { LineChart as LineIcon, AreaChart as AreaIcon } from "lucide-react"; +import { BarChart3 as BarIcon, AreaChart as AreaIcon } from "lucide-react"; import type { CategoryOverTimeChartType } from "./CategoryOverTimeChart"; export const TRENDS_CHART_TYPE_STORAGE_KEY = "reports-trends-category-charttype"; @@ -14,11 +14,13 @@ export interface TrendsChartTypeToggleProps { export function readTrendsChartType( storageKey: string = TRENDS_CHART_TYPE_STORAGE_KEY, - fallback: CategoryOverTimeChartType = "line", + fallback: CategoryOverTimeChartType = "bar", ): CategoryOverTimeChartType { if (typeof localStorage === "undefined") return fallback; const saved = localStorage.getItem(storageKey); - return saved === "line" || saved === "area" ? saved : fallback; + // Back-compat: "line" was the historical key for the bar chart. + if (saved === "line") return "bar"; + return saved === "bar" || saved === "area" ? saved : fallback; } export default function TrendsChartTypeToggle({ @@ -33,7 +35,7 @@ export default function TrendsChartTypeToggle({ }, [value, storageKey]); const options: { type: CategoryOverTimeChartType; icon: React.ReactNode; label: string }[] = [ - { type: "line", icon: , label: t("reports.trends.chartLine") }, + { type: "bar", icon: , label: t("reports.trends.chartBar") }, { type: "area", icon: , label: t("reports.trends.chartArea") }, ]; diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index bda1312..afe5f30 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -361,7 +361,7 @@ "trends": { "subviewGlobal": "Global flow", "subviewByCategory": "By category", - "chartLine": "Lines", + "chartBar": "Bars", "chartArea": "Stacked area", "chartTypeAria": "Chart type" }, diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json index 7dcc25a..a64e1d2 100644 --- a/src/i18n/locales/fr.json +++ b/src/i18n/locales/fr.json @@ -361,7 +361,7 @@ "trends": { "subviewGlobal": "Flux global", "subviewByCategory": "Par catégorie", - "chartLine": "Lignes", + "chartBar": "Barres", "chartArea": "Surface empilée", "chartTypeAria": "Type de graphique" },