From 2e3df158d786f5780773ee42e3ee823fd23ff149 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Thu, 22 Jun 2023 21:08:18 +0000 Subject: [PATCH 1/4] [VisLib] Replace legend color palette with OUI color palette Replace hard-coded palette (of 8 colors with 7 variations each) with rotations from euiPaletteColorBlind (of 10 colors with 7 variations each) Fixes https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4321 Signed-off-by: Josh Romero --- .../vislib/components/legend/_legend.scss | 2 +- .../vislib/components/legend/legend_item.tsx | 7 ++- .../public/vislib/components/legend/models.ts | 59 ------------------- 3 files changed, 7 insertions(+), 61 deletions(-) diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss index f5b93730fb75..c114c07f17b9 100644 --- a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss +++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss @@ -84,7 +84,7 @@ $visLegendLineHeight: $euiSize; } .visLegend__valueColorPicker { - width: ($euiSizeL * 8); // 8 columns + width: ($euiSizeL * 10); // 10 columns } .visLegend__valueColorPickerDot { diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx index f6e79b74841c..3d49b9c75fb4 100644 --- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx +++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx @@ -42,9 +42,14 @@ import { EuiPopoverProps, EuiButtonGroup, EuiButtonGroupOptionProps, + euiPaletteColorBlind, } from '@elastic/eui'; -import { legendColors, LegendItem } from './models'; +import { LegendItem } from './models'; + +// starting from the default categorical colors, we generate 6 additional variants, +// 3 lighter and 3 darker +const legendColors = euiPaletteColorBlind({ rotations: 7, direction: 'both' }); interface Props { item: LegendItem; diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/models.ts b/src/plugins/vis_type_vislib/public/vislib/components/legend/models.ts index 1d86703b5c38..48a0cfc9b2af 100644 --- a/src/plugins/vis_type_vislib/public/vislib/components/legend/models.ts +++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/models.ts @@ -34,62 +34,3 @@ export interface LegendItem { } export const CUSTOM_LEGEND_VIS_TYPES = ['heatmap', 'gauge']; - -export const legendColors: string[] = [ - '#3F6833', - '#967302', - '#2F575E', - '#99440A', - '#58140C', - '#052B51', - '#511749', - '#3F2B5B', // 6 - '#508642', - '#CCA300', - '#447EBC', - '#C15C17', - '#890F02', - '#0A437C', - '#6D1F62', - '#584477', // 2 - '#629E51', - '#E5AC0E', - '#64B0C8', - '#E0752D', - '#BF1B00', - '#0A50A1', - '#962D82', - '#614D93', // 4 - '#7EB26D', - '#EAB839', - '#6ED0E0', - '#EF843C', - '#E24D42', - '#1F78C1', - '#BA43A9', - '#705DA0', // Normal - '#9AC48A', - '#F2C96D', - '#65C5DB', - '#F9934E', - '#EA6460', - '#5195CE', - '#D683CE', - '#806EB7', // 5 - '#B7DBAB', - '#F4D598', - '#70DBED', - '#F9BA8F', - '#F29191', - '#82B5D8', - '#E5A8E2', - '#AEA2E0', // 3 - '#E0F9D7', - '#FCEACA', - '#CFFAFF', - '#F9E2D2', - '#FCE2DE', - '#BADFF4', - '#F9D9F9', - '#DEDAF7', // 7 -]; From 74287ca5014cffd8c1ff4116595a2ad7ca0ad26b Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Thu, 22 Jun 2023 21:20:33 +0000 Subject: [PATCH 2/4] update changelog Signed-off-by: Josh Romero --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7502ed1191f1..3661d5d27869 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -57,6 +57,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)) +- [VisLib] Update legend colors to use OUI color palette ([#4365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4365)) ### 🔩 Tests From 1f5f7b8d26b0cb82597f5c23b3eb280cbe0a8203 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Fri, 23 Jun 2023 17:44:21 +0000 Subject: [PATCH 3/4] Update legend unit test Signed-off-by: Josh Romero --- .../public/vislib/components/legend/legend.test.tsx | 2 +- .../public/vislib/components/legend/legend_item.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx index 18192c3faa34..1038c663d0dc 100644 --- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx +++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx @@ -35,7 +35,7 @@ import { I18nProvider } from '@osd/i18n/react'; import { EuiButtonGroup } from '@elastic/eui'; import { VisLegend, VisLegendProps } from './legend'; -import { legendColors } from './models'; +import { legendColors } from './legend_item'; jest.mock('@elastic/eui', () => { const original = jest.requireActual('@elastic/eui'); diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx index 3d49b9c75fb4..b228f32c7596 100644 --- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx +++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx @@ -49,7 +49,7 @@ import { LegendItem } from './models'; // starting from the default categorical colors, we generate 6 additional variants, // 3 lighter and 3 darker -const legendColors = euiPaletteColorBlind({ rotations: 7, direction: 'both' }); +export const legendColors = euiPaletteColorBlind({ rotations: 7, direction: 'both' }); interface Props { item: LegendItem; From 8fd5be5ba8992e3b61a553fcd3dd0078c949f7d2 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Tue, 18 Jul 2023 18:45:44 +0000 Subject: [PATCH 4/4] Update hard-coded legend color values in functional tests Signed-off-by: Josh Romero --- test/functional/apps/dashboard/dashboard_state.js | 8 ++++---- test/functional/page_objects/visualize_chart_page.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/test/functional/apps/dashboard/dashboard_state.js b/test/functional/apps/dashboard/dashboard_state.js index e410501c9c03..545dd7a9c491 100644 --- a/test/functional/apps/dashboard/dashboard_state.js +++ b/test/functional/apps/dashboard/dashboard_state.js @@ -75,14 +75,14 @@ export default function ({ getService, getPageObjects }) { await PageObjects.dashboard.switchToEditMode(); await PageObjects.visChart.openLegendOptionColors('Count'); - await PageObjects.visChart.selectNewLegendColorChoice('#EA6460'); + await PageObjects.visChart.selectNewLegendColorChoice('#8d4059'); await PageObjects.dashboard.saveDashboard('Overridden colors'); await PageObjects.dashboard.gotoDashboardLandingPage(); await PageObjects.dashboard.loadSavedDashboard('Overridden colors'); const colorChoiceRetained = await PageObjects.visChart.doesSelectedLegendColorExist( - '#EA6460' + '#8d4059' ); expect(colorChoiceRetained).to.be(true); @@ -243,9 +243,9 @@ export default function ({ getService, getPageObjects }) { it('updates a pie slice color on a soft refresh', async function () { await dashboardAddPanel.addVisualization(PIE_CHART_VIS_NAME); await PageObjects.visChart.openLegendOptionColors('80,000'); - await PageObjects.visChart.selectNewLegendColorChoice('#F9D9F9'); + await PageObjects.visChart.selectNewLegendColorChoice('#e9b0c3'); const currentUrl = await browser.getCurrentUrl(); - const newUrl = currentUrl.replace('F9D9F9', 'FFFFFF'); + const newUrl = currentUrl.replace('e9b0c3', 'FFFFFF'); await browser.get(newUrl.toString(), false); await PageObjects.header.waitUntilLoadingHasFinished(); diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts index e13d8eed6081..975da7cc552a 100644 --- a/test/functional/page_objects/visualize_chart_page.ts +++ b/test/functional/page_objects/visualize_chart_page.ts @@ -286,7 +286,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr await testSubjects.click(`legend-${name}`); await this.waitForVisualizationRenderingStabilized(); // arbitrary color chosen, any available would do - const isOpen = await this.doesLegendColorChoiceExist('#EF843C'); + const isOpen = await this.doesLegendColorChoiceExist('#e09e64'); if (!isOpen) { throw new Error('legend color selector not open'); }