items-by-period (#2)

Reviewed-on: #2
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

src/components/HistoryChart/HistoryChart.tsx

@@ -1,133 +1,13 @@
 import * as React from "react";
-import { HistoryChartProps, ChartDataPoint } from "./HistoryChart.models";
+import { HistoryChartProps } from "./HistoryChart.models";
 import HistoryChartView from "./HistoryChart.view";
-import { ReportPeriod } from "../../features/report";
-
-type DecoratedPeriod = ReportPeriod & {
-  id: string;
-  label: string;
-};
-
-const TAB_TO_KEY: Record<string, "weekly" | "monthly" | "yearly" | "fyly" | "full"> = {
-  Weekly: "weekly",
-  Monthly: "monthly",
-  Yearly: "yearly",
-  'Financial Year': "fyly",
-  'All Time': "full"
-};
-
-function getAmount(p: ReportPeriod, mode: "expense" | "income") {
-  return mode === "expense" ? p.expenses.sum : p.incomes.sum;
-}
-
-function mergeMetric(a: any, b: any) {
-  const sum = a.sum + b.sum;
-  const count = a.count + b.count;
-
-  return {
-    ...a,
-    sum,
-    count,
-    average: count > 0 ? sum / count : 0,
-    transactions: a.transactions || b.transactions
-      ? [
-          ...(a.transactions || []),
-          ...(b.transactions || [])
-        ]
-      : undefined
-  };
-}
-
-function mergeBuckets(
-  buckets: any[],
-  key: "weekly" | "monthly" | "yearly" | "fyly" | "full"
-): DecoratedPeriod[] {
-  const map = new Map<string, DecoratedPeriod>();
-
-  for (const bucket of buckets) {
-    const periods = (bucket.periods[key] || []) as DecoratedPeriod[];
-
-    for (const p of periods) {
-      const existing = map.get(p.id);
-
-      if (!existing) {
-        map.set(p.id, {
-          ...p,
-          expenses: { ...p.expenses },
-          incomes: { ...p.incomes }
-        });
-      } else {
-        map.set(p.id, {
-          ...existing,
-          expenses: mergeMetric(existing.expenses, p.expenses),
-          incomes: mergeMetric(existing.incomes, p.incomes)
-        });
-      }
-    }
-  }
-
-  return Array.from(map.values()).sort(
-    (a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()
-  );
-}
-
-function attachComparison(
-  points: ChartDataPoint[],
-  key: "weekly" | "monthly" | "yearly" | "fyly" | "full"
-): ChartDataPoint[] {
-  const getCompareIndex = (i: number) => {
-    if (key === "weekly") return i - 4;
-    if (key === "monthly") return i - 12;
-    if (key === "yearly") return i - 1;
-    if (key === "fyly") return i - 1;
-    return -1;
-  };
-
-  return points.map((p, i) => {
-    const ci = getCompareIndex(i);
-
-    return {
-      ...p,
-      compare:
-        ci >= 0 && points[ci]
-          ? {
-              id: points[ci].id,
-              label: points[ci].label,
-              amount: points[ci].amount
-            }
-          : undefined
-    };
-  });
-}
-
-function buildChartData(
-  reportData: HistoryChartProps["reportData"],
-  key: "weekly" | "monthly" | "yearly" | "fyly" | "full",
-  mode: "expense" | "income",
-  comparison: boolean
-): ChartDataPoint[] {
-  const merged = mergeBuckets(reportData.buckets, key);
-  console.log("Merged periods:", merged);
-
-  let points: ChartDataPoint[] = merged.map((p) => ({
-    id: p.id,
-    label: p.label,
-    amount: getAmount(p, mode)
-  }));
-
-  if (comparison) {
-    points = attachComparison(points, key);
-  }
-
-  return points;
-}
+import { buildChartData, tabToKey } from "./HistoryChart.adapter";
 
 export default function HistoryChart(props: HistoryChartProps) {
   const {
     tabs,
     reportData,
     mode,
-    periodType,
     comparison,
     selectedPeriodId,
     setSelectedPeriodId
@@ -136,7 +16,7 @@ export default function HistoryChart(props: HistoryChartProps) {
   const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
   const [startIndex, setStartIndex] = React.useState(0);
 
-  const activeDataKey = TAB_TO_KEY[activeTab];
+  const activeDataKey = tabToKey(activeTab);
 
   const currentData = React.useMemo(() => {
     return buildChartData(reportData, activeDataKey, mode, comparison);
@@ -184,7 +64,7 @@ export default function HistoryChart(props: HistoryChartProps) {
 
   React.useEffect(() => {
     setSelectedPeriodId(null);
-  }, [activeTab, periodType]);
+  }, [activeTab]);
 
   React.useEffect(() => {
     if (