From c26a7bb22cdc1ab447d586945ffb96f07adf01f8 Mon Sep 17 00:00:00 2001 From: Manasvini B Suryanarayana Date: Wed, 28 Jun 2023 15:36:20 -0700 Subject: [PATCH] [Vis colors] Update legacy mapped colors in charts plugin to use ouiPaletteColorBlind() (#4398) Signed-off-by: Manasvini B Suryanarayana Co-authored-by: Ashwin P Chandran (cherry picked from commit 5e8a4fddb57ca57e0fea48690662031a22bbdab0) --- .../charts/public/services/colors/mapped_colors.ts | 8 ++++++-- src/plugins/charts/server/plugin.ts | 2 +- .../__snapshots__/tag_cloud_visualization.test.js.snap | 6 +++--- .../public/components/tag_cloud_visualization.test.js | 3 ++- 4 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/plugins/charts/public/services/colors/mapped_colors.ts b/src/plugins/charts/public/services/colors/mapped_colors.ts index c4ce91dce1aa..bc8ad8640985 100644 --- 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 index 7e733c0120f3..c9059b5f7380 100644 --- a/src/plugins/charts/server/plugin.ts +++ b/src/plugins/charts/server/plugin.ts @@ -41,7 +41,7 @@ export class ChartsServerPlugin implements Plugin { defaultMessage: 'Color mapping', }), value: JSON.stringify({ - Count: '#00A69B', + Count: '#54B399', }), type: 'json', description: i18n.translate('charts.advancedSettings.visualization.colorMappingText', { diff --git a/src/plugins/vis_type_tagcloud/public/components/__snapshots__/tag_cloud_visualization.test.js.snap b/src/plugins/vis_type_tagcloud/public/components/__snapshots__/tag_cloud_visualization.test.js.snap index d7707f64d8a4..4f4e2eeab4be 100644 --- a/src/plugins/vis_type_tagcloud/public/components/__snapshots__/tag_cloud_visualization.test.js.snap +++ b/src/plugins/vis_type_tagcloud/public/components/__snapshots__/tag_cloud_visualization.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`TagCloudVisualizationTest TagCloudVisualization - basics simple draw 1`] = `"CNINUSDEBR"`; +exports[`TagCloudVisualizationTest TagCloudVisualization - basics simple draw 1`] = `"CNINUSDEBR"`; -exports[`TagCloudVisualizationTest TagCloudVisualization - basics with param change 1`] = `"CNINUSDEBR"`; +exports[`TagCloudVisualizationTest TagCloudVisualization - basics with param change 1`] = `"CNINUSDEBR"`; -exports[`TagCloudVisualizationTest TagCloudVisualization - basics with resize 1`] = `"CNINUSDEBR"`; +exports[`TagCloudVisualizationTest TagCloudVisualization - basics with resize 1`] = `"CNINUSDEBR"`; 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 index a75644667e73..56f528356e83 100644 --- 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;