graphs: do not re-create the graph object

dashboard/src/components/SystemMetrics.vue

@@ -60,7 +60,7 @@ async function liveRefresh() {
 
     if (data.cpu[0]) { // value can be null if no previous value
       cpuGraph.data.datasets[0].data.push({
-        x: cpuGraph.options.scales.x.max, // add to edge of our window. we could also trust server timestamp and use data.cpu[1] * 1000
+        x: data.cpu[1] * 1000, // cpuGraph.options.scales.x.max can be used for window edge, if we don't trust server timestamps . but using server timestamps handles network lags better
         y: data.cpu[0]
       });
       cpuGraph.update('none');
@@ -107,8 +107,6 @@ async function getMetrics(hours) {
 }
 
 async function refresh() {
-  busy.value = true;
-
   const now = Date.now();
   const { cpuData, memoryData, swapData } = await getMetrics(period.value);
 
@@ -178,8 +176,13 @@ async function refresh() {
     };
   }
 
-  if (cpuGraph) cpuGraph.destroy();
-  cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions });
+  if (!cpuGraph) {
+    cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions });
+  } else {
+    cpuGraph.data = cpuGraphData;
+    cpuGraph.options = cpuGraphOptions;
+    cpuGraph.update('none');
+  }
 
   const giB = 1024 * 1024 * 1024;
   const roundedMemory = Math.ceil(systemMemory.memory / giB) * giB; // we have to scale up so that the graph can show the data!
@@ -257,8 +260,6 @@ async function refresh() {
   if (memoryGraph) memoryGraph.destroy();
   memoryGraph = new Chart(memoryGraphNode.value, { type: 'line', data: memoryGraphData, options: memoryGraphOptions });
 
-  busy.value = false;
-
   if (metricStream) {
     clearInterval(metricStream.intervalId);
     metricStream.close();