🔨 only render interactive elements if necessary

owid · Jan 3, 2025 · 3441962 · 3441962
1 parent 9f0c4ce
commit 3441962
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
@@ -633,14 +633,21 @@ export class MapChart
     }
 
     renderMapLegend(): React.ReactElement {
+        const onMouseLeave = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseLeave
+        const onMouseOver = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseOver
+
         return (
             <>
                 {this.numericLegend && (
                     <HorizontalNumericColorLegendComponent
                         legend={this.numericLegend}
                         focusBin={this.numericFocusBracket}
-                        onMouseLeave={this.onLegendMouseLeave}
-                        onMouseOver={this.onLegendMouseOver}
+                        onMouseLeave={onMouseLeave}
+                        onMouseOver={onMouseOver}
                     />
                 )}
                 {this.categoryLegend && (
@@ -649,8 +656,8 @@ export class MapChart
                         x={this.legendX}
                         y={this.categoryLegendY}
                         swatchStrokeColor={this.categoricalBinStroke}
-                        onMouseLeave={this.onLegendMouseLeave}
-                        onMouseOver={this.onLegendMouseOver}
+                        onMouseLeave={onMouseLeave}
+                        onMouseOver={onMouseOver}
                     />
                 )}
             </>

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
@@ -1030,6 +1030,13 @@ export class MarimekkoChart
 
         const footer = excludeUndefined([toleranceNotice, roundingNotice])
 
+        const onLegendMouseLeave = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseLeave
+        const onLegendMouseOver = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseOver
+
         return (
             <g
                 ref={this.base}
@@ -1061,8 +1068,8 @@ export class MarimekkoChart
                     x={this.legendX}
                     y={this.categoryLegendY}
                     opacity={this.legendOpacity}
-                    onMouseLeave={this.onLegendMouseLeave}
-                    onMouseOver={this.onLegendMouseOver}
+                    onMouseLeave={onLegendMouseLeave}
+                    onMouseOver={onLegendMouseOver}
                 />
                 {this.renderBars()}
                 {target && (

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -727,13 +727,21 @@ export class StackedDiscreteBarChart
 
     renderLegend(): React.ReactElement | void {
         if (!this.showLegend) return
+
+        const onMouseLeave = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseLeave
+        const onMouseOver = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseOver
+
         return (
             <HorizontalCategoricalColorLegendComponent
                 legend={this.legend}
                 x={this.legendX}
                 y={this.categoryLegendY}
-                onMouseLeave={this.onLegendMouseLeave}
-                onMouseOver={this.onLegendMouseOver}
+                onMouseLeave={onMouseLeave}
+                onMouseOver={onMouseOver}
             />
         )
     }