Fixed empty data handling for mrr chart

refs https://github.com/TryGhost/Team/issues/469

ghost/admin/app/components/gh-members-chart.js

@@ -16,6 +16,7 @@ export default Component.extend({
     nightShift: false,
 
     stats: null,
+    chartStats: null,
     chartData: null,
     chartOptions: null,
     showSummary: true,
@@ -64,6 +65,10 @@ export default Component.extend({
         if (this._lastNightShift !== undefined && this.nightShift !== this._lastNightShift) {
             this.setChartOptions();
         }
+
+        if (this.chartStats) {
+            this.setMRRChartData(this.chartStats);
+        }
         this._lastNightShift = this.nightShift;
     },
 
@@ -77,24 +82,19 @@ export default Component.extend({
     // Tasks -------------------------------------------------------------------
 
     fetchStatsTask: task(function* () {
-        this.set('stats', null);
         let stats;
-        if (this.chartType === 'mrr') {
-            stats = yield this.membersStats.fetchMRR();
-            this.setMRRChartData(stats);
-        } else if (this.chartType === 'counts') {
-            stats = yield this.membersStats.fetchCounts();
-            this.setCountsChartData(stats);
-        } else {
+        if (this.chartType !== 'mrr') {
+            this.set('stats', null);
             stats = yield this.membersStats.fetch();
             this.setOriginalChartData(stats);
         }
     }),
 
     setMRRChartData(stats) {
-        const statsForCurrency = stats[0];
-        statsForCurrency.data = this.membersStats.fillDates(statsForCurrency.data) || {};
-        if (stats) {
+        const statsForCurrency = stats && stats[0];
+        if (statsForCurrency) {
+            statsForCurrency.data = this.membersStats.fillDates(statsForCurrency.data) || {};
+
             this.set('stats', statsForCurrency);
 
             this.setChartOptions({
@@ -106,6 +106,15 @@ export default Component.extend({
                 dateLabels: Object.keys(statsForCurrency.data),
                 dateValues: Object.values(statsForCurrency.data).map(val => val / 100)
             });
+        } else {
+            this.set('stats', {});
+            this.set('chartHeading', 'MRR');
+
+            this.setChartData({
+                label: 'Total MRR',
+                dateLabels: [],
+                dateValues: []
+            });
         }
     },
 

ghost/admin/app/controllers/dashboard.js

@@ -13,10 +13,27 @@ export default class DashboardController extends Controller {
         error: null,
         loading: false
     };
+    @tracked
+    mrrStats = {
+        data: null,
+        error: null,
+        loading: false
+    };
 
     constructor(...args) {
         super(...args);
         this.loadEvents();
+        this.loadCharts();
+    }
+
+    loadCharts() {
+        this.membersStats.fetchMRR().then((stats) => {
+            this.mrrStats.data = stats;
+            this.events.loading = false;
+        }, (error) => {
+            this.mrrStats.error = error;
+            this.events.loading = false;
+        });
     }
 
     loadEvents() {

ghost/admin/app/services/members-stats.js

@@ -46,16 +46,15 @@ export default class MembersStatsService extends Service {
     }
 
     fetchCounts() {
-        let daysChanged = this._lastFetchedDays !== this.days;
-        let staleData = this._lastFetched && this._lastFetched - new Date() > 1 * 60 * 1000;
+        let staleData = this._lastFetchedCounts && this._lastFetchedCounts - new Date() > 1 * 60 * 1000;
 
         // return an already in-progress promise unless params have changed
-        if (this._fetchCountsTask.isRunning && !this._forceRefresh && !daysChanged) {
+        if (this._fetchCountsTask.isRunning) {
             return this._fetchCountsTask.last;
         }
 
         // return existing stats unless data is > 1 min old
-        if (this.countStats && !this._forceRefresh && !daysChanged && !staleData) {
+        if (this.countStats && !this._forceRefresh && !staleData) {
             return Promise.resolve(this.stats);
         }
 
@@ -79,16 +78,15 @@ export default class MembersStatsService extends Service {
     }
 
     fetchMRR() {
-        let daysChanged = this._lastFetchedDays !== this.days;
-        let staleData = this._lastFetched && this._lastFetched - new Date() > 1 * 60 * 1000;
+        let staleData = this._lastFetchedMRR && this._lastFetchedMRR - new Date() > 1 * 60 * 1000;
 
         // return an already in-progress promise unless params have changed
-        if (this._fetchMRRTask.isRunning && !this._forceRefresh && !daysChanged) {
+        if (this._fetchMRRTask.isRunning) {
             return this._fetchMRRTask.last;
         }
 
         // return existing stats unless data is > 1 min old
-        if (this.mrrStats && !this._forceRefresh && !daysChanged && !staleData) {
+        if (this.mrrStats && !this._forceRefresh && !staleData) {
             return Promise.resolve(this.stats);
         }
 
@@ -101,8 +99,7 @@ export default class MembersStatsService extends Service {
 
     @task
     *_fetchCountsTask() {
-        this._lastFetched = new Date();
-        this._forceRefresh = false;
+        this._lastFetchedCounts = new Date();
 
         let statsUrl = this.ghostPaths.url.api('members/stats/count');
         let stats = yield this.ajax.request(statsUrl);
@@ -112,8 +109,7 @@ export default class MembersStatsService extends Service {
 
     @task
     *_fetchMRRTask() {
-        this._lastFetched = new Date();
-        this._forceRefresh = false;
+        this._lastFetchedMRR = new Date();
 
         let statsUrl = this.ghostPaths.url.api('members/stats/mrr');
         let stats = yield this.ajax.request(statsUrl);

ghost/admin/app/templates/dashboard.hbs

@@ -17,9 +17,15 @@
                         <div class="data">$0</div>
                         <div class="growth">0.0%</div>
                     </div>
-                    <div class="gh-dashboard-chart">
-                        <GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" style="width:100%" />
-                    </div>
+                    {{#if this.mrrStats.data}}
+                        <div class="gh-dashboard-chart">
+                            <GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" style="width:100%" @chartStats={{this.mrrStats.data}} />
+                        </div>
+                    {{else}}
+                        <div class="gh-dashboard-chart nodata">
+                            No data
+                        </div>
+                    {{/if}}
                 </div>
             </div>
             <div class="gh-dashboard-box total-members">
@@ -32,7 +38,7 @@
                         </div>
                     </div>
                     <div class="gh-dashboard-chart small">
-                        <GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="counts" style="width:100%" />
+                        No data
                     </div>
                 </div>
             </div>