Use automatic percent formatting

Signed-off-by: Emir SARI <[email protected]>
pi-hole · Mar 3, 2024 · 1abbfab · 1abbfab
1 parent da7c0ef
commit 1abbfab
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
@@ -397,10 +397,8 @@ function updateSummaryData(runOnce = false) {
       intl.format(parseInt(data.clients.total, 10)) + " total clients"
     );
     glowIfChanged($("span#blocked_queries"), intl.format(parseFloat(data.queries.blocked)));
-    glowIfChanged(
-      $("span#percent_blocked"),
-      parseFloat(data.queries.percent_blocked).toFixed(1) + "%"
-    );
+    var formattedPercentage = utils.toPercent(data.queries.percent_blocked, 1);
+    glowIfChanged($("span#percent_blocked"), formattedPercentage);
     glowIfChanged(
       $("span#gravity_size"),
       intl.format(parseInt(data.gravity.domains_being_blocked, 10))
@@ -536,7 +534,8 @@ $(function () {
                   percentage = (100 * blocked) / (permitted + blocked);
                 }
 
-                label += ": " + tooltipLabel.parsed.y + " (" + percentage.toFixed(1) + "%)";
+                var formattedPercentage = utils.toPercent(percentage, 1);
+                label += `: ${tooltipLabel.parsed.y} (${formattedPercentage})`;
               } else {
                 label += ": " + tooltipLabel.parsed.y;
               }

diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js
@@ -378,10 +378,20 @@ function addTD(content) {
   return "<td>" + content + "</td> ";
 }
 
+function toPercent(number, fractionDigits = 0) {
+  const userLocale = navigator.language || "en-US";
+  return new Intl.NumberFormat(userLocale, {
+      style: "percent",
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits,
+  }).format(number / 100);
+}
+
 function colorBar(percentage, total, cssClass) {
-  var title = percentage.toFixed(1) + "% of " + total;
-  var bar = '<div class="progress-bar ' + cssClass + '" style="width: ' + percentage + '%"></div>';
-  return '<div class="progress progress-sm" title="' + title + '"> ' + bar + " </div>";
+  const percentFormatted = toPercent(percentage, 1);
+  const title = `${percentFormatted} of ${total}`;
+  const bar = `<div class="progress-bar ${cssClass}" style="width: ${percentage}%"></div>`;
+  return `<div class="progress progress-sm" title="${title}"> ${bar} </div>`;
 }
 
 function checkMessages() {