From 1bb88836ea84f96336bc92a17da13871928e74cd Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Wed, 18 Dec 2024 16:56:27 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(scatter)=20add=20unit=20to=20axis?=
 =?UTF-8?q?=20labels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-table/src/CoreTableColumns.ts              |  6 ++++++
 .../grapher/src/scatterCharts/ScatterPlotChart.tsx  | 13 ++++++++++---
 .../grapher/src/tooltip/TooltipContents.tsx         |  6 +-----
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/@ourworldindata/core-table/src/CoreTableColumns.ts b/packages/@ourworldindata/core-table/src/CoreTableColumns.ts
index 8c08d7f2489..210d344f72b 100644
--- a/packages/@ourworldindata/core-table/src/CoreTableColumns.ts
+++ b/packages/@ourworldindata/core-table/src/CoreTableColumns.ts
@@ -269,6 +269,12 @@ export abstract class AbstractCoreColumn<JS_TYPE extends PrimitiveType> {
         return undefined
     }
 
+    @imemo get displayUnit(): string | undefined {
+        return this.unit && this.unit !== this.shortUnit
+            ? this.unit.replace(/^\((.*)\)$/, "$1")
+            : undefined
+    }
+
     // Returns a map where the key is a series slug such as "name" and the value is a set
     // of all the unique values that this column has for that particular series.
     getUniqueValuesGroupedBy(
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
index b3f24acebbf..929d3ece221 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
@@ -1281,7 +1281,10 @@ export class ScatterPlotChart
         const axis = axisConfig.toVerticalAxis()
         axis.formatColumn = this.yColumn
         axis.scaleType = this.yScaleType
-        axis.label = this.currentVerticalAxisLabel
+
+        let label = this.currentVerticalAxisLabel
+        if (this.yColumn.displayUnit) label += ` (${this.yColumn.displayUnit})`
+        axis.label = label
 
         if (
             this.manager.isSingleTimeScatterAnimationActive &&
@@ -1345,8 +1348,12 @@ export class ScatterPlotChart
         axis.formatColumn = this.xColumn
         axis.scaleType = this.xScaleType
 
-        if (this.currentHorizontalAxisLabel)
-            axis.label = this.currentHorizontalAxisLabel
+        if (this.currentHorizontalAxisLabel) {
+            let label = this.currentHorizontalAxisLabel
+            if (this.xColumn.displayUnit)
+                label += ` (${this.xColumn.displayUnit})`
+            axis.label = label
+        }
 
         if (
             this.manager.isSingleTimeScatterAnimationActive &&
diff --git a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
index a3a8b7f0f1d..ef380580ad1 100644
--- a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
+++ b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
@@ -132,11 +132,7 @@ class Variable extends React.Component<{
 
         if (column.isMissing || column.name === "time") return null
 
-        const { unit, shortUnit, displayName } = column,
-            displayUnit =
-                unit && unit !== shortUnit
-                    ? unit.replace(/^\((.*)\)$/, "$1")
-                    : undefined,
+        const { displayUnit, displayName } = column,
             displayNotice =
                 uniq((notice ?? []).filter((t) => t !== undefined))
                     .map((time) =>