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