feat: Enables ECharts legend selector

[michael-s-molina]

SUMMARY

Legacy charts had the ability to click on a legend item and exclusively select that series. This was really helpful, specially when you have many items and wishes to focus on only one. ECharts has a similar but more flexible feature called Legend selector that allows a user to select all items or invert the selection. This flexibility is specially helpful when you want to compare a few items among many. This PR enables that feature.

@kasiazjc

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2023-04-05.at.14.55.25.mov

TESTING INSTRUCTIONS

Check the video for 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]

OMG, I was just talking about this feature with @yousoph and here's the PR!!! Thank you!

[rusackas]

LGTM!! Thanks for this!

I wondered for a moment about writing some tests with more assertions, but I don't think there's anything other than tech debt ahead if we wrote tests to check that ECharts continues to support what it claims to out-of-the-box.

[codecov]

Codecov Report

Merging #23590 (c62ecd2) into master (117360c) will increase coverage by 0.00%.
The diff coverage is 64.70%.

❗ Current head c62ecd2 differs from pull request most recent head 00d5bbf. Consider uploading reports for the commit 00d5bbf to get more accurate results

@@           Coverage Diff           @@
##           master   #23590   +/-   ##
=======================================
  Coverage   67.72%   67.72%           
=======================================
  Files        1916     1916           
  Lines       74029    74026    -3     
  Branches     8040     8040           
=======================================
- Hits        50135    50134    -1     
+ Misses      21846    21844    -2     
  Partials     2048     2048           

Flag	Coverage Δ
javascript	53.96% <28.57%> (-0.01%)	⬇️

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

Impacted Files	Coverage Δ
.../plugin-chart-echarts/src/Funnel/transformProps.ts	72.34% <ø> (ø)
...s/plugin-chart-echarts/src/Graph/transformProps.ts	72.36% <ø> (ø)
...hart-echarts/src/MixedTimeseries/transformProps.ts	0.00% <ø> (ø)
...ins/plugin-chart-echarts/src/Pie/transformProps.ts	55.71% <ø> (ø)
...s/plugin-chart-echarts/src/Radar/transformProps.ts	0.00% <ø> (ø)
...gin-chart-echarts/src/Timeseries/transformProps.ts	58.33% <ø> (ø)
...d/plugins/plugin-chart-echarts/src/utils/series.ts	88.48% <ø> (ø)
...t-frontend/src/dashboard/reducers/nativeFilters.ts	39.28% <0.00%> (-1.46%)	⬇️
...et-frontend/src/dashboard/actions/nativeFilters.ts	42.55% <33.33%> (+0.16%)	⬆️
...eFilters/FiltersConfigModal/FiltersConfigModal.tsx	63.81% <33.33%> (+0.18%)	⬆️
... and 2 more

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

[yousoph]

Amazing!! I wonder if "Inv" is clear enough from the label? Curious what @kasiazjc thinks

[yousoph]

/testenv up

[github-actions]

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

[kasiazjc]

Amazing!! I wonder if "Inv" is clear enough from the label? Curious what @kasiazjc thinks

@michael-s-molina this is very cool!

I have a few thoughts -

• If all things are selected, should "all" button be active? then, if you would select "inv", inv becomes active instead and from there you can:
  • deselect inv at it comes back to "all"
  • choose other legend thing and inv becomes deselected 🤔

I think this would be a good indicator to show in which state you currently are in thoughts @yousoph @michael-s-molina ?

• on "inv" (or "invsel"), for me it is not intuitive at all, but I know it's used :D I think we should add a tooltip to "inv", maybe

Selecting 'inv' will invert the legend selection.

[michael-s-molina]

@yousoph @kasiazjc Although the ideas are good, ECharts API currently does not offer this kind of flexibility 😢 . There's no native support for controlling the buttons states or adding a tooltip. I can change the text though, I just didn't because I figure it's a common pattern used by ECharts and people are used to it. One thing I noticed when interacting with the controls for the first time, is that you understand the feature pretty quick, and there's no harm when "trying/testing" the buttons.

[kasiazjc]

@yousoph @kasiazjc Although the ideas are good, ECharts API currently does not offer this kind of flexibility 😢 . There's no native support for controlling the buttons states or adding a tooltip. I can change the text though, I just didn't because I figure it's a common pattern used by ECharts and people are used to it. One thing I noticed when interacting with the controls for the first time, is that you understand the feature pretty quick, and there's no harm when "trying/testing" the buttons.

oooh, ok, that makes sense to me! I think we should keep "inv" if that's the case, because I don't think there is a better name for it and as you said it's widely used :)

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.