Update render.js

Author: michal92299

render.js

@@ -5,32 +5,37 @@ let gpuUsageHistory = [];
 const maxHistory = 30;
 
 ipcRenderer.on('update-stats', (event, stats) => {
-    document.getElementById('cpu-temp').textContent = stats.cpuTemp || 'N/A';
-    document.getElementById('cpu-usage').textContent = stats.cpuUsage || 'N/A';
-    document.getElementById('cpu-freq').textContent = stats.cpuFreq || 'N/A';
-    document.getElementById('cpu-fan').textContent = stats.cpuFan || 'N/A';
-    document.getElementById('gpu-temp').textContent = stats.gpuTemp || 'N/A';
-    document.getElementById('gpu-usage').textContent = stats.gpuUsage || 'N/A';
-    document.getElementById('gpu-fan').textContent = stats.gpuFan || 'N/A';
-    document.getElementById('gpu-mem').textContent = stats.gpuMem || 'N/A';
-    document.getElementById('ram-usage').textContent = stats.ramUsage || 'N/A';
-    document.getElementById('disk-usage').textContent = stats.diskUsage || 'N/A';
-    document.getElementById('battery-level').textContent = stats.batteryLevel || 'N/A';
-    document.getElementById('uptime').textContent = stats.uptime || 'N/A';
-    document.getElementById('net-download').textContent = stats.netDownload || 'N/A';
-    document.getElementById('net-upload').textContent = stats.netUpload || 'N/A';
-    document.getElementById('fps').textContent = stats.fps || 'N/A';
+    document.getElementById('cpu-temp').textContent = stats.cpuTemp;
+    document.getElementById('cpu-usage').textContent = stats.cpuUsage;
+    document.getElementById('cpu-freq').textContent = stats.cpuFreq;
+    document.getElementById('cpu-voltage').textContent = stats.cpuVoltage;
+    document.getElementById('cpu-fan').textContent = stats.cpuFan;
+    document.getElementById('gpu-temp').textContent = stats.gpuTemp;
+    document.getElementById('gpu-usage').textContent = stats.gpuUsage;
+    document.getElementById('gpu-fan').textContent = stats.gpuFan;
+    document.getElementById('gpu-mem').textContent = stats.gpuMem;
+    document.getElementById('gpu-power').textContent = stats.gpuPower;
+    document.getElementById('ram-usage').textContent = stats.ramUsage;
+    document.getElementById('disk-usage').textContent = stats.diskUsage;
+    document.getElementById('battery-level').textContent = stats.batteryLevel;
+    document.getElementById('uptime').textContent = stats.uptime;
+    document.getElementById('net-download').textContent = stats.netDownload;
+    document.getElementById('net-upload').textContent = stats.netUpload;
+    document.getElementById('fps').textContent = stats.fps;
+    document.getElementById('load-avg').textContent = stats.loadAvg;
 
     if (stats.cpuUsage !== 'N/A') {
         cpuUsageHistory.push(parseFloat(stats.cpuUsage));
         if (cpuUsageHistory.length > maxHistory) cpuUsageHistory.shift();
         drawCpuChart();
+        drawCpuGauge(parseFloat(stats.cpuUsage) || 0);
     }
 
     if (stats.gpuUsage !== 'N/A') {
         gpuUsageHistory.push(parseFloat(stats.gpuUsage));
         if (gpuUsageHistory.length > maxHistory) gpuUsageHistory.shift();
         drawGpuChart();
+        drawGpuGauge(parseFloat(stats.gpuUsage) || 0);
     }
 });
 
@@ -58,3 +63,43 @@ function drawLineChart(ctx, data, color) {
     });
         ctx.stroke();
 }
+
+function drawCpuGauge(value) {
+    const ctx = document.getElementById('cpu-gauge').getContext('2d');
+    drawGauge(ctx, value / 100, '#00BFFF', 'CPU Usage');
+}
+
+function drawGpuGauge(value) {
+    const ctx = document.getElementById('gpu-gauge').getContext('2d');
+    drawGauge(ctx, value / 100, '#FF4500', 'GPU Usage');
+}
+
+function drawGauge(ctx, percent, color, label) {
+    const width = ctx.canvas.width;
+    const height = ctx.canvas.height;
+    const radius = Math.min(width, height) / 2 - 10;
+    const centerX = width / 2;
+    const centerY = height / 2;
+
+    ctx.clearRect(0, 0, width, height);
+
+    // Background arc
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, radius, Math.PI * 0.75, Math.PI * 2.25);
+    ctx.lineWidth = 10;
+    ctx.strokeStyle = 'rgba(255,255,255,0.2)';
+    ctx.stroke();
+
+    // Value arc
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, radius, Math.PI * 0.75, Math.PI * 0.75 + (Math.PI * 1.5 * percent));
+    ctx.strokeStyle = color;
+    ctx.stroke();
+
+    // Text
+    ctx.font = '16px Arial';
+    ctx.fillStyle = '#FFF';
+    ctx.textAlign = 'center';
+    ctx.fillText(label, centerX, centerY - 10);
+    ctx.fillText((percent * 100).toFixed(0) + '%', centerX, centerY + 10);
+}