Merge pull request #60391 from ClickHouse/slightly-better-colors-on-d…

…ashboard Slightly better colors for multi-line graphs on the dashboard
ClickHouse · Mar 3, 2024 · 214168e · 214168e
2 parents 60be9f3 + e122a47
commit 214168e
Showing 1 changed file with 4 additions and 39 deletions.
diff --git a/programs/server/dashboard.html b/programs/server/dashboard.html
@@ -523,49 +523,14 @@
 let params = default_params;
 
 /// Palette generation for charts
-function generatePalette(baseColor, numColors) {
-    const baseHSL = hexToHsl(baseColor);
-    const hueStep = 360 / numColors;
-    const palette = [];
+function generatePalette(numColors) {
+    palette = [];
     for (let i = 0; i < numColors; i++) {
-        const hue = Math.round((baseHSL.h + i * hueStep) % 360);
-        const color = `hsl(${hue}, ${baseHSL.s}%, ${baseHSL.l}%)`;
-        palette.push(color);
+        palette.push(`oklch(${theme != 'dark' ? 0.75 : 0.5}, 0.15, ${360 * i / numColors})`);
     }
     return palette;
 }
 
-/// Helper function to convert hex color to HSL
-function hexToHsl(hex) {
-    hex = hex.replace(/^#/, '');
-    const bigint = parseInt(hex, 16);
-    const r = (bigint >> 16) & 255;
-    const g = (bigint >> 8) & 255;
-    const b = bigint & 255;
-    const r_norm = r / 255;
-    const g_norm = g / 255;
-    const b_norm = b / 255;
-    const max = Math.max(r_norm, g_norm, b_norm);
-    const min = Math.min(r_norm, g_norm, b_norm);
-    const l = (max + min) / 2;
-    let s = 0;
-    if (max !== min) {
-        s = l > 0.5 ? (max - min) / (2 - max - min) : (max - min) / (max + min);
-    }
-    let h = 0;
-    if (max !== min) {
-        if (max === r_norm) {
-            h = (g_norm - b_norm) / (max - min) + (g_norm < b_norm ? 6 : 0);
-        } else if (max === g_norm) {
-            h = (b_norm - r_norm) / (max - min) + 2;
-        } else {
-            h = (r_norm - g_norm) / (max - min) + 4;
-        }
-    }
-    h = Math.round(h * 60);
-    return { h, s: Math.round(s * 100), l: Math.round(l * 100) };
-}
-
 let theme = 'light';
 
 function setTheme(new_theme) {
@@ -1207,7 +1172,7 @@
     // Treat every column as series
     const series_count = reply.meta.length;
     const fill = series_count == 2 ? fill_color : undefined;
-    const palette = generatePalette(line_color, series_count);
+    const palette = series_count == 2 ? [line_color] : generatePalette(series_count);
     let max_value = Number.NEGATIVE_INFINITY;
     for (let i = 1; i < series_count; i++) {
         let label = reply.meta[i].name;