graphs: fix scaling of cpu graphs

dashboard/src/components/CpuUsage.vue

@@ -19,10 +19,7 @@ async function refresh() {
     return moment(v[1]*1000).format('hh:mm');
   });
 
-  const data = result.cpu.map(v => {
-    // v[0] is in percent, need to scale up depending on cpu count 2 cpus => 200% max
-    return parseInt(v[0]);
-  });
+  const data = result.cpu.map(v => v[0]); // already scaled to cpu*100
 
   new Chart(graph.value, {
     type: 'line',
@@ -31,9 +28,12 @@ async function refresh() {
       datasets: [{
         label: 'CPU',
         data: data,
-        radius: 0,
+        pointRadius: 0,
+        // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
         borderWidth: 1,
         tension: 0.4,
+        showLine: true,
+        fill: true
       }]
     },
     options: {
@@ -41,9 +41,23 @@ async function refresh() {
         legend: false
       },
       scales: {
+        x: {
+          ticks: {
+            autoSkip: true, // skip tick labels as needed
+            autoSkipPadding: 20, // padding between ticks
+            maxRotation: 0 // don't rotate the labels
+          }
+        },
         y: {
+          ticks: {
+            callback: (value) => {
+              return `${value}%`;
+            },
+            maxTicksLimit: 6 // max tick labels to show
+          },
           min: 0,
-          max: result.cpuCount*100
+          max: result.cpuCount * 100,
+          beginAtZero: true,
         }
       },
       interaction: {

dashboard/src/components/MemoryUsage.vue

@@ -34,9 +34,12 @@ async function refresh() {
     datasets: [{
       label: 'Memory',
       data: data,
-      radius: 0,
+      pointRadius: 0,
+      // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
       borderWidth: 1,
       tension: 0.4,
+      showLine: true,
+      fill: true
     }]
   };
   const options = {
@@ -45,14 +48,18 @@ async function refresh() {
     },
     scales: {
       x: {
-        ticks: { autoSkipPadding: 50, maxRotation: 0 }
+        ticks: {
+          autoSkip: true, // skip tick labels as needed
+          autoSkipPadding: 20, // padding between ticks
+          maxRotation: 0 // don't rotate the labels
+        }
       },
       y: {
         ticks: {
           callback: (value) => {
             return `${value} GiB`;
           },
-          maxTicksLimit: 6
+          maxTicksLimit: 6 // max tick labels to show
         },
         min: 0,
         max: roundedMemoryGiB,