Add getColor() to utils

dashboard/src/components/DiskUsageItem.vue

@@ -3,6 +3,7 @@
 import { ref, onUnmounted } from 'vue';
 import { Button, ProgressBar } from '@cloudron/pankow';
 import { prettyDecimalSize } from '@cloudron/pankow/utils';
+import { getColor } from '../utils.js';
 import SystemModel from '../models/SystemModel.js';
 
 const systemModel = SystemModel.create();
@@ -11,23 +12,6 @@ const props = defineProps({
   filesystem: Object
 });
 
-function hue(numOfSteps, step) {
-  const deg = 360/numOfSteps;
-  return `hsl(${deg*step} 70% 50%)`;
-}
-
-let colorIndex = 0;
-let colors = [];
-function resetColors(n) {
-  colorIndex = 0;
-  colors = [];
-  for (let i = 0; i < n; i++) colors.push(hue(n, i));
-}
-
-function getNextColor() {
-  return colors[colorIndex++];
-}
-
 const isExpanded = ref(false);
 const percent = ref(0);
 const contents = ref([]);
@@ -50,8 +34,7 @@ async function refresh() {
       if (payload.type === 'done') {
         percent.value = 100;
 
-        resetColors(contents.value.length);
-        contents.value.forEach(c => c.color = getNextColor());
+        contents.value.forEach((c, i) => c.color = getColor(contents.value.length, i));
         contents.value.sort((a, b) => b.usage - a.usage);
 
         eventSource.close();