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
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

View File

@ -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>

View File

@ -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 ----------------------------------------------------------------

View File

@ -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();