TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-29 15:12:58 +03:00
Code Issues Projects Releases Wiki Activity

Fixed members chart

Browse Source 
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
This commit is contained in:
Kevin Ansfield 2020-05-27 16:12:13 +01:00
parent 86702ed949
commit 76b93c3be7
3 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ghost/admin/app/components/gh-members-chart.hbs
View File

@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="gh-members-chart-container"> <div class="gh-members-chart-container">
{{#if this.fetchStatsTask.isRunning}} {{#if (not this.stats)}}
<GhLoadingSpinner /> <GhLoadingSpinner />
{{else}} {{else}}
<EmberChart <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 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"> <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> <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>
<div class="flex-auto flex flex-column justify-center items-start pa4 bb b--whitegrey"> <div class="flex-auto flex flex-column justify-center items-start pa4 bb b--whitegrey">
{{#if (eq this.range "all-time")}} {{#if (eq this.range "all-time")}}
@ -54,11 +54,11 @@
{{else}} {{else}}
<h3 class="f-small ttu midgrey fw5">Signed up in the last {{this.range}} days</h3> <h3 class="f-small ttu midgrey fw5">Signed up in the last {{this.range}} days</h3>
{{/if}} {{/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>
<div class="flex-auto flex flex-column justify-center items-start pa4"> <div class="flex-auto flex flex-column justify-center items-start pa4">
<h3 class="f-small ttu midgrey fw5">Signed up today</h3> <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> </div>
</div> </div>

20
ghost/admin/app/components/gh-members-chart.js
View File

@ -63,18 +63,22 @@ export default Component.extend({
// Tasks ------------------------------------------------------------------- // Tasks -------------------------------------------------------------------
fetchStatsTask: task(function* () { fetchStatsTask: task(function* () {
this.set('stats', null);
let stats = yield this.membersStats.fetch({days: this.selectedRange.days}); let stats = yield this.membersStats.fetch({days: this.selectedRange.days});
this.set('stats', stats); if (stats) {
this.set('stats', stats);
this.setChartOptions({ this.setChartOptions({
rangeInDays: Object.keys(stats.total_on_date).length rangeInDays: Object.keys(stats.total_on_date).length
}); });
this.setChartData({ this.setChartData({
dateLabels: Object.keys(stats.total_on_date), dateLabels: Object.keys(stats.total_on_date),
dateValues: Object.values(stats.total_on_date) dateValues: Object.values(stats.total_on_date)
}); });
}
}), }),
// Internal ---------------------------------------------------------------- // Internal ----------------------------------------------------------------

5
ghost/admin/app/services/members-stats.js
View File

@ -11,11 +11,12 @@ export default class MembersStatsService extends Service {
fetch({days}) { fetch({days}) {
// return existing stats unless data is > 1 min old // return existing stats unless data is > 1 min old
let daysChanged = days === this._days; let daysChanged = days === this._days;
let staleData = this._lastFetched - new Date() > 1 * 60 * 1000; let staleData = this._lastFetched && this._lastFetched - new Date() > 1 * 60 * 1000;
if (!this._forceRefresh && !daysChanged && !staleData) { if (this.stats && !this._forceRefresh && !daysChanged && !staleData) {
return Promise.resolve(this.stats); return Promise.resolve(this.stats);
} }
this._forceRefresh = false;
this._days = days; this._days = days;
this._lastFetched = new Date(); this._lastFetched = new Date();