Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-25 02:31:59 -05:00
Code Issues 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 Daniel Lockyer
parent f1dad0519c
commit a631392a4f
No known key found for this signature in database
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}} {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
</PowerSelect> </PowerSelect>
</div> </div>
{{#if (eq this.chartDisplay "mrr")}} {{#if (eq this.selectedChartDisplay "mrr")}}
<Dashboard::Parts::Metric <Dashboard::Parts::Metric
@value="{{this.chartMetric.total}}" @value="{{this.chartMetric.total}}"
@trends={{this.hasTrends}} @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; this.chartDisplay = selected.value;
} }
get selectedChartDisplay() {
if (!this.hasPaidTiers && this.chartDisplay === 'mrr') {
return 'total';
}
return this.chartDisplay;
}
get chartMetric() { get chartMetric() {
if (this.chartDisplay === 'mrr') { if (this.selectedChartDisplay === 'mrr') {
return { return {
total: this.currentMRRFormatted, total: this.currentMRRFormatted,
trend: this.mrrTrend trend: this.mrrTrend
@ -102,11 +109,11 @@ export default class Anchor extends Component {
} }
get selectedDisplayOption() { 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() { 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() { get currentMRR() {
@ -186,13 +193,13 @@ export default class Anchor extends Component {
get chartTitle() { get chartTitle() {
// paid // paid
if (this.chartDisplay === 'paid') { if (this.selectedChartDisplay === 'paid') {
return 'Paid members'; return 'Paid members';
// free // free
} else if (this.chartDisplay === 'free') { } else if (this.selectedChartDisplay === 'free') {
return 'Free members'; return 'Free members';
// MRR // MRR
} else if (this.chartDisplay === 'mrr') { } else if (this.selectedChartDisplay === 'mrr') {
return 'MRR'; return 'MRR';
} }
// total // total
@ -204,17 +211,17 @@ export default class Anchor extends Component {
let labels; let labels;
let data; let data;
if (this.chartDisplay === 'paid') { if (this.selectedChartDisplay === 'paid') {
// paid // paid
stats = this.dashboardStats.filledMemberCountStats; stats = this.dashboardStats.filledMemberCountStats;
labels = stats.map(stat => stat.date); labels = stats.map(stat => stat.date);
data = stats.map(stat => stat.paid + stat.comped); data = stats.map(stat => stat.paid + stat.comped);
} else if (this.chartDisplay === 'free') { } else if (this.selectedChartDisplay === 'free') {
// free // free
stats = this.dashboardStats.filledMemberCountStats; stats = this.dashboardStats.filledMemberCountStats;
labels = stats.map(stat => stat.date); labels = stats.map(stat => stat.date);
data = stats.map(stat => stat.free); data = stats.map(stat => stat.free);
} else if (this.chartDisplay === 'mrr') { } else if (this.selectedChartDisplay === 'mrr') {
stats = this.dashboardStats.filledMrrStats; stats = this.dashboardStats.filledMrrStats;
labels = stats.map(stat => stat.date); labels = stats.map(stat => stat.date);
data = stats.map(stat => stat.mrr); data = stats.map(stat => stat.mrr);
@ -336,7 +343,7 @@ export default class Anchor extends Component {
}, },
callbacks: { callbacks: {
label: (tooltipItems, data) => { 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})}`; 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; document.querySelector('#gh-dashboard-anchor-tooltip .gh-dashboard-tooltip-value .value').innerHTML = value;
} else { } else {
@ -345,7 +352,7 @@ export default class Anchor extends Component {
} }
}, },
title: (tooltipItems) => { title: (tooltipItems) => {
if (this.chartType === 'mrr') { if (this.selectedChartDisplay === 'mrr') {
const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT); const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT);
document.querySelector('#gh-dashboard-anchor-tooltip .gh-dashboard-tooltip-label').innerHTML = value; document.querySelector('#gh-dashboard-anchor-tooltip .gh-dashboard-tooltip-label').innerHTML = value;
} else { } else {