use hugo partial to format metrics rather than js

rahulpundir019 · Oct 23, 2021 · b335a57 · b335a57
1 parent 828ec4c
commit b335a57
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 27 deletions.
diff --git a/layouts/_default/year-in-review.html b/layouts/_default/year-in-review.html
@@ -231,15 +231,15 @@ <h1>Heat metrics</h1>
           <!-- <img src="/assets/year-in-review/fire_outline.svg" alt="Fire emoji" class="emoji-outline"> -->
 
           <div class="metric">
-            <span class="metric-count" id="commit-count"></span>
+            <span class="metric-count" id="commit-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).commit_count }}</span>
             <span class="metric-name">commits</span>
             <div class="description">
               Commits reflect the amount of activity across our repositories.
             </div>
           </div>
 
           <div class="metric">
-            <span class="metric-count" id="committer-count"></span>
+            <span class="metric-count" id="committer-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).committer_count }}</span>
             <span class="metric-name">committers</span>
             <div class="description">
               Committers are the unique individuals that drive change in our repositories.
@@ -273,15 +273,15 @@ <h1>Light metrics</h1>
           <!-- <img src="/assets/year-in-review/sun_outline.svg" alt="Fire emoji" class="emoji-outline"> -->
 
           <div class="metric">
-            <span class="metric-count" id="watcher-count"></span>
+            <span class="metric-count" id="watcher-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).watcher_count }}</span>
             <span class="metric-name">watchers</span>
             <div class="description">
               Watchers receive notifications for some or all changes to our codebases.
             </div>
           </div>
 
           <div class="metric">
-            <span class="metric-count" id="star-count"></span>
+            <span class="metric-count" id="star-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).stars_count }}</span>
             <span class="metric-name">stars</span>
             <div class="description">
               Stars show preference for a repository, like a bookmark.
@@ -313,15 +313,15 @@ <h1>Love metrics</h1>
           <!-- <img src="/assets/year-in-review/heart_outline.svg" alt="Fire emoji" class="emoji-outline"> -->
 
           <div class="metric">
-            <span class="metric-count" id="fork-count"></span>
+            <span class="metric-count" id="fork-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).fork_count }}</span>
             <span class="metric-name">forks</span>
             <div class="description">
               Forks represent full-copies of our repositories, usually for development and testing.
             </div>
           </div>
 
           <div class="metric">
-            <span class="metric-count" id="merged-count"></span>
+            <span class="metric-count" id="merged-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).merged_count }}</span>
             <span class="metric-name">PRs merged</span>
             <div class="description">
               Our users contribute pull requests (PRs) directly back to us.
@@ -357,26 +357,6 @@ <h1>@TwitterOSS</h1>
     { name: "{{ $name }}", commitCount: "{{ $data.commit_count }}", },
   {{- end -}}
   ];
-
-  // Convert numbers greater than 1 million to m, and numbers greater than 10,000 to k
-  function formatNum(num) {
-    if (num >= 1e6) {
-      return `${Math.floor(num / 1e6)}m`
-    } else if (num >= 1e4) {
-      return `${Math.floor(num / 1e3)}k`
-    }
-    return num
-  }
-
-  // Insert metric counts
-  {{ range $.Site.Data.augur.aggregate_summary }}
-    document.getElementById("commit-count").innerText = formatNum("{{ .commit_count }}");
-    document.getElementById("committer-count").innerText = formatNum("{{ .committer_count }}");
-    document.getElementById("watcher-count").innerText = formatNum("{{ .watcher_count }}");
-    document.getElementById("star-count").innerText = formatNum("{{ .stars_count }}");
-    document.getElementById("fork-count").innerText = formatNum("{{ .fork_count }}");
-    document.getElementById("merged-count").innerText = formatNum("{{ .merged_count }}");
-  {{ end }}
 </script>
 
 <script src="{{ "js/main.js" | relURL }}"></script>

diff --git a/layouts/partials/formatNum.html b/layouts/partials/formatNum.html
@@ -0,0 +1,3 @@
+{{- if gt . 1e6 }}{{ int (div . 1e6) }}m
+{{- else if gt . 1e4}}{{ int (div . 1e3) }}k
+{{- else }}{{ . }}{{ end }}
diff --git a/static/js/year-in-review.js b/static/js/year-in-review.js
@@ -37,7 +37,7 @@ function renderTopRepos(reposList) {
         // Commit count
         const commitCountData = document.createElement('td');
         commitCountData.className = "commit-value";
-        commitCountData.innerHTML = formatNum(repo.commitCount);
+        commitCountData.innerHTML = repo.commitCount;
         row.appendChild(commitCountData);
 
         topTenReposTable.appendChild(row);