Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(plugin-chart-echarts): sort tooltip correctly #30819

Merged
merged 2 commits into from
Nov 1, 2024

Conversation

villebro
Copy link
Member

@villebro villebro commented Nov 1, 2024

SUMMARY

The main ECharts series chart tooltips aren't sorting correctly. This is due to the tooltip keys being populated from Object.keys from an object that was originally an array, which of course doesn't have a guaranteed sort order. This issue appears to have been there for a very long time: I treid to hunt it down with Blame, and I stopped searching when I got to three years ago where the code had already changed considerably, but the same bug seemed to be there.

This PR fixes the bug, DRYs the code as the same logic is also needed in Mixed Timeseries chart, and adds simple tests for the new util. Naturally a full transformProps integration test would be preferable here, but it felt like too much added code for such a small fix. Also, the util test looks concise enough for people to understand what it's used for.

P.S. In the screenshots below please excuse my awful theme colors (I have those in my devenv to remind myself of the importance of theming work)

P.P.S. I suggest reviewing with hidden whitespace changes, as the changes are mostly that.

AFTER

Notice how "Tooltip sort by metric" is working as expected (biggest metric values are on the bottom due to stacking):
image

Also sorting series by "Category name" works as expected (this can be seen comparing the tooltip colors vs the bars):
image

BEFORE

Currently "Tooltip sort by metric" doesn't do anything (metric values are not monotonically growing):
image
When not sorting by metric, the series sort order isn't reflected in the tooltip order (the order is not the same in tooltip as on the bars):
image

TESTING INSTRUCTIONS

  1. Create a bar/line chart with a dimension to sort by
  2. Try changing the series sort order to see if it's reflected in the tooltip
  3. Try toggling "Tooltip sort by metric" control

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

@dosubot dosubot bot added viz:charts:echarts Related to Echarts viz:charts:tooltip Related to tooltips in charts labels Nov 1, 2024
): string[] {
if (richTooltip && tooltipSortByMetric) {
return forecastValue
.slice()
Copy link
Member Author

@villebro villebro Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slicing to not mutate the input value (this would have caused issues in the new tests)

Comment on lines -254 to +255
Object.values(rawSeries).map(series => series.name as string),
rawSeries.map(series => series.name as string),
Copy link
Member Author

@villebro villebro Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bycatch: I'm not sure why we were doing Object.values on an array, maybe a typo

@villebro villebro merged commit b02d18a into apache:master Nov 1, 2024
39 checks passed
@villebro villebro deleted the villebro/sort-tooltip branch November 1, 2024 22:24
@sadpandajoe sadpandajoe added the v4.1 Label added by the release manager to track PRs to be included in the 4.1 branch label Nov 1, 2024
sadpandajoe pushed a commit that referenced this pull request Nov 1, 2024
@michael-s-molina
Copy link
Member

P.S. In the screenshots below please excuse my awful theme colors (I have those in my devenv to remind myself of the importance of theming work)

🤣 🤣 🤣 🤣 🤣 🤣

@github-actions github-actions bot added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🍒 4.1.0 labels Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels plugins size/L v4.1 Label added by the release manager to track PRs to be included in the 4.1 branch viz:charts:echarts Related to Echarts viz:charts:tooltip Related to tooltips in charts 🍒 4.1.0 🍒 4.1.1
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants