feat(accounts): add today marker on projected balance chart (#321)

## Summary

Adds a dashed 'Today' vertical reference line on the account balance
chart when a loan amortization projection is rendered. Makes it obvious
which months on the chart are historical (carry-forward of the last
recorded balance) and which are future projections.

## Context

Loan accounts extend their balance-evolution series with 12 months of
projected amortization values (see
`DashboardAnalyticsController::accountBalanceEvolution`). Without a
marker, past carry-forward months and future projected months looked
like a single continuous history.

## Changes

- `resources/js/components/accounts/account-balance-chart.tsx`
  - Import `ReferenceLine` from recharts.
  - Compute `todayMarker` (`yyyy-MM` monthly, `yyyy-MM-dd` daily).
- Render `<ReferenceLine>` inside the projected `ComposedChart` branch.
- Styling matches the budget spending chart (1px dashed, foreground
stroke, 'Today' label on top).

## Screenshots

_Visual change only — renders a dashed vertical line at the current date
on loan account charts with projection._
This commit is contained in:
Víctor Falcón 2026-04-24 12:45:51 +01:00 committed by GitHub
parent 38e1976270
commit 4b145e230b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 0 deletions

View File

@ -48,6 +48,7 @@ import {
BarChart,
ComposedChart,
Line,
ReferenceLine,
XAxis,
} from 'recharts';
@ -680,6 +681,13 @@ export function AccountBalanceChart({
[locale, granularity],
);
const todayMarker = useMemo(() => {
const now = new Date();
return granularity === 'daily'
? format(now, 'yyyy-MM-dd')
: format(now, 'yyyy-MM');
}, [granularity]);
const valueFormatter = (value: number): string => {
return formatChartCurrency(value, activeCurrencyCode, locale);
};
@ -1087,6 +1095,18 @@ export function AccountBalanceChart({
activeDot={{ r: 4 }}
connectNulls
/>
<ReferenceLine
x={todayMarker}
stroke="var(--color-foreground)"
strokeWidth={1}
strokeDasharray="4 4"
label={{
value: __('Today'),
position: 'top',
fontSize: 12,
fill: 'var(--color-muted-foreground)',
}}
/>
</ComposedChart>
) : (
<BarChart