[Manual][Backport 2.x][Vis colors] Update legacy mapped colors in cha…

…rts plugin to use ouiPaletteColorBlind() (#4451) * [Vis colors] Update legacy mapped colors in charts plugin to use ouiPaletteColorBlind() (#4398) Signed-off-by: Manasvini B Suryanarayana <[email protected]> Co-authored-by: Ashwin P Chandran <[email protected]> (cherry picked from commit 5e8a4fd) * [Vis colors] Update legacy mapped colors in charts plugin to use ouiPaletteColorBlind() (#4398) Signed-off-by: Manasvini B Suryanarayana <[email protected]> Co-authored-by: Ashwin P Chandran <[email protected]> (cherry picked from commit 5e8a4fd) Signed-off-by: Manasvini B Suryanarayana <[email protected]> --------- Signed-off-by: Manasvini B Suryanarayana <[email protected]> Co-authored-by: Ashwin P Chandran <[email protected]>
opensearch-project · Jul 26, 2023 · a85f798 · a85f798
1 parent d3163cf
commit a85f798
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 168 deletions.
diff --git a/src/plugins/charts/public/services/colors/color_palette.ts b/src/plugins/charts/public/services/colors/color_palette.ts
diff --git a/src/plugins/charts/public/services/colors/colors.test.ts b/src/plugins/charts/public/services/colors/colors.test.ts
@@ -31,6 +31,7 @@
 import { coreMock } from '../../../../../core/public/mocks';
 import { COLOR_MAPPING_SETTING } from '../../../common';
 import { euiPaletteColorBlind } from '@elastic/eui';
+
 import { ColorsService } from './colors';
 
 // Local state for config

diff --git a/src/plugins/charts/public/services/colors/colors_palette.test.ts b/src/plugins/charts/public/services/colors/colors_palette.test.ts
diff --git a/src/plugins/charts/public/services/colors/mapped_colors.ts b/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) {

diff --git a/src/plugins/charts/server/plugin.ts b/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', {

diff --git a/...ns/vis_type_tagcloud/public/components/__snapshots__/tag_cloud_visualization.test.js.snap b/...ns/vis_type_tagcloud/public/components/__snapshots__/tag_cloud_visualization.test.js.snap
diff --git a/src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.test.js b/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;