[charts][zoom] Support side scrolling to pan

[tibo-glamarche]

Summary

With the new "Zoom & Pan" feature in charts, I think it would be useful to be able to side scroll to pan the chart.

https://mui.com/x/react-charts/zoom-and-pan/

Search keywords: Zoom, pan, scroll

[JCQuintas]

Hi @tibo-glamarche, thanks for the suggestion 💪

Would you like to elaborate a bit more on what you would like to see regarding side scrolling? How it would behave on different devices, eg: mobile, desktop-mouse, desktop-touchpad?

[tibo-glamarche]

• On desktop-mouse: It should pan left/right with a side scroll wheel or during Shift + scroll
• On desktop-trackpad: It should pan left/right while sliding to the left/right with two fingers
• On mobile touchscreen: It should pan left/right while sliding to the left/right with one finger

[oliviertassinari]

#13798 (comment) makes a lot of sense to me. I got confused because it wouldn't behave this way.

I'm making the same arguments in #12503 (comment). It goes like this:

• On a trackpad, mouse down + drag + mouse up (the same sequence of movement as to select text) quickly warms up the part of the finger in contact with the trackpad because of the friction force ♨️. It's ok for small text selection areas, but really unpleasant when moving a lot, e.g. on Google Maps ❌. I wish Google Maps changed their UX, I hate it e.g. Add touchpad gesture support for pan and zoom Leaflet/Leaflet#7046
• I was expecting it to behave closely to Figma, FigJam, Miro, Excalidraw, tldraw, Gimp, Canva, etc.:

a. Pan vertically: to move up, down
b. Pan horizontally: to left, right
c. Ctrl/Cmd + Pan vertically: to zoom in and out
d. Scroll wheel: to zoom in and out
e. Mouse down + move + mouse up: to select a zoom area. However, if we can't select an area on the chart, then have this movement be: to move up, down, left, right

• An example with https://github.com/xyflow/xyflow. I can set panOnScroll={true} to behave like I would expect: https://stackblitz.com/edit/srz5rh?file=App.tsx. Though, it's a bit buggy ❌, I have to focus the element to be able to use the Ctrl modifier to zoom instead of moving the canvas (it should be a global listener)

A potential solution: #16676 (comment)