Add Intl formatting to large numbers on the UI.

frontend/src/utils.js

@@ -23,6 +23,7 @@ const htmlEntities = {
 export default class Utils {
   constructor(i18n) {
     this.i18n = i18n;
+    this.intlNumFormat = new Intl.NumberFormat();
   }
 
   // Parses an ISO timestamp to a simpler form.
@@ -78,6 +79,10 @@ export default class Utils {
     return out.toFixed(2) + pfx;
   }
 
+  formatNumber(v) {
+    return this.intlNumFormat.format(v);
+  }
+
   // Parse one or more numeric ids as query params and return as an array of ints.
   parseQueryIDs = (ids) => {
     if (!ids) {

frontend/src/views/Campaigns.vue

@@ -107,20 +107,20 @@
         <div class="fields stats" :set="stats = getCampaignStats(props.row)">
           <p>
             <label>{{ $t('campaigns.views') }}</label>
-            {{ props.row.views }}
+            {{ $utils.formatNumber(props.row.views) }}
           </p>
           <p>
             <label>{{ $t('campaigns.clicks') }}</label>
-            {{ props.row.clicks }}
+            {{ $utils.formatNumber(props.row.clicks) }}
           </p>
           <p>
             <label>{{ $t('campaigns.sent') }}</label>
-            {{ stats.sent }} / {{ stats.toSend }}
+            {{ $utils.formatNumber(stats.sent) }} / {{ $utils.formatNumber(stats.toSend) }}
           </p>
           <p>
             <label>{{ $t('globals.terms.bounces') }}</label>
             <router-link :to="{name: 'bounces', query: { campaign_id: props.row.id }}">
-              {{ props.row.bounces }}
+              {{ $utils.formatNumber(props.row.bounces) }}
             </router-link>
           </p>
           <p title="Speed" v-if="stats.rate">

frontend/src/views/Lists.vue

@@ -65,7 +65,7 @@
         :label="$t('globals.terms.subscribers')" header-class="cy-subscribers"
         numeric sortable centered>
         <router-link :to="`/subscribers/lists/${props.row.id}`">
-          {{ props.row.subscriberCount }}
+          {{ $utils.formatNumber(props.row.subscriberCount) }}
         </router-link>
       </b-table-column>