[VisLib] Replace legend color palette with OUI color palette (#4365)

* [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 #4321

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* update changelog

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* Update legend unit test

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* Update hard-coded legend color values in functional tests

Signed-off-by: Josh Romero <rmerqg@amazon.com>

---------

Signed-off-by: Josh Romero <rmerqg@amazon.com>

Author: joshuarrrr

CHANGELOG.md

@@ -82,6 +82,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Replace the use of `bluebird` in `saved_objects` plugin ([#4026](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4026))
 - Relocate tutorials imagery into `src/plugins/home/public/assets/tutorials/logos` ([#4382](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4382))
 - [VisBuilder] Use OUI icon ([#4446](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4446))
+- [Vis Colors] [VisLib] Update legend colors to use OUI color palette ([#4365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4365))
 - [Vis Colors] [Region Maps] Replace hardcode color to OUI color in `region_map` plugin ([#4299](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4299))
 - [Vis Colors] Replace color maps with OUI color palettes ([#4293](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4293))
 - [Vis Colors] [Maps] Replace hardcoded color to OUI color in `maps_legacy` plugin ([#4294](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4294))

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 {

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');

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
+export const legendColors = euiPaletteColorBlind({ rotations: 7, direction: 'both' });
 
 interface Props {
   item: LegendItem;

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
-];

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);
@@ -245,9 +245,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();
 

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');
         }