feat: implement MissingDataStrategy for StackedDiscreteBar chart

adminSiteClient/EditorFeatures.tsx

@@ -110,7 +110,11 @@ export class EditorFeatures {
     @computed get canSpecifyMissingDataStrategy() {
         if (!this.grapher.hasMultipleYColumns) return false
 
-        if (this.grapher.isStackedArea || this.grapher.isStackedBar) {
+        if (
+            this.grapher.isStackedArea ||
+            this.grapher.isStackedBar ||
+            this.grapher.isStackedDiscreteBar
+        ) {
             return true
         }
 

packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.test.ts

@@ -1,6 +1,11 @@
 #! /usr/bin/env jest
 
-import { SortOrder, SortBy, ColumnTypeNames } from "@ourworldindata/utils"
+import {
+    SortOrder,
+    SortBy,
+    ColumnTypeNames,
+    MissingDataStrategy,
+} from "@ourworldindata/utils"
 import {
     OwidTable,
     SampleColumnSlugs,
@@ -105,6 +110,10 @@ it("can display a chart with missing variable data for some entities", () => {
 
     // Check that our absolute values get properly transformed into percentages
     expect(chart.failMessage).toEqual("")
+    expect(
+        chart.transformTableForSelection(table).availableEntityNames
+    ).toEqual(["France", "Spain"])
+
     expect(chart.series.length).toEqual(2)
     expect(chart.series[0].points).toEqual([
         {
@@ -140,6 +149,52 @@ it("can display a chart with missing variable data for some entities", () => {
     ])
 })
 
+it("can display a chart with missing variable data for some entities, while hiding missing data", () => {
+    const csv = `coal,gas,year,entityName
+    20,,2000,France
+    10,20,2000,Italy
+    ,14,2000,Spain`
+    const table = new OwidTable(csv, [
+        { slug: "coal", type: ColumnTypeNames.Numeric },
+        { slug: "gas", type: ColumnTypeNames.Numeric },
+        { slug: "year", type: ColumnTypeNames.Year },
+    ])
+
+    const manager: ChartManager = {
+        table,
+        selection: table.availableEntityNames,
+        yColumnSlugs: ["coal", "gas"],
+        missingDataStrategy: MissingDataStrategy.hide,
+    }
+    const chart = new StackedDiscreteBarChart({ manager })
+
+    // Check that our absolute values get properly transformed into percentages
+    expect(chart.failMessage).toEqual("")
+    expect(
+        chart.transformTableForSelection(table).availableEntityNames
+    ).toEqual(["Italy"])
+
+    expect(chart.series.length).toEqual(2)
+    expect(chart.series[0].points).toEqual([
+        {
+            position: "Italy",
+            value: 10,
+            valueOffset: 0,
+            time: 2000,
+            fake: false,
+        },
+    ])
+    expect(chart.series[1].points).toEqual([
+        {
+            position: "Italy",
+            value: 20,
+            valueOffset: 10,
+            time: 2000,
+            fake: false,
+        },
+    ])
+})
+
 describe("columns as series", () => {
     const table = SynthesizeFruitTable({
         timeRange: [2000, 2001],

packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx

@@ -25,6 +25,7 @@ import { observer } from "mobx-react"
 import {
     ColorSchemeName,
     FacetStrategy,
+    MissingDataStrategy,
     SeriesName,
 } from "@ourworldindata/types"
 import {
@@ -124,6 +125,17 @@ export class StackedDiscreteBarChart
 {
     base: React.RefObject<SVGGElement> = React.createRef()
 
+    private applyMissingDataStrategy(table: OwidTable): OwidTable {
+        if (this.missingDataStrategy === MissingDataStrategy.hide) {
+            // If MissingDataStrategy is explicitly set to hide, drop rows (= times) where one of
+            // the y columns has no data
+            return table.dropRowsWithErrorValuesForAnyColumn(this.yColumnSlugs)
+        }
+
+        // Otherwise, don't apply any special treatment
+        return table
+    }
+
     transformTable(table: OwidTable): OwidTable {
         if (!this.yColumnSlugs.length) return table
 
@@ -143,6 +155,8 @@ export class StackedDiscreteBarChart
             table = table.interpolateColumnWithTolerance(slug)
         })
 
+        table = this.applyMissingDataStrategy(table)
+
         if (this.manager.isRelativeMode) {
             table = table.toPercentageFromEachColumnForEachEntityAndTime(
                 this.yColumnSlugs
@@ -152,6 +166,21 @@ export class StackedDiscreteBarChart
         return table
     }
 
+    transformTableForSelection(table: OwidTable): OwidTable {
+        table = table
+            .replaceNonNumericCellsWithErrorValues(this.yColumnSlugs)
+            .replaceNegativeCellsWithErrorValues(this.yColumnSlugs)
+            .dropRowsWithErrorValuesForAllColumns(this.yColumnSlugs)
+
+        table = this.applyMissingDataStrategy(table)
+
+        return table
+    }
+
+    @computed private get missingDataStrategy(): MissingDataStrategy {
+        return this.manager.missingDataStrategy || MissingDataStrategy.auto
+    }
+
     @computed get sortConfig(): SortConfig {
         return this.manager.sortConfig ?? {}
     }