From f63bed0d5d6bcdf86c592346281889f8be51dcf6 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 22 Nov 2024 16:01:57 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(slope)=20visual=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/slopeCharts/SlopeChart.tsx    | 106 +++++++++++++++---
 1 file changed, 91 insertions(+), 15 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index 57f0e0f2fcb..d4bcdd2ae80 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { SVGProps } from "react"
 import {
     Bounds,
     DEFAULT_BOUNDS,
@@ -20,6 +20,7 @@ import { observer } from "mobx-react"
 import { NoDataModal } from "../noDataModal/NoDataModal"
 import {
     BASE_FONT_SIZE,
+    GRAPHER_BACKGROUND_DEFAULT,
     GRAPHER_DARK_TEXT,
     GRAPHER_FONT_SCALE_12,
 } from "../core/GrapherConstants"
@@ -72,6 +73,10 @@ import {
     getColorKey,
     getSeriesName,
 } from "../lineCharts/lineChartHelpers"
+import {
+    DEFAULT_LINE_OUTLINE_WIDTH,
+    DEFAULT_STROKE_WIDTH,
+} from "../lineCharts/LineChart"
 
 type SVGMouseOrTouchEvent =
     | React.MouseEvent<SVGGElement>
@@ -601,6 +606,15 @@ export class SlopeChart
         this.onSlopeMouseLeave()
     }
 
+    @computed private get lineStrokeWidth(): number {
+        const factor = this.manager.isStaticAndSmall ? 2 : 1
+        return factor * 2
+    }
+
+    @computed private get backgroundColor(): string {
+        return this.manager.backgroundColor ?? GRAPHER_BACKGROUND_DEFAULT
+    }
+
     @computed get renderUid(): number {
         return guid()
     }
@@ -697,6 +711,9 @@ export class SlopeChart
                 series={series}
                 color={series.color}
                 mode={mode}
+                strokeWidth={this.lineStrokeWidth}
+                outlineWidth={0.25}
+                outlineStroke={this.backgroundColor}
             />
         )
     }
@@ -809,6 +826,10 @@ interface SlopeProps {
     series: PlacedSlopeChartSeries
     color: string
     mode?: RenderMode
+    dotRadius?: number
+    strokeWidth?: number
+    outlineWidth?: number
+    outlineStroke?: string
     onMouseOver?: (series: SlopeChartSeries) => void
     onMouseLeave?: () => void
 }
@@ -817,16 +838,20 @@ function Slope({
     series,
     color,
     mode = RenderMode.default,
+    dotRadius = 3.5,
+    strokeWidth = 2,
+    outlineWidth = 0.5,
+    outlineStroke = "#fff",
     onMouseOver,
     onMouseLeave,
 }: SlopeProps) {
     const { seriesName, startPoint, endPoint } = series
 
-    const usedColor = {
-        [RenderMode.default]: color,
-        [RenderMode.focus]: color,
-        [RenderMode.mute]: "#e2e2e2",
-        [RenderMode.background]: "#e2e2e2",
+    const opacity = {
+        [RenderMode.default]: 1,
+        [RenderMode.focus]: 1,
+        [RenderMode.mute]: 0.3,
+        [RenderMode.background]: 0.3,
     }[mode]
 
     return (
@@ -835,22 +860,72 @@ function Slope({
             onMouseOver={() => onMouseOver?.(series)}
             onMouseLeave={() => onMouseLeave?.()}
         >
+            <HaloLine
+                startPoint={startPoint}
+                endPoint={endPoint}
+                stroke={color}
+                strokeWidth={strokeWidth}
+                outlineWidth={outlineWidth}
+                outlineStroke={outlineStroke}
+                opacity={opacity}
+            />
+            <circle
+                cx={startPoint.x}
+                cy={startPoint.y}
+                r={dotRadius}
+                fill={color}
+                fillOpacity={opacity}
+                stroke={outlineStroke}
+                strokeWidth={outlineWidth}
+            />
+            <circle
+                cx={endPoint.x}
+                cy={endPoint.y}
+                r={dotRadius}
+                fill={color}
+                fillOpacity={opacity}
+                stroke={outlineStroke}
+                strokeWidth={outlineWidth}
+            />
+        </g>
+    )
+}
+
+interface HaloLineProps extends SVGProps<SVGLineElement> {
+    startPoint: PointVector
+    endPoint: PointVector
+    strokeWidth?: number
+    outlineWidth?: number
+    outlineStroke?: string
+}
+
+function HaloLine(props: HaloLineProps): React.ReactElement {
+    const {
+        startPoint,
+        endPoint,
+        outlineWidth = 0.5,
+        outlineStroke = "#fff",
+        ...styleProps
+    } = props
+    return (
+        <>
             <line
                 x1={startPoint.x}
                 y1={startPoint.y}
                 x2={endPoint.x}
                 y2={endPoint.y}
-                stroke={usedColor}
-                strokeWidth={4}
+                {...styleProps}
+                stroke={outlineStroke}
+                strokeWidth={(props.strokeWidth ?? 1) + 2 * outlineWidth}
             />
-            <circle
-                cx={startPoint.x}
-                cy={startPoint.y}
-                r={4}
-                fill={usedColor}
+            <line
+                x1={startPoint.x}
+                y1={startPoint.y}
+                x2={endPoint.x}
+                y2={endPoint.y}
+                {...styleProps}
             />
-            <circle cx={endPoint.x} cy={endPoint.y} r={4} fill={usedColor} />
-        </g>
+        </>
     )
 }
 
@@ -921,6 +996,7 @@ function MarkX({
                 textAnchor="middle"
                 fill={GRAPHER_DARK_TEXT}
                 fontSize={fontSize}
+                fontWeight={600}
             >
                 {label}
             </text>