feat: Add 'Today' marker on budget spending chart (#134)

## Summary

- Adds a vertical dashed reference line on the budget spending chart
indicating the current day within the period
- The marker only appears when today falls within the budget period date
range
- Adapts to both display modes: uses the day index (`Day N`) when a
previous period is shown, or the ISO date when showing a single period

## Screenshot

<!-- Add screenshot here -->
This commit is contained in:
Víctor Falcón 2026-02-19 11:48:18 +01:00 committed by GitHub
parent a2b1e91b49
commit a0d19aef81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 36 additions and 1 deletions

View File

@ -16,7 +16,7 @@ import { formatCurrency } from '@/utils/currency';
import { formatDate } from '@/utils/date';
import { __ } from '@/utils/i18n';
import { useMemo } from 'react';
import { Area, AreaChart, Line, XAxis } from 'recharts';
import { Area, AreaChart, Line, ReferenceLine, XAxis } from 'recharts';
interface Props {
currentPeriod: BudgetPeriod;
@ -217,6 +217,26 @@ export function BudgetSpendingChart({
}),
} satisfies ChartConfig;
const todayMarker = useMemo(() => {
const today = new Date();
today.setHours(0, 0, 0, 0);
const start = new Date(currentPeriod.start_date);
start.setHours(0, 0, 0, 0);
const end = new Date(currentPeriod.end_date);
end.setHours(0, 0, 0, 0);
if (today < start || today > end) {
return null;
}
if (hasPreviousPeriod) {
const diffMs = today.getTime() - start.getTime();
return Math.floor(diffMs / (1000 * 60 * 60 * 24)) + 1;
}
return today.toISOString().split('T')[0];
}, [currentPeriod, hasPreviousPeriod]);
const periodLabel = useMemo(() => {
const start = formatDate(currentPeriod.start_date, 'MMM d', locale);
const end = formatDate(currentPeriod.end_date, 'MMM d, yyyy', locale);
@ -317,6 +337,21 @@ export function BudgetSpendingChart({
}
/>
{todayMarker !== null && (
<ReferenceLine
x={todayMarker}
stroke="var(--color-foreground)"
strokeWidth={1}
strokeDasharray="4 4"
label={{
value: __('Today'),
position: 'top',
fontSize: 12,
fill: 'var(--color-muted-foreground)',
}}
/>
)}
<Area
dataKey="allocated"
type="basis"