diff --git a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx index fc48ef588fb..4a79ebb92f5 100644 --- a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx +++ b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx @@ -35,8 +35,6 @@ export class ContentSwitchers extends React.Component<{ return this.manager.type ?? ChartTypeName.LineChart } - private previousChartIcon: JSX.Element | undefined - private tabIcon(tab: GrapherTabOption): JSX.Element { const { manager } = this switch (tab) { @@ -48,17 +46,7 @@ export class ContentSwitchers extends React.Component<{ const chartIcon = manager.isLineChartThatTurnedIntoDiscreteBar ? chartIcons[ChartTypeName.DiscreteBar] : chartIcons[this.chartType] - // If we're switching from a line chart to the map, then the timeline - // is automatically set to a single year, and the underlying chart switches to - // a discrete bar chart, which makes the line chart icon change into a bar chart icon. - // To prevent that, we hold onto the previous chart icon if we're not currently on the chart tab. - const newChartIcon = - this.previousChartIcon && - manager.tab !== GrapherTabOption.chart - ? this.previousChartIcon - : chartIcon - this.previousChartIcon = newChartIcon - return newChartIcon + return chartIcon } } diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx index 98e8cf46123..6c716680593 100644 --- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx +++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx @@ -1594,7 +1594,19 @@ export class Grapher } @computed get isLineChartThatTurnedIntoDiscreteBar(): boolean { - return this.isLineChart && this.areHandlesOnSameTime + if (!this.isLineChart) return false + + // This is the easy case: minTime and maxTime are the same, no need to do + // more fancy checks + if (this.minTime === this.maxTime) return true + + // We can have cases where minTime = Infinity and/or maxTime = -Infinity, + // but still only a single year is selected. + // To check for that we need to look at the times array. + const times = this.tableAfterAuthorTimelineFilter.timeColumn.uniqValues + const minTime = findClosestTime(times, this.minTime ?? -Infinity) + const maxTime = findClosestTime(times, this.maxTime ?? Infinity) + return minTime !== undefined && minTime === maxTime } @computed get supportsMultipleYColumns(): boolean {