metrics: fix y-axis and tooltip

dashboard/src/components/SystemMetrics.vue

@@ -219,7 +219,8 @@ function createGraphOptions({ yscale, realtime }) {
       },
       tooltip: {
         callbacks: {
-          title: (tooltipItem) => moment(tooltipItem[0].raw.x).format(periods.find((p) => p.id === period.value).tooltipFormat)
+          title: (tooltipItem) => moment(tooltipItem[0].raw.x).format(periods.find((p) => p.id === period.value).tooltipFormat),
+          label: (tooltipItem) => yscale.ticks.callback(tooltipItem.raw.y)
         }
       }
     },
@@ -254,6 +255,8 @@ function createGraphOptions({ yscale, realtime }) {
   };
 }
 
+// CPU and Memory graph have known min/max set and auto-scaling gets disabled
+// Disk and Network graphs auto-scale the y values.
 async function onPeriodChange() {
   const metrics = await getMetrics(period.value);
 
@@ -372,9 +375,9 @@ async function onPeriodChange() {
   const diskYscale = {
     type: 'linear',
     min: 0,
-    max: 4218880,
+    grace: 100*1000, // add 100kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
     ticks: {
-      callback: (value) => `${value} Kbps`,
+      callback: (value) => `${prettyDecimalSize(value)}ps`,
       maxTicksLimit: 6 // max tick labels to show
     },
     beginAtZero: true,
@@ -419,9 +422,9 @@ async function onPeriodChange() {
   const networkYscale = {
     type: 'linear',
     min: 0,
-    max: 4218880,
+    grace: 50*1000, // add 50kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
     ticks: {
-      callback: (value) => `${value} Kbps`,
+      callback: (value) => `${prettyDecimalSize(value)}ps`,
       maxTicksLimit: 6 // max tick labels to show
     },
     beginAtZero: true,