diff --git a/src/components/HistoryChart.tsx b/src/components/HistoryChart.tsx index aca864e..403e20c 100644 --- a/src/components/HistoryChart.tsx +++ b/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 */} - - {formatAmount(point.amount)} - + + {comparison && point.compareAmount ? ( + + {formatAmount(point.compareAmount)} + + ) : null} + + + {formatAmount(point.amount)} + + {/* Bars */} {/* Label */} - - {point.id} - + + {comparison && point.compareLabel && ( + + {point.compareLabel} + + )} + + + {point.id} + + ); })} diff --git a/src/utils/dashboardLoader.ts b/src/utils/dashboardLoader.ts index 5db42c3..ea65298 100644 --- a/src/utils/dashboardLoader.ts +++ b/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 = {