Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

MRR/Members chart axis fix (#21359)

Browse source 
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">
This commit is contained in:
Daniël van der Winden 2024-10-23 09:02:30 +02:00 • committed by GitHub
parent 3f1fa96003
commit 8615bd538b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
ghost/admin/app/components/dashboard/charts/anchor-attribution.js
View file

@ -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
}
}