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:
• [x] 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
• [x] Introduces new feature or API
• [ ] Removes existing feature or API

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 72.95%. Comparing base (76d897e) to head (6677cbb). :warning: Report is 3184 commits behind head on master.

Additional details and impacted files

@@             Coverage Diff             @@
##           master   #32425       +/-   ##
===========================================
+ Coverage   60.48%   72.95%   +12.46%     
===========================================
  Files        1931      561     -1370     
  Lines       76236    40622    -35614     
  Branches     8568     4273     -4295     
===========================================
- Hits        46114    29634    -16480     
+ Misses      28017     9867    -18150     
+ Partials     2105     1121      -984     

Flag	Coverage Δ
hive	47.16% <ø> (-1.99%)	:arrow_down:
javascript	?
mysql	71.94% <ø> (?)
postgres	71.99% <ø> (?)
presto	50.92% <ø> (-2.88%)	:arrow_down:
python	72.91% <ø> (+9.40%)	:arrow_up:
sqlite	71.53% <ø> (?)
unit	100.00% <ø> (+42.36%)	:arrow_up:

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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[rusackas]

Closing/reopening to reboot CI and see what's happening in the (fresher) logs.

[rusackas]

Rebased! Seeing some lil' errors like this, which might be due to the rebase:

ERROR in ./src/explore/components/controls/ColumnColoringControl/ColumnColoringControl.tsx:21:8
TS2613: Module '"/home/runner/work/superset/superset/superset-frontend/src/components/Icons/index"' has no default export. Did you mean to use 'import { Icons } from "/home/runner/work/superset/superset/superset-frontend/src/components/Icons/index"' instead?
    19 | import { useEffect, useState } from 'react';
    20 | import { styled, css, t, useTheme } from '@superset-ui/core';
  > 21 | import Icons from 'src/components/Icons';
       |        ^^^^^
    22 | import ControlHeader from 'src/explore/components/ControlHeader';
    23 | import { ColoringPopover } from './ColoringPopover';
    24 | import { ColumnColoringConfig, ColumnColoringControlProps } from './types';

[ERGO1995]

Rebased! Seeing some lil' errors like this, which might be due to the rebase:

ERROR in ./src/explore/components/controls/ColumnColoringControl/ColumnColoringControl.tsx:21:8
TS2613: Module '"/home/runner/work/superset/superset/superset-frontend/src/components/Icons/index"' has no default export. Did you mean to use 'import { Icons } from "/home/runner/work/superset/superset/superset-frontend/src/components/Icons/index"' instead?
    19 | import { useEffect, useState } from 'react';
    20 | import { styled, css, t, useTheme } from '@superset-ui/core';
  > 21 | import Icons from 'src/components/Icons';
       |        ^^^^^
    22 | import ControlHeader from 'src/explore/components/ControlHeader';
    23 | import { ColoringPopover } from './ColoringPopover';
    24 | import { ColumnColoringConfig, ColumnColoringControlProps } from './types';

I replaced import Icons from 'src/components/Icons'; by import { Icons } from 'src/components/Icons';

[rusackas]

Closing/reopening to kick-start CI

[rusackas]

Hi @ERGO1995 👋

This PR has merge conflicts and has been inactive for about 5 months. Converting to draft until resolved.

When you have time, please rebase on master to resolve the conflicts. There was some review discussion with @kgabryje that may also need to be addressed.

If you're no longer able to work on this, let us know and we can close it.

Thanks for your contribution!