Added WIP network usage diagram

mod/network/netstat/netstat.go

@@ -3,7 +3,6 @@ package netstat
 import (
 	"encoding/json"
 	"errors"
-	"log"
 	"net/http"
 	"os/exec"
 	"runtime"
@@ -67,7 +66,7 @@ func GetNetworkInterfaceStats() (int64, int64, error) {
 				tx = s
 			}
 
-			log.Println(rx, tx)
+			//log.Println(rx, tx)
 			return rx, tx, nil
 		} else {
 			//Invalid data

web/SystemAO/info/taskManager.html

@@ -71,7 +71,7 @@
         <div id="netChartContainer" style="position: relative; margin-top: 1.2em;">
             <h2 class="ui header">
                 Network
-                <div class="sub header">Network Bandwidth in the previous 60 seconds</div>
+                <div class="sub header">Network usage in the previous 60 seconds</div>
             </h2>
             <p id="NetSpeed" style="position: absolute; top: 1em; right: 0.3em; font-size: 16px;">n/a</p>
             <canvas id="netChart" width="1200" height="300"></canvas>
@@ -79,13 +79,13 @@
                 <div class="four wide column">
                     <div class="ui header" >
                         <span id="rx">0</span>
-                         <div class="sub header">RX Mps</div>
+                         <div class="sub header">RX</div>
                      </div>
                 </div>
                 <div class="four wide column">
                     <div class="ui header" >
                         <span id="tx">0</span>
-                        <div class="sub header">TX Mps</div>
+                        <div class="sub header">TX</div>
                      </div>
                 </div>
             </div>
@@ -96,6 +96,7 @@
         var cpuChart;
         var ramChart;
         var netChart;
+        var previousNetData = [0, 0];
 
         //Override Chart.js v3 poor API designs
         Chart.defaults.plugins.tooltip.enabled = false;
@@ -202,8 +203,8 @@
                     }
                 },
                 y: {
-                    min: 0,
-                    max: 100,
+                    min: Math.min.apply(this, getMergedRxTxDataset()),
+                    max: Math.max.apply(this, getMergedRxTxDataset()) + 5,
                     grid: {
                         color:  "rgba(167, 79, 1, 0.2)"
                     }
@@ -326,7 +327,7 @@
             });
 
             for (var i =0; i < 60; i++){
-                addNetData(netChart, "", 0, 50)
+                addNetData(netChart, "", 0, 0)
             }
             
         }
@@ -351,6 +352,23 @@
             }, 1000)
             */
 
+             //Calculate the bandwidth diff
+            $.get("../../system/network/getNICUsage", function(data){
+                if (previousNetData[0] == 0 && previousNetData[1] == 0){
+                    //Not initiated. Set base and wait for next iteration
+                    previousNetData = [data.RX, data.TX];
+                }else{
+                    var rxd = data.RX - previousNetData[0];
+                    var txd = data.TX - previousNetData[1];
+                    previousNetData = [data.RX, data.TX];
+                    addAndShiftNetworkDate(netChart, "", rxd/1024, txd/1024);
+
+                    //Update the text
+                    $("#rx").text(bytesToSize(rxd));
+                    $("#tx").text(bytesToSize(txd));
+                }
+            })
+
             $.get("../../system/info/getUsageInfo", function(data){
                 //Update graph
                 addAndShiftChartDate(cpuChart, "", data.CPU);
@@ -401,6 +419,37 @@
             chart.update();
         }
 
+        function addAndShiftNetworkDate(chart, label, rxd, txd) {
+            chart.data.labels.splice(0, 1); // remove first label
+            chart.data.datasets.forEach(function(dataset) {
+                dataset.data.splice(0, 1); // remove first data point
+            });
+
+            chart.update();
+
+            // Add new data
+            chart.data.labels.push(label); // add new label at end
+            chart.data.datasets[0].data.push(rxd);
+            chart.data.datasets[1].data.push(txd);
+            
+            
+
+            //Update the sacle as well
+            netChart.options.scales.y.min = Math.min.apply(this, getMergedRxTxDataset());
+            netChart.options.scales.y.max = Math.max.apply(this, getMergedRxTxDataset()) *1.2;
+
+            chart.update();
+        }
+
+        function getMergedRxTxDataset(){
+            if (netChart == undefined){
+                return [0, 100];
+            }
+            var newArr = [];
+            newArr = newArr.concat(netChart.data.datasets[0].data,netChart.data.datasets[1].data);
+            return newArr;
+        }
+
     </script>
 </body>
 </html>