[Metrics UI] Allow user to configure Waffle Map color palette

[hbharding]

🎨 Link to Figma

Summary

We’ve received feedback that the existing color palette of the Waffle Map (White -> Blue) feels limiting and is not ideal for all use cases. This issue attempts to address that by 1) introducing new color palettes to choose from, and by 2) changing the default color palette so that the colors transition from Blue -> White -> Red. Users can access these options by clicking on the "color" icon that appears next to the legend at the bottom of the screen.

Details

Show details

• There are 6 color palettes to choose from. The new default is "Temperature", which transitions from Blue to White to Red. The palettes are available in EUI and they should be listed in this order:
  1. Temperature
  2. Status
  3. Cool
  4. Warm
  5. Positive
  6. Negative
• The user can limit the number of colors on the waffle map by dragging a slider. The default and maximum number of colors is 20, and the minimum is 2.
• The user can reverse the direction of the gradient to invert the meaning of the colors. For example, sometimes low values are "bad" and the user may want to see those nodes as red. Defaults to off.
• There are several small improvements to the "auto calculate range" switch and min/max inputs.
  • Add color swatches to the min/max labels to make it clear which end of the color spectrum the colors apply. These swatches will swap position if "Reverse direction" is enabled.
  • The inputs expect numbers between 0 and 100 (not 0 and 1). This is to be consistent with what we show on the legend. I added a % label at the end of the inputs so the user recognizes these as percentaqges.
  • I think we can remove form validation errors and instead auto-correct invalid inputs (i.e. prevent the user from making errors). For example, if the user enters 1000 for the Maximum, we can auto-correct it to be 100. If the user tries to set the maximum to a value that is below the minimum, we can auto correct the maximum to be 1% higher than the minimum, and vice versa.
• The user can click "cancel" or click anywhere outside the popover to close the popover. They must click "apply" for the changes to take effect.

[elasticmachine]

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

[hbharding]

FYI @simianhacker EUI has a new component called EuiColorPalettePicker which we'll want to use for this as soon as elastic/eui#2795 is closed. It includes a sub component for rendering a color bar, which we can probably use for the legend and the color preview below the select input.