search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.08k stars 1.02k forks source link

Tooltips are incorrectly rendered if the "points" and "mesh" elements in the layers array are not specified in the correct order #1852

Closed calin-stan closed 2 years ago

calin-stan commented 2 years ago

Describe/explain the bug The tooltip rendered when hovering a point is for the "inverse" element of the hovered one. It makes more sense when you try and reproduce it in the code sandbox examples.

If I have n elements on my chart and hover over the first element, the tooltip of the last element is rendered, if I hover over the second one, the tooltip for the second to last is shown, and so on...

To Reproduce I have created two examples in codesandbox. The code is exactly the same with the exception being the order of the points and mesh elements in the layers array. If the layers array is something like this ['points', 'mesh'] then everything is good and tooltips work as expected. If the layers array is something like this ['mesh', 'points'] then the tooltips are rendered incorrectly.

Disclaimer: I'm not sure if this issue also affects other types of charts. I have only noticed it occurring for the ResponsiveLine component from @nivo/line

Examples:

Steps to reproduce the behavior:

  1. Go to one of the examples
  2. Hover over the first element
  3. Observe which tooltip is rendered
  4. Go to the other example and perform the same steps

Expected behavior I'd expect that either the order of the elements of the layers array doesn't matter and everything works as expected no matter how you specify the elements, or the documentation is updated to reflect that the order in which you specify the elements is important.

Desktop (please complete the following information):

tkonopka commented 2 years ago

This effect is caused by function Points, which reverses an array before rendering points. The problem should be fixed by #1963 by @benurb.

(Curiously, launching an app with React 18's createRoot syntax also makes the tooltips appear at the correct positions, even without the fix.)

plouc commented 2 years ago

The fix has been merged.