From 4d1ad2902d377f37f1d05b58d06465f89559cb11 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Thu, 12 Dec 2024 15:29:41 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(slope)=20improve=20svg=20output=20?=
 =?UTF-8?q?for=20figma?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/slopeCharts/SlopeChart.tsx    | 128 ++++++++++--------
 1 file changed, 70 insertions(+), 58 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index 99314571805..c815f0d0728 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -58,7 +58,7 @@ import {
 } from "../chart/ChartUtils"
 import { AxisConfig } from "../axis/AxisConfig"
 import { VerticalAxis } from "../axis/Axis"
-import { VerticalAxisComponent } from "../axis/AxisViews"
+import { VerticalAxisComponent, VerticalAxisGridLines } from "../axis/AxisViews"
 import { NoDataSection } from "../scatterCharts/NoDataSection"
 import { CategoricalColorAssigner } from "../color/CategoricalColorAssigner"
 import { ColorScheme } from "../color/ColorScheme"
@@ -1141,7 +1141,7 @@ export class SlopeChart
 
     private renderSlopes() {
         return (
-            <>
+            <g id={makeIdForHumanConsumption("slopes")}>
                 {this.renderSeries.map((series) => (
                     <Slope
                         key={series.seriesName}
@@ -1151,7 +1151,28 @@ export class SlopeChart
                         outlineStroke={this.backgroundColor}
                     />
                 ))}
-            </>
+            </g>
+        )
+    }
+
+    private renderInteractiveSlopes(): React.ReactElement {
+        return (
+            <g
+                ref={this.slopeAreaRef}
+                onMouseMove={this.onMouseMove}
+                onTouchMove={this.onMouseMove}
+                onTouchStart={this.onMouseMove}
+                onMouseLeave={this.onMouseLeave}
+            >
+                <rect
+                    x={this.startX}
+                    y={this.bounds.y}
+                    width={this.endX - this.startX}
+                    height={this.bounds.height}
+                    fillOpacity={0}
+                />
+                {this.renderSlopes()}
+            </g>
         )
     }
 
@@ -1176,7 +1197,7 @@ export class SlopeChart
         const { xDomain, startX, endX } = this
 
         return (
-            <>
+            <g id={makeIdForHumanConsumption("horizontal-axis")}>
                 <MarkX
                     label={this.formatColumn.formatTime(xDomain[0])}
                     x={startX}
@@ -1193,32 +1214,6 @@ export class SlopeChart
                     labelPadding={this.xLabelPadding}
                     fontSize={this.yAxis.tickFontSize}
                 />
-            </>
-        )
-    }
-
-    private renderChartArea() {
-        return (
-            <g>
-                {this.renderYAxis()}
-                {this.renderXAxis()}
-                <g
-                    id={makeIdForHumanConsumption("slopes")}
-                    ref={this.slopeAreaRef}
-                    onMouseMove={this.onMouseMove}
-                    onTouchMove={this.onMouseMove}
-                    onTouchStart={this.onMouseMove}
-                    onMouseLeave={this.onMouseLeave}
-                >
-                    <rect
-                        x={this.startX}
-                        y={this.bounds.y}
-                        width={this.endX - this.startX}
-                        height={this.bounds.height}
-                        fillOpacity={0}
-                    />
-                    {this.renderSlopes()}
-                </g>
             </g>
         )
     }
@@ -1284,6 +1279,30 @@ export class SlopeChart
         )
     }
 
+    private renderInteractive(): React.ReactElement {
+        return (
+            <>
+                {this.renderYAxis()}
+                {this.renderXAxis()}
+                {this.renderInteractiveSlopes()}
+                {this.renderLineLegends()}
+                {this.renderNoDataSection()}
+                {this.tooltip}
+            </>
+        )
+    }
+
+    private renderStatic(): React.ReactElement {
+        return (
+            <>
+                {this.renderYAxis()}
+                {this.renderXAxis()}
+                {this.renderSlopes()}
+                {this.renderLineLegends()}
+            </>
+        )
+    }
+
     render() {
         if (this.failMessage)
             return (
@@ -1297,14 +1316,9 @@ export class SlopeChart
                 </>
             )
 
-        return (
-            <g>
-                {this.renderChartArea()}
-                {this.renderLineLegends()}
-                {this.renderNoDataSection()}
-                {this.tooltip}
-            </g>
-        )
+        return this.manager.isStatic
+            ? this.renderStatic()
+            : this.renderInteractive()
     }
 }
 
@@ -1334,10 +1348,7 @@ function Slope({
             : NON_FOCUSED_LINE_COLOR
 
     return (
-        <g
-            id={makeIdForHumanConsumption("slope", displayName)}
-            className="slope"
-        >
+        <g id={makeIdForHumanConsumption(displayName)} className="slope">
             {showOutline && (
                 <LineWithDots
                     startPoint={startPoint}
@@ -1409,22 +1420,16 @@ function GridLines({ bounds, yAxis }: GridLinesProps) {
             {yAxis.tickLabels.map((tick) => {
                 const y = yAxis.place(tick.value)
                 return (
-                    <g
-                        id={makeIdForHumanConsumption(
-                            "grid-line",
-                            tick.formattedValue
-                        )}
+                    <line
+                        id={makeIdForHumanConsumption(tick.formattedValue)}
                         key={tick.formattedValue}
-                    >
-                        <line
-                            x1={bounds.left + yAxis.width}
-                            y1={y}
-                            x2={bounds.right}
-                            y2={y}
-                            stroke="#ddd"
-                            strokeDasharray="3,2"
-                        />
-                    </g>
+                        x1={bounds.left + yAxis.width}
+                        y1={y}
+                        x2={bounds.right}
+                        y2={y}
+                        stroke="#ddd"
+                        strokeDasharray="3,2"
+                    />
                 )
             })}
         </g>
@@ -1448,7 +1453,14 @@ function MarkX({
 }) {
     return (
         <>
-            <line x1={x} y1={top} x2={x} y2={bottom} stroke="#999" />
+            <line
+                id={makeIdForHumanConsumption(label)}
+                x1={x}
+                y1={top}
+                x2={x}
+                y2={bottom}
+                stroke="#999"
+            />
             <text
                 x={x}
                 y={bottom + labelPadding}