feat(plugin-chart-echarts): supports sunburst chart v2 [WIP]

[stephenLYZ]

SUMMARY

This PR supports sunburst chart v2 which is powered by echart.
Features:

• Support the basic sunburst chart as v1
• Support show total
• Support label features, like showLabels/LabelFormat, etc
• Support tooltip to show detail
• Support DASHBOARD_CROSS_FILTERS

Todo:

• Add thumbnail and example pictures
• Support breadcrumbs?
• Other requirements

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

base

show label

show total

tooltip

secondary metric

cross-filter

2022-09-29.12.13.56.mov

drill-to-detail

2022-09-29.12.14.36.mov

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue:
• Add option to show legend to sunburst type chart #16641
• [SIP-65] Enhance, replace and deprecate data viz in Superset #14472
• 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 #21625 (b921acb) into master (6d37e66) will decrease coverage by 0.12%.
The diff coverage is 16.29%.

@@            Coverage Diff             @@
##           master   #21625      +/-   ##
==========================================
- Coverage   67.13%   67.00%   -0.13%     
==========================================
  Files        1869     1876       +7     
  Lines       71656    71812     +156     
  Branches     7822     7863      +41     
==========================================
+ Hits        48103    48115      +12     
- Misses      21526    21671     +145     
+ Partials     2027     2026       -1     

Flag	Coverage Δ
javascript	53.73% <16.29%> (-0.20%)	⬇️

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

Impacted Files	Coverage Δ
...gin-chart-echarts/src/Sunburst/EchartsSunburst.tsx	0.00% <0.00%> (ø)
...ns/plugin-chart-echarts/src/Sunburst/buildQuery.ts	0.00% <0.00%> (ø)
...plugins/plugin-chart-echarts/src/Sunburst/index.ts	0.00% <0.00%> (ø)
...lugin-chart-echarts/src/Sunburst/transformProps.ts	0.00% <0.00%> (ø)
...gins/plugin-chart-echarts/src/Treemap/constants.ts	54.54% <ø> (ø)
.../plugins/plugin-chart-echarts/src/Treemap/types.ts	100.00% <ø> (ø)
...plugin-chart-echarts/src/Sunburst/controlPanel.tsx	28.57% <28.57%> (ø)
...plugin-chart-echarts/src/Treemap/transformProps.ts	50.87% <75.00%> (-1.37%)	⬇️
...gins/plugin-chart-echarts/src/utils/treeBuilder.ts	87.50% <87.50%> (ø)
...plugins/plugin-chart-echarts/src/Sunburst/types.ts	100.00% <100.00%> (ø)
... and 2 more

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

[michael-s-molina]

Really cool work @stephenLYZ! I left some first-pass comments.

[stephenLYZ]

/testenv up

[github-actions]

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

[villebro]

Great work @stephenLYZ ! 🚀 One minor comment about avoiding using deprecated controls. I also agree with @michael-s-molina's comment about using the theme object here wherever possible so we don't introduce more styling debt.

[villebro]

@stephenLYZ one more thing - could we add at least one simple storybook?

[zhaoyongjie]

@stephenLYZ Thanks for taking the new Sunburst chart! I have tested in my local. I was doing the first-round review.

1. When the secondary metric is used, the color of the dimensions seems broken.

2. the description of the Hierarchy should add some explanation that the first level of the hierarchy is the innermost circle.
   

3. Should use a query to get the Total value of the metric instead of the frontend calculating it? because there are some reasons(Javascript with int8/int16?) that caused incorrect total values.

Screen.Recording.2022-10-24.at.17.30.29.mov

[michael-s-molina]

I submitted a few commits to be able to merge this PR. I unregistered the chart from the available visualizations and will tackle the following open issues in another PR:

• Add thumbnail and example pictures
• Add a Storybook entry for the chart
• When the secondary metric is used, the color of the dimensions seems broken.
• Make the relationship between hierarchies and the circles more clear to the user
• Use the callback function and return an HTML element for the tooltip
• Improve the tooltip description to show the hierarchy names
• Improve tooltip positioning as it is sometimes being cut off the screen
• Fix the calculation of total values
• Register the chart again so it's available for use

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.