From b09150459532c31ca2328d7f74234796ab3c9c50 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 22 Nov 2024 16:57:55 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20(admin)=20add=20slope=20chart=20?=
 =?UTF-8?q?toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 adminSiteClient/EditorBasicTab.tsx | 38 ++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/adminSiteClient/EditorBasicTab.tsx b/adminSiteClient/EditorBasicTab.tsx
index fa60a83d82d..1f48d420f64 100644
--- a/adminSiteClient/EditorBasicTab.tsx
+++ b/adminSiteClient/EditorBasicTab.tsx
@@ -13,6 +13,7 @@ import {
     StackMode,
     ALL_GRAPHER_CHART_TYPES,
     GrapherChartType,
+    GRAPHER_CHART_TYPES,
 } from "@ourworldindata/types"
 import {
     DimensionSlot,
@@ -367,6 +368,10 @@ export class EditorBasicTab<
                 ? []
                 : [value as GrapherChartType]
 
+        if (grapher.isLineChart) {
+            this.addSlopeChart()
+        }
+
         if (grapher.isMarimekko) {
             grapher.hideRelativeToggle = false
             grapher.stackMode = StackMode.relative
@@ -414,6 +419,32 @@ export class EditorBasicTab<
         ]
     }
 
+    private addSlopeChart(): void {
+        const { grapher } = this.props.editor
+        if (grapher.hasSlopeChart) return
+        grapher.chartTypes = [
+            ...grapher.chartTypes,
+            GRAPHER_CHART_TYPES.SlopeChart,
+        ]
+    }
+
+    private removeSlopeChart(): void {
+        const { grapher } = this.props.editor
+        grapher.chartTypes = grapher.chartTypes.filter(
+            (type) => type !== GRAPHER_CHART_TYPES.SlopeChart
+        )
+    }
+
+    @action.bound toggleSecondarySlopeChart(
+        shouldHaveSlopeChart: boolean
+    ): void {
+        if (shouldHaveSlopeChart) {
+            this.addSlopeChart()
+        } else {
+            this.removeSlopeChart()
+        }
+    }
+
     render() {
         const { editor } = this.props
         const { grapher } = editor
@@ -438,6 +469,13 @@ export class EditorBasicTab<
                                 (grapher.hasMapTab = shouldHaveMapTab)
                             }
                         />
+                        {grapher.isLineChart && (
+                            <Toggle
+                                label="Slope chart"
+                                value={grapher.hasSlopeChart}
+                                onValue={this.toggleSecondarySlopeChart}
+                            />
+                        )}
                     </FieldsRow>
                 </Section>
                 {!isIndicatorChart && (