rolling and calender toggle

src/components/HistoryChart.tsx

@@ -13,6 +13,8 @@ export interface HistoryChartProps {
   summary?: string;
   tabs: string[];
   data: Record<string, ChartDataPoint[]>;
+  period: "rolling" | "calendar",
+  onPeriodChange: (mode: "rolling" | "calendar") => void;
 }
 
 export default function HistoryChart({
@@ -20,6 +22,8 @@ export default function HistoryChart({
   summary,
   tabs,
   data,
+  period,
+  onPeriodChange,
 }: HistoryChartProps) {
   const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
 
@@ -102,6 +106,22 @@ export default function HistoryChart({
         ))}
       </ToggleButtonGroup>
 
+      <ToggleButtonGroup
+        value={period}
+        exclusive
+        onChange={(_, v) => v && onPeriodChange(v)}
+        size="small"
+        sx={{ mb: 2 }}
+      >
+        <ToggleButton value="rolling">Rolling</ToggleButton>
+        <ToggleButton
+          value="calendar"
+          disabled={activeTab.toLowerCase() === "daily"}
+        >
+          Calendar
+        </ToggleButton>
+      </ToggleButtonGroup>
+
       {/* Chart Area */}
       {currentData.length > 0 ? (
         <Box sx={{ display: "flex", alignItems: "flex-end", height: 200, mt: 4, position: 'relative' }}>