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

dashboard/src/utils.js

@@ -671,6 +671,11 @@ const cronDays = [
 // generates 24h time sets (instead of american 12h) to avoid having to translate everything to locales eg. 12:00
 const cronHours = Array.from({ length: 24 }).map(function (v, i) { return { id: i, name: (i < 10 ? '0' : '') + i + ':00' }; });
 
+function getColor(numOfSteps, step) {
+  const deg = 360/numOfSteps;
+  return `hsl(${deg*step} 70% 50%)`;
+}
+
 // named exports
 export {
   prettyRelayProviderName,
@@ -686,7 +691,8 @@ export {
   getDataURLFromFile,
   getTextFromFile,
   cronDays,
-  cronHours
+  cronHours,
+  getColor,
 };
 
 // default export
@@ -704,5 +710,6 @@ export default {
   getDataURLFromFile,
   getTextFromFile,
   cronDays,
-  cronHours
+  cronHours,
+  getColor,
 };