🚸 Improvements on Conninfo module

Display true Mb/s transfer rates and total transferred values

src/assets/css/mod_conninfo.css

@@ -36,9 +36,18 @@ div#mod_conninfo_innercontainer {
 div#mod_conninfo h1 {
     font-size: 1.48vh;
     margin: 0vh;
+    margin-bottom: -1vh;
     width: 98%;
 }
 
+div#mod_conninfo h2 {
+    font-size: 1.4vh;
+    margin: 0vh;
+    margin-bottom: -0.7vh;
+    width: 98%;
+    opacity: .5;
+}
+
 div#mod_conninfo i {
     font-style: normal;
     font-size: 1.20vh;

src/classes/conninfo.class.js

@@ -8,12 +8,16 @@ class Conninfo {
         this.parent = document.getElementById(parentId);
         this.parent.innerHTML += `<div id="mod_conninfo">
             <div id="mod_conninfo_innercontainer">
-                <h1>NETWORK TRAFFIC<i>DOWN / UP, KBPS</i></h1>
+                <h1>NETWORK TRAFFIC<i>UP / DOWN, MB/S</i></h1>
+                <h2>TOTAL<i>0B OUT, 0B IN</i></h2>
                 <canvas id="mod_conninfo_canvas_top"></canvas>
                 <canvas id="mod_conninfo_canvas_bottom"></canvas>
             </div>
         </div>`;
 
+        this.total = document.querySelector("#mod_conninfo_innercontainer > h2 > i");
+        this._pb = require("pretty-bytes");
+
         // Init Smoothie
         let TimeSeries = require("smoothie").TimeSeries;
         let SmoothieChart = require("smoothie").SmoothieChart;
@@ -34,7 +38,7 @@ class Conninfo {
             labels:{
                 fontSize: 10,
                 fillStyle: `rgb(${window.theme.r},${window.theme.g},${window.theme.b})`,
-                precision: 0
+                precision: 2
             }
         }];
         chartOptions.push(Object.assign({}, chartOptions[0]));  // Deep copy object, see http://jsben.ch/bWfk9
@@ -78,8 +82,10 @@ class Conninfo {
                 return;
             } else {
                 this.si.networkStats(net.iface, (data) => {
-                    this.series[0].append(time,data.tx_sec);
-                    this.series[1].append(time, -data.rx_sec);
+                    this.series[0].append(time,data.tx_sec/125000);
+                    this.series[1].append(time, -data.rx_sec/125000);
+
+                    this.total.innerText = `${this._pb(data.tx)} OUT, ${this._pb(data.rx)} IN`.toUpperCase();
                 });
             }
         });

src/package-lock.json

@@ -388,6 +388,11 @@
         "xmldom": "0.1.x"
       }
     },
+    "pretty-bytes": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.1.0.tgz",
+      "integrity": "sha512-wa5+qGVg9Yt7PB6rYm3kXlKzgzgivYTLRandezh43jjRqgyDyP+9YxfJpJiLs9yKD1WeU8/OvtToWpW7255FtA=="
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",

src/package.json

@@ -26,6 +26,7 @@
     "battery-level": "3.0.0",
     "color": "3.0.0",
     "node-pty": "0.7.4",
+    "pretty-bytes": "5.1.0",
     "signale": "1.0.1",
     "smoothie": "1.35.0",
     "systeminformation": "3.41.1",