🎉 (admin) add slope chart toggle

owid · Nov 25, 2024 · ff0d87e · ff0d87e
1 parent 85e664c
commit ff0d87e
Showing 1 changed file with 38 additions and 0 deletions.
diff --git 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 && (