From bbb2397e9cbae0f99818390da9e4d30bd83cc985 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Fri, 10 Jan 2025 16:18:06 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20remember=20nice=20ticks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/@ourworldindata/grapher/src/axis/Axis.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/axis/Axis.ts b/packages/@ourworldindata/grapher/src/axis/Axis.ts
index 6ba046d334..3148b178d0 100644
--- a/packages/@ourworldindata/grapher/src/axis/Axis.ts
+++ b/packages/@ourworldindata/grapher/src/axis/Axis.ts
@@ -210,7 +210,8 @@ abstract class AbstractAxis {
         })
     }
 
-    private static makeScaleNice(
+    private niceTicks?: number[]
+    private makeScaleNice(
         scale: ScaleLinear<number, number>,
         totalTicksTarget: number
     ): ScaleLinear<number, number> {
@@ -223,14 +224,18 @@ abstract class AbstractAxis {
         const firstTick = ticks[0]
         const lastTick = last(ticks)!
 
+        this.niceTicks = ticks
+
         // if the the max or min value exceeds the last grid line by more than 10%,
         // expand the domain to include an additional grid line
         const [minValue, maxValue] = scale.domain()
         if (maxValue > lastTick + 0.1 * tickStep) {
             scale.domain([scale.domain()[0], lastTick + tickStep])
+            this.niceTicks = [...this.niceTicks, lastTick + tickStep]
         }
         if (minValue < firstTick - 0.1 * tickStep) {
             scale.domain([firstTick - tickStep, scale.domain()[1]])
+            this.niceTicks = [firstTick - tickStep, ...this.niceTicks]
         }
 
         return scale
@@ -241,7 +246,7 @@ abstract class AbstractAxis {
         const d3Scale = isLogScale ? scaleLog : scaleLinear
         let scale = d3Scale().domain(this.domain).range(this.range)
         if (this.nice && !isLogScale) {
-            scale = AbstractAxis.makeScaleNice(scale, this.totalTicksTarget)
+            scale = this.makeScaleNice(scale, this.totalTicksTarget)
         }
 
         if (this.config.domainValues) {
@@ -385,7 +390,9 @@ abstract class AbstractAxis {
         } else {
             // Only use priority 2 here because we want the start / end ticks
             // to be priority 1
-            ticks = d3_scale.ticks(this.totalTicksTarget).map((tickValue) => ({
+            const d3_ticks =
+                this.niceTicks ?? d3_scale.ticks(this.totalTicksTarget)
+            ticks = d3_ticks.map((tickValue) => ({
                 value: tickValue,
                 priority: 2,
             }))