Added network chart

web/SystemAO/info/taskManager.html

@@ -67,11 +67,35 @@
             </div>
            
            
+        </div>
+        <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>
+            </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>
+            <div class="ui stackable grid">
+                <div class="four wide column">
+                    <div class="ui header" >
+                        <span id="rx">0</span>
+                         <div class="sub header">RX Mps</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>
+                </div>
+            </div>
+           
         </div>
     </div>
     <script>
         var cpuChart;
         var ramChart;
+        var netChart;
 
         //Override Chart.js v3 poor API designs
         Chart.defaults.plugins.tooltip.enabled = false;
@@ -156,6 +180,46 @@
                 }
             }
         };
+
+        var netOptions = {
+            maintainAspectRatio: true,
+            responsive: true,
+			spanGaps: false,
+			elements: {
+				line: {
+					tension: 0.000001
+				}
+			},
+			plugins: {
+				filler: {
+					propagate: false
+				},
+			},
+			scales: {
+				x: {
+                    grid: {
+                        color:  "rgba(167, 79, 1, 0.2)"
+                    }
+                },
+                y: {
+                    min: 0,
+                    max: 100,
+                    grid: {
+                        color:  "rgba(167, 79, 1, 0.2)"
+                    }
+                }
+            },
+            legend: {
+                display: false,
+            },
+            tooltips: {
+                callbacks: {
+                    label: function(tooltipItem) {
+                            return tooltipItem.yLabel;
+                    }
+                }
+            }
+        };
         
         initInfo();
         chartInit();
@@ -204,6 +268,7 @@
 						backgroundColor: "rgba(241,246,250,0.4)",
 						borderColor: "#4c9dcb",
 						data: [],
+                        radius: 0,
 						fill: 'start'
                     }]
 				},
@@ -224,6 +289,7 @@
 						backgroundColor: "rgba(244,242,244,0.4)",
 						borderColor: "#9528b4",
 						data: [],
+                        radius: 0,
 						fill: 'start'
                     }]
 				},
@@ -233,6 +299,35 @@
             for (var i =0; i < 60; i++){
                 addData(ramChart, "",0)
             }
+
+            //Create RAM Chart
+            netChart = new Chart('netChart', {
+				type: 'line',
+				data: {
+					labels: [],
+					datasets: [{
+						backgroundColor: "rgba(252,243,235,0.4)",
+						borderColor: "#a74f01",
+						data: [],
+                        radius: 0,
+						fill: 'start'
+                    },
+                    {
+						backgroundColor: "rgba(252,243,235,0.4)",
+						borderColor: "#a74f01",
+                        borderDash: [5, 5],
+						data: [],
+                        radius: 0,
+						fill: 'start'
+                        
+                    }]
+				},
+				options: netOptions
+            });
+
+            for (var i =0; i < 60; i++){
+                addNetData(netChart, "", 0, 50)
+            }
             
         }
 
@@ -274,6 +369,13 @@
 
         }
 
+        function addNetData(chart, label, rx, tx) {
+            chart.data.labels.push(label);
+            chart.data.datasets[0].data.push(rx);
+            chart.data.datasets[1].data.push(tx);
+            chart.update();
+        }
+
         function addData(chart, label, data) {
             chart.data.labels.push(label);
             chart.data.datasets.forEach((dataset) => {