feat: update versions colors

Author: artemmufazalov

src/containers/Versions/Versions.tsx

@@ -32,7 +32,7 @@ export function VersionsContainer({cluster, loading}: VersionsContainerProps) {
         {tablets: false, fieldsRequired: ['SystemState', 'SubDomainKey']},
         {pollingInterval: autoRefreshInterval},
     );
-    const versionToColor = useVersionToColorMap();
+    const versionToColor = useVersionToColorMap(cluster);
 
     const versionsValues = useGetVersionValues({cluster, versionToColor, clusterLoading: loading});
 

src/utils/clusterVersionColors.ts

@@ -3,7 +3,13 @@ import uniqBy from 'lodash/uniqBy';
 import type {MetaClusterVersion} from '../types/api/meta';
 import type {VersionToColorMap} from '../types/versions';
 
-import {COLORS, DEFAULT_COLOR, getMinorVersion, hashCode} from './versions';
+import {
+    DEFAULT_COLOR,
+    getColors,
+    getMinorVersion,
+    getMinorVersionColorVariant,
+    hashCode,
+} from './versions';
 
 const UNDEFINED_COLOR_INDEX = '__no_color__';
 
@@ -28,6 +34,8 @@ export const getVersionMap = (
 export const getVersionColors = (versionMap: VersionsMap) => {
     const versionToColor: VersionToColorMap = new Map();
 
+    const colors = getColors();
+
     for (const [baseColorIndex, item] of versionMap) {
         Array.from(item)
             // descending by version name: newer versions come first,
@@ -38,13 +46,16 @@ export const getVersionColors = (versionMap: VersionsMap) => {
                     versionToColor.set(minor, DEFAULT_COLOR);
                 } else {
                     // baseColorIndex is numeric as we check if it is UNDEFINED_COLOR_INDEX before
-                    const currentColorIndex = Number(baseColorIndex) % COLORS.length;
+                    const currentColorIndex = Number(baseColorIndex) % colors.length;
                     const minorQuantity = item.size;
-                    const majorColor = COLORS[currentColorIndex];
-                    const opacityPercent = Math.max(100 - minorIndex * (100 / minorQuantity), 20);
-                    const hexOpacity = Math.round((opacityPercent * 255) / 100).toString(16);
-                    const versionColor = `${majorColor}${hexOpacity}`;
-                    versionToColor.set(minor, versionColor);
+
+                    const minorColorVariant = getMinorVersionColorVariant(
+                        minorIndex,
+                        minorQuantity,
+                    );
+                    const minorColor = colors[currentColorIndex][minorColorVariant];
+
+                    versionToColor.set(minor, minorColor);
                 }
             });
     }

src/utils/index.ts

@@ -17,3 +17,21 @@ export function normalizePathSlashes(path: string) {
     // (?<!:) - negative lookbehind - ignore parts that start with :
     return path.replaceAll(/(?<!:)\/\/+/g, '/');
 }
+
+export function getSystemTheme() {
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    } else {
+        return 'light';
+    }
+}
+
+export function getTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+
+    if (savedTheme === 'system') {
+        return getSystemTheme();
+    }
+
+    return savedTheme.includes('dark') ? 'dark' : 'light';
+}

src/utils/versions/getVersionsColors.ts

@@ -1,3 +1,4 @@
+import {getTheme} from '..';
 import type {VersionToColorMap, VersionsMap} from '../../types/versions';
 
 import {getMajorVersion, getMinorVersion} from './parseVersion';
@@ -9,23 +10,58 @@ export const hashCode = (s: string) => {
     }, 0);
 };
 
-// TODO: colors used in charts as well, need to move to constants
-// 11 distinct colors from https://mokole.com/palette.html
-export const COLORS = [
-    '#008000', // green
-    '#4169e1', // royalblue
-    '#ffd700', // gold
-    '#ff8c00', // darkorange
-    '#808000', // olive
-    '#e9967a', // darksalmon
-    '#ff1493', // deeppink
-    '#00bfff', // deepskyblue
-    '#da70d6', // orchid
-    '#8b4513', //saddlebrown
-    '#b22222', // firebrick
+const DARK_COLORS = [
+    ['#D50C38', '#FF2051', '#FB3A64', '#FF6989'],
+    ['#EB3320', '#FF503E', '#FF8376', '#FFA399'],
+    ['#F47B10', '#FF9B43', '#FFB06A', '#FFC693'],
+    ['#FFEA00', '#FFEE31', '#FFF480', '#FFF8A9'],
+    ['#83D400', '#B1FF33', '#CBFF78', '#DDFFA7'],
+    ['#27C98B', '#16FFA6', '#4CFFBA', '#9BFFD8'],
+    ['#0EDBDE', '#0CFBFF', '#63FDFF', '#B1FEFF'],
+    ['#2059FF', '#4070FF', '#658BFF', '#A1B9FF'],
+    ['#AB07E3', '#C92CFF', '#DD78FF', '#E79FFF'],
+    ['#E71498', '#FF34B3', '#FF75CB', '#FFB0E1'],
 ];
 
-export const DEFAULT_COLOR = '#3cb371'; // mediumseagreen
+const LIGHT_COLORS = [
+    ['#F4315B', '#FF426B', '#FF7391', '#FF8BA4'],
+    ['#FF6050', '#FF7A6D', '#FFAFA6', '#FFBCB5'],
+    ['#FF9233', '#FFAD65', '#FFC593', '#FFD3AC'],
+    ['#FFEA00', '#FFEE31', '#FFF480', '#FFF8A9'],
+    ['#A1EE26', '#B1FF33', '#CBFF78', '#DDFFA7'],
+    ['#31EBA4', '#16FFA6', '#4CFFBA', '#9BFFD8'],
+    ['#2EE4E8', '#0CFBFF', '#63FDFF', '#B1FEFF'],
+    ['#386BFF', '#4070FF', '#658BFF', '#A1B9FF'],
+    ['#C73AF7', '#C92CFF', '#DD78FF', '#E79FFF'],
+    ['#FF49BB', '#FF34B3', '#FF75CB', '#FFB0E1'],
+];
+
+export function getColors() {
+    return getTheme() === 'dark' ? DARK_COLORS : LIGHT_COLORS;
+}
+
+/** Calculates sub color index */
+export function getMinorVersionColorVariant(minorIndex: number, minorQuantity: number) {
+    // We have 4 sub colors for each color
+    // For 4+ minors first 25% will be colored with the first most bright color
+    // Every next 25% will be colored with corresponding color
+    // Do not use all colors if there are less than 4 minors
+
+    if (minorQuantity === 1) {
+        return 0;
+    }
+    if (minorQuantity === 2) {
+        return Math.floor((2 * minorIndex) / minorQuantity);
+    }
+    if (minorQuantity === 3) {
+        return Math.floor((3 * minorIndex) / minorQuantity);
+    }
+
+    return Math.floor((4 * minorIndex) / minorQuantity);
+}
+
+// TODO: replace with color suggested by designer
+export const DEFAULT_COLOR = 'saddlebrown';
 
 export const getVersionsMap = (versions: string[], initialMap: VersionsMap = new Map()) => {
     versions.forEach((version) => {
@@ -47,20 +83,23 @@ export const getVersionToColorMap = (versionsMap: VersionsMap) => {
         };
     });
 
+    const colors = getColors();
+
     const versionToColor: VersionToColorMap = new Map();
     // not every version is colored, therefore iteration index can't be used consistently
     // init with the colors length to put increment right after condition for better readability
-    let currentColorIndex = COLORS.length - 1;
+    let currentColorIndex = colors.length - 1;
 
     clustersVersions
         // ascending by version name, just for consistency
         // sorting only impacts color choose for a version
         .sort((a, b) => a.hash - b.hash)
         .forEach((item) => {
             if (/^(\w+-)?stable/.test(item.version)) {
-                currentColorIndex = (currentColorIndex + 1) % COLORS.length;
+                currentColorIndex = (currentColorIndex + 1) % colors.length;
 
-                versionToColor.set(item.version, COLORS[currentColorIndex]);
+                // Use fisrt color for major
+                versionToColor.set(item.version, colors[currentColorIndex][0]);
 
                 const minors = Array.from(versionsMap.get(item.version) || [])
                     .filter((v) => v !== item.version)
@@ -78,14 +117,12 @@ export const getVersionToColorMap = (versionsMap: VersionsMap) => {
                     // so the newer version gets the brighter color
                     .sort((a, b) => b.hash - a.hash)
                     .forEach((minor, minorIndex) => {
-                        const majorColor = COLORS[currentColorIndex];
-                        const opacityPercent = Math.max(
-                            100 - minorIndex * (100 / minorQuantity),
-                            20,
+                        const minorColorVariant = getMinorVersionColorVariant(
+                            minorIndex,
+                            minorQuantity,
                         );
-                        const hexOpacity = Math.round((opacityPercent * 255) / 100).toString(16);
-                        const versionColor = `${majorColor}${hexOpacity}`;
-                        versionToColor.set(minor.version, versionColor);
+                        const minorColor = colors[currentColorIndex][minorColorVariant];
+                        versionToColor.set(minor.version, minorColor);
                     });
             } else {
                 versionToColor.set(item.version, DEFAULT_COLOR);