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 && (
+
+ )}
{!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 = {
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: {