From 250e6cdefd31d70680f81e085a23ce6e77b6ee11 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/formatter.mjs | 18 ++++++++++++++++++
 scripts/pi-hole/js/index.js      | 11 ++++++-----
 scripts/pi-hole/js/utils.js      |  9 ++++++---
 3 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 scripts/pi-hole/js/formatter.mjs

diff --git a/scripts/pi-hole/js/formatter.mjs b/scripts/pi-hole/js/formatter.mjs
new file mode 100644
index 0000000000..4ca4865641
--- /dev/null
+++ b/scripts/pi-hole/js/formatter.mjs
@@ -0,0 +1,18 @@
+/* Pi-hole: A black hole for Internet advertisements
+ *  (c) 2024 Pi-hole, LLC (https://pi-hole.net)
+ *  Network-wide ad blocking via your own hardware.
+ *
+ *  This file is copyright under the latest version of the EUPL.
+ *  Please see LICENSE file for your rights under this license. */
+
+export 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);
+}
+
+// Appease the CI
+toPercent(0);
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 160f89f0c6..4f634be693 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -7,6 +7,8 @@
 
 /* global utils:false, Chart:false, apiFailure:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false, ChartDeferred:false, REFRESH_INTERVAL: false */
 
+import { toPercent } from "./formatter.mjs";
+
 // Define global variables
 var timeLineChart, clientsChart;
 var queryTypePieChart, forwardDestinationPieChart;
@@ -397,10 +399,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 = 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 +536,8 @@ $(function () {
                   percentage = (100 * blocked) / (permitted + blocked);
                 }
 
-                label += ": " + tooltipLabel.parsed.y + " (" + percentage.toFixed(1) + "%)";
+                var formattedPercentage = 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..2d1231465a 100644
--- a/scripts/pi-hole/js/utils.js
+++ b/scripts/pi-hole/js/utils.js
@@ -7,6 +7,8 @@
 
 /* global moment:false, apiFailure: false, updateFtlInfo: false */
 
+import { toPercent } from "./formatter.mjs";
+
 $(function () {
   // CSRF protection for AJAX requests, this has to be configured globally
   // because we are using the jQuery $.ajax() function directly in some cases
@@ -379,9 +381,10 @@ function addTD(content) {
 }
 
 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() {