Use util.getColor to generate colors

dashboard/src/components/SystemGraphs.vue

@@ -11,6 +11,7 @@ import SystemModel from '../models/SystemModel.js';
 import { prettyDecimalSize } from '@cloudron/pankow/utils';
 import GraphItem from './GraphItem.vue';
 import AppsModel from '../models/AppsModel.js';
+import { getColor } from '../utils.js';
 
 const systemModel = SystemModel.create();
 const appsModel = AppsModel.create();
@@ -85,21 +86,9 @@ async function liveRefresh() {
   };
 }
 
-function generateConsistentColors(n, saturation = 90, lightness = 90) {
-  const baseHue = 204;           // from #9ad0f5 → hsl(204,82%,78%)
-  const colors = [];
-  const step = 360 / n;
-
-  for (let i = 0; i < n; i++) {
-    const hue = Math.round((baseHue + step * i) % 360); // rotate hue, wrap at 360
-    colors.push(`hsl(${hue}, ${saturation}%, ${lightness}%)`);
-  }
-
-  return colors;
-}
-
 function createDatasets() {
-    const colors = generateConsistentColors((selectedContainers.value.length+1)*2); // 1 for the 'system'
+  const colorCount = (selectedContainers.value.length+1)*2; // 1 for the 'system'
+  const colors = Array.from({ length: colorCount }).map((e, idx) => getColor(colorCount, idx));
 
     const datasets = {
       cpu: [],