From a631392a4f3b851e39fe71ce9d7c433f502de059 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Mon, 3 Oct 2022 18:47:01 +0530
Subject: [PATCH] Fixed anchor chart load for site without paid tiers

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
---
 .../dashboard/charts/anchor-attribution.hbs   |  2 +-
 .../dashboard/charts/anchor-attribution.js    | 29 ++++++++++++-------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/ghost/admin/app/components/dashboard/charts/anchor-attribution.hbs b/ghost/admin/app/components/dashboard/charts/anchor-attribution.hbs
index 5b4ed51049..1abba2c133 100644
--- a/ghost/admin/app/components/dashboard/charts/anchor-attribution.hbs
+++ b/ghost/admin/app/components/dashboard/charts/anchor-attribution.hbs
@@ -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}}
diff --git a/ghost/admin/app/components/dashboard/charts/anchor-attribution.js b/ghost/admin/app/components/dashboard/charts/anchor-attribution.js
index 50e1d1fd2e..f973d1471f 100644
--- a/ghost/admin/app/components/dashboard/charts/anchor-attribution.js
+++ b/ghost/admin/app/components/dashboard/charts/anchor-attribution.js
@@ -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 {