metrics: overlay app metrics over system metrics

dashboard/src/components/GraphItem.vue

@@ -21,21 +21,13 @@ const props = defineProps({
   title: String,
   subtext: String,
   period: Object, // { hours, format, tooltpFormat }
-  datasetLabels: {
-    type: Array,
-    validator: (val) => Array.isArray(val) && val.every(item => typeof item === 'string')
-  },
-  datasetColors: {
-    type: Array,
-    validator: (val) => Array.isArray(val) && val.every(item => typeof item === 'string')
-  },
   yscale: String, // cpu, memory
   memory: Number,
   cpuCount: Number,
   highMark: Number,
 });
 
-function createGraphOptions({ yscale, period, displayLegend, highMark }) {
+function createGraphOptions({ yscale, period, highMark }) {
   let startTime, endTime, stepSize, count; // x axis configuration values
 
   const now = Date.now();
@@ -54,8 +46,8 @@ function createGraphOptions({ yscale, period, displayLegend, highMark }) {
     maintainAspectRatio: false,
     plugins: {
       legend: {
-        display: displayLegend,
-        position: 'bottom'
+        display: false,
+        position: 'bottom' // not used, hidden since color code is shown in tooltip
       },
       tooltip: {
         callbacks: {
@@ -121,10 +113,23 @@ function transformData(data) {
   return { x, y };
 }
 
-function setData(...data) {
-  for (const [index, items] of data.entries()) {
-    graph.data.datasets[index].data = items.map(transformData);
+function setDatasets(datasets) {
+  graph.data = { datasets: [] };
+
+  for (const dataset of datasets) {
+    graph.data.datasets.push({
+      label: dataset.label,
+      data: dataset.data.map(transformData),
+      pointRadius: 0,
+      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      tension: 0.4,
+      showLine: true,
+      fill: true,
+      color: dataset.color,
+      stack: dataset.stack || 'stackgroup', // put them all in same stackgroup
+    });
   }
+
   graph.update('none');
 }
 
@@ -140,10 +145,10 @@ function advance() {
   graph.update('none');
 }
 
-function pushData(...data) {
+function pushData(datasetIndex, ...data) {
   for (const [index, item] of data.entries()) {
-    graph.data.datasets[index].data.push(transformData(item));
-    pruneGraphData(graph.data.datasets[index], graph.options);
+    graph.data.datasets[datasetIndex+index].data.push(transformData(item));
+    pruneGraphData(graph.data.datasets[datasetIndex+index], graph.options);
   }
   graph.update('none');
 }
@@ -154,22 +159,6 @@ function onPeriodChanged() {
     liveRefreshIntervalId = null;
   }
 
-  const data = { datasets: [] };
-
-  for (const [index, label] of props.datasetLabels.entries()) {
-    data.datasets.push({
-      label: label,
-      data: [],
-      pointRadius: 0,
-      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      tension: 0.4,
-      showLine: true,
-      fill: true,
-      color: props.datasetColors[index],
-      stack: 'stackgroup' // put them all in same stackgroup
-    });
-  }
-
   // CPU and Memory graph have known min/max set and auto-scaling gets disabled
   // Disk and Network graphs auto-scale the y values.
 
@@ -236,12 +225,11 @@ function onPeriodChanged() {
   }
 
   // this sets a min 'x' based on current timestamp. so it has to re-created every time the period changes
-  const graphOptions = createGraphOptions({ yscale, period: props.period, displayLegend: props.datasetLabels.length > 1, highMark });
+  const graphOptions = createGraphOptions({ yscale, period: props.period, highMark });
 
   if (!graph) {
-    graph = new Chart(graphNode.value, { type: 'line', data, options: graphOptions });
+    graph = new Chart(graphNode.value, { type: 'line', data: { datasets: [] }, options: graphOptions });
   } else {
-    graph.data = data;
     graph.options = graphOptions;
     graph.update('none');
   }
@@ -261,7 +249,7 @@ onUnmounted(async function () {
 });
 
 defineExpose({
-  setData,
+  setDatasets,
   pushData,
 });