fix: Color consistency

[geido]

SUMMARY

This PR refactors the color scheme implementation and fixes the following issues:

Fixes: #11677
Fixes: #16970
Fixes: #16891
Fixes: #16961
Fixes: #16980
Fixes: #16979

It adds the ability to port custom label colors from the Dashboard to Explore.
It makes the custom label colors persistent and independent from the color scheme change in Dashboard.

KNOWN ISSUES

There are several known issues related to the color consistency project currently affecting master which will be tackled in separate PRs, as follows:

• [Dashboard] Color scheme won't be discarded when discarding changes #17243
• [Explore] The dashboard ID will be lost when refreshing the page #17244
• [Explore] Linear color scheme options do not work  #17318
• Pie chart issue with the categorical color scheme using the same color for the last and first slices of the pie, making it hard to differentiate the two slices (will require deeper investigation)

REQUIRED SUPERSET-UI PR

This PR requires the change in the related Superset-ui PR to be merged in first apache-superset/superset-ui#1406

AFTER

Change a color scheme in Explore. Then refresh.

1.explore_change_and_reload.mp4

The chart should use the colors in order and restart from the first color in the scheme when running out of available colors.

2.explore_more_series_than_colors.mp4

Chart should inherit the color scheme of the dashboard

3.dashboard_chart_inherits_color.mp4

Charts in the dashboard should use custom label color, show the change immediately, on save and on refresh

5.dashboard_custom_label.mp4

Explore should use the same color scheme and custom label colors of the originating dashboard

6.explore_inherits_dashboard_custom_labels.mp4

TESTING INSTRUCTIONS

Please follow each test case as shown in the videos above

ADDITIONAL INFORMATION

• Has associated issue: [dashboard properties] metadata saving behavior on SAVE #11677 [dashboard][color theme] chart color are changed when refreshing dashboard #16970 [color theme] stacked bar chart with 'Superset color' theme will change color when save to dashboard #16891 [color theme][dashboard] adding new chart to same dashboard change color of other charts #16961 [color theme][chart] When #series is larger than #color, the color start from random order to repeat #16980 [color theme][chart] Series in the chart is starting in a random order of color #16979
• 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

[codecov]

Codecov Report

Merging #17089 (2cc1ad8) into master (93bafa0) will decrease coverage by 0.03%.
The diff coverage is 65.21%.

❗ Current head 2cc1ad8 differs from pull request most recent head acacba5. Consider uploading reports for the commit acacba5 to get more accurate results

@@            Coverage Diff             @@
##           master   #17089      +/-   ##
==========================================
- Coverage   77.10%   77.06%   -0.04%     
==========================================
  Files        1037     1037              
  Lines       55659    55659              
  Branches     7612     7612              
==========================================
- Hits        42914    42894      -20     
- Misses      12495    12510      +15     
- Partials      250      255       +5     

Flag	Coverage Δ
hive	?
mysql	82.00% <ø> (+0.02%)	⬆️
postgres	82.01% <ø> (+0.02%)	⬆️
presto	81.88% <ø> (?)
python	82.27% <ø> (-0.07%)	⬇️
sqlite	81.68% <ø> (+0.02%)	⬆️

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

Impacted Files	Coverage Δ
superset-frontend/src/chart/Chart.jsx	43.33% <ø> (ø)
superset-frontend/src/chart/ChartRenderer.jsx	37.17% <0.00%> (ø)
superset-frontend/src/dashboard/actions/hydrate.js	1.70% <0.00%> (ø)
.../src/dashboard/components/gridComponents/Chart.jsx	80.37% <ø> (ø)
...perset-frontend/src/dashboard/containers/Chart.jsx	92.30% <ø> (ø)
...perset-frontend/src/explore/components/Control.tsx	76.47% <0.00%> (ø)
...ntend/src/explore/components/ExploreChartPanel.jsx	14.28% <ø> (ø)
...nd/src/explore/components/ExploreViewContainer.jsx	2.11% <0.00%> (ø)
...-frontend/src/explore/components/controls/index.js	100.00% <ø> (ø)
...et-frontend/src/explore/controlPanels/sections.tsx	100.00% <ø> (ø)
... and 42 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 93bafa0...acacba5. Read the comment docs.

[geido]

/testenv up

[github-actions]

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

[kgabryje]

LGTM!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[sadpandajoe]

🏷️ 2021.44