✨ (slope) list selected entities without data

packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx

@@ -17,6 +17,7 @@ import {
     PointVector,
     clamp,
     HorizontalAlign,
+    keyBy,
 } from "@ourworldindata/utils"
 import { TextWrap } from "@ourworldindata/components"
 import { observable, computed, action } from "mobx"
@@ -32,6 +33,7 @@ import {
     GRAPHER_DARK_TEXT,
     GRAPHER_FONT_SCALE_9_6,
     GRAPHER_FONT_SCALE_10_5,
+    GRAPHER_FONT_SCALE_11_2,
 } from "../core/GrapherConstants"
 import {
     ScaleType,
@@ -324,6 +326,77 @@ export class SlopeChart
         return legendBins.some((bin) => colorsInUse.includes(bin.color))
     }
 
+    @computed
+    private get selectedEntitiesWithoutData(): string[] {
+        const { transformedTable, selectedEntityNames } = this
+
+        const table = transformedTable.filterByEntityNames(selectedEntityNames)
+
+        // group by entity name
+        const tableByEntityName = keyBy<OwidTable>(
+            table.groupBy(table.entityNameColumn.slug),
+            (table) => table.availableEntityNames[0]
+        )
+
+        return this.selectedEntityNames.filter((entityName) => {
+            const table = tableByEntityName[entityName]
+            const yColumn = table.get(this.yColumnSlug)
+            return yColumn.numValues < 2
+        })
+    }
+
+    @computed private get noDataSection(): JSX.Element {
+        const { selectedEntitiesWithoutData: noDataEntities } = this
+
+        const nDisplayedEntities = 5
+        const displayedEntities = noDataEntities.slice(0, nDisplayedEntities)
+        const nRemainingEntities = Math.max(
+            0,
+            noDataEntities.length - nDisplayedEntities
+        )
+
+        const bounds = new Bounds(
+            this.legendX,
+            this.legendY + this.legendHeight,
+            this.sidebarWidth,
+            this.bounds.height - this.legendHeight
+        )
+
+        return (
+            <foreignObject
+                {...bounds.toProps()}
+                style={{
+                    color: GRAPHER_DARK_TEXT,
+                    fontSize: GRAPHER_FONT_SCALE_11_2 * this.fontSize,
+                }}
+            >
+                <div
+                    style={{
+                        textTransform: "uppercase",
+                        fontWeight: 700,
+                        marginTop: 12,
+                    }}
+                >
+                    No data
+                </div>
+                <ul>
+                    {displayedEntities.map((entityName) => (
+                        <li key={entityName} style={{ fontStyle: "italic" }}>
+                            {entityName}
+                        </li>
+                    ))}
+                </ul>
+                {nRemainingEntities > 0 && (
+                    <div>
+                        &{" "}
+                        {nRemainingEntities === 1 ? "one" : nRemainingEntities}{" "}
+                        more
+                    </div>
+                )}
+            </foreignObject>
+        )
+    }
+
     render() {
         if (this.failMessage)
             return (
@@ -342,6 +415,7 @@ export class SlopeChart
             innerBounds,
             showLegend,
             showHorizontalLegend,
+            selectedEntitiesWithoutData,
         } = this
 
         const legend = showHorizontalLegend ? (
@@ -365,6 +439,11 @@ export class SlopeChart
                     isPortrait={this.isPortrait}
                 />
                 {showLegend && legend}
+                {/* only show the "No data" section if there is space */}
+                {showLegend &&
+                    !showHorizontalLegend &&
+                    selectedEntitiesWithoutData.length > 0 &&
+                    this.noDataSection}
             </g>
         )
     }