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

Wrong PointMouseHandler type on event handlers like onMouseMove #2615

Open
madebyfabian opened this issue Jun 26, 2024 · 1 comment
Open
Labels
bug 📈 line @nivo/line package

Comments

@madebyfabian
Copy link

Describe/explain the bug
When using event handlers like onMouseMove, onMouseEnter and so on with for example the <ResponsiveLine>, the return type of the callback parameters is (point: Point, event: React.MouseEvent) => void in TypeScript. But these types are wrong, since in runtime, the actual type you get is (slice: Slice, event: React.MouseEvent) => void. So instead of getting just one point, you get the whole slice object, including the points: Point[] array.

Not sure if it's only for the line chart or others also.

To Reproduce
Steps to reproduce the behavior:

  1. Use [email protected]
  2. Create a <ResponsiveLine data={...} onMouseMove={(...params) => { console.log(params) }} />
  3. See the type mismatch in your editor versus the console logs real values

Expected behavior
Types match

@madebyfabian
Copy link
Author

madebyfabian commented Jun 27, 2024

I also discovered that onTouchMove always returns the same slice, no matter where the finger is touching the chart. onMouseMove works perfectly fine and returns the exact slice the user hovers over. Is this by design?

const handeOnTouchMove = useCallback(
event => {
// This event will be locked to the element that was touched originally
// We find the element that is currently being "hovered over" by getting the element at the touch point
const touchPoint = event.touches[0]
const touchingElement = document.elementFromPoint(
touchPoint.clientX,
touchPoint.clientY
)
// Is this a nivo ref?
const touchingSliceId = touchingElement?.getAttribute('data-ref')
if (touchingSliceId) {
// Is this a slice for this graph?
const slice = slices.find(slice => slice.id === touchingSliceId)
if (slice) {
showTooltipFromEvent(createElement(tooltip, { slice, axis }), event, 'right')
setCurrent(slice)
}
}
// Note here, this will pass the original slice, not the one we found
// But this can be found with document.elementFromPoint()
onTouchMove && onTouchMove(slice, event)
},
[axis, onTouchMove, setCurrent, showTooltipFromEvent, slice, slices, tooltip]
)

And is there a better way to get the current slice/points that is being hovered/touched over?

Not sure if this could be related with the type mismatch, if not, I can open a seperate issue.

@plouc plouc added bug 📈 line @nivo/line package labels Jul 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 📈 line @nivo/line package
Projects
None yet
Development

No branches or pull requests

2 participants