feat(Chart): Add Column-Based Coloring Feature with Optional Header & Total Row

[ERGO1995]

SUMMARY

Implemented a new Column Coloring feature that allows users to apply fixed background colors to selected metric columns in the Pivot Table.
Integrated a color picker for enhanced usability.
Added an optional "Apply color to headers & total rows" checkbox to extend the column coloring to headers and total cells.
Ensured seamless integration with existing Conditional Formatting, preserving its functionality.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

In the Customization tab, locate the Column Coloring section.
Click "Add new color formatter".
Select a Metric column from the dropdown.
Pick a color using the color picker or manually enter a HEX color code.
Click Apply.
Expected Result: The selected metric column should be highlighted with the chosen background color.

Enable the "Apply color to headers & total rows" checkbox.
Expected Result: The column headers and total row for the selected metric should match the column’s background color.
Disable the checkbox.
Expected Result: The header and total row should return to the default styling.

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
• Removes existing feature or API

[korbit-ai]

I've completed my review and didn't find any issues.

Files scanned

​

File Path	Reviewed
superset-frontend/src/explore/components/controls/ColumnColoringControl/index.ts	✅
superset-frontend/src/explore/components/controls/ColumnColoringControl/types.ts	✅
superset-frontend/plugins/plugin-chart-pivot-table/src/types.ts	✅
superset-frontend/src/explore/components/controls/ColumnColoringControl/ColoringPopover.tsx	✅
superset-frontend/src/explore/components/controls/index.js	✅
superset-frontend/src/explore/components/controls/ColumnColoringControl/ColoringPopoverContent.tsx	✅
superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts	✅
superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts	✅
superset-frontend/src/explore/components/controls/ColumnColoringControl/ColumnColoringControl.tsx	✅
superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx	✅
superset-frontend/packages/superset-ui-chart-controls/src/types.ts	✅
superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

• You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.
• You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.
• Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.
• Chat with Korbit on issues we post by tagging @korbit-ai in your reply.
• Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

• Check out our docs on how you can make Korbit work best for you and your team.
• Customize Korbit for your organization through the Korbit Console.

Current Korbit Configuration

General Settings

​

Setting	Value
Review Schedule	Automatic excluding drafts
Max Issue Count	10
Automatic PR Descriptions	❌

Issue Categories

​

Category	Enabled
Documentation	✅
Logging	✅
Error Handling	✅
Readability	✅
Design	✅
Performance	✅
Security	✅
Functionality	✅

Feedback and Support

• Tell us what you think of Korbit
• Schedule a call with our team
• Email us @ support@korbit.ai

Note

Korbit Pro is free for open source projects 🎉

Looking to add Korbit to your team? Get started with a free 2 week trial here

[kgabryje]

Can we use the antd color picker instead?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 83.45%. Comparing base (76d897e) to head (6704af6).
Report is 1506 commits behind head on master.

Additional details and impacted files

@@             Coverage Diff             @@
##           master   #32425       +/-   ##
===========================================
+ Coverage   60.48%   83.45%   +22.97%     
===========================================
  Files        1931      546     -1385     
  Lines       76236    39102    -37134     
  Branches     8568        0     -8568     
===========================================
- Hits        46114    32634    -13480     
+ Misses      28017     6468    -21549     
+ Partials     2105        0     -2105     

Flag	Coverage Δ
hive	48.52% <ø> (-0.65%)	⬇️
javascript	?
mysql	75.87% <ø> (?)
postgres	75.93% <ø> (?)
presto	53.05% <ø> (-0.76%)	⬇️
python	83.45% <ø> (+19.97%)	⬆️
sqlite	75.43% <ø> (?)
unit	61.12% <ø> (+3.49%)	⬆️

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.