From 76b93c3be7582de258be48942e01f5772aa49710 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 27 May 2020 16:12:13 +0100
Subject: [PATCH] Fixed members chart

no issue

- "stale data" logic was incorrect so we were always returning `undefined` from `membersStats.fetch()`
- improved behaviour of the chart when stats are not available or are loading
---
 .../admin/app/components/gh-members-chart.hbs |  8 ++++----
 .../admin/app/components/gh-members-chart.js  | 20 +++++++++++--------
 ghost/admin/app/services/members-stats.js     |  5 +++--
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/ghost/admin/app/components/gh-members-chart.hbs b/ghost/admin/app/components/gh-members-chart.hbs
index a18a290a9d..d543c7b15d 100644
--- a/ghost/admin/app/components/gh-members-chart.hbs
+++ b/ghost/admin/app/components/gh-members-chart.hbs
@@ -26,7 +26,7 @@
             </div>
         </div>
         <div class="gh-members-chart-container">
-            {{#if this.fetchStatsTask.isRunning}}
+            {{#if (not this.stats)}}
                 <GhLoadingSpinner />
             {{else}}
                 <EmberChart
@@ -46,7 +46,7 @@
     <div class="flex flex-column justify-between gh-members-chart-summary bg-white br3 shadow-1 bg-grouped-table">
         <div class="flex-auto flex flex-column justify-center items-start pa4 bb b--whitegrey">
             <h3 class="f-small ttu midgrey fw5">Total Members</h3>
-            <div class="gh-members-chart-summary-data">{{if this.fetchStatsTask.isRunning "-" (format-number this.stats.total)}}</div>
+            <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total)}}</div>
         </div>
         <div class="flex-auto flex flex-column justify-center items-start pa4 bb b--whitegrey">
             {{#if (eq this.range "all-time")}}
@@ -54,11 +54,11 @@
             {{else}}
                 <h3 class="f-small ttu midgrey fw5">Signed up in the last {{this.range}} days</h3>
             {{/if}}
-            <div class="gh-members-chart-summary-data">{{if this.fetchStatsTask.isRunning "-" (format-number this.stats.total_in_range)}}</div>
+            <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total_in_range)}}</div>
         </div>
         <div class="flex-auto flex flex-column justify-center items-start pa4">
             <h3 class="f-small ttu midgrey fw5">Signed up today</h3>
-            <div class="gh-members-chart-summary-data">{{if this.fetchStatsTask.isRunning "-" (format-number this.stats.new_today)}}</div>
+            <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.new_today)}}</div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/gh-members-chart.js b/ghost/admin/app/components/gh-members-chart.js
index 7206f8d47e..cb6d2da488 100644
--- a/ghost/admin/app/components/gh-members-chart.js
+++ b/ghost/admin/app/components/gh-members-chart.js
@@ -63,18 +63,22 @@ export default Component.extend({
     // Tasks -------------------------------------------------------------------
 
     fetchStatsTask: task(function* () {
+        this.set('stats', null);
+
         let stats = yield this.membersStats.fetch({days: this.selectedRange.days});
 
-        this.set('stats', stats);
+        if (stats) {
+            this.set('stats', stats);
 
-        this.setChartOptions({
-            rangeInDays: Object.keys(stats.total_on_date).length
-        });
+            this.setChartOptions({
+                rangeInDays: Object.keys(stats.total_on_date).length
+            });
 
-        this.setChartData({
-            dateLabels: Object.keys(stats.total_on_date),
-            dateValues: Object.values(stats.total_on_date)
-        });
+            this.setChartData({
+                dateLabels: Object.keys(stats.total_on_date),
+                dateValues: Object.values(stats.total_on_date)
+            });
+        }
     }),
 
     // Internal ----------------------------------------------------------------
diff --git a/ghost/admin/app/services/members-stats.js b/ghost/admin/app/services/members-stats.js
index f925298b50..be1d1481ab 100644
--- a/ghost/admin/app/services/members-stats.js
+++ b/ghost/admin/app/services/members-stats.js
@@ -11,11 +11,12 @@ export default class MembersStatsService extends Service {
     fetch({days}) {
         // return existing stats unless data is > 1 min old
         let daysChanged = days === this._days;
-        let staleData = this._lastFetched - new Date() > 1 * 60 * 1000;
-        if (!this._forceRefresh && !daysChanged && !staleData) {
+        let staleData = this._lastFetched && this._lastFetched - new Date() > 1 * 60 * 1000;
+        if (this.stats && !this._forceRefresh && !daysChanged && !staleData) {
             return Promise.resolve(this.stats);
         }
 
+        this._forceRefresh = false;
         this._days = days;
         this._lastFetched = new Date();