Goal: Add the ability to show progress bar in tables:
UI Single Color
A few notes:
- Center alignment for text is disabled in case of Progress Bar as cell Decoration since it would overlap with the bar itself
- Right / Left alignment would position the text accordingly. Please note that numbers will be longer or shorter according to the number of digits, bars should stay vertically aligned among themselves (can be noticed in next images)
- Default color should be Datavis Color 2 (our blue tint in datavis palette). Happy to discuss about this, I just think it's the one the works better
- Progress bar fills the cell entirely, there is no fixed size for that, it resize according to cell
- Max value, by default, is the highest value in the whole column. User can customize this value
- "Cell decoration" was previously called "Color by value", new naming should offer a better coverage of the options that we are going to offer (None, Cell, Badge, Text, Progress bar)
UI Solid / Gradient color style
Notes:
- Solid and Gradient options works the same way, in terms of UI nothing changes, the only different is the final appearances of the bars themselves
- Color mapping is displayed instead of single color picker
- Color mapping, by default, uses Status palette but with only 3 steps so that by default we have a simpler color application
Progress bar color style
Progress bar size
Tables offer the possibility to display different sizes for line height, progress bar should behave accordingly:
Compact -> Progress Bar size = M
Normal -> Progress Bar size = L
Expanded -> Progress Bar size = L
EUI Progress bar
I have an open conversation with EUI team regarding the style of progress bar. It would be great to directly use EUI component (https://eui.elastic.co/docs/components/display/progress/) but it is currently missing a couple of style details that we would need: the rounded style and the possibility to have gradients.
@JasonStoltz can you please help me understanding if there is any possibility to implement this quickly on EUI side?
Goal: Add the ability to show progress bar in tables:
UI Single Color
A few notes:
UI Solid / Gradient color style
Notes:
Progress bar color style
Progress bar size
Tables offer the possibility to display different sizes for line height, progress bar should behave accordingly:
Compact -> Progress Bar size = M
Normal -> Progress Bar size = L
Expanded -> Progress Bar size = L
EUI Progress bar
I have an open conversation with EUI team regarding the style of progress bar. It would be great to directly use EUI component (https://eui.elastic.co/docs/components/display/progress/) but it is currently missing a couple of style details that we would need: the rounded style and the possibility to have gradients.
@JasonStoltz can you please help me understanding if there is any possibility to implement this quickly on EUI side?