✨ (line+slope) hide outlines for background series

owid · Dec 12, 2024 · 9691515 · 9691515
1 parent 8eb3328
commit 9691515
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 28 deletions.
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -186,6 +186,7 @@ class Lines extends React.Component<LinesProps> {
         const strokeOpacity =
             hover.background && !focus.background ? GRAPHER_OPACITY_MUTE : 1
 
+        const showOutline = !focus.background || hover.active
         const outlineColor =
             this.props.backgroundColor ?? GRAPHER_BACKGROUND_DEFAULT
         const outlineWidth = strokeWidth + this.lineOutlineWidth * 2
@@ -199,36 +200,30 @@ class Lines extends React.Component<LinesProps> {
             />
         )
 
-        if (this.props.multiColor) {
-            return (
-                <>
-                    {outline}
-                    <MultiColorPolyline
-                        id={makeIdForHumanConsumption(
-                            "multicolor-line",
-                            series.seriesName
-                        )}
-                        points={series.placedPoints}
-                        strokeLinejoin="round"
-                        strokeWidth={strokeWidth}
-                        strokeDasharray={strokeDasharray}
-                        strokeOpacity={strokeOpacity}
-                    />
-                </>
-            )
-        }
+        const line = this.props.multiColor ? (
+            <MultiColorPolyline
+                id={makeIdForHumanConsumption("line", series.seriesName)}
+                points={series.placedPoints}
+                strokeLinejoin="round"
+                strokeWidth={strokeWidth}
+                strokeDasharray={strokeDasharray}
+                strokeOpacity={strokeOpacity}
+            />
+        ) : (
+            <LinePath
+                id={makeIdForHumanConsumption("line", series.seriesName)}
+                placedPoints={series.placedPoints}
+                stroke={color}
+                strokeWidth={strokeWidth}
+                strokeOpacity={strokeOpacity}
+                strokeDasharray={strokeDasharray}
+            />
+        )
 
         return (
             <>
-                {outline}
-                <LinePath
-                    id={makeIdForHumanConsumption("line", series.seriesName)}
-                    placedPoints={series.placedPoints}
-                    stroke={color}
-                    strokeWidth={strokeWidth}
-                    strokeOpacity={strokeOpacity}
-                    strokeDasharray={strokeDasharray}
-                />
+                {showOutline && outline}
+                {line}
             </>
         )
     }

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -1325,7 +1325,7 @@ function Slope({
 }: SlopeProps) {
     const { displayName, startPoint, endPoint, hover, focus } = series
 
-    const showOutline = !hover.background
+    const showOutline = !focus.background || hover.active
     const opacity =
         hover.background && !focus.background ? GRAPHER_OPACITY_MUTE : 1
     const color =