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:
parent
38e1976270
commit
4b145e230b
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue