🎉 make line/slope switching available to authors / TAS-720 (#4207)

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.
owid · Dec 11, 2024 · db3e296 · db3e296
1 parent b59dbca
commit db3e296
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 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,
@@ -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
@@ -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
@@ -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: {