✨ make unfocused lines a little thinner

owid · Dec 13, 2024 · b63e1c0 · b63e1c0
1 parent 8192fca
commit b63e1c0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -182,7 +182,10 @@ class Lines extends React.Component<LinesProps> {
                 : NON_FOCUSED_LINE_COLOR
 
         const strokeDasharray = series.isProjection ? "2,3" : undefined
-        const strokeWidth = hover.background ? 1 : this.strokeWidth
+        const strokeWidth =
+            hover.background || focus.background
+                ? this.strokeWidth - 0.33 * this.strokeWidth
+                : this.strokeWidth
         const strokeOpacity =
             hover.background && !focus.background ? GRAPHER_OPACITY_MUTE : 1
 
@@ -196,7 +199,7 @@ class Lines extends React.Component<LinesProps> {
                 id={makeIdForHumanConsumption("outline", series.seriesName)}
                 placedPoints={series.placedPoints}
                 stroke={outlineColor}
-                strokeWidth={outlineWidth}
+                strokeWidth={outlineWidth.toFixed(1)}
             />
         )
 
@@ -206,7 +209,7 @@ class Lines extends React.Component<LinesProps> {
                     id={makeIdForHumanConsumption("line", series.seriesName)}
                     points={series.placedPoints}
                     strokeLinejoin="round"
-                    strokeWidth={strokeWidth}
+                    strokeWidth={strokeWidth.toFixed(1)}
                     strokeDasharray={strokeDasharray}
                     strokeOpacity={strokeOpacity}
                 />
@@ -215,7 +218,7 @@ class Lines extends React.Component<LinesProps> {
                     id={makeIdForHumanConsumption("line", series.seriesName)}
                     placedPoints={series.placedPoints}
                     stroke={color}
-                    strokeWidth={strokeWidth}
+                    strokeWidth={strokeWidth.toFixed(1)}
                     strokeOpacity={strokeOpacity}
                     strokeDasharray={strokeDasharray}
                 />

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -1332,6 +1332,10 @@ function Slope({
         !focus.background || hover.active
             ? series.color
             : NON_FOCUSED_LINE_COLOR
+    const lineWidth =
+        hover.background || focus.background
+            ? strokeWidth - 0.33 * strokeWidth
+            : strokeWidth
 
     return (
         <g
@@ -1344,15 +1348,15 @@ function Slope({
                     endPoint={endPoint}
                     radius={dotRadius}
                     color={outlineStroke}
-                    lineWidth={strokeWidth + 2 * outlineWidth}
+                    lineWidth={lineWidth + 2 * outlineWidth}
                 />
             )}
             <LineWithDots
                 startPoint={startPoint}
                 endPoint={endPoint}
                 radius={dotRadius}
                 color={color}
-                lineWidth={strokeWidth}
+                lineWidth={lineWidth}
                 opacity={opacity}
             />
         </g>
@@ -1392,7 +1396,7 @@ function LineWithDots({
             d={`${startDotPath} ${endDotPath} ${linePath}`}
             fill={color}
             stroke={color}
-            strokeWidth={lineWidth}
+            strokeWidth={lineWidth.toFixed(1)}
             opacity={opacity}
         />
     )