alignment of stat time

tabler/index.html

@@ -371,6 +371,20 @@
   <script src="./dist/js/tabler.min.js"></script>
 
   <script>
+    var bytesToString = function (bytes) {
+      // One way to write it, not the prettiest way to write it.
+
+      var fmt = parseInt;
+      if (bytes < 1024) {
+        return fmt(bytes) + 'B';
+      } else if (bytes < 1024 * 1024) {
+        return fmt(bytes / 1024) + 'kB';
+      } else if (bytes < 1024 * 1024 * 1024) {
+        return fmt(bytes / 1024 / 1024) + 'MB';
+      } else {
+        return fmt(bytes / 1024 / 1024 / 1024) + 'GB';
+      }
+    }
     var ctx = document.getElementById('chart-traffic').getContext('2d');
     var config = {
       type: 'line',
@@ -380,8 +394,7 @@
       options: {
         responsive: true,
         title: {
-          display: true,
-          text: 'Chart.js Time Point Data'
+          display: false,
         },
         animation: {
           duration: 0
@@ -392,7 +405,7 @@
             display: true,
             scaleLabel: {
               display: true,
-              labelString: 'Date'
+              labelString: 'Time'
             },
             ticks: {
               major: {
@@ -405,7 +418,12 @@
             display: true,
             scaleLabel: {
               display: true,
-              labelString: 'value'
+              labelString: 'Link Speed'
+            },
+            ticks: {
+              callback: function (value, index, values) {
+                return bytesToString(parseInt(value)) + "/s";
+              }
             }
           }]
         }
@@ -421,7 +439,7 @@
       });
     }
     var random = (function () {
-      var seed = 0x2F6E2B2; // 0x2F6E2B1
+      var seed = 0x2F6E2BC; // 0x2F6E2B1
       return function () {
         // Robert Jenkins’ 32 bit integer hash function
         seed = ((seed + 0x7ED55D16) + (seed << 12)) & 0xFFFFFFFF;
@@ -433,7 +451,8 @@
         return (seed & 0xFFFFFFF) / 0x10000000;
       };
     }());
-    colors = Array.from(Array(100), () => "#" + Math.floor(random() * 16777215).toString(16))
+    random();
+    colors = Array.from(Array(100), () => "#" + random().toString(16).substr(-6))
     var color = Chart.helpers.color;
 
     var update_stat = function () {
@@ -443,7 +462,7 @@
           return {
             label: value.name,
             backgroundColor: color(colors[index]).alpha(0.5).rgbString(),
-            borderColor: colors[index],
+            borderColor: color(colors[index]).alpha(0.8).rgbString(),
             fill: false,
             data: value.io_mean.map((value, index) => {
               return {
@@ -473,7 +492,7 @@
                     </td>
                     <td class="text-muted"></td>
                     <td class="text-muted"></td>
-                    <td class="text-right">
+                    <td class="text-muted">
                       <div class="chart-sparkline" id="sparkline-${index}"></div>
                     </td>
                   </tr>`