[Lens] Set colors for y-axis series

[AlonaNadler]

ability to set a custom color to y-axis series, currently, all series are in the default color. We would like to allow users to customize and define the color

cc: @cchaos

[elasticmachine]

Pinging @elastic/kibana-design (Team:Design)

[wylieconlon]

Because we want to support both Y-axis coloring and Break down coloring, we need to decide how the two settings will interact.

I propose that whenever there is a Break Down by set, the Y axis color option will disappear. This is because the Break Down by creates multiple series that will have different colors, so for example Kibana Airways and Logstash Airways should have different colors even though both are on the Y axis.

[AlonaNadler]

I propose that whenever there is a Break Down by set, the Y axis color option will disappear.

Sounds good @wylieconlon

[cchaos]

I had worked on some mocks of this concept as well. Here's how it could be handled in the layers panel.

[flash1293]

@wylieconlon We talked offline about it being difficult to show the colors in the configurator because they are a runtime thing, but if it's just about colors for individual series as long as no split dimension is defined, I think we can do it by using the same round-robin logic as in the renderer.

[flash1293]

Synced with @wylieconlon and @mbondyra about this and as a first version to get the functionality in quickly, we will just provide the color picker in the dimension popover, without the extra indicator in the config panel itself.

Some details about how it works:

• To use this, we need to handle the round-robin color assignment ourselves (currently elastic-charts is doing it based on the theme) - in the color accessor function we can hook into overwritten color
• This will be xy-chart only for now (because no other chart type can use a metric color in a meaningful way). Later it might get helpful to keep metric-level colors when switching chart types, this can be solved once [Lens] Allow users to select chart level categorical color palette #68404 is implemented putting the foundations for shared state in place
• To reduce technical complexity, there are two modes - "auto-assign color" (the current behavior) which will reliably pick colors for the metrics based on their rank and "overwrite" color, overwriting the auto assigned color for the current metric but keeping colors for all other metrics the same

@AlonaNadler We will prioritize this work over #68404 for now.

[AlonaNadler]

That make sense to me. Thanks for the details @flash1293

[cchaos]

To reduce technical complexity, there are two modes - "auto-assign color" (the current behavior) which will reliably pick colors for the metrics based on their rank and "overwrite" color, overwriting the auto assigned color for the current metric but keeping colors for all other metrics the same

I'm mostly fine with this if we can try to keep it as a single control. I don't want to have to introduce a toggle or something for users to have to first switch into manual mode in order to change colors. Happy to talk options about what EUI has in order to support this.