[WebUI] Show message size in IEC (base 1024) units

2 files changed, 22 insertions, 6 deletions

diff --git a/interface/js/app/history.js b/interface/js/app/history.js
index f2b8b8e46..0d953ec1e 100644
--- a/interface/js/app/history.js
+++ b/interface/js/app/history.js
@@ -24,8 +24,8 @@
 
 /* global FooTable */
 
-define(["jquery", "app/common", "app/libft", "d3", "footable"],
-    ($, common, libft, d3) => {
+define(["jquery", "app/common", "app/libft", "footable"],
+    ($, common, libft) => {
         "use strict";
         const ui = {};
         let prevVersion = null;
@@ -94,7 +94,7 @@ define(["jquery", "app/common", "app/libft", "d3", "footable"],
                 title: "Message size",
                 breakpoints: "xs sm",
                 style: {width: 120, maxWidth: 120},
-                formatter: d3.format(".3~s")
+                formatter: libft.formatBytesIEC
             }, {
                 name: "scan_time",
                 title: "Scan time",
diff --git a/interface/js/app/libft.js b/interface/js/app/libft.js
index eab3b6d3a..463ddec16 100644
--- a/interface/js/app/libft.js
+++ b/interface/js/app/libft.js
@@ -1,7 +1,7 @@
 /* global FooTable */
 
-define(["jquery", "app/common", "d3", "footable"],
-    ($, common, d3) => {
+define(["jquery", "app/common", "footable"],
+    ($, common) => {
         "use strict";
         const ui = {};
 
@@ -35,6 +35,22 @@ define(["jquery", "app/common", "d3", "footable"],
 
         // Public functions
 
+        ui.formatBytesIEC = function (bytes) {
+            // FooTable represents data as text even column type is "number".
+            if (!Number.isInteger(Number(bytes)) || bytes < 0) return "NaN";
+
+            const base = 1024;
+            const exponent = Math.floor(Math.log(bytes) / Math.log(base));
+
+            if (exponent > 8) return "∞";
+
+            const value = parseFloat((bytes / (base ** exponent)).toPrecision(3));
+            let unit = "BKMGTPEZY"[exponent];
+            if (exponent) unit += "iB";
+
+            return value + " " + unit;
+        };
+
         ui.columns_v2 = function (table) {
             return [{
                 name: "id",
@@ -125,7 +141,7 @@ define(["jquery", "app/common", "d3", "footable"],
                 title: "Msg size",
                 breakpoints: "xs sm md",
                 style: {minwidth: 50},
-                formatter: d3.format(".3~s")
+                formatter: ui.formatBytesIEC
             }, {
                 name: "time_real",
                 title: "Scan time",