Improved number formatting in members screen

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

app/components/gh-members-chart.hbs

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

app/controllers/members.js

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

app/helpers/format-number.js

@@ -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);
+});