Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Vis colors] Replace observability color scales with palettes generated with colorPalette() and OUI color variables #874

Open
Tracked by #4318
joshuarrrr opened this issue Aug 8, 2023 · 1 comment
Assignees

Comments

@joshuarrrr
Copy link
Member

Observability visualizations use different quantitative color scales than all other OpenSearch Dashboard visualizations:

export const DEFAULT_PALETTE = 'default';
export const SINGLE_COLOR_PALETTE = 'singleColor';
export const MULTI_COLOR_PALETTE = 'multicolor';
export const COLOR_PALETTES = [
{
value: DEFAULT_PALETTE,
title: 'Default',
type: 'text',
},
{
value: SINGLE_COLOR_PALETTE,
title: 'Single color',
type: 'text',
},
{
value: MULTI_COLOR_PALETTE,
title: 'Multicolored',
type: 'text',
},
{
value: BLUES_PALETTE.name,
title: BLUES_PALETTE.label,
palette: colorPalette(BLUES_PALETTE.colors, 20),
type: 'gradient',
},
{
value: REDS_PALETTE.name,
title: REDS_PALETTE.label,
palette: colorPalette(REDS_PALETTE.colors, 20),
type: 'gradient',
},
{
value: GREENS_PALETTE.name,
title: GREENS_PALETTE.label,
palette: colorPalette(GREENS_PALETTE.colors, 20),
type: 'gradient',
},
{
value: GREYS_PALETTE.name,
title: GREYS_PALETTE.label,
palette: colorPalette(GREYS_PALETTE.colors, 20),
type: 'gradient',
},
{
value: BLUE_RED_PALETTE.name,
title: BLUE_RED_PALETTE.label,
palette: colorPalette(BLUE_RED_PALETTE.colors, 20),
type: 'gradient',
},
{
value: RED_BLUE_PALETTE.name,
title: RED_BLUE_PALETTE.label,
palette: colorPalette(RED_BLUE_PALETTE.colors, 20, true),
type: 'gradient',
},
{
value: YELLOW_ORANGE_RED_PALETTE.name,
title: YELLOW_ORANGE_RED_PALETTE.label,
palette: colorPalette(YELLOW_ORANGE_RED_PALETTE.colors, 20),
type: 'gradient',
},
{
value: YELLOW_GREEN_BLUE_PALETTE.name,
title: YELLOW_GREEN_BLUE_PALETTE.label,
palette: colorPalette(YELLOW_GREEN_BLUE_PALETTE.colors, 20),
type: 'gradient',
},
];
export const HEX_CONTRAST_COLOR = 0xffffff;
export const PIE_PALETTES = [
{
value: DEFAULT_PALETTE,
title: 'Default',
type: 'text',
},
{
value: SINGLE_COLOR_PALETTE,
title: 'Single Color',
type: 'text',
},
];

(For visual comparison, see opensearch-project/oui#601)

Visualizations should default to the standardized color scales defined in OpenSearch Dashboards, or at least use the OUI color utility colorPalette() to generate similar scales.

For a similar mitigation, see opensearch-project/OpenSearch-Dashboards#4325

@vvavdiya
Copy link

@joshuarrrr @ps48
I would like to look into issue incase any change is pending

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants