diff --git a/CHANGELOG.md b/CHANGELOG.md index b24377e61b1e..0e54fdfc69fd 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/plugins/charts/public/services/colors/color_palette.ts b/src/plugins/charts/public/services/colors/color_palette.ts deleted file mode 100644 index ac59a3c85f0d..000000000000 --- a/src/plugins/charts/public/services/colors/color_palette.ts +++ /dev/null @@ -1,76 +0,0 @@ -/* - * SPDX-License-Identifier: Apache-2.0 - * - * The OpenSearch Contributors require contributions made to - * this file be licensed under the Apache-2.0 license or a - * compatible open source license. - * - * Any modifications Copyright OpenSearch Contributors. See - * GitHub history for details. - */ - -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import _ from 'lodash'; -import { hsl } from 'color'; - -import { seedColors } from './seed_colors'; - -const offset = 300; // Hue offset to start at - -const fraction = function (goal: number) { - const walkTree = (numerator: number, denominator: number, bytes: number[]): number => { - if (bytes.length) { - return walkTree(numerator * 2 + (bytes.pop() ? 1 : -1), denominator * 2, bytes); - } else { - return numerator / denominator; - } - }; - - const b = (goal + 2) - .toString(2) - .split('') - .map(function (num) { - return parseInt(num, 10); - }); - b.shift(); - - return walkTree(1, 2, b); -}; - -/** - * Generates an array of hex colors the length of the input number. - * If the number is greater than the length of seed colors available, - * new colors are generated up to the value of the input number. - */ -export function createColorPalette(num: number): string[] { - if (!_.isNumber(num)) { - throw new TypeError('ColorPaletteUtilService expects a number'); - } - - const colors = seedColors; - const seedLength = seedColors.length; - - _.times(num - seedLength, function (i) { - colors.push(hsl((fraction(i + seedLength + 1) * 360 + offset) % 360, 50, 50).hex()); - }); - - return colors; -} diff --git a/src/plugins/charts/public/services/colors/colors.test.ts b/src/plugins/charts/public/services/colors/colors.test.ts index f25a1d7c476d..4871ae6e4654 100644 --- a/src/plugins/charts/public/services/colors/colors.test.ts +++ b/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', () => { diff --git a/src/plugins/charts/public/services/colors/colors_palette.test.ts b/src/plugins/charts/public/services/colors/colors_palette.test.ts deleted file mode 100644 index ca9d2f2654e1..000000000000 --- a/src/plugins/charts/public/services/colors/colors_palette.test.ts +++ /dev/null @@ -1,108 +0,0 @@ -/* - * SPDX-License-Identifier: Apache-2.0 - * - * The OpenSearch Contributors require contributions made to - * this file be licensed under the Apache-2.0 license or a - * compatible open source license. - * - * Any modifications Copyright OpenSearch Contributors. See - * GitHub history for details. - */ - -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import { seedColors } from './seed_colors'; -import { createColorPalette } from './color_palette'; - -describe('Color Palette', () => { - const num1 = 45; - const num2 = 72; - const num3 = 90; - const string = 'Welcome'; - const bool = true; - const nullValue = null; - const emptyArr: [] = []; - const emptyObject = {}; - let colorPalette: string[]; - - beforeEach(() => { - colorPalette = createColorPalette(num1); - }); - - it('should throw an error if input is not a number', () => { - expect(() => { - // @ts-expect-error - createColorPalette(string); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - createColorPalette(bool); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - createColorPalette(nullValue); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - createColorPalette(emptyArr); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - createColorPalette(emptyObject); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - createColorPalette(); - }).toThrowError(); - }); - - it('should be a function', () => { - expect(typeof createColorPalette).toBe('function'); - }); - - it('should return an array', () => { - expect(colorPalette).toBeInstanceOf(Array); - }); - - it('should return an array of the same length as the input', () => { - expect(colorPalette.length).toBe(num1); - }); - - it('should return the seed color array when input length is 72', () => { - expect(createColorPalette(num2)[71]).toBe(seedColors[71]); - }); - - 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]); - }); - - it('should create new colors and convert them correctly', () => { - expect(createColorPalette(num3)[72]).toEqual('#404ABF'); - }); -}); 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; diff --git a/test/functional/apps/dashboard/dashboard_state.js b/test/functional/apps/dashboard/dashboard_state.js index d4ca87821204..10407a7d00f5 100644 --- a/test/functional/apps/dashboard/dashboard_state.js +++ b/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); }); });