TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 14:03:48 +03:00
Code Issues Projects Releases Wiki Activity

Fixed anchor chart load for site without paid tiers

Browse Source 
refs https://github.com/TryGhost/Team/issues/2019

- the anchor chart keeps showing the loading spinner for a site that has no paid tiers and the source attribution flag switched on.
- this was because it tries to load the the MRR chart by default, which doesn't has any data when paid tiers are disabled.
- updated the chart to use `total members` data when paid tiers is disabled
This commit is contained in:
Rishabh 2022-10-03 18:47:01 +05:30 committed by Rishabh Garg
parent 226794e201
commit 09fbe19a31
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/dashboard/charts/anchor-attribution.hbs
View File

@ -17,7 +17,7 @@
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
</PowerSelect>
</div>
{{#if (eq this.chartDisplay "mrr")}}
{{#if (eq this.selectedChartDisplay "mrr")}}
<Dashboard::Parts::Metric
@value="{{this.chartMetric.total}}"
@trends={{this.hasTrends}}

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

@ -91,8 +91,15 @@ export default class Anchor extends Component {
this.chartDisplay = selected.value;
}
get selectedChartDisplay() {
if (!this.hasPaidTiers && this.chartDisplay === 'mrr') {
return 'total';
}
return this.chartDisplay;
}
get chartMetric() {
if (this.chartDisplay === 'mrr') {
if (this.selectedChartDisplay === 'mrr') {
return {
total: this.currentMRRFormatted,
trend: this.mrrTrend
@ -102,11 +109,11 @@ export default class Anchor extends Component {
}
get selectedDisplayOption() {
return this.displayOptions.find(d => d.value === this.chartDisplay) ?? this.displayOptions[0];
return this.displayOptions.find(d => d.value === this.selectedChartDisplay) ?? this.displayOptions[0];
}
get loading() {
return this.dashboardStats.memberCountStats === null || this.dashboardStats.mrrStats === null || this.resizing;
return this.dashboardStats.memberCountStats === null || (this.hasPaidTiers && this.dashboardStats.mrrStats === null) || this.resizing;
}
get currentMRR() {
@ -186,13 +193,13 @@ export default class Anchor extends Component {
get chartTitle() {
// paid
if (this.chartDisplay === 'paid') {
if (this.selectedChartDisplay === 'paid') {
return 'Paid members';
// free
} else if (this.chartDisplay === 'free') {
} else if (this.selectedChartDisplay === 'free') {
return 'Free members';
// MRR
} else if (this.chartDisplay === 'mrr') {
} else if (this.selectedChartDisplay === 'mrr') {
return 'MRR';
}
// total
@ -204,17 +211,17 @@ export default class Anchor extends Component {
let labels;
let data;
if (this.chartDisplay === 'paid') {
if (this.selectedChartDisplay === 'paid') {
// paid
stats = this.dashboardStats.filledMemberCountStats;
labels = stats.map(stat => stat.date);
data = stats.map(stat => stat.paid + stat.comped);
} else if (this.chartDisplay === 'free') {
} else if (this.selectedChartDisplay === 'free') {
// free
stats = this.dashboardStats.filledMemberCountStats;
labels = stats.map(stat => stat.date);
data = stats.map(stat => stat.free);
} else if (this.chartDisplay === 'mrr') {
} else if (this.selectedChartDisplay === 'mrr') {
stats = this.dashboardStats.filledMrrStats;
labels = stats.map(stat => stat.date);
data = stats.map(stat => stat.mrr);
@ -336,7 +343,7 @@ export default class Anchor extends Component {
},
callbacks: {
label: (tooltipItems, data) => {
if (this.chartDisplay === 'mrr') {
if (this.selectedChartDisplay === 'mrr') {
const value = `${that.mrrCurrencySymbol}${ghPriceAmount(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index], {cents: false})}`;
document.querySelector('#gh-dashboard-anchor-tooltip .gh-dashboard-tooltip-value .value').innerHTML = value;
} else {
@ -345,7 +352,7 @@ export default class Anchor extends Component {
}
},
title: (tooltipItems) => {
if (this.chartType === 'mrr') {
if (this.selectedChartDisplay === 'mrr') {
const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT);
document.querySelector('#gh-dashboard-anchor-tooltip .gh-dashboard-tooltip-label').innerHTML = value;
} else {