using new state management

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