[VisLib] Replace legend color palette with OUI color palette

Replace hard-coded palette (of 8 colors with 7 variations each) with rotations from euiPaletteColorBlind (of 10 colors with 7 variations each) Fixes opensearch-project#4321 Signed-off-by: Josh Romero <[email protected]>
joshuarrrr · Jun 22, 2023 · 2e3df15 · 2e3df15
1 parent f298e7e
commit 2e3df15
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 61 deletions.
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
@@ -84,7 +84,7 @@ $visLegendLineHeight: $euiSize;
 }
 
 .visLegend__valueColorPicker {
-  width: ($euiSizeL * 8); // 8 columns
+  width: ($euiSizeL * 10); // 10 columns
 }
 
 .visLegend__valueColorPickerDot {

diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
@@ -42,9 +42,14 @@ import {
   EuiPopoverProps,
   EuiButtonGroup,
   EuiButtonGroupOptionProps,
+  euiPaletteColorBlind,
 } from '@elastic/eui';
 
-import { legendColors, LegendItem } from './models';
+import { LegendItem } from './models';
+
+// starting from the default categorical colors, we generate 6 additional variants,
+// 3 lighter and 3 darker
+const legendColors = euiPaletteColorBlind({ rotations: 7, direction: 'both' });
 
 interface Props {
   item: LegendItem;

diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/models.ts b/src/plugins/vis_type_vislib/public/vislib/components/legend/models.ts
@@ -34,62 +34,3 @@ export interface LegendItem {
 }
 
 export const CUSTOM_LEGEND_VIS_TYPES = ['heatmap', 'gauge'];
-
-export const legendColors: string[] = [
-  '#3F6833',
-  '#967302',
-  '#2F575E',
-  '#99440A',
-  '#58140C',
-  '#052B51',
-  '#511749',
-  '#3F2B5B', // 6
-  '#508642',
-  '#CCA300',
-  '#447EBC',
-  '#C15C17',
-  '#890F02',
-  '#0A437C',
-  '#6D1F62',
-  '#584477', // 2
-  '#629E51',
-  '#E5AC0E',
-  '#64B0C8',
-  '#E0752D',
-  '#BF1B00',
-  '#0A50A1',
-  '#962D82',
-  '#614D93', // 4
-  '#7EB26D',
-  '#EAB839',
-  '#6ED0E0',
-  '#EF843C',
-  '#E24D42',
-  '#1F78C1',
-  '#BA43A9',
-  '#705DA0', // Normal
-  '#9AC48A',
-  '#F2C96D',
-  '#65C5DB',
-  '#F9934E',
-  '#EA6460',
-  '#5195CE',
-  '#D683CE',
-  '#806EB7', // 5
-  '#B7DBAB',
-  '#F4D598',
-  '#70DBED',
-  '#F9BA8F',
-  '#F29191',
-  '#82B5D8',
-  '#E5A8E2',
-  '#AEA2E0', // 3
-  '#E0F9D7',
-  '#FCEACA',
-  '#CFFAFF',
-  '#F9E2D2',
-  '#FCE2DE',
-  '#BADFF4',
-  '#F9D9F9',
-  '#DEDAF7', // 7
-];