Touch crosshair for line graphs

[WilliamABradley]

This adds the ability to shift the crosshair on mobile by touching and holding along the graph surface just like Google's Stock and Exchange rate graphs, which you can run your finger along on mobile.

This option is only available in mesh mode, as it appears that slices would have to be refactored to figure out when touchMove moves across different elements.

Also, it seems that in order to build, I needed to add:

    "@babel/preset-env": "^7.21.5",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.5",

Not sure if the package lock is wonk, or if the issue is me being on Windows.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nivo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 5, 2024 7:36am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit fd757b9:

Sandbox	Source
nivo	Configuration

[WilliamABradley]

@plouc I've address the feedback 🙂
Not sure why vercel preview is failing and I can't access any logs. Do you know why?

[plouc]

LGTM, thank you for the adjustments!

[plouc]

@plouc I've address the feedback 🙂 Not sure why vercel preview is failing and I can't access any logs. Do you know why?

@WilliamABradley, the build fails due to a missing default value for the new property, did you try to build the website locally?

[WilliamABradley]

I can take a look at the website build tonight 🙂

Also, I think I need to add support for slices to this feature, as my use case doesn't actually need the voronoi mesh (I think maybe it is worth describing the purpose of slices in the documentation as I didn't understand why it was needed, and what this difference between slices and mesh was).

Correct me if I'm wrong, slices allows for a vertical/horizontal crosshair tracking on one axis, rather than Voronoi which is closest point reguardless of axis? It felt unnatural for my FX graph for the crosshair to be skipping around (Due to different high and low points), which I only gathered from turning on the separate debug flags.

Are you happy for me to add that slice support to this PR or would it make sense to make another?

[plouc]

I can take a look at the website build tonight 🙂

Thank you :)

Also, I think I need to add support for slices to this feature, as my use case doesn't actually need the voronoi mesh (I think maybe it is worth describing the purpose of slices in the documentation as I didn't understand why it was needed, and what this difference between slices and mesh was).

Correct me if I'm wrong, slices allows for a vertical/horizontal crosshair tracking on one axis, rather than Voronoi which is closest point reguardless of axis? It felt unnatural for my FX graph for the crosshair to be skipping around (Due to different high and low points), which I only gathered from turning on the separate debug flags.

Slices can be useful when you want to visualize a "slice" of data all at once when hovering a point belonging to that slice, while with the voronoi mesh we only show one data point. The voronoi mesh is also useful for very dense charts, as it can become difficult to hover a specific point, but it could be improved, for example by adding a secondary radius to restrict the detection, so that it's not constantly jumping around.

Are you happy for me to add that slice support to this PR or would it make sense to make another?

This PR is fine.

[WilliamABradley]

Gatsby straight up refuses to comply on Windows 🤷
Luckily I finally got it fixed and running on my work Macbook 😄

I got the touch support for slices working nicely, and I added an explanation to isInteractive about the pros/cons for mesh vs slices

[plouc]

LGTM, I'm not a big fan of passing all the slices and accessing the DOM directly to find the current slice, but I don't have anything else to suggest.

[WilliamABradley]

Yeah, it is a little gross, but the alternative would be a large refactor to use an interceptor like mesh, but that would be a lot of work and could introduce bugs.