ui: display numbers in a human readable form

NethServer/dev#6206
andre8244 · Jun 17, 2020 · b8f40b4 · b8f40b4
1 parent addd350
commit b8f40b4
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 5 deletions.
diff --git a/ui/js/app.js b/ui/js/app.js
@@ -63,20 +63,66 @@ function byteFormat(size) {
             break;
 
         case size >= 1024 && size < Math.pow(1024, 2):
-            result = Math.round(size / 1024 * 100) / 100 + " K";
+            result = Math.round(size / 1024 * 100) / 100 + " KB";
             break;
 
         case size >= Math.pow(1024, 2) && size < Math.pow(1024, 3):
-            result = Math.round(size / Math.pow(1024, 2) * 100) / 100 + " M";
+            result = Math.round(size / Math.pow(1024, 2) * 100) / 100 + " MB";
             break;
 
         case size >= Math.pow(1024, 3) && size < Math.pow(1024, 4):
-            result = Math.round(size / Math.pow(1024, 3) * 100) / 100 + " G";
+            result = Math.round(size / Math.pow(1024, 3) * 100) / 100 + " GB";
             break;
 
         default:
-            result = Math.round(size / Math.pow(1024, 4) * 100) / 100 + " T";
+            result = Math.round(size / Math.pow(1024, 4) * 100) / 100 + " TB";
     }
 
     return result;
 }
+
+function humanFormat(number, decimals = false) {
+    var result;
+
+    switch (true) {
+        case number === null || number === "" || isNaN(number):
+            result = "-";
+            break;
+
+        case number >= 0 && number < 1000:
+            result = number;
+            break;
+
+        case number >= 1000 && number < Math.pow(1000, 2):
+            if (decimals) {
+                result = Math.round(number / 1000 * 10) / 10 + " K";
+            } else {
+                result = Math.round(number / 1000) + " K";
+            }
+            break;
+
+        case number >= Math.pow(1000, 2) && number < Math.pow(1000, 3):
+            if (decimals) {
+                result = Math.round(number / Math.pow(1000, 2) * 10) / 10 + " M";
+            } else {
+                result = Math.round(number / Math.pow(1000, 2)) + " M";
+            }
+            break;
+
+        case number >= Math.pow(1000, 3) && number < Math.pow(1000, 4):
+            if (decimals) {
+                result = Math.round(number / Math.pow(1000, 3) * 10) / 10 + " B";
+            } else {
+                result = Math.round(number / Math.pow(1000, 3)) + " B";
+            }
+            break;
+
+        default:
+            if (decimals) {
+                result = Math.round(number / Math.pow(1000, 4) * 10) / 10 + " T";
+            } else {
+                result = Math.round(number / Math.pow(1000, 4)) + " T";
+            }
+    }
+    return result;
+}
diff --git a/ui/views/dashboard.html b/ui/views/dashboard.html
@@ -70,7 +70,9 @@ <h3 i18n="disk_usage"></h3>
                         // format byte size
                         statusText = byteFormat(status[s]);
                     } else {
-                        statusText = status[s];
+                        // make numbers human readable
+                        statusText = humanFormat(status[s]);
+                        $('#stats-' + s).attr('title', status[s])
                     }
                     $('#stats-' + s).text(statusText || 0)
                 }