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] Improve choropleth color scales and simplify palette generation logic to reduce maintenance #4326

Open
Tracked by #4318
joshuarrrr opened this issue Jun 19, 2023 · 1 comment
Labels
next-theme OUI compliance Issues and PRs to maximize OUI usage and remove style and component hacks unified visualization UX

Comments

@joshuarrrr
Copy link
Member

joshuarrrr commented Jun 19, 2023

OpenSearch Dashboards legacy map visualizations (Region Map, Coordinate map) use color schemas from truncatedColorMaps and getLegendColors(): https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/charts/public/static/color_maps/truncated_color_maps.ts#L33-L46

See opensearch-project/oui#601 for visual examples and defaults.

Instead, we should use OUI's colorPalette service to generate similar palettes with OUI color variables as the source. We can also reduce the number of color stops to 20, and simplify much of the mapping. This is very similar to #4325, but with one distinct difference - the intended design was to not have white as one end of the range, but to have even the minimum value map to a particular hue.

@joshuarrrr joshuarrrr added unified visualization UX OUI compliance Issues and PRs to maximize OUI usage and remove style and component hacks and removed untriaged labels Jun 19, 2023
@manasvinibs
Copy link
Member

Currently truncated color maps logic applies on all the color schema keys in vislibColorMaps which is Blues, Greens, Greys, Reds, yellow to Red, Green to Red.

export const truncatedColorMaps: ColorMap = {};
const colormaps: ColorMap = vislibColorMaps;
for (const key in colormaps) {
if (colormaps.hasOwnProperty(key)) {
// slice off lightest colors
// @ts-ignore
const color = colormaps[key];
truncatedColorMaps[key] = {
...color,
value: color.value.slice(Math.floor(color.value.length / 4)),
};
}
}

  1. Logically Truncation of white color should happen only when we use single color schema such as Blue, green, greys, reds. We do not have to truncate light colors when the color gradient is moving from yellow to red/green to red.
  2. Another thing we can do is to completely eliminate custom truncation logic here along with converting color palettes to color map on our own. Instead we can use available libraries such as D3 support to do the conversion for us.
    function convertColorPaletteToColorMap(colorPalette: string[]): RawColorSchema['value'] {

@joshuarrrr joshuarrrr changed the title [Vis colors] Replace choropleth color scales with palettes generated with colorPalette and OUI color variables [Vis colors] Improve choropleth color scales and simplify palette generation logic to reduce maintenance Aug 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
next-theme OUI compliance Issues and PRs to maximize OUI usage and remove style and component hacks unified visualization UX
Projects
Status: In Progress
Development

No branches or pull requests

3 participants