Eui: [EuiStat] Allow for customization of colors

[formgeist]

Summary

The existing EuiStat component allows for coloring the values by specific color variables (our default color set). We would like to use the EuiStat as a large legend/KPI component in the Observability homepage visualizations. We want to be able to color the values by the assigned color in the visualization, which uses the euiPaletteColorBlind color palette.

Would it be possible to allow the euiPalette colors to be assigned in the props? E.g. define euiColorVis9 as a color for value.

[cchaos]

Those are nice looking charts! 😍

I'll agree that we should be able to customize more colors. I've had the same thought for EuiProgress (to align to a vis color). This is one of those instances that if we do allow for colors, we should probably just allow any hex value instead of trying to account for all the colors we supply.

For instance, say we eventually get to a point where users can customize the color palette for all of Kibana. We'd still want to align those stat colors with the chosen chart/palette colors. It's going to get hard to maintain all the possible color options via props and SASS.

Therefore, I think the best solution to this is to ensure that it is easy for consumers to customize the color of the Stat to anything they'd like. Whether thats with CSS overrides or inline-styles added by passing a hex color prop.

[shrey]

I'd like to work on this issue, How do you guys plan to let the user change the colour?

[snide]

I'd like to work on this issue, How do you guys plan to let the user change the colour?

Normally when we've done these we allow either the enum of named colors (as it works now) or a hex value. You can likely look into a couple of our components (like EuiBadge) for an example of how we validate this at the prop layer. Thanks for taking a look.

[shrey]

@snide So, we could create a seperate class like euiStat__title--custom where we could allow the user to enter a hex code for custom colours?

[snide]

You would likely check to see if if was one of the enums... then use a class. If a hex was used instead, apply the coloring through a style tag.

[shrey]

@snide I was thinking we could even use the isValidHex function to check the hex fn

[chandlerprall]

I was thinking we could even use the isValidHex function to check the hex fn

It's probably better to check if the string is a key in the enum lookup to use its className, and allow any other arbitrary strings passed through to a style tag. This gives the consuming application extra flexibility.

[shrey]

@chandlerprall I've made it work in the docs, but there are some errors, I'll make a PR, we we can from there

[miukimiu]

Closed by https://github.com/elastic/eui/pull/3617