[Lens] Color mappings MVP

[markov00]

First MVP to introduce minimal color mappings configuration.

1. Scalable color mapping data model

The association between a color and a dimension
The dimension specification (is a plain category, a range, a formula, a regex, a series)
The theme that was used when the color was selected (allows us to understand when to compute a different color if the theme change)
The color should be linked to the original palette if it exists. If a palette changes color, then this should be reflected here.
Discrete/Continuous gradients can be defined and accessed
Custom color values can be stored

Reason: better to prepare a scalable/extensible data model to avoid breaking changes/migration when we add new features.

2. Saved automatically locally within the visualization

There is no need to add a CRUD experience for now because I feel this could be shaped differently in the future (see my notes at the end)

Reason: As the first step let’s first allow users to do the color-mapping association and then, subsequently we can enable them to reuse these associations. It simplifies the UX because you don’t have to deal with CRUD, give another naming/description to the palette/mapping/association and you can probably also just “copy from visualization” paradigm in the future

3. Ability to select and assign colors from our pre-built palettes as a primary choice

This should be the default and easier way to pick a color.
It should provide both palette colors and neutral colors too.

Reason: making it the primary and easier way to select a color gives us a bit of control over the quality of the chosen color

4. Ability to select a custom color with a hex/color picker

This should be available as a second/optional choice if the color you are looking for is not available in the pre-built palettes

Reason: is an escape hatch and allows users to select the colors they prefer with no limitation

5. Assignments

Associate color with a range
Associate one or more categories to a single color

Reason: will cover 2 out of 3 major use cases of color assignment. Associate a color gradient to a value is the 3rd major case that is already partially covered in some visualization.

6. Color contrast checks

We should warn (not block) the user from selecting colors with low contrast with the current theme background. Giving a justified, non-blocking, reason is enough to let them make a reasoned choice.
It’s hard to really detect the perfect contrast because it usually depends on the shape and the dimension where the color is applied (small/thin objects could appear less contrasty than bigger ones even with the same color, similar if we talk about colors).

Reason: Giving the ability to pick random colors, we ethically must provide a simple way to notify that the color is not optimal.

7. Theme-contrast checks

A color is chosen using the current theme background. A mechanism needs to be in place to compute the correct alternative color when rendering the chart in a theme different from the one where the color was chosen.
If the user selects a color in a light theme and then switch the theme, the auto-computed color should show up as “auto” computed and the user is able to change it to a static value.

Reason: This gives us the ability to introduce the “per-theme” color choice that will fix future tech debts accumulated due to single-themed color choices. It will not be perfect at the moment because it lacks a preview, but we can build that in a subsequent stage.

8. Palettes and gradients

For this MVP we can keep the gradient generation out and just define gradients as existing palettes. Each gradient palette will adapt itself to the number of ranges/category available.

Reason: simplify the current UX. Each gradient is defined in the model not as a palette, but as a real gradient. This will allow us to move the gradient palettes in the future

Linked GH issues:

• Beyond palettes: shared visual attributes  #61977
• [Meta][Lens] Styling and Chart configurability #57707
• [Lens] Change a series color from the legend #92151
• [Lens] Separate color dimension for all chart types #95556
• [Lens] Support categorical coloring by name #101942
• [Lens] Transparency option on series color #112839
• [Lens] Visually edit visualization color by value (ramp / preview) #119051
• [Lens] Add ability to save and load color stop configurations #119137
• Color Picker - possibility to show only accessible colors in color spectrum eui#8191
• Consistent, global color configuration for query and field values #6480
• [Lens] line color based on threshold #19672
• [Lens] Support categorical coloring by name #101942
• [Lens] Add ability to save and load color stop configurations #119137
• Conditional XY bar metric colors #4482
• Decide Color Palette by Metric for Treemap #149679
• Spec palette designer #23039
• TSVB: Allow configurable option to use a different color for each bucket in Top-N #14162
• Allow customizable color palettes in Kibana #17764
• [Lens] Conditionally style series / data points for visualizations #15493
• Make it easier to add hex color codes to visualizations #28618
• Visualize each point on a time series visualization with it's own color #36541

[elasticmachine]

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)