fix: Fix empty tooltip on sparklines
This MR fixes #526 (closed). The chart has a gap between it and the actual data points:
Previously, the code was listening to mouseenter
on the div in order to show the tooltip, but it's possible to hover over the div without getting close enough to a data point, leading to an empty tooltip:
Kapture_2019-12-12_at_19.39.46
This causes other issues issues as well, such as the tooltip showing for a data point that's nowhere close to the cursor, which if done fast enough makes the tooltip look like it's jumping from its old location to the new location:
Kapture_2019-12-12_at_19.44.59
As well as continuing to display the tooltip even though the axis pointer (the bubble that highlights the closest data point) is no longer present:
NOTE: This MR has been updated and the below no longer applies. Leaving it here for reference because it might be useful info for a GitHub issue I have open with ECharts.
The fix ties into the undocumented
updateAxisPointer
event in echarts:Which as far as I can tell, is the same way the echart itself determines whether it should show the axis pointer or not:
Because there's no
onAxisPointerShown
/onAxisPointerHide
event, and because we need to differentiate between when an axis point is visible vs just mousing over the chart, I decided to implement against theupdateAxisPointer
event despite it not being documented. It will fire for everymousemove
over the chart so it's not exactly performant, but unfortunately I couldn't find another way of doing it.