[Lens] Change a series color from the legend

[stratoula]

Right now, the classic visualizations allow the users to change the color of their series by letting them choose between a number of given colors.

We would love to extend this functionality by giving the user more capabilities such as choose between our palettes, have more control over the colors etc.

A discussion has started here but as it is something that may affect Lens and other plugins, it would be better to discuss it separately.

This is @markov00's comment on how he envisions the feature:

hey @stratoula @miukimiu @nickofthyme I'm not a designer but I hope this example can provide a different viewpoint on the color picker:

• enabling the user to choose the palette directly from the color picker can be a useful but not required, less context change and more data exploration
• providing the user with more than 10 colors is counterproductive and leads to bad visualizations. It is difficult for the user to choose a different color from the already selected in the legend if we are playing with > 10 colors. I know on the example there are 12 but the palette is 10 + 2 neutral, we can reduce it if we want.
• The following goes against the previous point but is the reason why providing also variances/palettes on colors is a good thing: as described here [Discuss] tradeoffs on the single-palette guidance for data visualization eui#3742 color discernibility varies with the size and type of shapes used on the data visualization and providing a good single palette for every use case is probably very difficult.
• On the example, I've also added a set of neutral colors (light gray, black) that can be beneficial for the user that likes to highlight a specific series while turning down the importance of others (note that we don't have such ability today because none of the palettes offer a set of neutral colors)
• if the user really needs a different set of colors, we can offer a set of variation/rotation when interacting with the variation slider (I don't spend much time on the UX here but my idea is to let the user choose a different color rotation but this needs a bit more interaction to achieve it)
• we should always open the color picker with the current selected color and palette
• we can use the same color picker for every palette, no need to go back to the old circles one but the user can use the legacy palette for older charts. I think we can exclude that palette from newly created charts.
• please keep in mind again that this example is not well designed nor it is something to follow completely, I think the above points are more important than this design, I'd like to get feedback from @miukimiu and @MichaelMarcialis if possible as we are all working on various color topics.
• I'm not arguing in this context about the provided palettes or the number of steps on the diverging or sequential palettes, but we should consider that in the future

cc @monfera

Originally posted by @markov00 in #90589 (comment)

[stratoula]

I will also post here @MichaelMarcialis comment:

I'd like to get feedback from @miukimiu and @MichaelMarcialis if possible as we are all working on various color topics.

@markov00: Here are some of my initial thoughts based on your comments. I'm coming into this conversation a bit sideways, so please feel free to schedule something on the calendar if you think further discussion is warranted.

• providing the user with more than 10 colors is counterproductive and leads to bad visualizations. It is difficult for the user to choose a different color from the already selected in the legend if we are playing with > 10 colors. I know on the example there are 12 but the palette is 10 + 2 neutral, we can reduce it if we want.

I generally agree with this suggestion (i.e. a reduction color options offered lowers chances of user decision paralysis and helps avoid potentially poor choices). However, I do wonder about those advanced users who would desire to have greater control over their colors. For example, Grafana defaults to offering a limited selection of colors, but also has the option for users to make custom colors if they wish. It's tucked away in a separate tab, but it's available for those advanced users. Perhaps that is beyond the scope of this PR, but thought I'd mention it.

• On the example, I've also added a set of neutral colors (light gray, black) that can be beneficial for the user that likes to highlight a specific series while turning down the importance of others (note that we don't have such ability today because none of the palettes offer a set of neutral colors)

I like this idea. Do you feel that two neutral colors would be sufficient for the majority of these use cases? Have you given any thought as to what should happen to these neutral colors if the user selects the "Gray" color palette? I imagine they'd need to be conditionally removed or incorporated in some way.

• if the user really needs a different set of colors, we can offer a set of variation/rotation when interacting with the variation slider (I don't spend much time on the UX here but my idea is to let the user choose a different color rotation but this needs a bit more interaction to achieve it)

This is an interesting solution to avoid inundating the user with too many color options. Perhaps as an alternative to the "Variant" slider in your mockup, we could change it to a lightness/darkness slider. The hue and saturation stays true to the chosen color palette, but the user can adjust the lightness/darkness of the available colors.

• we should always open the color picker with the current selected color and palette

The relationship between the legend-based color picker and the color palette field in the sidebar is interesting. I like the idea that the default colors presented in the legend-based picker being pulled from the chosen color palette. However, I'm not sure about the actually changing the entire palette from within the legend-based color picker popover (assuming that is what your mockup is suggesting). I worry the user might be confused as to whether they were changing the palette for the entire visualization or just that particular value.

• we can use the same color picker for every palette, no need to go back to the old circles one but the user can use the legacy palette for older charts. I think we can exclude that palette from newly created charts.

If you mean in terms of being consistent in our usage of the latest color palette and color picker components, I agree.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[elasticmachine]

Pinging @elastic/datavis (Feature:ElasticCharts)

[flash1293]

For reference, in Lens it's not possible today to pick a color from the legend, but for individual series we show the EUI picker including swatches

We probably want to stay consistent in the level of control we are offering (if there isn't a strong counterpoint)

[cchaos]

Similar to the way Lens handles this inside of the formatting flyout, the biggest improvement we can make is to allow the user to customize the actual color value. Providing a static set of 18+ colors does not provide the user with anything but the possibility of making bad choices - the "shifted" options in the list get lighter causing less contrast and harder to see. Instead, it's much more flexible to provide a simple, limited (10) set of colors that provide good defaults then let the user customize to anything. This means, more than just simply giving them the color hue and brightness matrix, but a way to provide a hex value as well. Lens does this by using the input style of color picker, but the legend can handle this easily by providing the manual input box in the popover like so:

I'll agree that going further and allowing customization of the entire palette will be helpful as well. But this should live outside of the legend and cover the entire visualization as a "starting point". Still allowing further customization per series.

[ghudgins]

note: watch for intersection of this with disabling auto-apply

[stratoula]

I am closing this as we decided to not take this path with the color by terms project.