Make color assignment more predictable

CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add support for processing the new offspot file-manager (#104)
+
+### Changed
+
+- Colors assigned to package names are not random anymore (#109)
+- Many small UI adjustments (#106)
+
+### Fixed
+
+- Top toolbar is not working properly when there is no yearly aggregation (#101)
+
 ## [0.2.1] - 2024-01-26
 
 ### Added

frontend/src/stores/main.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import axios from 'axios'
 import AggregationDetails from '@/types/AggregationDetails'
 import AggregationKpiValue from '@/types/AggregationKpiValue'
-import { getRandomColor } from '../utils'
+import { colorScheme } from '../utils'
 
 // Hard-coded for now, to be reworked once we will need this also for the slider
 const monthText = (monthDigit: string): string => {
@@ -49,6 +49,7 @@ export type RootState = {
   errorMessage: string | null
   currentPage: Page
   packagesColors: { [id: string]: string }
+  nextPackageColor: number
   drawerVisible: boolean
 }
 export const useMainStore = defineStore('main', {
@@ -62,6 +63,7 @@ export const useMainStore = defineStore('main', {
       currentPage: Page.Dashboard,
       packagesColors: {},
       drawerVisible: true,
+      nextPackageColor: 0,
     }) as RootState,
   getters: {
     hasAggregationValues: (state) =>
@@ -128,7 +130,12 @@ export const useMainStore = defineStore('main', {
       // and customisable (see #56 and #57)
       return (packageName: string): string => {
         if (!(packageName in state.packagesColors)) {
-          state.packagesColors[packageName] = getRandomColor()
+          state.packagesColors[packageName] =
+            colorScheme[state.nextPackageColor]
+          state.nextPackageColor++
+          if (state.nextPackageColor >= colorScheme.length) {
+            state.nextPackageColor = 0
+          }
         }
         return state.packagesColors[packageName]
       }

frontend/src/utils.ts

@@ -1,22 +1,23 @@
+/*
+  Color scheme is from https://venngage.com/tools/accessible-color-palette-generator#colorGenerator
+  We selected colors mostly randomly
+*/
+export const colorScheme = [
+  '#00bf7d',
+  '#00b4c5',
+  '#f57600',
+  '#8babf1',
+  '#e6308a',
+  '#89ce00',
+  '#e6308a',
+  '#9b8bf4',
+  '#606ff3',
+  '#9b8bf4',
+]
+
 /*
  * Get a random Hex color in our color scheme, to be used in CSS
  */
 export const getRandomColor = (): string => {
-  /*
-    Color scheme is from https://venngage.com/tools/accessible-color-palette-generator#colorGenerator
-    We selected colors mostly randomly
-  */
-  const colorScheme = [
-    '#00bf7d',
-    '#00b4c5',
-    '#f57600',
-    '#8babf1',
-    '#e6308a',
-    '#89ce00',
-    '#e6308a',
-    '#9b8bf4',
-    '#606ff3',
-    '#9b8bf4',
-  ]
   return colorScheme[Math.floor(Math.random() * colorScheme.length)]
 }