metrics: make the memory y-unit scale more flexible

system memory is in GiB. app memory is usually in MiB

dashboard/src/components/GraphItem.vue

@@ -13,6 +13,7 @@ const graphNode = useTemplateRef('graphNode');
 
 let graph = null;
 let liveRefreshIntervalId = null;
+let yscaleUnit = null;
 
 const props = defineProps({
   title: String,
@@ -80,8 +81,12 @@ function createGraphOptions({ yscale, period }) {
 
 function transformData(data) {
   const x = data[1]*1000; // convert to msecs
-  // in non-memory case, for relative values like cpu, if null make it 0
-  const y = props.yscale === 'memory' ? (data[0] / 1024 / 1024 / 1024).toFixed(2) : (data[0] || 0);
+  let y;
+  if (props.yscale === 'memory') {
+    y = yscaleUnit === 'GiB' ? (data[0] / 1024 / 1024 / 1024).toFixed(2) : (data[0] / 1024 / 1024).toFixed(2);
+  } else { // in non-memory case, for relative values like cpu, if null make it 0
+    y = data[0] || 0;
+  }
   return { x, y };
 }
 
@@ -152,18 +157,19 @@ function onPeriodChanged() {
     };
   } else if (props.yscale === 'memory') {
     const giB = 1024 * 1024 * 1024;
-    const roundedMemory = Math.ceil(props.memory.memory / giB) * giB; // we have to scale up so that the graph can show the data!
-    const roundedSwap = Math.ceil(props.memory.swap / giB) * giB;
+    const roundedMemoryGiB = Math.ceil(props.memory / giB);
+    yscaleUnit = roundedMemoryGiB === 1 ? 'MiB' : 'GiB';
+    const roundedMemory = yscaleUnit === 'GiB' ? roundedMemoryGiB : roundedMemoryGiB * 1024;
 
     yscale = {
       type: 'linear',
       min: 0,
-      max: (roundedMemory + roundedSwap)/ giB,
+      max: roundedMemory,
       ticks: {
-        stepSize: 1,
+        stepSize: yscaleUnit === 'GiB' ? 1 : 256,
         autoSkip: true, // skip tick labels as needed
         autoSkipPadding: 20, // padding between ticks
-        callback: (value) => `${value} GiB`,
+        callback: (value) => `${value} ${yscaleUnit}`,
         maxTicksLimit: 8 // max tick labels to show
       },
       beginAtZero: true,