feat: Making bar graphs in Table viz from fixed-size divs instead of calculated gradients

[rusackas]

SUMMARY

The Table viz allows users to have little histogram/bar chart cells which can be gray, red when negative, or colorized via conditional formatting. Previously, these were implemented as the CSS background of the table cells, and a gradient was used to draw the bars, with gradient stops to set bar widths. This was problematic as people could not customized these with CSS, and it was also a potentially difficult to understand implementation from a maintenance standpoint.

In this revised approach, divs are conditionally added to table cells to act as these bars, and they're positioned behind the text content. They use a few small functions to calculate width, offset, and color for their display. They're also rendered with a cell-bar class and (when applicable) a negative or positive class to indicate if they're positive or negative, for further customization options.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

No visual changes here - just representing what was changed. But, this is the "after" FWIW.

TESTING INSTRUCTIONS

Test example tables, and throw different formatting options at the table. I think this covers all the use cases, but there's always a chance I missed something!

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API (CSS classes to customize with)
• Removes existing feature or API

[codecov]

Codecov Report

Merging #21482 (5296b72) into master (2c7323a) will increase coverage by 0.07%.
The diff coverage is 66.66%.

@@            Coverage Diff             @@
##           master   #21482      +/-   ##
==========================================
+ Coverage   66.66%   66.74%   +0.07%     
==========================================
  Files        1791     1801      +10     
  Lines       68498    69252     +754     
  Branches     7286     7554     +268     
==========================================
+ Hits        45666    46221     +555     
- Misses      20962    21121     +159     
- Partials     1870     1910      +40     

Flag	Coverage Δ
hive	53.04% <ø> (ø)
javascript	53.20% <66.66%> (+0.34%)	⬆️
mysql	78.18% <ø> (ø)
postgres	78.25% <ø> (ø)
presto	52.94% <ø> (ø)
python	81.39% <ø> (ø)
sqlite	76.74% <ø> (ø)
unit	51.04% <ø> (ø)

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

Impacted Files	Coverage Δ
...tend/plugins/plugin-chart-table/src/TableChart.tsx	42.07% <66.66%> (+1.61%)	⬆️
...frontend/src/components/ListView/Filters/index.tsx	57.57% <0.00%> (-9.10%)	⬇️
.../plugin-chart-echarts/src/Timeseries/buildQuery.ts	60.00% <0.00%> (-6.67%)	⬇️
...s/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx	41.42% <0.00%> (-5.00%)	⬇️
.../superset-ui-core/src/query/normalizeTimeColumn.ts	100.00% <0.00%> (ø)
...et-ui-chart-controls/src/operators/sortOperator.ts	100.00% <0.00%> (ø)
...t-ui-chart-controls/src/operators/pivotOperator.ts	100.00% <0.00%> (ø)
...ui-chart-controls/src/operators/prophetOperator.ts	100.00% <0.00%> (ø)
...controls/src/operators/timeComparePivotOperator.ts	100.00% <0.00%> (ø)
...d/src/components/DeprecatedSelect/NativeSelect.tsx	57.14% <0.00%> (ø)
... and 18 more

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

[geido]

/testenv up

[github-actions]

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

[michael-s-molina]

LGTM. Left some non-blocking suggestions.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.