feat(plugin-chart-echarts): add aggregate total for the Pie/Donuct chart

[stephenLYZ]

SUMMARY

The data analyst would like to see the aggregate total to be displayed in a Pie/Donut chart. Similar to the Big Number chart. This will allow the viewer to see aggregate values as well as their breakdowns rather than having to calculate.
This PR adds:

• show_total control to decide whether to display the aggregate count.
• total text will display at top of normal pie chart by default if show_total control checked
• total text will display at center of donuct chart by default if show_total control checked
• total text will adjust its own position according to the position of the legend.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

control panel

pie chart

donuct chart

with legend

TESTING INSTRUCTIONS

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

[rusackas]

@stephenLYZ There's a TS error that needs addressing, but otherwise this is looking great!

[codecov]

Codecov Report

Merging #19622 (59c92dc) into master (1ad82af) will decrease coverage by 0.05%.
The diff coverage is 21.05%.

@@            Coverage Diff             @@
##           master   #19622      +/-   ##
==========================================
- Coverage   66.53%   66.48%   -0.06%     
==========================================
  Files        1681     1681              
  Lines       64319    64389      +70     
  Branches     6564     6592      +28     
==========================================
+ Hits        42793    42807      +14     
- Misses      19853    19899      +46     
- Partials     1673     1683      +10     

Flag	Coverage Δ
javascript	51.15% <21.05%> (-0.07%)	⬇️

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

Impacted Files	Coverage Δ
...gins/plugin-chart-echarts/src/Pie/controlPanel.tsx	40.00% <ø> (ø)
...ins/plugin-chart-echarts/src/Pie/transformProps.ts	55.07% <21.05%> (-12.93%)	⬇️
...s/CRUD/data/database/DatabaseModal/ModalHeader.tsx	66.66% <0.00%> (-3.71%)	⬇️
...c/views/CRUD/data/database/DatabaseModal/index.tsx	31.80% <0.00%> (-1.00%)	⬇️
superset-frontend/src/components/Button/index.tsx	100.00% <0.00%> (ø)
superset-frontend/src/views/CRUD/hooks.ts	46.40% <0.00%> (+0.04%)	⬆️
...tend/src/views/CRUD/data/database/DatabaseList.tsx	67.94% <0.00%> (+0.55%)	⬆️
...c/views/CRUD/data/database/DatabaseModal/styles.ts	76.69% <0.00%> (+0.69%)	⬆️

---

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 1ad82af...59c92dc. Read the comment docs.

[zhaoyongjie]

I Tested in my local, and the behavior was expected.

• Apply integer metrics
• Apply float metrics
• Apply number formater

[zhaoyongjie]

There is an unrelated issue when I tested this. The colors of label disappeared when I applied negative metrics. @stephenLYZ

[villebro]

Late to the party, but translated strings need to be constant. This needs to be something like:

t('Total: %s', numberFormatter(totalValue))