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;
}, [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(() => {
if (currencyMode !== 'user' || !hasCurrencyToggle) return shortTrend;
const historicalData = activeChartData.filter((d) => !d.projected);
@ -1043,23 +1062,20 @@ export function AccountBalanceChart({
activeDot={{ r: 5 }}
fillOpacity={1}
/>
{showInvestmentBenefits &&
activeCurrentInvestedAmount !==
null && (
<Line
dataKey="invested_amount"
type="monotone"
stroke="var(--color-chart-6)"
strokeWidth={1.5}
strokeDasharray="2 2"
dot={false}
activeDot={{ r: 4 }}
connectNulls
/>
)}
{showInvestedOverlay && (
<Line
dataKey="invested_amount"
type="monotone"
stroke="var(--color-chart-6)"
strokeWidth={1.5}
strokeDasharray="2 2"
dot={false}
activeDot={{ r: 4 }}
connectNulls
/>
)}
</AreaChart>
) : showInvestmentBenefits &&
activeCurrentInvestedAmount !== null ? (
) : showInvestedOverlay ? (
<ComposedChart
accessibilityLayer
data={activeChartData.slice(1)}