From 3418bf5e23d16368229f1a2eca93d0178b290249 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20Falco=CC=81n?= <victoor89@gmail.com>
Date: Tue, 23 Jun 2026 11:07:41 +0200
Subject: [PATCH] fix(accounts): don't draw the invested overlay for a single
 data point
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../accounts/account-balance-chart.tsx        | 48 ++++++++++++-------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/resources/js/components/accounts/account-balance-chart.tsx b/resources/js/components/accounts/account-balance-chart.tsx
index 7d582c44..b09ec3a7 100644
--- a/resources/js/components/accounts/account-balance-chart.tsx
+++ b/resources/js/components/accounts/account-balance-chart.tsx
@@ -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)}