[Lens] Gradient colors for numeric table cells based on palette

[wylieconlon]

This issue describes how Lens should support gradient colors, which some visualizations will use instead of or in addition to categorical color functions. The main use cases for this type of coloring is conditional styling of table columns, but should also be supported by the pie/treemap charts.

Example of a "blues" gradient which shows CPU usage linearly from the lowest recorded value to the highest recorded value:

The simplest gradient color function takes a number from 0 to 1 and returns a color definition. This gives users two choices: defining the colors and converting to a value from 0 to 1

Defining the colors

To choose colors, users will either use a predefined gradient or choose their own color stops.

For any predefined gradient, such as these EUI gradients, users should also be provided with extra form options for:

• Using reverse order
• Use continuous gradient or a fixed number of steps (also how many steps)

For defining a custom gradient, users will use the EUI color stops component.

When using custom gradients, users should also have a switch between "continuous" and "fixed steps".

Finally, an important toggle in the custom color gradient is to switch between "percentage" and "absolute" mode: this will make it easier in some use cases to define non-linear color gradients. For example, this would make sense when showing response times in MS.

Converting to a percentage

To calculate the color, we convert the raw value to a percentage. Imagine that all of our numbers represent the response time in MS. There are still multiple ways of converting this to a percent:

• The user just wants the least configuration, so they set the min and max to "automatic". For this example, it will be from 60ms to 3,000ms. This will change each time it's rendered.
• The user is unhappy with the constantly changing scale, so they set a lower and upper bound in terms of their data. For example, the color scale now goes from 0 to 10,000.
• Finally, the user wants to make the color even more obvious, so they use a custom color gradient with numeric stops to set a stop at 100ms and 1000ms- anything below 100 is green, and anything above 1000 is red.

This leads to three types of conversion:

• Use the lowest or highest value in the data
• Use a fixed number typed by the user
• Use a stop-based approach like we do for colors

Putting it all together

I like the way the Infrastructure monitoring app in Kibana has put it together, so I'm going to leave this as inspiration. It includes many of the elements that I've described above.

The biggest missing feature in the infrastructure monitoring app is the ability to define a custom gradient.

[elasticmachine]

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

[wylieconlon]

I think I will rename this issue to "Gradient colors in table" representing its first implementation. This issue already describes the most common user need, and is what @flash1293 has proposed we implement first. A later step is to implement custom stops for gradient in a table.

[flash1293]

I agree tables are the most important use case, but we probably want to reuse this logic for metric and gauge charts as well.

[flash1293]

Discussed offline:

To make the feature easier to manage, there will be two phases implemented separately:

• Phase I: Define a custom palette based on custom color stops. Allows to enter the stops in total values or in percentages based on the total range of the data tracked here: [Lens] Custom gradient colors for numeric table cells #66192
• Phase II: Pick an existing gradient palette, configure number of colors, reverse, number of steps and optionally min and max range (tracked in this issue)

[flash1293]

Adding mockups here for reference:

No coloring

Enabling coloring

Settings flyout

Stepped:

No auto range:

[flash1293]

Fixed by #95217