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

Improved number formatting in members screen

Browse Source 
no issue

- added `format-number` helper that uses browser's built-in `toLocaleString()` method to format numbers such as adding commas or periods to improve number readability (`123,000` instead of `123000`)
- updated members chart totals to use the helper
- replaced direct `.toLocaleString()` usage with the new helper so we can change global number formatting if needed
This commit is contained in:
Kevin Ansfield 2020-05-26 14:39:53 +01:00
parent f4c360b818
commit 91873d1857
3 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 "-" this.stats.total}}</div>
<div class="gh-members-chart-summary-data">{{if this.fetchStatsTask.isRunning "-" (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 "-" this.stats.total_in_range}}</div>
<div class="gh-members-chart-summary-data">{{if this.fetchStatsTask.isRunning "-" (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 "-" this.stats.new_today}}</div>
<div class="gh-members-chart-summary-data">{{if this.fetchStatsTask.isRunning "-" (format-number this.stats.new_today)}}</div>
</div>
</div>
</div>

3
ghost/admin/app/controllers/members.js
View File

@ -3,6 +3,7 @@ import ghostPaths from 'ghost-admin/utils/ghost-paths';
import {A} from '@ember/array';
import {action} from '@ember/object';
import {alias} from '@ember/object/computed';
import {formatNumber} from 'ghost-admin/helpers/format-number';
import {pluralize} from 'ember-inflector';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency-decorators';
@ -41,7 +42,7 @@ export default class MembersController extends Controller {
return 'Search result';
}
let count = `${members.length.toLocaleString()} ${pluralize(members.length, 'member', {withoutCount: true})}`;
let count = `${formatNumber(members.length)} ${pluralize(members.length, 'member', {withoutCount: true})}`;
if (selectedLabel && selectedLabel.slug) {
if (members.length > 1) {

9
ghost/admin/app/helpers/format-number.js Normal file
View File

@ -0,0 +1,9 @@
import {helper} from '@ember/component/helper';
export function formatNumber(number) {
return Number(number).toLocaleString();
}
export default helper(function ([number]/*, hash*/) {
return formatNumber(number);
});