From 67b678774e3d84f1e26615b0a4dd0f49172493f8 Mon Sep 17 00:00:00 2001
From: Emir SARI <emir_sari@icloud.com>
Date: Sat, 2 Mar 2024 14:46:44 +0300
Subject: [PATCH] Use automatic percent formatting

Signed-off-by: Emir SARI <emir_sari@icloud.com>
---
 scripts/pi-hole/js/index.js |  9 ++++-----
 scripts/pi-hole/js/utils.js | 16 +++++++++++++---
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 160f89f0c6..0f2538c78f 100644
--- 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
index 545545385a..8881b7d1eb 100644
--- 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() {