auto update script executed

web/components/status.html

@@ -53,9 +53,12 @@
     </div>
 </div>
 
-<div class="standardContainer" style="position: relative; margin-top: 1em;">
+<div id="networkActWrapper" class="standardContainer" style="position: relative; margin-top: 1em;">
     <canvas id="networkActivity"></canvas>
 </div>
+<div id="networkActivityPlaceHolder">
+    <p style="opacity: 0.5;"><i class="ui pause icon"></i> Graph Render Paused</p>
+</div>
 <br>
 <div class="standardContainer">
     <h4>Basic Settings</h4>
@@ -468,11 +471,13 @@
                 {
                     type: 'line',
                     responsive: true,
+                    resizeDelay: 100,
                     options: {
                         animation: false,
                         maintainAspectRatio: false,
                         tooltips: {enabled: false},
                         hover: {mode: null},
+                        stepped: 'middle',
                         plugins: {
                             legend: {
                                 display: true,
@@ -514,6 +519,7 @@
                                 borderColor: "#4d9dd9",
                                 backgroundColor: 'rgba(77, 157, 217, 0.2)',
                                 fill: true,
+                                pointStyle: false,
                             },
                             {
                                 label: 'Outbound',
@@ -521,6 +527,7 @@
                                 borderColor: '#3a9460',
                                 backgroundColor: 'rgba(58, 148, 96, 0.2)',
                                 fill: true,
+                                pointStyle: false,
                             }
                         ]
                     }
@@ -535,14 +542,35 @@
         networkStatisticChart.update();
     }
 
+    function updateChartSize(){
+        let newSize = $("#networkActWrapper").width() - 300;
+        if (window.innerWidth > 750){
+            newSize = window.innerWidth - $(".toolbar").width() - 500;
+        }else{
+            newSize = $("#networkActWrapper").width() - 500;
+        }
+        networkStatisticChart.resize(newSize, 200);
+    }
+
+    var chartResizeTimeout;
     window.addEventListener('resize', () => {
-        networkStatisticChart.resize($(".contentWindow").width() - 500, 200);
+        $("#networkActivity").hide();
+        $("#networkActivityPlaceHolder").show();
+        if (chartResizeTimeout != undefined){
+            clearTimeout(chartResizeTimeout);
+        }
+        chartResizeTimeout = setTimeout(function(){
+            chartResizeTimeout = undefined;
+            $("#networkActivityPlaceHolder").hide();
+            $("#networkActivity").show();
+            updateChartSize();
+        }, 300);
     });
 
     //Bind event to tab switch
     tabSwitchEventBind["status"] = function(){
         //On switch over to this page, resize the chart
-        networkStatisticChart.resize($(".contentWindow").width() - 500, 200);
+        updateChartSize();
     }
 
     //Initialize chart data

web/main.css

@@ -327,6 +327,15 @@ body{
     color: rgb(37, 37, 37);
 }
 
+#networkActivityPlaceHolder{
+    color:rgb(206, 206, 206);
+    height: 200px;
+    width: 100%;
+    text-align: center;
+    padding-top: 80px;
+    display:none;
+}
+
 /* Decorative Animation */
 .dot-container {
     display: flex;