🔨 rename vertical color legend props

owid · Jan 3, 2025 · cbcedce · cbcedce
1 parent 0a4c795
commit cbcedce
Show file tree

Hide file tree

Showing 6 changed files with 180 additions and 121 deletions.
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.test.ts b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.test.ts
@@ -531,7 +531,11 @@ describe("colors & legend", () => {
     })
 
     it("legend contains every continent for which there is data (before timeline filter)", () => {
-        expect(chart.legendItems.map((item) => item.label).sort()).toEqual([
+        expect(
+            chart.verticalColorLegendBins
+                .map((item) => item.type === "categorical" && item.label)
+                .sort()
+        ).toEqual([
             "Africa",
             "Europe",
             "North America",

diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
@@ -61,7 +61,10 @@ import {
     ConnectedScatterLegend,
     ConnectedScatterLegendManager,
 } from "./ConnectedScatterLegend"
-import { VerticalColorLegend } from "../verticalColorLegend/VerticalColorLegend"
+import {
+    VerticalColorLegend,
+    VerticalColorLegendBin,
+} from "../verticalColorLegend/VerticalColorLegend"
 import { VerticalColorLegendComponent } from "../verticalColorLegend/VerticalColorLegendComponent"
 import { DualAxisComponent } from "../axis/AxisViews"
 import { DualAxis, HorizontalAxis, VerticalAxis } from "../axis/Axis"
@@ -95,7 +98,7 @@ import {
     ColorScaleConfigDefaults,
 } from "../color/ColorScaleConfig"
 import { SelectionArray } from "../selection/SelectionArray"
-import { ColorScaleBin } from "../color/ColorScaleBin"
+import { CategoricalBin } from "../color/ColorScaleBin"
 import {
     ScatterSizeLegend,
     ScatterSizeLegendManager,
@@ -509,17 +512,13 @@ export class ScatterPlotChart
 
     @computed private get verticalColorLegend(): VerticalColorLegend {
         return new VerticalColorLegend({
-            maxLegendWidth: this.maxLegendWidth,
+            bins: this.verticalColorLegendBins,
+            maxWidth: this.sidebarMaxWidth,
+            legendTitle: this.colorScale.legendDescription,
             fontSize: this.fontSize,
-            legendItems: this.legendItems,
-            legendTitle: this.legendTitle,
         })
     }
 
-    @computed get maxLegendWidth(): number {
-        return this.sidebarMaxWidth
-    }
-
     @computed private get sidebarMinWidth(): number {
         return Math.max(this.bounds.width * 0.1, 60)
     }
@@ -687,16 +686,27 @@ export class ScatterPlotChart
         return this.transformedTable.get(this.colorColumnSlug)
     }
 
-    @computed get legendItems(): ColorScaleBin[] {
-        return this.colorScale.legendBins.filter(
+    @computed get verticalColorLegendBins(): VerticalColorLegendBin[] {
+        const bins = this.colorScale.legendBins.filter(
             (bin) =>
                 this.colorsInUse.includes(bin.color) &&
                 bin.label !== NO_DATA_LABEL
         )
-    }
 
-    @computed get legendTitle(): string | undefined {
-        return this.colorScale.legendDescription
+        return bins.map((bin) =>
+            bin instanceof CategoricalBin
+                ? {
+                      type: "categorical",
+                      color: bin.color,
+                      label: bin.label ?? "",
+                  }
+                : {
+                      type: "numeric",
+                      color: bin.color,
+                      minLabel: bin.minText,
+                      maxLabel: bin.maxText,
+                  }
+        )
     }
 
     @computed get sizeScale(): ScaleLinear<number, number> {
@@ -767,7 +777,7 @@ export class ScatterPlotChart
             verticalColorLegend,
         } = this
 
-        const hasLegendItems = this.legendItems.length > 0
+        const hasLegendItems = this.verticalColorLegendBins.length > 0
         const verticalLegendHeight = hasLegendItems
             ? verticalColorLegend.height
             : 0
@@ -789,7 +799,7 @@ export class ScatterPlotChart
             (arrowLegendHeight > 0 ? legendPadding : 0)
 
         const noDataSectionBounds = new Bounds(
-            this.legendX,
+            this.verticalColorLegendX,
             yNoDataSection,
             sidebarWidth,
             bounds.height - yNoDataSection
@@ -798,7 +808,7 @@ export class ScatterPlotChart
         const separatorLine = (y: number): React.ReactElement | null =>
             y > bounds.top ? (
                 <line
-                    x1={this.legendX}
+                    x1={this.verticalColorLegendX}
                     y1={y - 0.5 * legendPadding}
                     x2={bounds.right}
                     y2={y - 0.5 * legendPadding}
@@ -832,18 +842,21 @@ export class ScatterPlotChart
                 {this.points}
                 <VerticalColorLegendComponent
                     legend={this.verticalColorLegend}
-                    x={this.legendX}
-                    y={this.legendY}
+                    x={this.verticalColorLegendX}
+                    y={this.verticalColorLegendY}
                     activeColors={this.activeColors}
                     focusColors={this.focusColors}
-                    onLegendMouseOver={this.onLegendMouseOver}
-                    onLegendMouseLeave={this.onLegendMouseLeave}
-                    onLegendClick={this.onLegendClick}
+                    onMouseOver={this.onLegendMouseOver}
+                    onMouseLeave={this.onLegendMouseLeave}
+                    onClick={this.onLegendClick}
                 />
                 {sizeLegend && (
                     <>
                         {separatorLine(ySizeLegend)}
-                        {sizeLegend.render(this.legendX, ySizeLegend)}
+                        {sizeLegend.render(
+                            this.verticalColorLegendX,
+                            ySizeLegend
+                        )}
                     </>
                 )}
                 {arrowLegend && (
@@ -853,7 +866,10 @@ export class ScatterPlotChart
                             className="clickable"
                             onClick={this.onToggleEndpoints}
                         >
-                            {arrowLegend.render(this.legendX, yArrowLegend)}
+                            {arrowLegend.render(
+                                this.verticalColorLegendX,
+                                yArrowLegend
+                            )}
                         </g>
                     </>
                 )}
@@ -999,11 +1015,11 @@ export class ScatterPlotChart
         )
     }
 
-    @computed get legendY(): number {
+    @computed get verticalColorLegendY(): number {
         return this.bounds.top
     }
 
-    @computed get legendX(): number {
+    @computed get verticalColorLegendX(): number {
         return this.bounds.right - this.sidebarWidth
     }
 

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
@@ -18,7 +18,7 @@ import { DualAxisComponent } from "../axis/AxisViews"
 import { NoDataModal } from "../noDataModal/NoDataModal"
 import {
     VerticalColorLegend,
-    LegendItem,
+    VerticalColorLegendCategoricalBin,
 } from "../verticalColorLegend/VerticalColorLegend"
 import { VerticalColorLegendComponent } from "../verticalColorLegend/VerticalColorLegendComponent"
 import { TooltipFooterIcon } from "../tooltip/TooltipProps.js"
@@ -259,12 +259,12 @@ export class StackedBarChart
         )
     }
 
-    // used by <VerticalColorLegend />
-    @computed get legendItems(): (LegendItem &
-        Required<Pick<LegendItem, "label">>)[] {
+    @computed
+    get verticalColorLegendBins(): VerticalColorLegendCategoricalBin[] {
         return this.series
             .map((series) => {
                 return {
+                    type: "categorical" as const,
                     label: series.seriesName,
                     color: series.color,
                 }
@@ -274,7 +274,7 @@ export class StackedBarChart
 
     // used by <HorizontalCategoricalColorLegend />
     @computed get categoricalLegendData(): CategoricalBin[] {
-        return this.legendItems.map(
+        return this.verticalColorLegendBins.map(
             (legendItem, index) =>
                 new CategoricalBin({
                     index,
@@ -320,9 +320,11 @@ export class StackedBarChart
 
     @computed private get verticalColorLegend(): VerticalColorLegend {
         return new VerticalColorLegend({
-            maxLegendWidth: this.maxLegendWidth,
+            bins: this.verticalColorLegendBins,
+            maxWidth: this.showHorizontalLegend
+                ? this.bounds.width
+                : this.sidebarMaxWidth,
             fontSize: this.fontSize,
-            legendItems: this.legendItems,
         })
     }
 
@@ -477,20 +479,21 @@ export class StackedBarChart
 
         if (!showLegend) return
 
+        const x = this.showHorizontalLegend
+            ? this.bounds.left
+            : this.bounds.right - this.sidebarWidth
+        const y = this.bounds.top
+
         return showHorizontalLegend ? (
             <HorizontalCategoricalColorLegend manager={this} />
         ) : (
             <VerticalColorLegendComponent
                 legend={this.verticalColorLegend}
-                x={this.legendX}
-                y={this.legendY}
+                x={x}
+                y={y}
                 activeColors={this.activeColors}
-                onLegendMouseOver={
-                    !isStatic ? this.onLegendMouseOver : undefined
-                }
-                onLegendMouseLeave={
-                    !isStatic ? this.onLegendMouseLeave : undefined
-                }
+                onMouseOver={!isStatic ? this.onLegendMouseOver : undefined}
+                onMouseLeave={!isStatic ? this.onLegendMouseLeave : undefined}
             />
         )
     }

diff --git a/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.stories.tsx b/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.stories.tsx
@@ -11,26 +11,30 @@ export default {
 }
 
 const props: VerticalColorLegendProps = {
-    maxLegendWidth: 500,
+    maxWidth: 500,
     legendTitle: "Legend Title",
-    legendItems: [
+    bins: [
         {
+            type: "categorical",
             label: "Canada",
             color: "red",
         },
         {
+            type: "categorical",
             label: "Mexico",
             color: "green",
         },
     ],
-    activeColors: ["red", "green"],
 }
 
 export const CategoricalBins = (): React.ReactElement => {
     const verticalColorLegend = new VerticalColorLegend(props)
     return (
         <svg width={600} height={400}>
-            <VerticalColorLegendComponent legend={verticalColorLegend} />
+            <VerticalColorLegendComponent
+                legend={verticalColorLegend}
+                activeColors={["red", "green"]}
+            />
         </svg>
     )
 }