graphs: make memory graph work

dashboard/src/components/CpuUsage.vue

@@ -15,8 +15,6 @@ async function refresh() {
   const [error, result] = await systemModel.graphs(period.value * 60);
   if (error) return console.error(error);
 
-  console.log(result.cpu);
-
   const labels = result.cpu.map(v => {
     return moment(v[1]*1000).format('hh:mm:ss');
   });

dashboard/src/components/MemoryUsage.vue

@@ -21,38 +21,50 @@ async function refresh() {
   });
 
   const data = result.memory.map(v => {
-    return v[0];
+    return (v[0] / 1024 / 1024 / 1024).toFixed(2);
   });
 
-  new Chart(graph.value, {
-    type: 'line',
-    data: {
-      labels,
-      datasets: [{
-        label: 'Memory',
-        data: data,
-        radius: 0,
-        borderWidth: 1,
-        tension: 0.4,
-      }]
+  const giB = 1024 * 1024 * 1024;
+  const quarterGiB = 0.25 * giB;
+  const roundedMemory = Math.round(systemMemory.memory / quarterGiB) * quarterGiB;
+  const roundedMemoryGiB = (roundedMemory / giB).toFixed(2);
+
+  const graphData = {
+    labels,
+    datasets: [{
+      label: 'Memory',
+      data: data,
+      radius: 0,
+      borderWidth: 1,
+      tension: 0.4,
+    }]
+  };
+  const options = {
+    plugins: {
+      legend: false
     },
-    options: {
-      plugins: {
-        legend: false
+    scales: {
+      x: {
+        ticks: { autoSkipPadding: 50, maxRotation: 0 }
       },
-      scales: {
-        y: {
-          min: 0,
-          max: systemMemory.memory / 1024 / 1024
+      y: {
+        ticks: { maxTicksLimit: 6 },
+        min: 0,
+        max: roundedMemoryGiB,
+        beginAtZero: true,
+        callback: (value) => {
+          return (value/1024).toLocaleString('en-US', { maximumFractionDigits: 6 }) + ' GiB';
         }
-      },
-      interaction: {
-        intersect: false,
-        mode: 'nearest',
-        axis: 'x'
       }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'nearest',
+      axis: 'x'
     }
-  });
+  };
+
+  new Chart(graph.value, { type: 'line', data: graphData, options: options });
 }
 
 onMounted(async () => {