-
Notifications
You must be signed in to change notification settings - Fork 14.4k
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
Conversation
): string[] { | ||
if (richTooltip && tooltipSortByMetric) { | ||
return forecastValue | ||
.slice() |
There was a problem hiding this comment.
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)
Object.values(rawSeries).map(series => series.name as string), | ||
rawSeries.map(series => series.name as string), |
There was a problem hiding this comment.
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
(cherry picked from commit b02d18a)
🤣 🤣 🤣 🤣 🤣 🤣 |
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](https://private-user-images.githubusercontent.com/33317356/382398500-777edb2c-a43c-467d-8914-723397a5a1f5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NjM0NjksIm5iZiI6MTczODk2MzE2OSwicGF0aCI6Ii8zMzMxNzM1Ni8zODIzOTg1MDAtNzc3ZWRiMmMtYTQzYy00NjdkLTg5MTQtNzIzMzk3YTVhMWY1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA3VDIxMTkyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWI1NjljNmIwNGRkMTE4ZWJkOGFlNDZjNzU5N2NmZTYzMTAxYjFiM2IwZDM0OGRlYjMxNWU5YjE5MWMwMTFlZTYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.lzwzvgTmvcFsxNhA1E9wtoBi3TXYN-5lckRUISadjNk)
Also sorting series by "Category name" works as expected (this can be seen comparing the tooltip colors vs the bars):
![image](https://private-user-images.githubusercontent.com/33317356/382399095-092f2f3c-8da6-4a99-a5d7-e66d0b84a420.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NjM0NjksIm5iZiI6MTczODk2MzE2OSwicGF0aCI6Ii8zMzMxNzM1Ni8zODIzOTkwOTUtMDkyZjJmM2MtOGRhNi00YTk5LWE1ZDctZTY2ZDBiODRhNDIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA3VDIxMTkyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY1MTZjYjFkNmU4ZGJhOWU1ZjZiZDRkOGFmYzkyOGI2Y2E1MzczY2Y4YTkyZjY5OWJmOTk0MjY1NTgxMjk5OTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.vNKe1AOYJh1FM7uAtTH6zYwHHU-yU-qrMzOgmQ7UdBc)
BEFORE
Currently "Tooltip sort by metric" doesn't do anything (metric values are not monotonically growing):
![image](https://private-user-images.githubusercontent.com/33317356/382399353-58979041-2a55-4755-86ef-ade3aed12ea3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NjM0NjksIm5iZiI6MTczODk2MzE2OSwicGF0aCI6Ii8zMzMxNzM1Ni8zODIzOTkzNTMtNTg5NzkwNDEtMmE1NS00NzU1LTg2ZWYtYWRlM2FlZDEyZWEzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA3VDIxMTkyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThjMWY3ZjA3N2U2MTRhNDFkNzE1ZjU0NTdiMjdmNGJkNDM5NTdiN2FhOWI5OTNjMTgzZWNhMmJmODFkOWYyNDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.QMEpBWBdUyXvg2gYMTwVTrRJc6KaMOPW_Tvdc-tQYL0)
![image](https://private-user-images.githubusercontent.com/33317356/382399796-d6787f9d-41b7-4563-bdc4-b6fbdda668c4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NjM0NjksIm5iZiI6MTczODk2MzE2OSwicGF0aCI6Ii8zMzMxNzM1Ni8zODIzOTk3OTYtZDY3ODdmOWQtNDFiNy00NTYzLWJkYzQtYjZmYmRkYTY2OGM0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA3VDIxMTkyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTllOGM3NGIyMjFiOGY5NjhkY2JlNGJmZTZhNTE5ZmVjYjlkZTU1YWIxMGRiZGQ5ZjJlMzIwMDQ0NjM0ZWJkYjUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.I4H7qBDS9MPKlzK4WzMgodhpEnmHnadMz-__4N6GUo8)
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):
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION