fixed compare display

src/components/HistoryChart.tsx

@@ -6,6 +6,7 @@ export interface ChartDataPoint {
   amount: number;
   compareAmount?: number;
   count?: number;
+  compareLabel?: string;
   highlighted?: boolean;
 }
 
@@ -203,9 +204,17 @@ export default function HistoryChart({
                 }}
               >
                 {/* Values */}
-                <Typography variant="caption" sx={{ mb: 1, fontSize: "0.65rem" }}>
+                <Box sx={{ mb: 1, textAlign: "center" }}>
-                  {formatAmount(point.amount)}
+                  {comparison && point.compareAmount ? (
-                </Typography>
+                    <Typography variant="caption" sx={{ fontSize: "0.6rem", color: "text.secondary" }}>
+                      {formatAmount(point.compareAmount)}
+                    </Typography>
+                  ) : null}
+
+                  <Typography variant="caption" sx={{ fontSize: "0.65rem" }}>
+                    {formatAmount(point.amount)}
+                  </Typography>
+                </Box>
 
                 {/* Bars */}
                 <Box
@@ -240,18 +249,25 @@ export default function HistoryChart({
                 </Box>
 
                 {/* Label */}
-                <Typography
+                <Box sx={{ mt: 1, textAlign: "center" }}>
-                  variant="caption"
+                  {comparison && point.compareLabel && (
-                  color="text.secondary"
+                    <Typography
-                  sx={{
+                      variant="caption"
-                    mt: 1,
+                      color="text.secondary"
-                    fontSize: "0.7rem",
+                      sx={{ fontSize: "0.6rem", display: "block" }}
-                    textAlign: "center",
+                    >
-                    whiteSpace: "pre-line"
+                      {point.compareLabel}
-                  }}
+                    </Typography>
-                >
+                  )}
-                  {point.id}
+
-                </Typography>
+                  <Typography
+                    variant="caption"
+                    color="text.secondary"
+                    sx={{ fontSize: "0.7rem", display: "block" }}
+                  >
+                    {point.id}
+                  </Typography>
+                </Box>
               </Box>
             );
           })}

src/utils/dashboardLoader.ts

@@ -2,6 +2,7 @@ import { api } from "../../react-openapi";
 import { LatestItem } from "../components/LatestItemsList";
 import { ChartDataPoint } from "../components/HistoryChart";
 import * as React from "react";
+import { format } from "./dateUtils";
 import MonetizationOnIcon from "@mui/icons-material/MonetizationOn";
 
 import {
@@ -129,7 +130,10 @@ export async function fetchAggregatedData(
     arr.map((x) => ({
       id: x.label,
       amount: x.amount,
-      compareAmount: x.compare
+      compareAmount: x.compare,
+      compareLabel: x.prevStart && x.prevEnd
+        ? `${format(x.prevStart)} - ${format(x.prevEnd)}`
+        : undefined
     }));
 
   const chartData = {