period selection

src/components/HistoryChart/HistoryChart.view.tsx

@@ -26,6 +26,8 @@ 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) {
@@ -47,6 +49,8 @@ export default function HistoryChartView(props: ViewProps) {
     startIndex,
     setStartIndex,
     activeDataKey,
+    selectedPeriodId,
+    onSelectPeriodId,
   } = props;
 
   const theme = useTheme();
@@ -159,9 +163,23 @@ export default function HistoryChartView(props: ViewProps) {
                 ? ((point.compare?.amount ?? 0) / maxAmount) * 100
                 : 0;
               const labelHeight = Math.max(currentHeight, compareHeight);
+              const isSelected = selectedPeriodId === point.id;
+              const display = formatDisplay(point, activeTab.toLowerCase(), comparison);
 
               return (
-                <Box key={point.id} sx={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", height: "100%" }}>
+                <Box
+                  key={point.id}
+                  onClick={() => onSelectPeriodId(isSelected ? null : point.id)}
+                  sx={{
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "flex-end",
+                    height: "100%",
+                    cursor: "pointer"
+                  }}
+                >
                   <Box sx={{ display: "flex", alignItems: "flex-end", gap: comparison ? 1 : 0.5, height: "100%", position: "relative" }}>
                     <Typography
                       variant="caption"
@@ -177,7 +195,7 @@ export default function HistoryChartView(props: ViewProps) {
                         fontWeight: 600
                       }}
                     >
-                      {formatDisplay(point, activeTab.toLowerCase(), comparison)}
+                      {isSelected ? `SELECTED: ${display}` : display}
                     </Typography>
 
                     {comparison && (