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
     });
   }
 

dashboard/src/components/SystemMetrics.vue

@@ -121,6 +121,7 @@ onUnmounted(async () => {
         :period="period"
         yscale="cpu"
         :dataset-labels="['CPU']"
+        :dataset-colors="['#9ad0f5']"
         :cpu="systemCpus"
         >
       </GraphItem>
@@ -131,6 +132,7 @@ onUnmounted(async () => {
         :period="period"
         yscale="memory"
         :dataset-labels="['Memory', 'Swap']"
+        :dataset-colors="['#9ad0f5', '#ffb1c1']"
         :memory="systemMemory"
         >
       </GraphItem>
@@ -141,6 +143,7 @@ onUnmounted(async () => {
         :period="period"
         yscale="disk"
         :dataset-labels="['Read', 'Write']"
+        :dataset-colors="['#9ad0f5', '#ffb1c1']"
         >
       </GraphItem>
 
@@ -150,6 +153,7 @@ onUnmounted(async () => {
         :period="period"
         yscale="network"
         :dataset-labels="['RX', 'TX']"
+        :dataset-colors="['#9ad0f5', '#ffb1c1']"
         >
       </GraphItem>
     </div>