🔨 (stacked area) small refactor

owid · Nov 11, 2024 · 736e5f6 · 736e5f6
1 parent 39438cf
commit 736e5f6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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>