feat: Utility function to render chart tooltips

[michael-s-molina]

SUMMARY

This PR adds an utility function to render chart tooltips with the following objectives:

• Add the ability to display total and percentage values for our tooltips. This improvement will also allow us to migrate legacy timeseries charts, which currently display that information, to ECharts.
• Standardize the way we display tooltips. Currently, every plugin displays tooltips using different information and designs, which decreases the overall user experience. By creating a reusable function, we can ensure consistency across plugins.
• Reduce code duplication.

This PR will only format ECharts tooltips to limit the scope of work but other plugins can also benefit from the utility function.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

Test consists in checking how the tooltip is displayed for all ECharts plugins and their different control combinations.

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]

One question I have isn't about the PR itself (which is lookin' good!) but about the new component's potential future, and thus its location in the codebase.

Since the TooltipRenderer component doesn't seem to rely on anything ECharts related, do you think it would make sense to move it out of the ECharts plugin and into Superset-UI/core or similar? It seems like we could use it on other plugins (ECharts or not) to standardize the UI even further across Superset. Having that might also pave the way to add a customization controls to it down the road, enabling templating (handlebars/jinja/whatever) and replacing the JS Tooltips used by DeckGL.

[michael-s-molina]

@justinpark @villebro @rusackas Thank you for the comments. I'm still working on the component's API and implementation as I continue to iterate on each plugin. I'm still not sure what will be the final API and implementation because each plugin has a unique set of requirements. For that reason, I'll first make sure all ECharts plugins are using the renderer, to have a clear view of all requirements, and then work on optimizations. Feel free to review this PR while it evolves or wait for when it leaves the draft state.

[sfirke]

Wow this is a nice improvement! 🤩 Thank you for including all of the before/after screenshots. This will implement the following feature requests:

1. #18462
2. #28216

[michael-s-molina]

Thanks for linking the resources @sfirke!

[igamat]

Really nice feature indeed ! Will this feature be also available for the other types of charts (Country Map, World Map, Bar chart...) any time soon ? Thanks

[rusackas]

Really nice feature indeed ! Will this feature be also available for the other types of charts (Country Map, World Map, Bar chart...) any time soon ? Thanks

I think we all WANT it to get there, but it's probably not a high priority at the moment. If you have the means to contribute that as a PR, we'd be super excited to review it!