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"
},