[Lens] Allow users to select chart level categorical color palette

[flash1293]

Similar to #53661 , but as a chart level setting.

This is the first part of #68330

To give users more control over the appearance of their chart it should be possible to pick a color scheme which is applied to all parts of the chart (individual series as well as "break down by" splits).

Depends on #67384

[elasticmachine]

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

[wylieconlon]

I don't think we should focus on gradient colors in the first milestone, but it might help to be aware of the similarities and differences in the two types while implementing: #68428

[AlonaNadler]

For users who create a chart without a bread down by using multiple y-axis series it makes more sense they will be able to choose to change the default color of a specific y-axis series.

To give users more control over the appearance of their chart it should be possible to pick a color scheme which is applied to all parts of the chart (individual series as well as "break down by" splits).

Based on this will they only be able to choose color palette? won't it change every series instead of choosing specific y-axis series?

[flash1293]

@AlonaNadler This issue is just about choosing a palette without the ability of changing the colors of specific y-axis series.

This will be implemented in a separate step - #53660 is the right issue for this.

[flash1293]

@wylieconlon Do you have an idea already how to set up the editor level state for the chosen palette? Is it just a string selecting one of multiple possible palettes or is there a better way?

[wylieconlon]

Talked offline about this, but I tried to outline some of the requirements in the parent issue #68330 the one thing that isn't described is the editor state. We definitely need a registry of color functions. We definitely need visualizations to call the color functions with the arguments that I defined in that issue. The main question is: other than the name of the color function, are there other options for how to configure the color function? I think there should be, making the color registry look like this:

// Example of getting the color for the second layer of a pie chart:
// { name: "US", depth: 2, rankAtDepth: 2, totalSeriesAtDepth: 5, totalSeries: 40 }
interface SeriesLayer {
  name: string;
  rankAtDepth: number;
  totalSeriesAtDepth: number;
  totalSeries: number;
}

interface ColorFunctionDefinition<T = unknown> {
  id: string;
  title: string;

  getColor: (series: SeriesLayer[]) => string | null;

  state: T;
  renderEditor: (domElement: Element, state: T, setState: (newState: T) => void) => void;
}

I propose that there is a subset of color functions that are stateful, and that each of those stateful color functions should provide an editor component. This makes the following examples possible:

• The user can choose how to extend the EUI palette beyond 10 colors. We already use these options: "lighten", "round-robin", "hue shifting", "interpolate"
• For gradient functions, we should provide a "reverse order" switch
• I'd like to support two different "build custom palette" options:
  • Provide individual colors, which we assign by position
  • Override the color of a specific series by name

One question I don't know about is whether it should be up to the visualization or the color function to decide how to handle depth in colors: for example, the pie chart currently uses a strategy of making the outer rings lighter. I think this should probably be part of the color function, which would let users have pie charts with more unique-looking color schemes.

[flash1293]

Based on the most recent discussion we decided to not take this approach but expose all coloring logic inside of the dimension configuration. This doesn't change except for how the user interacts with the setting (all of the low level decisions stay the same)