src/components/HistoryChart/HistoryChart.models.ts

@@ -1,3 +1,9 @@
+import {
+  DashboardMode,
+  DashboardPeriodType,
+  DashboardSelectedPeriodId
+} from "../Dashboard";
+
 export interface _ChartDataPoint {
   id: string;
   amount: number;
@@ -18,11 +24,19 @@ export interface HistoryChartProps {
   summary?: string;
   tabs: string[];
   data: ChartData;
-  comparison: boolean;
-  setComparison: (v: boolean) => void;
   colorScheme: {
     primary: string;
     light: string;
     text: string;
   };
+
+  // State management
+  mode: DashboardMode;
+  periodType: DashboardPeriodType;
+  selectedPeriodId: DashboardSelectedPeriodId;
+  comparison: boolean;
+
+  togglePeriodType: () => void;
+  setSelectedPeriodId: (id: string | null) => void;
+  toggleComparison: () => void;
 }

src/components/HistoryChart/HistoryChart.tsx

@@ -3,7 +3,7 @@ import { ChartDataPoint, HistoryChartProps, ChartData } from "./HistoryChart.mod
 import HistoryChartView from "./HistoryChart.view";
 
 export default function HistoryChart(props: HistoryChartProps) {
-  const { tabs, data, periodType, comparison } = props;
+  const { tabs, data, mode, periodType, comparison } = props;
 
   const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
   const [startIndex, setStartIndex] = React.useState(0);
@@ -12,12 +12,8 @@ export default function HistoryChart(props: HistoryChartProps) {
 
   let rawData: ChartDataPoint[] = [];
 
-  if (activeDataKey === "daily") {
-    rawData = data.daily || [];
-  } else {
   const section = data[activeDataKey];
   rawData = section?.[periodType] || [];
-  }
 
   const currentData = rawData;
 

src/components/HistoryChart/HistoryChart.view.tsx

@@ -26,8 +26,6 @@ interface ViewProps extends HistoryChartProps {
   startIndex: number;
   setStartIndex: React.Dispatch<React.SetStateAction<number>>;
   activeDataKey: string;
-  selectedPeriodId: string | null;
-  onSelectPeriodId: (id: string | null) => void;
 }
 
 export default function HistoryChartView(props: ViewProps) {
@@ -35,11 +33,19 @@ export default function HistoryChartView(props: ViewProps) {
     header,
     summary,
     tabs,
-    periodType,
-    onPeriodTypeChange,
-    comparison,
-    setComparison,
     colorScheme,
+
+    // State management
+    mode,
+    periodType,
+    selectedPeriodId,
+    comparison,
+
+    togglePeriodType,
+    setSelectedPeriodId,
+    toggleComparison,
+
+    // HistoryChart state management
     activeTab,
     setActiveTab,
     currentData,
@@ -49,8 +55,6 @@ export default function HistoryChartView(props: ViewProps) {
     startIndex,
     setStartIndex,
     activeDataKey,
-    selectedPeriodId,
-    onSelectPeriodId,
   } = props;
 
   const theme = useTheme();
@@ -103,7 +107,7 @@ export default function HistoryChartView(props: ViewProps) {
       </ToggleButtonGroup>
 
       <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 3 }}>
-        <ToggleButtonGroup value={periodType} exclusive onChange={(_, v) => v && onPeriodTypeChange(v)} size="small">
+        <ToggleButtonGroup value={periodType} exclusive onChange={togglePeriodType} size="small">
           <ToggleButton value="rolling">Rolling</ToggleButton>
           <ToggleButton value="calendar" disabled={activeDataKey === "daily"}>
             Calendar
@@ -113,7 +117,7 @@ export default function HistoryChartView(props: ViewProps) {
         <ToggleButton
           value="compare"
           selected={comparison}
-          onChange={() => setComparison(!comparison)}
+          onChange={toggleComparison}
           size="small"
           sx={{
             textTransform: "none",
@@ -169,7 +173,7 @@ export default function HistoryChartView(props: ViewProps) {
               return (
                 <Box
                   key={point.id}
-                  onClick={() => onSelectPeriodId(isSelected ? null : point.id)}
+                  onClick={() => setSelectedPeriodId(isSelected ? null : point.id)}
                   sx={{
                     flex: 1,
                     display: "flex",