From 736e5f6014256aa7e1aad49a225e4a391315056e Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Mon, 11 Nov 2024 10:02:37 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20(stacked=20area)=20small=20refac?=
 =?UTF-8?q?tor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/stackedCharts/StackedAreaChart.tsx    | 11 ++++++-----
 .../grapher/src/tooltip/TooltipContents.tsx           | 11 ++++++++---
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index ef406fc7b93..73465ea1aed 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -407,11 +407,12 @@ export class StackedAreaChart
     @computed get facetLegendHoveredSeriesName(): SeriesName | undefined {
         const { externalLegendHoverBin } = this.manager
         if (!externalLegendHoverBin) return undefined
-        const hoveredSeriesNames = this.rawSeries
-            .map((s) => s.seriesName)
-            .filter((name) => externalLegendHoverBin.contains(name))
-        // stacked area charts can't plot the same entity or column multiple times
-        return hoveredSeriesNames.length > 0 ? hoveredSeriesNames[0] : undefined
+        // stacked area charts can't plot the same entity or column multiple times,
+        // so we just find the first series that matches the hovered legend item
+        const hoveredSeries = this.rawSeries.find((series) =>
+            externalLegendHoverBin.contains(series.seriesName)
+        )
+        return hoveredSeries?.seriesName
     }
 
     @computed get focusedSeriesName(): SeriesName | undefined {
diff --git a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
index fb054654e15..8d448b47162 100644
--- a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
+++ b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
@@ -208,8 +208,13 @@ export class TooltipTable extends React.Component<TooltipTableProps> {
                             annotation,
                             values,
                             notice,
-                            swatch,
+                            swatch = {},
                         } = row
+                        const {
+                            color: swatchColor = "transparent",
+                            opacity: swatchOpacity = 1,
+                        } = swatch
+
                         const [_m, seriesName, seriesParenthetical] =
                             name.trim().match(/^(.*?)(\([^()]*\))?$/) ?? []
 
@@ -226,8 +231,8 @@ export class TooltipTable extends React.Component<TooltipTableProps> {
                                     <div
                                         className="swatch"
                                         style={{
-                                            backgroundColor: swatch?.color,
-                                            opacity: swatch?.opacity,
+                                            backgroundColor: swatchColor,
+                                            opacity: swatchOpacity,
                                         }}
                                     />
                                 </td>