feat: conditional coloring for big number chart

[gbusch]

SUMMARY

As suggested here: #21820
allow for conditional formatting (coloring) of Big Number charts.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

• select a "Big Number" chart
• add "conditional formatting" rules in the "Customize" tab

ADDITIONAL INFORMATION

re-uses existing "ConditionalFormattingControl" from chart table and pivot table

[codecov]

Codecov Report

Merging #23064 (999198f) into master (17fbb2d) will decrease coverage by 1.19%.
The diff coverage is 48.87%.

❗ Current head 999198f differs from pull request most recent head c073c0b. Consider uploading reports for the commit c073c0b to get more accurate results

@@            Coverage Diff             @@
##           master   #23064      +/-   ##
==========================================
- Coverage   67.47%   66.28%   -1.19%     
==========================================
  Files        1880     1922      +42     
  Lines       72283    74068    +1785     
  Branches     7881     8115     +234     
==========================================
+ Hits        48772    49098     +326     
- Misses      21486    22895    +1409     
- Partials     2025     2075      +50     

Flag	Coverage Δ
hive	?
javascript	54.11% <48.87%> (+0.21%)	⬆️
presto	?
unit	?

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...et-ui-chart-controls/src/operators/sortOperator.ts	100.00% <ø> (ø)
...t-ui-chart-controls/src/shared-controls/mixins.tsx	16.66% <ø> (ø)
...d/packages/superset-ui-chart-controls/src/types.ts	100.00% <ø> (ø)
.../packages/superset-ui-core/src/chart/types/Base.ts	100.00% <ø> (ø)
...-core/src/hooks/useChangeEffect/useChangeEffect.ts	100.00% <ø> (ø)
...hooks/useComponentDidMount/useComponentDidMount.ts	100.00% <ø> (ø)
...oks/useComponentDidUpdate/useComponentDidUpdate.ts	100.00% <ø> (ø)
...src/hooks/useElementOnScreen/useElementOnScreen.ts	100.00% <ø> (ø)
...erset-ui-core/src/hooks/usePrevious/usePrevious.ts	100.00% <ø> (ø)
...re/src/hooks/useTruncation/useCSSTextTruncation.ts	100.00% <ø> (ø)
... and 128 more

... and 478 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[rusackas]

/testenv up

[github-actions]

@rusackas Ephemeral environment spinning up at http://34.222.110.51:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[rusackas]

Code looks good, and it seems to work well on the ephemeral environment. The only question I have is whether it's possible/reasonable to make the colors full opacity rather than the sort of pastel colors that they are now. I'm a little worried about contrast/legibility in particular.

[justin-tomlinson]

Very useful improvement. It would be great if this was available across the Big Number and Big Number with trend line. Some additional improvements to functionality could be:

• Make the colour scheme be more configurable by using hex codes or RGB values
• Making the colour selection gradient optional. sometimes you want it to be a set colour when it meets the rule rather than be some gradient of the colour. I.e If measure >0.5 then Red, not a gradient of red.

This probably applies to the conditional formatting on the table chart too. -

[rusackas]

@gbusch curious about your input on any of the above comments... would love to see this PR get through! :)

[gbusch]

Sorry, was busy and then almost forgot about it...

Colors are defined in this file:
superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx

I renamed the colors to make it clearer that they refer to the theme colors and added possibility for darker colors (from theme). Does this make sense?

[gbusch]

@rusackas What do you think?
Pipeline is red... Don't understand why, as the changes are rather small.

[kgabryje]

Pipeline is red... Don't understand why, as the changes are rather small.

The E2E tests are sometimes flaky... I restarted the CI, hopefully it passes this time

[mtrentz]

Big Numbers doesn't get color formatted when its value is zero. Anyone else experience this?

If I set a rule for "error when < 5" and the value is 0, nothing happens.

If the value is 0.0001 then it colors.

[rusackas]

Big Numbers doesn't get color formatted when its value is zero. Anyone else experience this?

If I set a rule for "error when < 5" and the value is 0, nothing happens.

If the value is 0.0001 then it colors.

Would you be willing to open a PR or an Issue about this? We haven't heard much outcry, and would love any help you can provide to set it on a course toward resolution.

[mtrentz]

@rusackas opened this one #28038