Skip to content

Commit a392546

Browse files
artemmufazalovartemmufazalov
authored
feat: update versions colors (#2530)
1 parent 395f175 commit a392546

File tree

5 files changed

+215
-29
lines changed

5 files changed

+215
-29
lines changed

‎src/containers/Versions/Versions.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function VersionsContainer({cluster, loading}: VersionsContainerProps) {
3232
{tablets: false, fieldsRequired: ['SystemState', 'SubDomainKey']},
3333
{pollingInterval: autoRefreshInterval},
3434
);
35-
const versionToColor = useVersionToColorMap();
35+
const versionToColor = useVersionToColorMap(cluster);
3636

3737
const versionsValues = useGetVersionValues({cluster, versionToColor, clusterLoading: loading});
3838

‎src/styles/index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@forward './themes.scss';
33
@forward './unipika.scss';
44
@forward './illustrations.scss';
5+
@forward './versions.scss';
56

67
body {
78
--ydb-drawer-veil-z-index: 2;

‎src/styles/versions.scss

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
.g-root {
2+
&_theme_light,
3+
&_theme_light-hc {
4+
--versions-red-1: #f4315b;
5+
--versions-red-2: #ff426b;
6+
--versions-red-3: #ff7391;
7+
--versions-red-4: #ff8ba4;
8+
9+
--versions-orange-red-1: #ff6050;
10+
--versions-orange-red-2: #ff7a6d;
11+
--versions-orange-red-3: #ffafa6;
12+
--versions-orange-red-4: #ffbcb5;
13+
14+
--versions-orange-1: #ff9233;
15+
--versions-orange-2: #ffad65;
16+
--versions-orange-3: #ffc593;
17+
--versions-orange-4: #ffd3ac;
18+
19+
--versions-yellow-1: #ffea00;
20+
--versions-yellow-2: #ffee31;
21+
--versions-yellow-3: #fff480;
22+
--versions-yellow-4: #fff8a9;
23+
24+
--versions-green-1: #a1ee26;
25+
--versions-green-2: #b1ff33;
26+
--versions-green-3: #cbff78;
27+
--versions-green-4: #ddffa7;
28+
29+
--versions-teal-1: #31eba4;
30+
--versions-teal-2: #16ffa6;
31+
--versions-teal-3: #4cffba;
32+
--versions-teal-4: #9bffd8;
33+
34+
--versions-cyan-1: #2ee4e8;
35+
--versions-cyan-2: #0cfbff;
36+
--versions-cyan-3: #63fdff;
37+
--versions-cyan-4: #b1feff;
38+
39+
--versions-blue-1: #386bff;
40+
--versions-blue-2: #4070ff;
41+
--versions-blue-3: #658bff;
42+
--versions-blue-4: #a1b9ff;
43+
44+
--versions-purple-1: #c73af7;
45+
--versions-purple-2: #c92cff;
46+
--versions-purple-3: #dd78ff;
47+
--versions-purple-4: #e79fff;
48+
49+
--versions-pink-1: #ff49bb;
50+
--versions-pink-2: #ff34b3;
51+
--versions-pink-3: #ff75cb;
52+
--versions-pink-4: #ffb0e1;
53+
}
54+
&_theme_dark,
55+
&_theme_dark-hc {
56+
--versions-red-1: #d50c38;
57+
--versions-red-2: #ff2051;
58+
--versions-red-3: #fb3a64;
59+
--versions-red-4: #ff6989;
60+
61+
--versions-orange-red-1: #eb3320;
62+
--versions-orange-red-2: #ff503e;
63+
--versions-orange-red-3: #ff8376;
64+
--versions-orange-red-4: #ffa399;
65+
66+
--versions-orange-1: #f47b10;
67+
--versions-orange-2: #ff9b43;
68+
--versions-orange-3: #ffb06a;
69+
--versions-orange-4: #ffc693;
70+
71+
--versions-yellow-1: #ffea00;
72+
--versions-yellow-2: #ffee31;
73+
--versions-yellow-3: #fff480;
74+
--versions-yellow-4: #fff8a9;
75+
76+
--versions-green-1: #83d400;
77+
--versions-green-2: #b1ff33;
78+
--versions-green-3: #cbff78;
79+
--versions-green-4: #ddffa7;
80+
81+
--versions-teal-1: #27c98b;
82+
--versions-teal-2: #16ffa6;
83+
--versions-teal-3: #4cffba;
84+
--versions-teal-4: #9bffd8;
85+
86+
--versions-cyan-1: #0edbde;
87+
--versions-cyan-2: #0cfbff;
88+
--versions-cyan-3: #63fdff;
89+
--versions-cyan-4: #b1feff;
90+
91+
--versions-blue-1: #2059ff;
92+
--versions-blue-2: #4070ff;
93+
--versions-blue-3: #658bff;
94+
--versions-blue-4: #a1b9ff;
95+
96+
--versions-purple-1: #ab07e3;
97+
--versions-purple-2: #c92cff;
98+
--versions-purple-3: #dd78ff;
99+
--versions-purple-4: #e79fff;
100+
101+
--versions-pink-1: #e71498;
102+
--versions-pink-2: #ff34b3;
103+
--versions-pink-3: #ff75cb;
104+
--versions-pink-4: #ffb0e1;
105+
}
106+
}

‎src/utils/clusterVersionColors.ts

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@ import uniqBy from 'lodash/uniqBy';
33
import type {MetaClusterVersion} from '../types/api/meta';
44
import type {VersionToColorMap} from '../types/versions';
55

6-
import {COLORS, DEFAULT_COLOR, getMinorVersion, hashCode} from './versions';
6+
import {
7+
COLORS,
8+
DEFAULT_COLOR,
9+
getMinorVersion,
10+
getMinorVersionColorVariant,
11+
hashCode,
12+
} from './versions';
713

814
const UNDEFINED_COLOR_INDEX = '__no_color__';
915

@@ -40,11 +46,14 @@ export const getVersionColors = (versionMap: VersionsMap) => {
4046
// baseColorIndex is numeric as we check if it is UNDEFINED_COLOR_INDEX before
4147
const currentColorIndex = Number(baseColorIndex) % COLORS.length;
4248
const minorQuantity = item.size;
43-
const majorColor = COLORS[currentColorIndex];
44-
const opacityPercent = Math.max(100 - minorIndex * (100 / minorQuantity), 20);
45-
const hexOpacity = Math.round((opacityPercent * 255) / 100).toString(16);
46-
const versionColor = `${majorColor}${hexOpacity}`;
47-
versionToColor.set(minor, versionColor);
49+
50+
const minorColorVariant = getMinorVersionColorVariant(
51+
minorIndex,
52+
minorQuantity,
53+
);
54+
const minorColor = COLORS[currentColorIndex][minorColorVariant];
55+
56+
versionToColor.set(minor, minorColor);
4857
}
4958
});
5059
}

‎src/utils/versions/getVersionsColors.ts

Lines changed: 92 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,94 @@ export const hashCode = (s: string) => {
99
}, 0);
1010
};
1111

12-
// TODO: colors used in charts as well, need to move to constants
13-
// 11 distinct colors from https://mokole.com/palette.html
1412
export const COLORS = [
15-
'#008000', // green
16-
'#4169e1', // royalblue
17-
'#ffd700', // gold
18-
'#ff8c00', // darkorange
19-
'#808000', // olive
20-
'#e9967a', // darksalmon
21-
'#ff1493', // deeppink
22-
'#00bfff', // deepskyblue
23-
'#da70d6', // orchid
24-
'#8b4513', //saddlebrown
25-
'#b22222', // firebrick
13+
[
14+
'var(--versions-red-1)',
15+
'var(--versions-red-2)',
16+
'var(--versions-red-3)',
17+
'var(--versions-red-4)',
18+
],
19+
[
20+
'var(--versions-orange-red-1)',
21+
'var(--versions-orange-red-2)',
22+
'var(--versions-orange-red-3)',
23+
'var(--versions-orange-red-4)',
24+
],
25+
[
26+
'var(--versions-orange-1)',
27+
'var(--versions-orange-2)',
28+
'var(--versions-orange-3)',
29+
'var(--versions-orange-4)',
30+
],
31+
[
32+
'var(--versions-yellow-1)',
33+
'var(--versions-yellow-2)',
34+
'var(--versions-yellow-3)',
35+
'var(--versions-yellow-4)',
36+
],
37+
[
38+
'var(--versions-green-1)',
39+
'var(--versions-green-2)',
40+
'var(--versions-green-3)',
41+
'var(--versions-green-4)',
42+
],
43+
[
44+
'var(--versions-teal-1)',
45+
'var(--versions-teal-2)',
46+
'var(--versions-teal-3)',
47+
'var(--versions-teal-4)',
48+
],
49+
[
50+
'var(--versions-cyan-1)',
51+
'var(--versions-cyan-2)',
52+
'var(--versions-cyan-3)',
53+
'var(--versions-cyan-4)',
54+
],
55+
[
56+
'var(--versions-blue-1)',
57+
'var(--versions-blue-2)',
58+
'var(--versions-blue-3)',
59+
'var(--versions-blue-4)',
60+
],
61+
[
62+
'var(--versions-purple-1)',
63+
'var(--versions-purple-2)',
64+
'var(--versions-purple-3)',
65+
'var(--versions-purple-4)',
66+
],
67+
[
68+
'var(--versions-pink-1)',
69+
'var(--versions-pink-2)',
70+
'var(--versions-pink-3)',
71+
'var(--versions-pink-4)',
72+
],
2673
];
2774

28-
export const DEFAULT_COLOR = '#3cb371'; // mediumseagreen
75+
export const DEFAULT_COLOR = 'var(--g-color-base-generic-medium)';
76+
77+
/** Calculates sub color index */
78+
export function getMinorVersionColorVariant(minorIndex: number, minorQuantity: number) {
79+
// We have 4 sub colors for each color
80+
// For 4+ minors first 25% will be colored with the first most bright color
81+
// Every next 25% will be colored with corresponding color
82+
// Do not use all colors if there are less than 4 minors
83+
84+
if (minorQuantity === 1) {
85+
return 0;
86+
}
87+
// Use only 2 colors
88+
if (minorQuantity === 2) {
89+
return Math.floor((2 * minorIndex) / minorQuantity);
90+
}
91+
// Use only 3 colors
92+
if (minorQuantity === 3) {
93+
return Math.floor((3 * minorIndex) / minorQuantity);
94+
}
95+
96+
// Max minor index is minorQuantity - 1
97+
// So result values always will be in range from 0 to 3
98+
return Math.floor((4 * minorIndex) / minorQuantity);
99+
}
29100

30101
export const getVersionsMap = (versions: string[], initialMap: VersionsMap = new Map()) => {
31102
versions.forEach((version) => {
@@ -60,7 +131,8 @@ export const getVersionToColorMap = (versionsMap: VersionsMap) => {
60131
if (/^(\w+-)?stable/.test(item.version)) {
61132
currentColorIndex = (currentColorIndex + 1) % COLORS.length;
62133

63-
versionToColor.set(item.version, COLORS[currentColorIndex]);
134+
// Use fisrt color for major
135+
versionToColor.set(item.version, COLORS[currentColorIndex][0]);
64136

65137
const minors = Array.from(versionsMap.get(item.version) || [])
66138
.filter((v) => v !== item.version)
@@ -78,14 +150,12 @@ export const getVersionToColorMap = (versionsMap: VersionsMap) => {
78150
// so the newer version gets the brighter color
79151
.sort((a, b) => b.hash - a.hash)
80152
.forEach((minor, minorIndex) => {
81-
const majorColor = COLORS[currentColorIndex];
82-
const opacityPercent = Math.max(
83-
100 - minorIndex * (100 / minorQuantity),
84-
20,
153+
const minorColorVariant = getMinorVersionColorVariant(
154+
minorIndex,
155+
minorQuantity,
85156
);
86-
const hexOpacity = Math.round((opacityPercent * 255) / 100).toString(16);
87-
const versionColor = `${majorColor}${hexOpacity}`;
88-
versionToColor.set(minor.version, versionColor);
157+
const minorColor = COLORS[currentColorIndex][minorColorVariant];
158+
versionToColor.set(minor.version, minorColor);
89159
});
90160
} else {
91161
versionToColor.set(item.version, DEFAULT_COLOR);

0 commit comments

Comments
 (0)