RomanNum3ral
/
whisper-money
mirror of https://github.com/whisper-money/whisper-money.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(accounts): don't draw the invested overlay for a single data point 

When an investment account has cost basis (invested_amount) for only one
date — e.g. a freshly connected account whose history is backfilled with
balances but invested only for the latest point — the dashed 'invested'
overlay renders as a lone dot with nothing to connect to, which reads as a
broken chart. Only draw the overlay once there are at least two invested
points; accounts with a full invested series are unaffected.
This commit is contained in:
Víctor Falcón 2026-06-23 11:07:41 +02:00
parent 8e3871370a
commit 3418bf5e23
1 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
resources/js/components/accounts/account-balance-chart.tsx
View File

@ -601,6 +601,25 @@ export function AccountBalanceChart({
return null; return null;
}, [activeChartData, currentInvestedAmount, hasCurrencyToggle]); }, [activeChartData, currentInvestedAmount, hasCurrencyToggle]);
// A lone invested point (e.g. a freshly connected account whose history was
// backfilled with balances but cost basis only for the latest date) renders
// as a single dot with nothing to connect to. Only draw the invested
// overlay once there are at least two points to plot.
const hasInvestedSeries = useMemo(
() =>
activeChartData.filter(
(point) =>
point.invested_amount !== null &&
point.invested_amount !== undefined,
).length >= 2,
[activeChartData],
);
const showInvestedOverlay =
showInvestmentBenefits &&
activeCurrentInvestedAmount !== null &&
hasInvestedSeries;
const activeShortTrend = useMemo(() => { const activeShortTrend = useMemo(() => {
if (currencyMode !== 'user' || !hasCurrencyToggle) return shortTrend; if (currencyMode !== 'user' || !hasCurrencyToggle) return shortTrend;
const historicalData = activeChartData.filter((d) => !d.projected); const historicalData = activeChartData.filter((d) => !d.projected);
@ -1043,23 +1062,20 @@ export function AccountBalanceChart({
activeDot={{ r: 5 }} activeDot={{ r: 5 }}
fillOpacity={1} fillOpacity={1}
/> />
{showInvestmentBenefits && {showInvestedOverlay && (
activeCurrentInvestedAmount !== <Line
null && ( dataKey="invested_amount"
<Line type="monotone"
dataKey="invested_amount" stroke="var(--color-chart-6)"
type="monotone" strokeWidth={1.5}
stroke="var(--color-chart-6)" strokeDasharray="2 2"
strokeWidth={1.5} dot={false}
strokeDasharray="2 2" activeDot={{ r: 4 }}
dot={false} connectNulls
activeDot={{ r: 4 }} />
connectNulls )}
/>
)}
</AreaChart> </AreaChart>
) : showInvestmentBenefits && ) : showInvestedOverlay ? (
activeCurrentInvestedAmount !== null ? (
<ComposedChart <ComposedChart
accessibilityLayer accessibilityLayer
data={activeChartData.slice(1)} data={activeChartData.slice(1)}