Use automatic number formatting

Signed-off-by: Emir SARI <emir_sari@icloud.com>
pi-hole · Mar 5, 2024 · aed1f0d · aed1f0d
1 parent f79a404
commit aed1f0d
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 38 deletions.
diff --git a/scripts/pi-hole/js/charts.js b/scripts/pi-hole/js/charts.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global upstreams */
+/* global upstreams, utils */
 
 // eslint-disable-next-line no-unused-vars
 var THEME_COLORS = [
@@ -167,7 +167,7 @@ var customTooltips = function (context) {
     innerHtml += "</thead><tbody>";
     var printed = 0;
 
-    var devicePixel = (1 / window.devicePixelRatio).toFixed(1);
+    var devicePixel = utils.formatNumber(1 / window.devicePixelRatio, 1);
     bodyLines.forEach(function (body, i) {
       var labelColors = tooltip.labelColors[i];
       var style = "background-color: " + labelColors.backgroundColor;
@@ -288,15 +288,15 @@ var customTooltips = function (context) {
   }
 
   // Position tooltip and display
-  tooltipEl.style.top = tooltipY.toFixed(1) + "px";
-  tooltipEl.style.left = tooltipX.toFixed(1) + "px";
+  tooltipEl.style.top = utils.formatNumber(tooltipY, 1) + "px";
+  tooltipEl.style.left = utils.formatNumber(tooltipX, 1) + "px";
   if (arrowX === undefined) {
     tooltipEl.querySelector(".arrow").style.left = "";
   } else {
     // Calculate percentage X value depending on the tooltip's
     // width to avoid hanging arrow out on tooltip width changes
-    var arrowXpercent = ((100 / tooltipWidth) * arrowX).toFixed(1);
-    tooltipEl.querySelector(".arrow").style.left = arrowXpercent + "%";
+    var arrowXpercent = utils.formatNumber((100 / tooltipWidth) * arrowX, 1);
+    tooltipEl.querySelector(".arrow").style.left = utils.formatPercent(arrowXpercent);
   }
 
   tooltipEl.style.opacity = 1;
@@ -325,7 +325,7 @@ function doughnutTooltip(tooltipLabel) {
   // we therefore use 99.9 to decide if slices are hidden (we only show with 0.1 precision)
   if (percentageTotalShown > 99.9) {
     // All items shown
-    return label + ": " + itemPercentage + "%";
+    return label + ": " + utils.formatPercent(itemPercentage);
   } else {
     // set percentageTotalShown again without rounding to account
     // for cases where the total shown percentage would be <0.1% of all
@@ -335,7 +335,7 @@ function doughnutTooltip(tooltipLabel) {
       ":<br>&bull; " +
       itemPercentage +
       "% of all data<br>&bull; " +
-      ((tooltipLabel.parsed * 100) / percentageTotalShown).toFixed(1) +
+      utils.formatPercent((tooltipLabel.parsed * 100) / percentageTotalShown, 1) +
       "% of shown items"
     );
   }

diff --git a/scripts/pi-hole/js/footer.js b/scripts/pi-hole/js/footer.js
@@ -295,19 +295,19 @@ function updateSystemInfo() {
         '<i class="fa fa-fw fa-circle ' +
           color +
           '"></i>&nbsp;&nbsp;Memory usage:&nbsp;' +
-          percentRAM.toFixed(1) +
+          utils.formatPercent(percentRAM, 1) +
           "&thinsp;%"
       );
       $("#memory").prop(
         "title",
         "Total memory: " + totalRAMGB.toFixed(1) + " GB, Swap usage: " + swap
       );
       $("#sysinfo-memory-ram").text(
-        percentRAM.toFixed(1) + "% of " + totalRAMGB.toFixed(1) + " GB is used"
+        utils.formatPercent(percentRAM, 1) + "% of " + totalRAMGB.toFixed(1) + " GB is used"
       );
       if (system.memory.swap.total > 0) {
         $("#sysinfo-memory-swap").text(
-          percentSwap.toFixed(1) + "% of " + totalSwapGB.toFixed(1) + " GB is used"
+          utils.formatPercent(percentSwap, 1) + "% of " + totalSwapGB.toFixed(1) + " GB is used"
         );
       } else {
         $("#sysinfo-memory-swap").text("No swap space available");
@@ -318,35 +318,35 @@ function updateSystemInfo() {
         '<i class="fa fa-fw fa-circle ' +
           color +
           '"></i>&nbsp;&nbsp;CPU:&nbsp;' +
-          system.cpu.load.percent[0].toFixed(1) +
+          utils.formatPercent(system.cpu.load.percent[0], 1) +
           "&thinsp;%"
       );
       $("#cpu").prop(
         "title",
         "Load: " +
-          system.cpu.load.raw[0].toFixed(2) +
+          utils.formatNumber(system.cpu.load.raw[0], 2) +
           " " +
-          system.cpu.load.raw[1].toFixed(2) +
+          utils.formatNumber(system.cpu.load.raw[1], 2) +
           " " +
-          system.cpu.load.raw[2].toFixed(2) +
+          utils.formatNumber(system.cpu.load.raw[2], 2) +
           " on " +
-          system.cpu.nprocs +
+          utils.formatNumber(system.cpu.nprocs) +
           " cores running " +
-          system.procs +
+          utils.formatNumber(system.procs) +
           " processes"
       );
       $("#sysinfo-cpu").text(
-        system.cpu.load.percent[0].toFixed(1) +
+        utils.formatPercent(system.cpu.load.percent[0], 1) +
           "% (load: " +
-          system.cpu.load.raw[0].toFixed(2) +
+          utils.formatNumber(system.cpu.load.raw[0], 2) +
           " " +
-          system.cpu.load.raw[1].toFixed(2) +
+          utils.formatNumber(system.cpu.load.raw[1], 2) +
           " " +
-          system.cpu.load.raw[2].toFixed(2) +
+          utils.formatNumber(system.cpu.load.raw[2], 2) +
           ") on " +
-          system.cpu.nprocs +
+          utils.formatNumber(system.cpu.nprocs) +
           " cores running " +
-          system.procs +
+          utils.formatNumber(system.procs) +
           " processes"
       );
 
@@ -385,7 +385,7 @@ function updateSensorsInfo() {
       }
 
       if (data.sensors.cpu_temp !== null) {
-        var temp = data.sensors.cpu_temp.toFixed(1) + "&thinsp;" + unit;
+        var temp = utils.formatNumber(data.sensors.cpu_temp, 1) + "&thinsp;" + unit;
         var color =
           data.sensors.cpu_temp > data.sensors.hot_limit
             ? "text-red fa-temperature-high"
@@ -407,7 +407,7 @@ function updateSensorsInfo() {
             "  - " +
             temp.name +
             ": " +
-            temp.value.toFixed(1) +
+            utils.formatNumber(temp.value, 1) +
             unit +
             " (max: " +
             (temp.max === null ? "N/A" : temp.max.toFixed(1) + unit) +

diff --git a/scripts/pi-hole/js/groups-lists.js b/scripts/pi-hole/js/groups-lists.js
@@ -41,14 +41,16 @@ function format(data) {
         : "N/A",
     numberOfEntries =
       (data.number !== null && numbers === true
-        ? parseInt(data.number, 10).toLocaleString()
+        ? utils.formatNumber(parseInt(data.number, 10))
         : "N/A") +
       (data.abp_entries !== null && parseInt(data.abp_entries, 10) > 0 && numbers === true
-        ? " (out of which " + parseInt(data.abp_entries, 10).toLocaleString() + " are in ABP-style)"
+        ? " (out of which " +
+          utils.formatNumber(parseInt(data.abp_entries, 10)) +
+          " are in ABP-style)"
         : ""),
     nonDomains =
       data.invalid_domains !== null && numbers === true
-        ? parseInt(data.invalid_domains, 10).toLocaleString()
+        ? utils.formatNumber(parseInt(data.invalid_domains, 10))
         : "N/A";
 
   return `<table>

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
@@ -397,7 +397,7 @@ function updateSummaryData(runOnce = false) {
       intl.format(parseInt(data.clients.total, 10)) + " total clients"
     );
     glowIfChanged($("span#blocked_queries"), intl.format(parseFloat(data.queries.blocked)));
-    var formattedPercentage = utils.toPercent(data.queries.percent_blocked, 1);
+    var formattedPercentage = utils.formatPercent(data.queries.percent_blocked, 1);
     glowIfChanged($("span#percent_blocked"), formattedPercentage);
     glowIfChanged(
       $("span#gravity_size"),
@@ -534,7 +534,7 @@ $(function () {
                   percentage = (100 * blocked) / (permitted + blocked);
                 }
 
-                var formattedPercentage = utils.toPercent(percentage, 1);
+                var formattedPercentage = utils.formatPercent(percentage, 1);
                 label += `: ${tooltipLabel.parsed.y} (${formattedPercentage})`;
               } else {
                 label += ": " + tooltipLabel.parsed.y;

diff --git a/scripts/pi-hole/js/network.js b/scripts/pi-hole/js/network.js
@@ -134,7 +134,7 @@ $(function () {
       }
 
       // Set number of queries to localized string (add thousand separators)
-      $("td:eq(5)", row).html(data.numQueries.toLocaleString());
+      $("td:eq(5)", row).html(utils.formatNumber(data.numQueries));
 
       var ips = [];
       maxiter = Math.min(data.ips.length, MAXIPDISPLAY);

diff --git a/scripts/pi-hole/js/search.js b/scripts/pi-hole/js/search.js
@@ -132,7 +132,7 @@ function eventsource(partial) {
           "<br>    last updated:  " +
           utils.renderTimestamp(list.date_updated, "display") +
           " (" +
-          list.number.toLocaleString() +
+          utils.formatNumber(list.number) +
           " domains)" +
           "<br>    " +
           (list.enabled ? "enabled" : "disabled") +

diff --git a/scripts/pi-hole/js/settings-system.js b/scripts/pi-hole/js/settings-system.js
@@ -136,11 +136,11 @@ function setMetrics(data, prefix) {
       setMetrics(val, prefix + key + "-");
     } else if (prefix === "sysinfo-dns-replies-") {
       // Compute and display percentage of DNS replies in addition to the absolute value
-      const lval = val.toLocaleString();
+      const lval = utils.formatNumber(val);
       const percent = (100 * val) / data.sum;
       $("#" + prefix + key).text(lval + " (" + percent.toFixed(1) + "%)");
     } else {
-      const lval = val.toLocaleString();
+      const lval = utils.formatNumber(val);
       $("#" + prefix + key).text(lval);
     }
   }
@@ -168,7 +168,10 @@ function updateMetrics() {
       setMetrics(metrics, "sysinfo-");
 
       $("#cache-utilization").text(
-        cacheEntries.toLocaleString() + " (" + ((100 * cacheEntries) / cacheSize).toFixed(1) + "%)"
+        utils.formatNumber(cacheEntries) +
+          " (" +
+          utils.formatPercent((100 * cacheEntries) / cacheSize, 1) +
+          ")"
       );
 
       $("div[id^='sysinfo-metrics-overlay']").hide();

diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js
@@ -378,7 +378,7 @@ function addTD(content) {
   return "<td>" + content + "</td> ";
 }
 
-function toPercent(number, fractionDigits = 0) {
+function formatPercent(number, fractionDigits = 0) {
   const userLocale = navigator.language || "en-US";
   return new Intl.NumberFormat(userLocale, {
     style: "percent",
@@ -387,8 +387,16 @@ function toPercent(number, fractionDigits = 0) {
   }).format(number / 100);
 }
 
+function formatNumber(number, fractionDigits = 0) {
+  const userLocale = navigator.language || "en-US";
+  return new Intl.NumberFormat(userLocale, {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  }).format(number);
+}
+
 function colorBar(percentage, total, cssClass) {
-  const formattedPercentage = toPercent(percentage, 1);
+  const formattedPercentage = formatPercent(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>`;
@@ -686,7 +694,8 @@ window.utils = (function () {
     validateHostname: validateHostname,
     addFromQueryLog: addFromQueryLog,
     addTD: addTD,
-    toPercent: toPercent,
+    formatPercent: formatPercent,
+    formatNumber: formatNumber,
     colorBar: colorBar,
     checkMessages: checkMessages,
     changeBulkDeleteStates: changeBulkDeleteStates,