✨ disallow log y-scale for discrete bar charts

owid · Jan 14, 2025 · bb5d2e4 · bb5d2e4
1 parent b4f1878
commit bb5d2e4
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 53 deletions.
diff --git a/adminSiteClient/EditorCustomizeTab.tsx b/adminSiteClient/EditorCustomizeTab.tsx
@@ -619,19 +619,21 @@ export class EditorCustomizeTab<
                                         />
                                     </FieldsRow>
                                 )}
-                                <FieldsRow>
-                                    <Toggle
-                                        label={`Enable log/linear selector`}
-                                        value={
-                                            yAxisConfig.canChangeScaleType ||
-                                            false
-                                        }
-                                        onValue={(value) =>
-                                            (yAxisConfig.canChangeScaleType =
-                                                value || undefined)
-                                        }
-                                    />
-                                </FieldsRow>
+                                {features.canEnableLogLinearToggle && (
+                                    <FieldsRow>
+                                        <Toggle
+                                            label={`Enable log/linear selector`}
+                                            value={
+                                                yAxisConfig.canChangeScaleType ||
+                                                false
+                                            }
+                                            onValue={(value) =>
+                                                (yAxisConfig.canChangeScaleType =
+                                                    value || undefined)
+                                            }
+                                        />
+                                    </FieldsRow>
+                                )}
                             </React.Fragment>
                         )}
                         {features.canCustomizeYAxisLabel && (
@@ -704,19 +706,21 @@ export class EditorCustomizeTab<
                                         />
                                     </FieldsRow>
                                 )}
-                                <FieldsRow>
-                                    <Toggle
-                                        label={`Enable log/linear selector`}
-                                        value={
-                                            xAxisConfig.canChangeScaleType ||
-                                            false
-                                        }
-                                        onValue={(value) =>
-                                            (xAxisConfig.canChangeScaleType =
-                                                value || undefined)
-                                        }
-                                    />
-                                </FieldsRow>
+                                {features.canEnableLogLinearToggle && (
+                                    <FieldsRow>
+                                        <Toggle
+                                            label={`Enable log/linear selector`}
+                                            value={
+                                                xAxisConfig.canChangeScaleType ||
+                                                false
+                                            }
+                                            onValue={(value) =>
+                                                (xAxisConfig.canChangeScaleType =
+                                                    value || undefined)
+                                            }
+                                        />
+                                    </FieldsRow>
+                                )}
                             </React.Fragment>
                         )}
                         {features.canCustomizeXAxisLabel && (

diff --git a/adminSiteClient/EditorFeatures.tsx b/adminSiteClient/EditorFeatures.tsx
@@ -47,6 +47,10 @@ export class EditorFeatures {
         return this.grapher.isScatter
     }
 
+    @computed get canEnableLogLinearToggle() {
+        return !this.grapher.isDiscreteBar && !this.grapher.isStackedDiscreteBar
+    }
+
     @computed get timeDomain() {
         return !this.grapher.isDiscreteBar
     }

diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -123,9 +123,6 @@ export class DiscreteBarChart
         // TODO: remove this filter once we don't have mixed type columns in datasets
         table = table.replaceNonNumericCellsWithErrorValues(this.yColumnSlugs)
 
-        if (this.isLogScale)
-            table = table.replaceNonPositiveCellsForLogScale(this.yColumnSlugs)
-
         table = table.dropRowsWithErrorValuesForAllColumns(this.yColumnSlugs)
 
         this.yColumnSlugs.forEach((slug) => {
@@ -162,10 +159,6 @@ export class DiscreteBarChart
         return this.manager.endTime
     }
 
-    @computed private get isLogScale(): boolean {
-        return this.yAxisConfig.scaleType === ScaleType.log
-    }
-
     @computed private get bounds(): Bounds {
         return (this.props.bounds ?? DEFAULT_BOUNDS).padRight(10)
     }
@@ -253,10 +246,7 @@ export class DiscreteBarChart
     }
 
     @computed private get x0(): number {
-        if (!this.isLogScale) return 0
-
-        const minValue = min(this.series.map((d) => d.value))
-        return minValue !== undefined ? Math.min(1, minValue) : 1
+        return 0
     }
 
     // Now we can work out the main x axis scale
@@ -294,6 +284,7 @@ export class DiscreteBarChart
         const axis = this.yAxisConfig.toHorizontalAxis()
         axis.updateDomainPreservingUserSettings(this.xDomainDefault)
 
+        axis.scaleType = ScaleType.linear
         axis.formatColumn = this.yColumns[0] // todo: does this work for columns as series?
         axis.range = this.xRange
         axis.label = ""
@@ -520,21 +511,19 @@ export class DiscreteBarChart
                 {this.showColorLegend && (
                     <HorizontalNumericColorLegend manager={this} />
                 )}
-                {!this.isLogScale && (
-                    <HorizontalAxisZeroLine
-                        horizontalAxis={yAxis}
-                        bounds={innerBounds}
-                        strokeWidth={axisLineWidth}
-                        // if the chart doesn't have negative values, then we
-                        // move the zero line a little to the left to avoid
-                        // overlap with the bars
-                        align={
-                            this.hasNegative
-                                ? HorizontalAlign.center
-                                : HorizontalAlign.right
-                        }
-                    />
-                )}
+                <HorizontalAxisZeroLine
+                    horizontalAxis={yAxis}
+                    bounds={innerBounds}
+                    strokeWidth={axisLineWidth}
+                    // if the chart doesn't have negative values, then we
+                    // move the zero line a little to the left to avoid
+                    // overlap with the bars
+                    align={
+                        this.hasNegative
+                            ? HorizontalAlign.center
+                            : HorizontalAlign.right
+                    }
+                />
                 {this.renderBars()}
                 {this.renderValueLabels()}
                 {this.renderEntityLabels()}

diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -85,6 +85,7 @@ export interface SettingsMenuManager
     isOnMapTab?: boolean
     isOnChartTab?: boolean
     isOnTableTab?: boolean
+    isLineChartThatTurnedIntoDiscreteBar?: boolean
 
     // linear/log scales
     yAxis: AxisConfig
@@ -121,8 +122,16 @@ export class SettingsMenu extends React.Component<{
     @computed get showYScaleToggle(): boolean | undefined {
         if (this.manager.hideYScaleToggle) return false
         if (this.manager.isRelativeMode) return false
-        if ([StackedArea, StackedBar].includes(this.chartType as any))
+        if (
+            [
+                GRAPHER_CHART_TYPES.StackedArea,
+                GRAPHER_CHART_TYPES.StackedBar,
+                GRAPHER_CHART_TYPES.DiscreteBar,
+                GRAPHER_CHART_TYPES.StackedDiscreteBar,
+            ].includes(this.chartType as any)
+        )
             return false // We currently do not have these charts with log scale
+        if (this.manager.isLineChartThatTurnedIntoDiscreteBar) return false
         return this.manager.yAxis.canChangeScaleType
     }
 

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -27,6 +27,7 @@ import {
     ColorSchemeName,
     FacetStrategy,
     MissingDataStrategy,
+    ScaleType,
     SeriesName,
     VerticalAlign,
 } from "@ourworldindata/types"
@@ -324,6 +325,7 @@ export class StackedDiscreteBarChart
         const axis = this.yAxisConfig.toHorizontalAxis()
         axis.updateDomainPreservingUserSettings(this.xDomainDefault)
 
+        axis.scaleType = ScaleType.linear
         axis.formatColumn = this.yColumns[0] // todo: does this work for columns as series?
         axis.range = this.xRange
         axis.label = ""