ui: display numbers in a human readable form

NethServer/dev#6206
andre8244 · Jun 17, 2020 · 2a22545 · 2a22545
1 parent 52f6c6d
commit 2a22545
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 8 deletions.
diff --git a/ui/src/filters/filters.js b/ui/src/filters/filters.js
@@ -14,24 +14,69 @@ var Filters = {
                 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;
     },
-    secondsInHour: function (value) {
+    humanFormat: function (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;
+      },
+      secondsInHour: function (value) {
         if (!value || value.length == 0) {
             return '-'
         }

diff --git a/ui/src/views/Dashboard.vue b/ui/src/views/Dashboard.vue
@@ -39,7 +39,9 @@
           v-if="i != 'objects'"
           class="stats-container col-xs-12 col-sm-4 col-md-3 col-lg-2"
         >
-          <span class="card-pf-utilization-card-details-count stats-count">{{s}}</span>
+          <span class="card-pf-utilization-card-details-count stats-count" :title="s">
+            {{s | humanFormat}}
+          </span>
           <span class="card-pf-utilization-card-details-description stats-description">
             <span class="card-pf-utilization-card-details-line-2 stats-text">{{$t('dashboard.'+i)}}</span>
           </span>
@@ -53,7 +55,9 @@
           :key="i"
           class="stats-container col-xs-12 col-sm-4 col-md-3 col-lg-2"
         >
-          <span class="card-pf-utilization-card-details-count stats-count">{{o}}</span>
+          <span class="card-pf-utilization-card-details-count stats-count" :title="o">
+            {{o | humanFormat}}
+          </span>
           <span class="card-pf-utilization-card-details-description stats-description">
             <span class="card-pf-utilization-card-details-line-2 stats-text">{{$t('dashboard.'+i)}}</span>
           </span>
@@ -95,7 +99,9 @@
         v-if="i != 'total'"
         class="stats-container col-xs-12 col-sm-4 col-md-3 col-lg-2"
       >
-        <span class="card-pf-utilization-card-details-count stats-count">{{s}}</span>
+        <span class="card-pf-utilization-card-details-count stats-count" :title="s">
+          {{s | humanFormat}}
+        </span>
         <span class="card-pf-utilization-card-details-description stats-description">
           <span class="card-pf-utilization-card-details-line-2 stats-text">{{$t('dashboard.'+i)}}</span>
         </span>