feat(plugin-chart-echarts): add series sorting

[villebro]

SUMMARY

Currently the ECharts area chart sorts series in ascending order based on the series name. This is different from the NVD3 plugin, which always places the biggest series on the bottom (this applies to the bar chart as well). This PR adds the possibility to sort by not only the series name, but also the min, max, total and average series values, along with making the sort order switchable. To achieve parity with the NVD3 plugin, we change the default behavior to sort by the sum in descending order, essentially placing the largest series on the bottom. Also, to make sure the tooltip is ordered more intuitively, we reorder the tooltip labels in reverse order when stacking to place the first element (=the lowest series) last.

AFTER

Now the series are ordered from largest to smallest, similarly to how the NVD3 plugin does it. Also notice the order of items on the tooltip, which is in line with the series on the chart:

The new controls render in real time:

echarts-sort.mp4

BEFORE

Previously the series were always ordered based on the series name. Also notice that "other" is placed after "TX" due to case sensitive ordering, and that the order is reversed on the tooltip:

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

[villebro]

Note that we're now sorting case insensitive (previously "Qwerty" would come before "abc")

[codecov]

Codecov Report

Merging #23392 (c6a60cb) into master (9920ab3) will decrease coverage by 11.26%.
The diff coverage is 82.60%.

❗ Current head c6a60cb differs from pull request most recent head 27ec70f. Consider uploading reports for the commit 27ec70f to get more accurate results

@@             Coverage Diff             @@
##           master   #23392       +/-   ##
===========================================
- Coverage   67.53%   56.28%   -11.26%     
===========================================
  Files        1907     1907               
  Lines       73473    73518       +45     
  Branches     7976     7980        +4     
===========================================
- Hits        49617    41376     -8241     
- Misses      21807    30094     +8287     
+ Partials     2049     2048        -1     

Flag	Coverage Δ
hive	?
javascript	53.82% <82.92%> (+0.08%)	⬆️
mysql	?
postgres	?
sqlite	?

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

Impacted Files	Coverage Δ
...-core/src/hooks/useChangeEffect/useChangeEffect.ts	100.00% <ø> (ø)
...hooks/useComponentDidMount/useComponentDidMount.ts	100.00% <ø> (ø)
...oks/useComponentDidUpdate/useComponentDidUpdate.ts	100.00% <ø> (ø)
...src/hooks/useElementOnScreen/useElementOnScreen.ts	100.00% <ø> (ø)
...erset-ui-core/src/hooks/usePrevious/usePrevious.ts	100.00% <ø> (ø)
...re/src/hooks/useTruncation/useCSSTextTruncation.ts	100.00% <ø> (ø)
...c/hooks/useTruncation/useChildElementTruncation.ts	100.00% <ø> (ø)
...chart-echarts/src/Timeseries/Area/controlPanel.tsx	40.00% <ø> (ø)
...charts/src/Timeseries/Regular/Bar/controlPanel.tsx	35.71% <ø> (ø)
...harts/src/Timeseries/Regular/Line/controlPanel.tsx	33.33% <ø> (ø)
... and 44 more

... and 297 files with indirect coverage changes

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

[kgabryje]

Love that upgrade, charts look so much better now!

[eschutho]

Removing the 2.1.1 tags since this is a feature. We'll instead get this PR into 3.0