Skip to content

[charts] Add pressAndDrag pan gesture #19779

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 12 commits into from
Oct 2, 2025
Merged

[charts] Add pressAndDrag pan gesture #19779

merged 12 commits into from
Oct 2, 2025

Conversation

JCQuintas
Copy link
Member

Fixes #18957

Similar to #19727

Changelog

The chart zoom now supports the pressAndDrag gesture. Pan by pressing and dragging.

@JCQuintas JCQuintas self-assigned this Oct 1, 2025
@JCQuintas JCQuintas added type: new feature Expand the scope of the product to solve a new problem. plan: Pro Impact at least one Pro user. scope: charts Changes related to the charts. labels Oct 1, 2025
@mui-bot
Copy link

mui-bot commented Oct 1, 2025 •
edited
Loading

Deploy preview: https://deploy-preview-19779--material-ui-x.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 🔺+4.78KB(+1.44%) 🔺+231B(+0.23%)
@mui/x-charts-pro 🔺+5.73KB(+1.34%) 🔺+337B(+0.25%)
@mui/x-charts-premium 🔺+5.73KB(+1.33%) 🔺+343B(+0.26%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against c271a08

@codspeed-hq CodSpeed HQ
Copy link

codspeed-hq bot commented Oct 1, 2025 •
edited
Loading

CodSpeed Instrumentation Performance Report

Merging #19779 will not alter performance

Comparing JCQuintas:press-and-drag-2 (c271a08) with master (4093fe0)1

Summary

✅ 12 untouched

Footnotes

  1. No successful run was found on master (41fb9be) during the generation of this report, so 4093fe0 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

@codspeed-hq CodSpeed HQ
Copy link

codspeed-hq bot commented Oct 1, 2025

CodSpeed Instrumentation Performance Report

Merging #19779 will not alter performance

Comparing JCQuintas:press-and-drag-2 (276604b) with master (af1fc43)

Summary

✅ 12 untouched

@alexfauquette
Copy link
Member

material v2 call that "long press and drag"

But it's not working on my mobile phone. I suspect the oncontextmenu event is disturbing your interactions

@JCQuintas
Copy link
Member Author

material v2 call that "long press and drag"

🤔 we could name it long press, but I suspect press is shorter and direct enough

But it's not working on my mobile phone. I suspect the oncontextmenu event is disturbing your interactions

Should be fixed now.

alexfauquette
alexfauquette approved these changes Oct 2, 2025
View reviewed changes
Copy link
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks clear. Effectively "long press" might be too long :)

docs/data/charts/zoom-and-pan/ZoomAndPanInteractions.js
Comment on lines +28 to +32
pressAndDrag: {
displayName: 'Press and drag',
knob: 'switch',
defaultValue: false,
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of topic for this PR but it' would be nice to have a knob: "title" to do the following. Otherwise it's a bit herder to know if the event impacts panning or zooming

image

...src/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.ts
Comment on lines 91 to +95
dragThreshold: 10,
dragTimeout: 1000,
}),
new PressAndDragGesture({
name: 'zoomPressAndDrag',
dragThreshold: 10,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is their a reason why removingmaxDistance to use the default vbalue and not doing the same with dragThreshold?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the other values were the default. The default dragThreshold is 0

@JCQuintas JCQuintas merged commit 43cf0ed into mui:master Oct 2, 2025
22 checks passed
@JCQuintas JCQuintas deleted the press-and-drag-2 branch October 2, 2025 12:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alexfauquette alexfauquette alexfauquette approved these changes

@bernardobelchior bernardobelchior Awaiting requested review from bernardobelchior bernardobelchior is a code owner

@prakhargupta1 prakhargupta1 Awaiting requested review from prakhargupta1 prakhargupta1 is a code owner

Assignees

@JCQuintas JCQuintas

Labels

plan: Pro Impact at least one Pro user. scope: charts Changes related to the charts. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[charts] Add onPressAndDrag pan gesture

3 participants

@JCQuintas @mui-bot @alexfauquette