[Vis Colors] Update legacy seed colors to use ouiPaletteColorBlind()

Signed-off-by: Manasvini B Suryanarayana <[email protected]>

CHANGELOG.md

@@ -54,6 +54,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Remove unused Sass in `tile_map` plugin ([#4110](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4110))
 - [Table Visualization] Remove custom styling for text-align:center in favor of OUI utility class. ([#4164](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4164))
 - Replace the use of `bluebird` in `saved_objects` plugin ([#4026](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4026))
+- [Vis Colors] Update legacy seed colors to use `ouiPaletteColorBlind()` ([])
 
 ### 🔩 Tests
 

src/plugins/charts/public/services/colors/color_palette.ts

@@ -31,7 +31,7 @@
 import _ from 'lodash';
 import { hsl } from 'color';
 
-import { seedColors } from './seed_colors';
+import { euiPaletteColorBlind } from '@elastic/eui';
 
 const offset = 300; // Hue offset to start at
 
@@ -65,8 +65,8 @@ export function createColorPalette(num: number): string[] {
     throw new TypeError('ColorPaletteUtilService expects a number');
   }
 
-  const colors = seedColors;
-  const seedLength = seedColors.length;
+  const colors = euiPaletteColorBlind();
+  const seedLength = euiPaletteColorBlind().length;
 
   _.times(num - seedLength, function (i) {
     colors.push(hsl((fraction(i + seedLength + 1) * 360 + offset) % 360, 50, 50).hex());

src/plugins/charts/public/services/colors/colors.test.ts

@@ -30,7 +30,7 @@
 
 import { coreMock } from '../../../../../core/public/mocks';
 import { COLOR_MAPPING_SETTING } from '../../../common';
-import { seedColors } from './seed_colors';
+import { euiPaletteColorBlind } from '@elastic/eui';
 import { ColorsService } from './colors';
 
 // Local state for config
@@ -138,7 +138,7 @@ describe('Vislib Color Service', () => {
   });
 
   it('should return the first hex color in the seed colors array', () => {
-    expect(color(arr[0])).toBe(seedColors[0]);
+    expect(color(arr[0])).toBe(euiPaletteColorBlind()[0]);
   });
 
   it('should return the value from the mapped colors', () => {

src/plugins/charts/public/services/colors/colors.ts

@@ -32,8 +32,8 @@ import _ from 'lodash';
 
 import { CoreSetup } from 'opensearch-dashboards/public';
 
+import { euiPaletteColorBlind } from '@elastic/eui';
 import { MappedColors } from './mapped_colors';
-import { seedColors } from './seed_colors';
 
 /**
  * Accepts an array of strings or numbers that are used to create a
@@ -44,7 +44,7 @@ import { seedColors } from './seed_colors';
 export class ColorsService {
   private _mappedColors?: MappedColors;
 
-  public readonly seedColors = seedColors;
+  public readonly seedColors = euiPaletteColorBlind();
 
   public get mappedColors() {
     if (!this._mappedColors) {

src/plugins/charts/public/services/colors/colors_palette.test.ts

@@ -28,7 +28,6 @@
  * under the License.
  */
 
-import { seedColors } from './seed_colors';
 import { createColorPalette } from './color_palette';
 
 describe('Color Palette', () => {
@@ -91,15 +90,16 @@ describe('Color Palette', () => {
   });
 
   it('should return the seed color array when input length is 72', () => {
-    expect(createColorPalette(num2)[71]).toBe(seedColors[71]);
+    expect(createColorPalette(num2).length).toBe(72);
+    expect(createColorPalette(num2)[71]).toBe('#BFB540');
   });
 
   it('should return an array of the same length as the input when input is greater than 72', () => {
     expect(createColorPalette(num3).length).toBe(num3);
   });
 
   it('should create new darker colors when input is greater than 72', () => {
-    expect(createColorPalette(num3)[72]).not.toEqual(seedColors[0]);
+    expect(createColorPalette(num3)[72]).not.toEqual('#54B399');
   });
 
   it('should create new colors and convert them correctly', () => {

src/plugins/charts/public/services/colors/mapped_colors.test.ts

@@ -33,7 +33,8 @@ import Color from 'color';
 
 import { coreMock } from '../../../../../core/public/mocks';
 import { COLOR_MAPPING_SETTING } from '../../../common';
-import { seedColors } from './seed_colors';
+// @ts-ignore
+import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
 import { MappedColors } from './mapped_colors';
 
 // Local state for config
@@ -65,31 +66,31 @@ describe('Mapped Colors', () => {
   });
 
   it('should not include colors used by the config', () => {
-    const newConfig = { bar: seedColors[0] };
+    const newConfig = { bar: euiPaletteColorBlind()[9] };
     config.set(COLOR_MAPPING_SETTING, newConfig);
 
     const arr = ['foo', 'baz', 'qux'];
     mappedColors.mapKeys(arr);
 
     const colorValues = _(mappedColors.mapping).values();
-    expect(colorValues).not.toContain(seedColors[0]);
+    expect(colorValues).not.toContain(euiPaletteColorBlind()[9]);
     expect(colorValues.uniq().size()).toBe(arr.length);
   });
 
   it('should create a unique array of colors even when config is set', () => {
-    const newConfig = { bar: seedColors[0] };
+    const newConfig = { bar: euiPaletteColorBlind()[9] };
     config.set(COLOR_MAPPING_SETTING, newConfig);
 
     const arr = ['foo', 'bar', 'baz', 'qux'];
     mappedColors.mapKeys(arr);
 
     const expectedSize = _(arr).difference(_.keys(newConfig)).size();
     expect(_(mappedColors.mapping).values().uniq().size()).toBe(expectedSize);
-    expect(mappedColors.get(arr[0])).not.toBe(seedColors[0]);
+    expect(mappedColors.get(arr[0])).not.toBe(euiPaletteColorBlind()[9]);
   });
 
   it('should treat different formats of colors as equal', () => {
-    const color = new Color(seedColors[0]);
+    const color = new Color(euiPaletteColorBlind()[9]);
     const rgb = `rgb(${color.red()}, ${color.green()}, ${color.blue()})`;
     const newConfig = { bar: rgb };
     config.set(COLOR_MAPPING_SETTING, newConfig);
@@ -99,8 +100,8 @@ describe('Mapped Colors', () => {
 
     const expectedSize = _(arr).difference(_.keys(newConfig)).size();
     expect(_(mappedColors.mapping).values().uniq().size()).toBe(expectedSize);
-    expect(mappedColors.get(arr[0])).not.toBe(seedColors[0]);
-    expect(mappedColors.get('bar')).toBe(seedColors[0]);
+    expect(mappedColors.get(arr[0])).not.toBe(euiPaletteColorBlind()[9]);
+    expect(mappedColors.get('bar')).toBe(euiPaletteColorBlind()[9].toLowerCase());
   });
 
   it('should have a flush method that moves the current map to the old map', function () {