graphs: set the colors

dashboard/src/components/GraphItem.vue

@@ -22,9 +22,13 @@ const props = defineProps({
     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: Object,
-  cpu: Object
+  cpu: Object,
 });
 
 function createGraphOptions({ yscale, period }) {
@@ -116,7 +120,7 @@ function onPeriodChanged() {
 
   const data = { datasets: [] };
 
-  for (const label of props.datasetLabels) {
+  for (const [index, label] of props.datasetLabels.entries()) {
     data.datasets.push({
       label: label,
       data: [],
@@ -124,7 +128,9 @@ function onPeriodChanged() {
       borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
       tension: 0.4,
       showLine: true,
-      fill: true
+      fill: true,
+      color: props.datasetColors[index],
+      stack: 'stackgroup' // put them all in same stackgroup
     });
   }