Finalized taskmanager for 1.121

web/SystemAO/info/taskManager.html

@@ -73,24 +73,26 @@
                 Network
                 <div class="sub header">Network usage in the previous 60 seconds</div>
             </h2>
-            <p id="netGraphScale" style="position: absolute; top: 1em; right: 0.3em; font-size: 16px;">n/a</p>
+            <p id="netGraphScale" style="position: absolute; top: 1em; right: 0.3em; font-size: 16px;">100 kbps</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="ui header" style="border-left: 2px solid #bc793f; padding-left: 1em;">
+                        <span id="rx">Loading</span>
                          <div class="sub header">Received</div>
                      </div>
                 </div>
                 <div class="four wide column">
-                    <div class="ui header" >
-                        <span id="tx">0</span>
+                    <div class="ui header"  style="border-left: 2px dotted #bc793f; padding-left: 1em;">
+                        <span id="tx">Loading</span>
                         <div class="sub header">Transmitted</div>
                      </div>
                 </div>
             </div>
            
         </div>
+
+        <br><br>
     </div>
     <script>
         var cpuChart;
@@ -127,6 +129,9 @@
                     max: 100,
                     grid: {
                         color:  "rgba(83, 160, 205, 0.2)"
+                    },
+                    ticks: {
+                        display: false,
                     }
                 }
             },
@@ -167,6 +172,9 @@
                     max: 100,
                     grid: {
                         color:  "rgba(156, 55, 185, 0.2)"
+                    },
+                    ticks: {
+                        display: false,
                     }
                 }
             },
@@ -207,6 +215,9 @@
                     max: Math.max.apply(this, getMergedRxTxDataset()) + 5,
                     grid: {
                         color:  "rgba(167, 79, 1, 0.2)"
+                    },
+                    ticks: {
+                        display: false,
                     }
                 }
             },
@@ -327,7 +338,7 @@
                     {
 						backgroundColor: "rgba(252,243,235,0.2)",
 						borderColor: "#a74f01",
-                        borderDash: [5, 5],
+                        borderDash: [3, 3],
 						data: [],
                         radius: 0,
                         borderWidth: 2,
@@ -379,21 +390,31 @@
                     var rxd = data.RX - previousNetData[0];
                     var txd = data.TX - previousNetData[1];
                     previousNetData = [data.RX, data.TX];
-                    addAndShiftNetworkDate(netChart, "", rxd/1024, txd/1024);
+                    addAndShiftNetworkData(netChart, "", rxd, txd);
 
                     $("#rx").text(bitToSize(rxd)+"/s");
                     $("#tx").text(bitToSize(txd)+"/s");
 
                     //Get the max value of the diagram, round it to the cloest 10x
-                    var chartMaxValue = Math.max.apply(this, getMergedRxTxDataset())
-                    var logVal = Math.log(chartMaxValue) / Math.log(1024);
-                    
-                    //Round and display the network speed as cloest 100 value
-                    function roundNearest100(num, logVal) {
-                        return Math.round(num / 100) * 100 * Math.pow(10, logVal);
+                    var chartMaxValue = Math.max.apply(this, getMergedRxTxDataset()) * 1.2;
+
+                    //Special Rounding for calculating graph scale
+                    baseValue = parseInt(chartMaxValue);
+                    var scale = "0 bps"
+                    var sizes = ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb'];
+                    function roundUpNearest(num) {
+                        return Math.ceil(num / 10) * 10;
                     }
 
-                    var scale = roundNearest100(chartMaxValue, logVal);
+                    if (baseValue == 0){
+
+                    }else{
+                        var i = parseInt(Math.floor(Math.log(baseValue) / Math.log(1000)));
+                        scale = roundUpNearest((baseValue / Math.pow(1024, i)).toFixed(0))
+                        scale += ' ' + sizes[i] + "ps";
+                    }
+                    
+                    //console.log(baseValue, chartMaxValue, scale);
                     $("#netGraphScale").text(scale);
                 }
             })
@@ -448,7 +469,7 @@
             chart.update();
         }
 
-        function addAndShiftNetworkDate(chart, label, rxd, txd) {
+        function addAndShiftNetworkData(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