🔨 drop vertical color legend observer

owid · Dec 20, 2024 · 7e88856 · 7e88856
1 parent c549549
commit 7e88856
Show file tree

Hide file tree

Showing 4 changed files with 209 additions and 183 deletions.
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 {
+    VerticalColorLegendComponent,
+    VerticalColorLegend,
+} from "../verticalColorLegend/VerticalColorLegend"
 import { DualAxisComponent } from "../axis/AxisViews"
 import { DualAxis, HorizontalAxis, VerticalAxis } from "../axis/Axis"
 
@@ -506,15 +509,14 @@ export class ScatterPlotChart
         return this.tooltipState.target?.series
     }
 
-    @computed private get verticalColorLegend(): {
-        width: number
-        height: number
-    } {
-        return VerticalColorLegend.dimensions({
+    @computed private get verticalColorLegend(): VerticalColorLegend {
+        return new VerticalColorLegend({
             maxLegendWidth: this.maxLegendWidth,
             fontSize: this.fontSize,
             legendItems: this.legendItems,
             legendTitle: this.legendTitle,
+            activeColors: this.activeColors,
+            focusColors: this.focusColors,
         })
     }
 
@@ -832,18 +834,15 @@ export class ScatterPlotChart
                         />
                     ))}
                 {this.points}
-                <VerticalColorLegend
-                    maxLegendWidth={this.maxLegendWidth}
-                    fontSize={this.fontSize}
-                    legendItems={this.legendItems}
-                    legendTitle={this.legendTitle}
-                    onLegendMouseOver={this.onLegendMouseOver}
-                    onLegendClick={this.onLegendClick}
-                    onLegendMouseLeave={this.onLegendMouseLeave}
-                    legendX={this.legendX}
-                    legendY={this.legendY}
-                    activeColors={this.activeColors}
-                    focusColors={this.focusColors}
+                <VerticalColorLegendComponent
+                    x={this.legendX}
+                    y={this.legendY}
+                    state={this.verticalColorLegend}
+                    eventListeners={{
+                        onLegendMouseOver: this.onLegendMouseOver,
+                        onLegendMouseLeave: this.onLegendMouseLeave,
+                        onLegendClick: this.onLegendClick,
+                    }}
                 />
                 {sizeLegend && (
                     <>

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
@@ -19,6 +19,7 @@ import { NoDataModal } from "../noDataModal/NoDataModal"
 import {
     VerticalColorLegend,
     LegendItem,
+    VerticalColorLegendComponent,
 } from "../verticalColorLegend/VerticalColorLegend"
 import { TooltipFooterIcon } from "../tooltip/TooltipProps.js"
 import {
@@ -313,14 +314,12 @@ export class StackedBarChart
         )
     }
 
-    @computed private get verticalColorLegend(): {
-        width: number
-        height: number
-    } {
-        return VerticalColorLegend.dimensions({
+    @computed private get verticalColorLegend(): VerticalColorLegend {
+        return new VerticalColorLegend({
             maxLegendWidth: this.maxLegendWidth,
             fontSize: this.fontSize,
             legendItems: this.legendItems,
+            activeColors: this.activeColors,
         })
     }
 
@@ -480,6 +479,13 @@ export class StackedBarChart
 
         if (!showLegend) return
 
+        const eventListeners = this.manager.isStatic
+            ? undefined
+            : {
+                  onLegendMouseOver: this.onLegendMouseOver,
+                  onLegendMouseLeave: this.onLegendMouseLeave,
+              }
+
         return showHorizontalLegend ? (
             <HorizontalCategoricalColorLegend
                 fontSize={this.fontSize}
@@ -494,16 +500,11 @@ export class StackedBarChart
                 isStatic={this.isStatic}
             />
         ) : (
-            <VerticalColorLegend
-                legendItems={this.legendItems}
-                maxLegendWidth={this.maxLegendWidth}
-                fontSize={this.fontSize}
-                onLegendMouseOver={this.onLegendMouseOver}
-                onLegendMouseLeave={this.onLegendMouseLeave}
-                legendX={this.legendX}
-                legendY={this.legendY}
-                activeColors={this.activeColors}
-                isStatic={this.isStatic}
+            <VerticalColorLegendComponent
+                x={this.legendX}
+                y={this.legendY}
+                state={this.verticalColorLegend}
+                eventListeners={eventListeners}
             />
         )
     }

diff --git a/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.stories.tsx b/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.stories.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import {
     VerticalColorLegend,
     VerticalColorLegendProps,
+    VerticalColorLegendComponent,
 } from "./VerticalColorLegend"
 
 export default {
@@ -26,9 +27,10 @@ const props: VerticalColorLegendProps = {
 }
 
 export const CategoricalBins = (): React.ReactElement => {
+    const verticalColorLegend = new VerticalColorLegend(props)
     return (
         <svg width={600} height={400}>
-            <VerticalColorLegend {...props} />
+            <VerticalColorLegendComponent state={verticalColorLegend} />
         </svg>
     )
 }