From db3e29630bdfdbc400dcb34d350f798f754dd03b Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Wed, 11 Dec 2024 14:03:34 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20make=20line/slope=20switching=20?=
 =?UTF-8?q?available=20to=20authors=20/=20TAS-720=20(#4207)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make line/slope chart switching available to authors by:
- adding a Slope chart toggle in the admin
- adding 'LineChart SlopeChart' as an option for the `type` column

I considered renaming the `type` column in explorers to `chartTypes` but other than consistency there is little benefit.
---
 adminSiteClient/EditorBasicTab.tsx            | 34 +++++++++++++++++++
 .../explorer/src/ExplorerProgram.ts           |  2 +-
 .../explorer/src/GrapherGrammar.ts            |  4 ++-
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/adminSiteClient/EditorBasicTab.tsx b/adminSiteClient/EditorBasicTab.tsx
index fa60a83d82d..e43ae527830 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,
@@ -414,6 +415,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 +465,13 @@ export class EditorBasicTab<
                                 (grapher.hasMapTab = shouldHaveMapTab)
                             }
                         />
+                        {grapher.isLineChart && (
+                            <Toggle
+                                label="Slope chart"
+                                value={grapher.hasSlopeChart}
+                                onValue={this.toggleSecondarySlopeChart}
+                            />
+                        )}
                     </FieldsRow>
                 </Section>
                 {!isIndicatorChart && (
diff --git a/packages/@ourworldindata/explorer/src/ExplorerProgram.ts b/packages/@ourworldindata/explorer/src/ExplorerProgram.ts
index 7d0f2a0ea24..c00007cc622 100644
--- a/packages/@ourworldindata/explorer/src/ExplorerProgram.ts
+++ b/packages/@ourworldindata/explorer/src/ExplorerProgram.ts
@@ -66,7 +66,7 @@ interface ExplorerGrapherInterface extends GrapherInterface {
     relatedQuestionText?: string
     relatedQuestionUrl?: string
     mapTargetTime?: number
-    type?: GrapherChartType | "None"
+    type?: GrapherChartType | "LineChart SlopeChart" | "None"
 }
 
 const ExplorerRootDef: CellDef = {
diff --git a/packages/@ourworldindata/explorer/src/GrapherGrammar.ts b/packages/@ourworldindata/explorer/src/GrapherGrammar.ts
index 78d6a82344a..9c12109ffd0 100644
--- a/packages/@ourworldindata/explorer/src/GrapherGrammar.ts
+++ b/packages/@ourworldindata/explorer/src/GrapherGrammar.ts
@@ -3,6 +3,7 @@ import {
     ColorSchemeName,
     FacetAxisDomain,
     FacetStrategy,
+    GRAPHER_CHART_TYPES,
     GRAPHER_TAB_OPTIONS,
     MissingDataStrategy,
     StackMode,
@@ -66,10 +67,11 @@ export const GrapherGrammar: Grammar<GrapherCellDef> = {
         description: `The type of chart to show such as LineChart or ScatterPlot. If set to None, then the chart tab is hidden.`,
         terminalOptions: toTerminalOptions([
             ...ALL_GRAPHER_CHART_TYPES,
+            `${GRAPHER_CHART_TYPES.LineChart} ${GRAPHER_CHART_TYPES.SlopeChart}`,
             "None",
         ]),
         toGrapherObject: (value) => ({
-            chartTypes: value === "None" ? [] : [value],
+            chartTypes: value === "None" ? [] : value.split(" "),
         }),
     },
     grapherId: {