[Lens] Custom gradient colors for numeric table cells

[bradquarry]

Describe the feature:
Specify colors associated with fixed value ranges to set the 'cell' and 'text' color for a reverse sorted aggregate column. <=10 GREEN, <=25 YELLOW, <=50 RED.

Describe a specific use case for the feature:
When creating Observability dashboards for troubleshooting it is helpful to be able to quickly indicate what you need to look at in reverse sorted lists. Especially if you have to look at a number of dashboards at once.

[elasticmachine]

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

[wylieconlon]

This is a good feature request, and I think we can solve this as part of our general work on color assignment. Specifically, I think this is a type of color gradient with fixed steps, and is highly related to this other issue: #68428

The reason I'm linking to that other issue is that this request is not enough by itself. We already let users use exact values for the Goal and Gauge colors, but these values can never be dynamic based on the actual data. The form we use in the goal and gauge charts is not sufficient for table coloring because of its lack of a dynamic option:

[flash1293]

Adding mockups here for reference:

No coloring

Enabling coloring

Settings flyout

Stepped/Fixed:

There's no mockup for this case, but there are three color progression options for the custom palette:
gradient, stepped and fixed

Stepped should also show a step slider below. Fixed is the mode shown in the picker right now (giving the user full control over which color is shown when)

[flash1293]

Implementation notes:

Coloring

• "palette" is an expression context type which can be created using "palette" and "system_palette" expression functions src/plugins/charts/common/palette.ts
• It has a name and freely typed params (its "state")
• Name and params are passed to the palette service to get the actual palette instance
• Palette instance has a getColor function to get a color for a chart element (can be based on state)
• Coloring logic is implemented here:

  kibana/src/plugins/charts/public/services/palettes/palettes.tsx

  Line 72 in 4584a8b

  chain: [

• Lens saves the palette expression context in the state:

  kibana/x-pack/plugins/lens/public/xy_visualization/types.ts

  Line 397 in 03cc5cc

  palette: PaletteOutput;

• Lens serializes it to the expression in the visualization toExpression function:
  

  kibana/x-pack/plugins/lens/public/xy_visualization/to_expression.ts

  Line 255 in 4584a8b

  palette: [

• Palette on the expression can be wrapped in "theme" which allows the embeddable / container to overwrite the legend (can be done in canvas)
• In the chart component, Lens obtains the palette instance and calls getColor

  kibana/x-pack/plugins/lens/public/xy_visualization/expression.tsx

  Line 709 in ed95c08

  return paletteService.get(palette.name).getColor(

• There's a special "custom" palette which allows the user to pass in colors via state (used by canvas):

  kibana/src/plugins/charts/public/services/palettes/palettes.tsx

  Line 167 in 4584a8b

  { colors, gradient }: { colors: string[]; gradient: boolean }

!! All of this is just handling categorical palettes so far !!

Suggested extension for coloring based on value

• Introduce a flag on the palette whether dynamic coloring is supported (e.g. "positive" palette can be used, default palette doesn't make sense)
• Extend the state of the gradient eligible system palettes and the custom palette by the customization settings we talked about:
  • reverse
  • number of steps / gradient (https://github.com/elastic/eui/pull/4613/files#diff-0757d2b54373ab5739ed6ef0c22f502b2cd39896f2376c27700fd10dc28e080cR23)
  • auto-range / min,max / range-mode (percent/total value)
  • in case of custom palette: stop values for the defined colors and whether used as fixed segments
• Extend the expression function definitions to be able to handle these settings
• Add a new getGradientColor method to the palette instance - it takes current value, series min, series max and state of the palette
• Implement getGradientColor for the palettes where it makes sense
• Implement the UI in Lens as a shared UI component
• Implement usage in the data table component
• In the expression serialization of these palettes, do not use the "theme" wrapper (doesn't really make sense to overwrite this from the outside IMHO)