From e6f29f519304df94f100c3d106b9465bb83d6323 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Thu, 19 Dec 2024 16:02:17 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(scatter)=20horizonal=20axis=20labe?=
 =?UTF-8?q?ls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/axis/AxisViews.tsx            | 30 ++++++++++++++-----
 .../src/scatterCharts/ScatterPlotChart.tsx    |  5 +++-
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
index 63a462f5b8..ea72ee9ce7 100644
--- a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
+++ b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
@@ -14,7 +14,7 @@ import {
 import { VerticalAxis, HorizontalAxis, DualAxis } from "./Axis"
 import classNames from "classnames"
 import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
-import { ScaleType, DetailsMarker } from "@ourworldindata/types"
+import { ScaleType, DetailsMarker, AxisAlign } from "@ourworldindata/types"
 import { MarkdownTextWrap } from "@ourworldindata/components"
 import { GRAPHER_AXIS_LABEL_PADDING } from "../core/GrapherConstants.js"
 
@@ -429,12 +429,14 @@ export class VerticalAxisTickMark extends React.Component<{
 export function HorizonalAxisLabel({
     textWrap,
     dualAxis,
+    align = AxisAlign.middle,
     padding = GRAPHER_AXIS_LABEL_PADDING,
     color = GRAPHER_DARK_TEXT,
     detailsMarker,
 }: {
     textWrap: MarkdownTextWrap
     dualAxis: DualAxis
+    align?: AxisAlign
     padding?: number
     color?: string
     detailsMarker?: DetailsMarker
@@ -443,7 +445,12 @@ export function HorizonalAxisLabel({
 
     const horizontalAxisLabelsOnTop = horizontalAxis.orient === Position.top
 
-    const x = horizontalAxis.rangeCenter
+    const x =
+        align === AxisAlign.middle
+            ? horizontalAxis.rangeCenter
+            : AxisAlign.end
+              ? bounds.right
+              : bounds.left
     const y = horizontalAxisLabelsOnTop
         ? bounds.top - textWrap.height - padding
         : bounds.bottom + padding
@@ -452,7 +459,12 @@ export function HorizonalAxisLabel({
         id: makeIdForHumanConsumption("horizontal-axis-label"),
         textProps: {
             fill: color || GRAPHER_DARK_TEXT,
-            textAnchor: "middle",
+            textAnchor:
+                align === AxisAlign.middle
+                    ? "middle"
+                    : align === AxisAlign.end
+                      ? "end"
+                      : "start",
         },
         detailsMarker,
     })
@@ -461,27 +473,31 @@ export function HorizonalAxisLabel({
 export function VerticalAxisLabel({
     textWrap,
     dualAxis,
+    align = AxisAlign.middle,
     padding = GRAPHER_AXIS_LABEL_PADDING,
     color = GRAPHER_DARK_TEXT,
     detailsMarker,
 }: {
     textWrap: MarkdownTextWrap
     dualAxis: DualAxis
+    align?: AxisAlign
     padding?: number
     color?: string
     detailsMarker?: DetailsMarker
 }): React.ReactElement | null {
     const { verticalAxis, bounds } = dualAxis
 
-    const x = -verticalAxis.rangeCenter
-    const y = bounds.left - textWrap.height - padding
+    const alignMiddle = align === AxisAlign.middle
+    const x = alignMiddle ? -verticalAxis.rangeCenter : bounds.left
+    const y =
+        (alignMiddle ? bounds.left : bounds.top) - textWrap.height - padding
 
     return textWrap.renderSVG(x, y, {
         id: makeIdForHumanConsumption("vertical-axis-label"),
         textProps: {
-            transform: "rotate(-90)",
+            transform: alignMiddle ? "rotate(-90)" : undefined,
             fill: color || GRAPHER_DARK_TEXT,
-            textAnchor: "middle",
+            textAnchor: alignMiddle ? "middle" : "start",
         },
         detailsMarker,
     })
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
index 3461a5ee40..b784a8ad1b 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
@@ -11,6 +11,7 @@ import {
     ColorSchemeName,
     ValueRange,
     ColumnSlug,
+    AxisAlign,
 } from "@ourworldindata/types"
 import { ComparisonLine } from "../scatterCharts/ComparisonLine"
 import { observable, computed, action } from "mobx"
@@ -359,7 +360,7 @@ export class ScatterPlotChart
 
     @computed private get axisBounds(): Bounds {
         return this.innerBounds
-            .padLeft(this.verticalAxisLabelHeight)
+            .padTop(this.verticalAxisLabelHeight)
             .padBottom(this.horizontalAxisLabelHeight)
     }
 
@@ -833,6 +834,7 @@ export class ScatterPlotChart
                     <HorizonalAxisLabel
                         textWrap={this.horizontalAxisLabelWrap}
                         dualAxis={dualAxis}
+                        align={AxisAlign.end}
                         color={manager.secondaryColorInStaticCharts}
                         detailsMarker={manager.detailsMarkerInSvg}
                     />
@@ -841,6 +843,7 @@ export class ScatterPlotChart
                     <VerticalAxisLabel
                         textWrap={this.verticalAxisLabelWrap}
                         dualAxis={dualAxis}
+                        align={AxisAlign.start}
                         color={manager.secondaryColorInStaticCharts}
                         detailsMarker={manager.detailsMarkerInSvg}
                     />