Format numbers with decimal separator in dashboard

Seneca-CDOT · Jan 14, 2022 · 73b30d8 · 73b30d8
1 parent d5b7b1d
commit 73b30d8
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/src/api/status/src/server.js b/src/api/status/src/server.js
@@ -44,6 +44,18 @@ service.app.engine(
     defaultLayout: 'main',
     layoutsDir: path.join(__dirname, '/views/layouts/'),
     partialsDir: path.join(__dirname, '/views/partials/'),
+    helpers: {
+      formatNumber(numberLike) {
+        // Coerce to Number if it is a String.
+        // If numberLike is a Number, then the operation is idempotent.
+        // If it cannot be coerced to a Number, then it is NaN.
+        const number = +numberLike;
+        if (Number.isNaN(number)) {
+          return numberLike;
+        }
+        return new Intl.NumberFormat().format(number);
+      },
+    },
   })
 );
 service.app.set('view engine', 'hbs');

diff --git a/src/api/status/src/views/partials/commitCard.hbs b/src/api/status/src/views/partials/commitCard.hbs
@@ -9,7 +9,7 @@
         <h6 class="mb-0 text-capitalize">{{githubInfo.title}}</h6>
         <div>
           <p class="text-sm mb-0 text-capitalize">Yearly Commits</p>
-          <h4 class="mb-0">{{githubInfo.yearlyCommits.commits}}</h4>
+          <h4 class="mb-0">{{formatNumber githubInfo.yearlyCommits.commits}}</h4>
         </div>
         {{#if githubInfo.weeklyCommits.commits}}
         <div>
@@ -23,11 +23,11 @@
     <div class="card-footer p-3">
       {{#if githubInfo.weeklyCommits.commits}}
       <p class="mb-0">
-        <span class="text-success text-sm font-weight-bolder">{{githubInfo.weeklyCommits.linesAdded}}</span>
+        <span class="text-success text-sm font-weight-bolder">{{formatNumber githubInfo.weeklyCommits.linesAdded}}</span>
         lines added
       </p>
       <p class="mb-0">
-        <span class="text-danger text-sm font-weight-bolder">{{githubInfo.weeklyCommits.linesRemoved}}</span>
+        <span class="text-danger text-sm font-weight-bolder">{{formatNumber githubInfo.weeklyCommits.linesRemoved}}</span>
         lines removed
       </p>
       {{else}}

diff --git a/src/api/status/src/views/partials/jobCountCard.hbs b/src/api/status/src/views/partials/jobCountCard.hbs
@@ -15,7 +15,7 @@
       <div class="text-end pt-1">
         <h6 class="mb-0 text-capitalize">Telescope</h6>
         <p class="text-sm mb-0 text-capitalize">Jobs in queue</p>
-        <h4 class="mb-0" id="job-count">{{#if jobCount}}{{jobCount}}{{else}}N/A{{/if}}</h4>
+        <h4 class="mb-0" id="job-count">{{#if jobCount}}{{formatNumber jobCount}}{{else}}N/A{{/if}}</h4>
       </div>
     </div>
     <hr class="dark horizontal my-0" />

diff --git a/src/api/status/src/views/partials/totalFeedCard.hbs b/src/api/status/src/views/partials/totalFeedCard.hbs
@@ -15,7 +15,7 @@
       <div class="text-end pt-1">
         <h6 class="mb-0 text-capitalize">Telescope</h6>
         <p class="text-sm mb-0 text-capitalize">Total feeds</p>
-        <h4 class="mb-0" id="feeds-count">{{#if totalFeeds}}{{totalFeeds}}{{else}}N/A{{/if}}</h4>
+        <h4 class="mb-0" id="feeds-count">{{#if totalFeeds}}{{formatNumber totalFeeds}}{{else}}N/A{{/if}}</h4>
       </div>
     </div>
     <hr class="dark horizontal my-0" />

diff --git a/src/api/status/src/views/partials/totalPostCard.hbs b/src/api/status/src/views/partials/totalPostCard.hbs
@@ -15,7 +15,7 @@
       <div class="text-end pt-1">
         <h6 class="mb-0 text-capitalize">Telescope</h6>
         <p class="text-sm mb-0 text-capitalize">Total posts</p>
-        <h4 class="mb-0" id="totalPosts">{{#if totalPost}}{{totalPost}}{{else}}N/A{{/if}}</h4>
+        <h4 class="mb-0" id="totalPosts">{{#if totalPost}}{{formatNumber totalPost}}{{else}}N/A{{/if}}</h4>
       </div>
     </div>
     <hr class="dark horizontal my-0" />