From 1e443c52ac03b1a83752ed59569046bad740853d Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Fri, 3 Jan 2025 15:10:58 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20simplify=20legend=20in=20map=20c?=
 =?UTF-8?q?hart=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HorizontalCategoricalColorLegend.ts       |  5 ---
 .../grapher/src/mapCharts/MapChart.tsx        | 43 ++++++++-----------
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalCategoricalColorLegend.ts b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalCategoricalColorLegend.ts
index 6868323974..4e235b62da 100644
--- a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalCategoricalColorLegend.ts
+++ b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalCategoricalColorLegend.ts
@@ -43,11 +43,6 @@ export class HorizontalCategoricalColorLegend {
         this.props = props
     }
 
-    static height(props: HorizontalCategoricalColorLegendProps): number {
-        const legend = new HorizontalCategoricalColorLegend(props)
-        return legend.height
-    }
-
     static numLines(props: HorizontalCategoricalColorLegendProps): number {
         const legend = new HorizontalCategoricalColorLegend(props)
         return legend.numLines
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
index 077da8ccef..9a350623a8 100644
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
@@ -532,6 +532,24 @@ export class MapChart
         return this.numericLegendData.length > 1
     }
 
+    @computed get numericLegendHeight(): number {
+        // can't use numericLegend due to a circular dependency
+        return this.hasNumericLegend
+            ? HorizontalNumericColorLegend.height({
+                  fontSize: this.fontSize,
+                  x: this.legendX,
+                  align: this.legendAlign,
+                  maxWidth: this.legendMaxWidth,
+                  numericBins: this.numericLegendData,
+                  equalSizeBins: this.equalSizeBins,
+              })
+            : 0
+    }
+
+    @computed get categoryLegendHeight(): number {
+        return this.categoryLegend ? this.categoryLegend.height + 5 : 0
+    }
+
     @computed private get categoryLegend():
         | HorizontalCategoricalColorLegend
         | undefined {
@@ -561,18 +579,8 @@ export class MapChart
             : undefined
     }
 
-    @computed get categoryLegendHeight(): number {
-        return this.hasCategoryLegend
-            ? HorizontalCategoricalColorLegend.height({
-                  fontSize: this.fontSize,
-                  align: this.legendAlign,
-                  maxWidth: this.legendMaxWidth,
-                  categoricalBins: this.categoricalLegendData,
-              }) + 5
-            : 0
-    }
-
     @computed get categoryLegendNumLines(): number {
+        // can't use categoryLegend due to a circular dependency
         return this.hasCategoryLegend
             ? HorizontalCategoricalColorLegend.numLines({
                   fontSize: this.fontSize,
@@ -582,19 +590,6 @@ export class MapChart
             : 0
     }
 
-    @computed get numericLegendHeight(): number {
-        return this.hasNumericLegend
-            ? HorizontalNumericColorLegend.height({
-                  fontSize: this.fontSize,
-                  x: this.legendX,
-                  align: this.legendAlign,
-                  maxWidth: this.legendMaxWidth,
-                  numericBins: this.numericLegendData,
-                  equalSizeBins: this.equalSizeBins,
-              })
-            : 0
-    }
-
     @computed get categoryLegendY(): number {
         const { hasCategoryLegend, bounds, categoryLegendHeight } = this