From 8615bd538b56d71f6b83607d77cba392d6426aad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?=
 <danielvanderwinden@ghost.org>
Date: Wed, 23 Oct 2024 09:02:30 +0200
Subject: [PATCH] MRR/Members chart axis fix (#21359)

fixes
https://linear.app/ghost/issue/DES-869/dashboard-mrr-member-chart-axis-is-making-flat-growth-look-like

A slight decline/increase on the MRR/members chart was shown as a very
dramatic shift. These changes will make the chart appear more gradual
when the changes are small.

The chart will effectively "zoom in" on the
range where the values fluctuate. The y-axis minimum is 95% of the lowest data point, and the maximum is 105% of the highest data point. That way there's a small buffer above and below the data range, and the chart as a whole doesn't have the overly dramatic drops/peaks.

I've tested it with hardcoded values, as well as values inserted via the
API, and the charts look a lot better.

**Before**
<img width="1257" alt="1 - chart before"
src="https://github.com/user-attachments/assets/8d59fc38-0a57-4a7a-a83f-06e045057f45">
<img width="1255" alt="2 - chart before"
src="https://github.com/user-attachments/assets/46476d88-3991-4253-a5bc-76591ea67e39">

**After (same two values)**
<img width="1260" alt="3 - chart after"
src="https://github.com/user-attachments/assets/d5bcfdb2-40dd-4655-afd4-ba19a62d76b9">
<img width="1263" alt="4 - chart after"
src="https://github.com/user-attachments/assets/6c8cf189-6497-482e-9414-a7d77c00c533">

**Gradual decline**
<img width="1259" alt="5 - chart gradual"
src="https://github.com/user-attachments/assets/5ec2b470-f1d2-45cd-aba5-5f11e6e718fd">
<img width="1250" alt="6 - chart gradual"
src="https://github.com/user-attachments/assets/b6dd67ab-0b5e-47db-a9ef-d4ae10b78f73">

**More pronounced decline**
<img width="1270" alt="7 - chart dramatic"
src="https://github.com/user-attachments/assets/c43215c3-a687-47be-ab05-70fee855a345">
<img width="1256" alt="8 - chart dramatic"
src="https://github.com/user-attachments/assets/55ae833b-e47d-441a-98e0-fcfa2e9734a0">
<img width="1258" alt="9 - chart dramatic"
src="https://github.com/user-attachments/assets/b9fdef8f-61fa-4315-a662-b37eea2259d3">
---
 .../dashboard/charts/anchor-attribution.js    | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/ghost/admin/app/components/dashboard/charts/anchor-attribution.js b/ghost/admin/app/components/dashboard/charts/anchor-attribution.js
index f973d1471f..5b0e65fe63 100644
--- a/ghost/admin/app/components/dashboard/charts/anchor-attribution.js
+++ b/ghost/admin/app/components/dashboard/charts/anchor-attribution.js
@@ -374,7 +374,10 @@ export default class Anchor extends Component {
                         zeroLineWidth: 1
                     },
                     ticks: {
-                        display: false
+                        display: false,
+                        beginAtZero: false,
+                        suggestedMin: this.getYAxisMin(),
+                        suggestedMax: this.getYAxisMax()
                     }
                 }],
                 xAxes: [{
@@ -811,4 +814,28 @@ export default class Anchor extends Component {
 
         return Math.round((to - from) / from * 100);
     }
+
+    getYAxisMax() {
+        if (!this.chartData || !this.chartData.datasets || !this.chartData.datasets[0]) {
+            return null; // Let Chart.js handle it if data is not available
+        }
+        const data = this.chartData.datasets[0].data;
+        if (!data || data.length === 0) {
+            return null; 
+        }
+        const max = Math.max(...data);
+        return Math.ceil(max * 1.05); // End y-axis at 105% of the maximum value for all chart types
+    }
+
+    getYAxisMin() {
+        if (!this.chartData || !this.chartData.datasets || !this.chartData.datasets[0]) {
+            return null; 
+        }
+        const data = this.chartData.datasets[0].data;
+        if (!data || data.length === 0) {
+            return null; 
+        }
+        const min = Math.min(...data);
+        return Math.floor(min * 0.95); // Start y-axis at 95% of the minimum value for all chart types
+    }
 }