igpu updates

encoder/index.php

@@ -20,11 +20,6 @@ include 'header.php'; ?>
       <div class="chart-wrap"><canvas id="ramChart"></canvas></div>
     </div>
 
-    <div class="card">
-      <h3>Intel iGPU Engines (%)</h3>
-      <div class="chart-wrap"><canvas id="gpuChart"></canvas></div>
-    </div>
-
     <div class="card">
       <h3>Network (KB/s)</h3>
       <div class="chart-wrap"><canvas id="netChart"></canvas></div>
@@ -35,6 +30,11 @@ include 'header.php'; ?>
       <div class="chart-wrap"><canvas id="diskChart"></canvas></div>
     </div>
 
+    <div class="card">
+      <h3>Intel iGPU Engines (%)</h3>
+      <div class="chart-wrap"><canvas id="gpuChart"></canvas></div>
+    </div>
+
   </div>
 
   <div style="margin-top:12px;color:#9fb2d6;display:flex;justify-content:space-between;">
@@ -59,15 +59,47 @@ const toKB = v => Math.round(v/1024);
   /* CPU */
   const cpuChart = new Chart(document.getElementById('cpuChart'), {
     type: 'line',
-  data:{labels:[],datasets:[{label:'CPU %',data:[],tension:0.2}]},
+    data: {
-  options:{responsive:true,maintainAspectRatio:false,scales:{y:{min:0,max:100}}}
+      labels: [],
+      datasets: [{
+        label: 'CPU %',
+        data: [],
+        tension: 0.2
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        y: {
+          min: 0,
+          max: 100
+        }
+      }
+    }
   });
 
   /* RAM */
   const ramChart = new Chart(document.getElementById('ramChart'), {
     type: 'line',
-  data:{labels:[],datasets:[{label:'RAM %',data:[],tension:0.2}]},
+    data: {
-  options:{responsive:true,maintainAspectRatio:false,scales:{y:{min:0,max:100}}}
+      labels: [],
+      datasets: [{
+        label: 'RAM %',
+        data: [],
+        tension: 0.2
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        y: {
+          min: 0,
+          max: 100
+        }
+      }
+    }
   });
 
   /* GPU multi-engine */
@@ -75,18 +107,42 @@ const gpuChart = new Chart(document.getElementById('gpuChart'),{
     type: 'line',
     data: {
       labels: [],
-    datasets:[
+      datasets: [{
-      {label:'Total',data:[],tension:0.2},
+          label: 'Total',
-      {label:'Video',data:[],tension:0.2},
+          data: [],
-      {label:'Render',data:[],tension:0.2},
+          tension: 0.2
-      {label:'Blitter',data:[],tension:0.2},
+        },
-      {label:'Enhance',data:[],tension:0.2}
+        {
+          label: 'Video',
+          data: [],
+          tension: 0.2
+        },
+        {
+          label: 'Render',
+          data: [],
+          tension: 0.2
+        },
+        {
+          label: 'Blitter',
+          data: [],
+          tension: 0.2
+        },
+        {
+          label: 'Enhance',
+          data: [],
+          tension: 0.2
+        }
       ]
     },
     options: {
       responsive: true,
       maintainAspectRatio: false,
-    scales:{y:{min:0,max:100}}
+      scales: {
+        y: {
+          min: 0,
+          max: 100
+        }
+      }
     }
   });
 
@@ -95,12 +151,27 @@ const netChart = new Chart(document.getElementById('netChart'),{
     type: 'line',
     data: {
       labels: [],
-    datasets:[
+      datasets: [{
-      {label:'Net In (KB/s)',data:[],tension:0.2},
+          label: 'Net In (KB/s)',
-      {label:'Net Out (KB/s)',data:[],tension:0.2}
+          data: [],
+          tension: 0.2
+        },
+        {
+          label: 'Net Out (KB/s)',
+          data: [],
+          tension: 0.2
+        }
       ]
     },
-  options:{responsive:true,maintainAspectRatio:false,scales:{y:{beginAtZero:true}}}
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
   });
 
   /* Disk */
@@ -108,23 +179,42 @@ const diskChart = new Chart(document.getElementById('diskChart'),{
     type: 'line',
     data: {
       labels: [],
-    datasets:[
+      datasets: [{
-      {label:'Disk Read (KB/s)',data:[],tension:0.2},
+          label: 'Disk Read (KB/s)',
-      {label:'Disk Write (KB/s)',data:[],tension:0.2},
+          data: [],
-      {label:'Disk %',data:[],yAxisID:'percent',tension:0.2}
+          tension: 0.2
+        },
+        {
+          label: 'Disk Write (KB/s)',
+          data: [],
+          tension: 0.2
+        },
+        {
+          label: 'Disk %',
+          data: [],
+          yAxisID: 'percent',
+          tension: 0.2
+        }
       ]
     },
     options: {
       responsive: true,
       maintainAspectRatio: false,
       scales: {
-      y:{position:'left',beginAtZero:true},
+        y: {
+          position: 'left',
+          beginAtZero: true
+        },
         percent: {
           position: 'right',
           min: 0,
           max: 100,
-        grid:{display:false},
+          grid: {
-        ticks:{callback:v=>v+'%'}
+            display: false
+          },
+          ticks: {
+            callback: v => v + '%'
+          }
         }
       }
     }
@@ -132,7 +222,9 @@ const diskChart = new Chart(document.getElementById('diskChart'),{
 
   async function update() {
     try {
-    const res = await fetch(JSON_URL+"?_="+Date.now(),{cache:'no-store'});
+      const res = await fetch(JSON_URL + "?_=" + Date.now(), {
+        cache: 'no-store'
+      });
       if (!res.ok) throw new Error(res.status);
       const j = await res.json();