🔨 introduce external legend prop

owid · Jan 2, 2025 · a43a823 · a43a823
1 parent f4cc217
commit a43a823
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 31 deletions.
diff --git a/packages/@ourworldindata/grapher/src/chart/ChartInterface.ts b/packages/@ourworldindata/grapher/src/chart/ChartInterface.ts
@@ -21,6 +21,10 @@ export interface ChartSeries {
 
 export type ChartTableTransformer = (inputTable: OwidTable) => OwidTable
 
+export type ExternalLegendProps =
+    Partial<HorizontalCategoricalColorLegendProps> &
+        Partial<HorizontalNumericColorLegendProps>
+
 export interface ChartInterface {
     failMessage: string // We require every chart have some fail message(s) to show to the user if something went wrong
 
@@ -45,9 +49,7 @@ export interface ChartInterface {
      * The legend that has been hidden from the chart plot (using `manager.hideLegend`).
      * Used to create a global categorical legend for faceted charts.
      */
-    externalLegend?:
-        | HorizontalCategoricalColorLegendProps
-        | HorizontalNumericColorLegendProps
+    externalLegend?: ExternalLegendProps
 
     /**
      * Which facet strategies the chart type finds reasonable in its current setting, if any.

diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
@@ -36,7 +36,7 @@ import {
     DefaultChartClass,
 } from "../chart/ChartTypeMap"
 import { ChartManager } from "../chart/ChartManager"
-import { ChartInterface } from "../chart/ChartInterface"
+import { ChartInterface, ExternalLegendProps } from "../chart/ChartInterface"
 import {
     getChartPadding,
     getFontSize,
@@ -74,9 +74,6 @@ const SHARED_X_AXIS_MIN_FACET_COUNT = 12
 
 const facetBackgroundColor = "none" // we don't use color yet but may use it for background later
 
-type ExternalLegendProps = Partial<HorizontalCategoricalColorLegendProps> &
-    Partial<HorizontalNumericColorLegendProps>
-
 const getContentBounds = (
     containerBounds: Bounds,
     manager: ChartManager,

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.test.ts b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.test.ts
@@ -300,7 +300,7 @@ describe("externalLegendBins", () => {
         const chart = new LineChart({
             manager: { ...baseManager, showLegend: false },
         })
-        expect(chart.externalLegend?.bins?.length).toEqual(2)
+        expect(chart.externalLegend?.categoricalBins?.length).toEqual(2)
     })
 })
 

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -63,7 +63,7 @@ import {
 } from "../core/GrapherConstants"
 import { ColorSchemes } from "../color/ColorSchemes"
 import { AxisConfig, AxisManager } from "../axis/AxisConfig"
-import { ChartInterface } from "../chart/ChartInterface"
+import { ChartInterface, ExternalLegendProps } from "../chart/ChartInterface"
 import {
     LinesProps,
     LineChartSeries,
@@ -115,7 +115,6 @@ import {
     HorizontalNumericColorLegend,
     HorizontalNumericColorLegendProps,
 } from "../horizontalColorLegend/HorizontalNumericColorLegend"
-import { HorizontalCategoricalColorLegendProps } from "../horizontalColorLegend/HorizontalCategoricalColorLegend"
 import { HorizontalNumericColorLegendComponent } from "../horizontalColorLegend/HorizontalNumericColorLegendComponent"
 
 const LINE_CHART_CLASS_NAME = "LineChart"
@@ -1487,10 +1486,7 @@ export class LineChart
         return this.dualAxis.horizontalAxis
     }
 
-    @computed get externalLegend():
-        | HorizontalCategoricalColorLegendProps
-        | HorizontalNumericColorLegendProps
-        | undefined {
+    @computed get externalLegend(): ExternalLegendProps | undefined {
         if (!this.manager.showLegend) {
             const numericLegendData = this.hasColorScale
                 ? this.numericLegendData

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -37,7 +37,7 @@ import {
     InteractionState,
     HorizontalAlign,
 } from "@ourworldindata/types"
-import { ChartInterface } from "../chart/ChartInterface"
+import { ChartInterface, ExternalLegendProps } from "../chart/ChartInterface"
 import { ChartManager } from "../chart/ChartManager"
 import { scaleLinear, ScaleLinear } from "d3-scale"
 import { select } from "d3-selection"
@@ -591,9 +591,7 @@ export class SlopeChart
             : 0
     }
 
-    @computed get externalLegend():
-        | HorizontalCategoricalColorLegendProps
-        | undefined {
+    @computed get externalLegend(): ExternalLegendProps | undefined {
         if (!this.manager.showLegend) {
             const categoricalLegendData = this.series.map(
                 (series, index) =>

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/AbstractStackedChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/AbstractStackedChart.tsx
@@ -1,6 +1,6 @@
 import { DualAxis, HorizontalAxis, VerticalAxis } from "../axis/Axis"
 import { AxisConfig, AxisManager } from "../axis/AxisConfig"
-import { ChartInterface } from "../chart/ChartInterface"
+import { ChartInterface, ExternalLegendProps } from "../chart/ChartInterface"
 import { ChartManager } from "../chart/ChartManager"
 import {
     ColorSchemeName,
@@ -43,7 +43,6 @@ import {
     CategoricalColorMap,
 } from "../color/CategoricalColorAssigner.js"
 import { BinaryMapPaletteE } from "../color/CustomSchemes"
-import { HorizontalCategoricalColorLegendProps } from "../horizontalColorLegend/HorizontalCategoricalColorLegend"
 
 // used in StackedBar charts to color negative and positive bars
 const POSITIVE_COLOR = BinaryMapPaletteE.colorSets[0][0] // orange
@@ -436,9 +435,7 @@ export class AbstractStackedChart
         return this.unstackedSeries
     }
 
-    @computed get externalLegend():
-        | HorizontalCategoricalColorLegendProps
-        | undefined {
+    @computed get externalLegend(): ExternalLegendProps | undefined {
         if (!this.manager.showLegend) {
             const categoricalLegendData = this.series
                 .map(

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -44,7 +44,7 @@ import {
 } from "../axis/AxisViews"
 import { NoDataModal } from "../noDataModal/NoDataModal"
 import { AxisConfig } from "../axis/AxisConfig"
-import { ChartInterface } from "../chart/ChartInterface"
+import { ChartInterface, ExternalLegendProps } from "../chart/ChartInterface"
 import { OwidTable, CoreColumn } from "@ourworldindata/core-table"
 import {
     autoDetectYColumnSlugs,
@@ -76,10 +76,7 @@ import { easeQuadOut } from "d3-ease"
 import { bind } from "decko"
 import { CategoricalColorAssigner } from "../color/CategoricalColorAssigner.js"
 import { TextWrap } from "@ourworldindata/components"
-import {
-    HorizontalCategoricalColorLegend,
-    HorizontalCategoricalColorLegendProps,
-} from "../horizontalColorLegend/HorizontalCategoricalColorLegend"
+import { HorizontalCategoricalColorLegend } from "../horizontalColorLegend/HorizontalCategoricalColorLegend"
 import { HorizontalCategoricalColorLegendComponent } from "../horizontalColorLegend/HorizontalCategoricalColorLegendComponent"
 
 // if an entity name exceeds this width, we use the short name instead (if available)
@@ -526,9 +523,7 @@ export class StackedDiscreteBarChart
         return this.showLegend ? this.legendBins : []
     }
 
-    @computed get externalLegend():
-        | HorizontalCategoricalColorLegendProps
-        | undefined {
+    @computed get externalLegend(): ExternalLegendProps | undefined {
         if (!this.showLegend) {
             return {
                 categoricalBins: this.legendBins,