fix status widget graphs

CHANGELOG.md

@@ -19,6 +19,8 @@ All notable changes to homebridge-config-ui-x will be documented in this file.
 - improve ui of settings page (#2016) (@mkz212)
 - improve ui of settings page (#2026) (@mkz212)
 - remove mdns interface tooltips
+- network interface widget: custom interface
+- fix status widget graphs
 
 ### Translation Changes
 

ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts

@@ -105,21 +105,24 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
       this.cpuTemperature = data.cpuTemperature;
       this.currentLoad = data.currentLoad;
 
-      if (!this.lineChartData.datasets[0].data.length) {
+      const dataLength = Object.keys(this.lineChartData.datasets[0].data).length;
+      if (!dataLength) {
         this.lineChartData.datasets[0].data = {
           ...data.cpuLoadHistory,
         };
         this.lineChartLabels = data.cpuLoadHistory.map(() => 'point');
       } else {
-        this.lineChartData.datasets[0].data.push(data.currentLoad);
+        this.lineChartData.datasets[0].data[dataLength] = data.currentLoad;
         this.lineChartLabels.push('point');
 
-        if (this.lineChartData.datasets[0].data.length > 60) {
-          this.lineChartData.datasets[0].data.shift();
+        if (dataLength > 60) {
+          delete this.lineChartData.datasets[0].data[0];
+          this.lineChartData.datasets[0].data = { ...this.lineChartData.datasets[0].data };
           this.lineChartLabels.shift();
-          this.chart.update();
         }
       }
+
+      this.chart.update();
     });
   }
 

ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts

@@ -103,21 +103,24 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
       this.totalMemory = data.mem.total / 1024 / 1024 / 1024;
       this.freeMemory = data.mem.available / 1024 / 1024 / 1024;
 
-      if (!this.lineChartData.datasets[0].data.length) {
+      const dataLength = Object.keys(this.lineChartData.datasets[0].data).length;
+      if (!dataLength) {
         this.lineChartData.datasets[0].data = {
           ...data.memoryUsageHistory,
         };
         this.lineChartLabels = data.memoryUsageHistory.map(() => 'point');
       } else {
-        this.lineChartData.datasets[0].data.push(data.memoryUsageHistory.slice(-1)[0]);
+        this.lineChartData.datasets[0].data[dataLength] = data.memoryUsageHistory.slice(-1)[0];
         this.lineChartLabels.push('point');
 
-        if (this.lineChartData.datasets[0].data.length > 60) {
-          this.lineChartData.datasets[0].data.shift();
+        if (dataLength > 60) {
+          delete this.lineChartData.datasets[0].data[0];
+          this.lineChartData.datasets[0].data = { ...this.lineChartData.datasets[0].data };
           this.lineChartLabels.shift();
-          this.chart.update();
         }
       }
+
+      this.chart.update();
     });
   }
 

ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts

@@ -62,6 +62,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
       },
       y: {
         display: false,
+        min: 0,
       },
     },
   };
@@ -92,10 +93,12 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
     }
 
     if (!this.widget.refreshInterval) {
-      this.widget.refreshInterval = 1;
+      this.widget.refreshInterval = 10;
     }
 
-    this.intervalSubscription = interval(this.widget.refreshInterval * 1000).subscribe(() => {
+    // Interval should be in [1, 60]
+    const refreshInterval = Math.min(60, Math.max(1, parseInt(this.widget.refreshInterval, 10)));
+    this.intervalSubscription = interval(refreshInterval * 1000).subscribe(() => {
       if (this.io.socket.connected) {
         this.getServerNetworkInfo();
       }
@@ -105,34 +108,41 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
   getServerNetworkInfo() {
     this.io.request('get-server-network-info', { netInterfaces: [this.widget.networkInterface] }).subscribe((data) => {
       // If no param given, the backend will return the default network interface
-      if (!this.widget.networkInterface) {
+      // Clear the current chart if the network interface has changed
+      if (this.interface !== data.net.iface) {
         this.widget.networkInterface = data.net.iface;
+        this.interface = data.net.iface;
+        this.lineChartData.datasets[0].data = { ...[] };
+        this.lineChartLabels = [];
+        this.chart.update();
       }
 
       this.receivedPerSec = (data.net.rx_sec / 1024 / 1024) * 8;
       this.sentPerSec = (data.net.tx_sec / 1024 / 1024) * 8;
-      this.interface = data.net.iface;
 
       // the chart looks strange if the data rate is < 1.
       if (data.point < 1) {
         data.point = 0;
       }
 
-      if (!this.lineChartData.datasets[0].data.length) {
+      const dataLength = Object.keys(this.lineChartData.datasets[0].data).length;
+      if (!dataLength) {
         this.lineChartData.datasets[0].data = {
-          ...data.point,
+          ...[data.point],
         };
-        this.lineChartLabels = ['point'];
+        this.lineChartLabels.push('point');
       } else {
-        this.lineChartData.datasets[0].data.push(data.point);
+        this.lineChartData.datasets[0].data[dataLength] = data.point;
         this.lineChartLabels.push('point');
 
-        if (this.lineChartData.datasets[0].data.length > 60) {
-          this.lineChartData.datasets[0].data.shift();
+        if (dataLength > 60) {
+          delete this.lineChartData.datasets[0].data[0];
+          this.lineChartData.datasets[0].data = { ...this.lineChartData.datasets[0].data };
           this.lineChartLabels.shift();
-          this.chart.update();
         }
       }
+
+      this.chart.update();
     });
   }