[Vis colors] Update legacy mapped colors in charts plugin to use ouiP…

…aletteColorBlind()

Signed-off-by: Manasvini B Suryanarayana <manasvis@amazon.com>

CHANGELOG.md

@@ -67,6 +67,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Vis Colors] [Maps] Replace hardcoded color to OUI color in `maps_legacy` plugin ([#4294](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4294))
 - [Vis Colors] [TSVB] Update default color in `vis_type_timeseries` to use `ouiPaletteColorBlind()[0]`([#4363](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4363))
 - [Vis Colors] [Timeline] Replace `vis_type_timeline` colors with `ouiPaletteColorBlind()` ([#4366](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4366))
+- [Vis colors] Update legacy mapped colors in charts plugin to use `ouiPaletteColorBlind()`, Update default color in legacy visualizations to use `ouiPaletteColorBlind()[0]` ([#4398](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4398))
 
 ### 🔩 Tests
 

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

@@ -29,8 +29,8 @@
  */
 
 import { coreMock } from '../../../../../core/public/mocks';
+import { euiPaletteColorBlind } from '@elastic/eui';
 import { COLOR_MAPPING_SETTING } from '../../../common';
-import { seedColors } from './seed_colors';
 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/mapped_colors.ts

@@ -33,8 +33,8 @@ import Color from 'color';
 
 import { CoreSetup } from 'opensearch-dashboards/public';
 
+import { euiPaletteColorBlind } from '@elastic/eui';
 import { COLOR_MAPPING_SETTING } from '../../../common';
-import { createColorPalette } from './color_palette';
 
 const standardizeColor = (color: string) => new Color(color).hex().toLowerCase();
 
@@ -100,7 +100,11 @@ export class MappedColors {
 
     // Generate a color palette big enough that all new keys can have unique color values
     const allColors = _(this._mapping).values().union(configColors).union(oldColors).value();
-    const colorPalette = createColorPalette(allColors.length + keysToMap.length);
+    const numColors = allColors.length + keysToMap.length;
+    const colorPalette = euiPaletteColorBlind({
+      rotations: Math.ceil(numColors / 10),
+      direction: 'both',
+    }).slice(0, numColors);
     let newColors = _.difference(colorPalette, allColors);
 
     while (keysToMap.length > newColors.length) {

src/plugins/charts/server/plugin.ts

@@ -41,7 +41,7 @@ export class ChartsServerPlugin implements Plugin<object, object> {
           defaultMessage: 'Color mapping',
         }),
         value: JSON.stringify({
-          Count: '#00A69B',
+          Count: '#54B399',
         }),
         type: 'json',
         description: i18n.translate('charts.advancedSettings.visualization.colorMappingText', {

src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.test.js

@@ -34,8 +34,9 @@ import { TagCloudVisualization } from './tag_cloud_visualization';
 import { setFormatService } from '../services';
 import { dataPluginMock } from '../../../data/public/mocks';
 import { setHTMLElementOffset, setSVGElementGetBBox } from '../../../../test_utils/public';
+import { euiPaletteColorBlind } from '@elastic/eui';
 
-const seedColors = ['#00a69b', '#57c17b', '#6f87d8', '#663db8', '#bc52bc', '#9e3533', '#daa05d'];
+const seedColors = euiPaletteColorBlind();
 
 describe('TagCloudVisualizationTest', () => {
   let domNode;

test/functional/apps/dashboard/dashboard_state.js

@@ -33,6 +33,7 @@ import expect from '@osd/expect';
 import { PIE_CHART_VIS_NAME, AREA_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
 
 import { DEFAULT_PANEL_WIDTH } from '../../../../src/plugins/dashboard/public/application/embeddable/dashboard_constants';
+import { euiPaletteColorBlind } from '@elastic/eui';
 
 export default function ({ getService, getPageObjects }) {
   const PageObjects = getPageObjects([
@@ -278,13 +279,15 @@ export default function ({ getService, getPageObjects }) {
           await retry.try(async () => {
             const pieSliceStyle = await pieChart.getPieSliceStyle('80,000');
             // The default green color that was stored with the visualization before any dashboard overrides.
-            expect(pieSliceStyle.indexOf('rgb(87, 193, 123)')).to.be.greaterThan(0);
+            expect(pieSliceStyle.indexOf('rgb(84, 179, 153)')).to.be.greaterThan(0);
           });
         });
 
         it('resets the legend color as well', async function () {
           await retry.try(async () => {
-            const colorExists = await PageObjects.visChart.doesSelectedLegendColorExist('#57c17b');
+            const colorExists = await PageObjects.visChart.doesSelectedLegendColorExist(
+              euiPaletteColorBlind()[0]
+            );
             expect(colorExists).to.be(true);
           });
         });