Use automatic percent formatting

Signed-off-by: Emir SARI <emir_sari@icloud.com>

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;
               }

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 formattedPercentage = toPercent(percentage, 1);
+  const title = `${formattedPercentage} 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() {
@@ -676,6 +686,7 @@ window.utils = (function () {
     validateHostname: validateHostname,
     addFromQueryLog: addFromQueryLog,
     addTD: addTD,
+    toPercent: toPercent,
     colorBar: colorBar,
     checkMessages: checkMessages,
     changeBulkDeleteStates: changeBulkDeleteStates,