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.

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

[charts] Add initial Zoom&Pan to the Pro charts #13405

Merged
merged 97 commits into from
Jul 3, 2024
Merged

[charts] Add initial Zoom&Pan to the Pro charts #13405

merged 97 commits into from
Jul 3, 2024

Conversation

JCQuintas
Copy link
Member

@JCQuintas JCQuintas commented Jun 6, 2024 •
edited
Loading

Concept

Zoom controller

Have a ZoomProvider with zoomRange:[number, number]:[0,100] where we can change the range to show in percent. Eg: zoomRange:[10,90] should show the range between 10% and 90%. A ~20% zoom (90-10=80).

This is then used to calculate the zoomed in range, which should work for all types of scales we currently support. (Thanks @alexfauquette for the math crunching and suggestion to apply changes on range)

Done

  • Zoom calculation
    • Handling axis that start on zero values
    • Handling uneven data
  • Panning
  • Interaction logic on Mobile

Future MR

  • Y Axis zoom
  • Configuration on which axis is zoomable and settings

Reviewing

You can check it working on the zoom and pan page:
https://deploy-preview-13405--material-ui-x.netlify.app/x/react-charts/zoom-and-pan/

@mui-bot
Copy link

mui-bot commented Jun 6, 2024 •
edited
Loading

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

Updated pages:

Generated by 🚫 dangerJS against 5a257e2

@JCQuintas JCQuintas marked this pull request as draft June 6, 2024 16:31
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 7, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 7, 2024

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 7, 2024
@JCQuintas JCQuintas linked an issue Jun 7, 2024 that may be closed by this pull request
[charts][zoom] Allow to zoom on data #12503
Open
alexfauquette
alexfauquette reviewed Jun 11, 2024
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.

Congrats, the strategy looks good 👍

packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx Outdated Show resolved Hide resolved
packages/x-charts/src/context/CartesianProvider/CartesianProviderPro.tsx Outdated Show resolved Hide resolved
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 12, 2024
@github-actions GitHub Actions
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions GitHub Actions
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 27, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 27, 2024
@JCQuintas JCQuintas changed the title [charts] Zoom POC [charts] Add initial Zoom&Pan to the Pro charts Jun 27, 2024
@JCQuintas JCQuintas changed the title [charts] Add initial Zoom&Pan to the Pro charts [charts] Add initial Zoom&Pan to the Pro charts Jun 27, 2024
@JCQuintas JCQuintas marked this pull request as ready for review June 27, 2024 12:30
@JCQuintas JCQuintas self-assigned this Jun 27, 2024
@JCQuintas JCQuintas added new feature New feature or request component: charts This is the name of the generic UI component, not the React module! labels Jun 27, 2024
alexfauquette
alexfauquette approved these changes Jun 28, 2024
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 good. I added some fixes for the components that overflow. I left a few comments about topics I considered when reading it to open discussions

packages/x-charts-pro/src/context/ZoomProvider/ZoomContext.ts
Comment on lines +14 to +17
zoomRange: [0, 100],
setZoomRange: () => {},
isInteracting: false,
setIsInteracting: () => {},
Copy link
Member

Choose a reason for hiding this comment

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

Do you think it will be easily extendable to a model that could support a zoomRange per axis (x/y) and axis id (having different ranges if we have 2 y axes for example)?

Copy link
Member Author

Choose a reason for hiding this comment

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

Nope :)

I was going for making sure the functionality works first, then I could shape the API, but I thought we agreed on improving that on a future PR. 😅

Copy link
Member

Choose a reason for hiding this comment

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

making sure the functionality works first, then I could shape the API

Yes for the coding part, but it would be great to have at least an idea about how you would like to do it. Just to be sure we have a path to it and don't end up with something that can only support one zoom in one direction

packages/x-charts-pro/src/context/ZoomProvider/useSetupPan.ts Outdated Show resolved Hide resolved
packages/x-charts/src/context/CartesianProvider/computeValue.ts Outdated Show resolved Hide resolved
@JCQuintas JCQuintas enabled auto-merge (squash) July 3, 2024 14:49
@JCQuintas JCQuintas merged commit 9f19b9f into mui:master Jul 3, 2024
17 checks passed
@JCQuintas JCQuintas deleted the zoom-poc branch July 3, 2024 15:34
DungTiger pushed a commit to DungTiger/mui-x that referenced this pull request Jul 23, 2024
@JCQuintas @alexfauquette
@flaviendelangle @DungTiger
[charts] Add initial Zoom&Pan to the Pro charts (mui#13405)
6a3adbf 
Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Co-authored-by: alexandre <alex.fauquette@gmail.com>
Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Co-authored-by: Flavien DELANGLE <flaviendelangle@gmail.com>
This was referenced Jul 27, 2024
Open
Open
@arnfinn arnfinn mentioned this pull request Aug 8, 2024
Closed
thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024
@JCQuintas @alexfauquette
@flaviendelangle @thomasmoon
[charts] Add initial Zoom&Pan to the Pro charts (mui#13405)
2a300ff 
Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Co-authored-by: alexandre <alex.fauquette@gmail.com>
Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Co-authored-by: Flavien DELANGLE <flaviendelangle@gmail.com>
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

Assignees

@JCQuintas JCQuintas

Labels
component: charts This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[charts][zoom] Allow to zoom on data
3 participants
@JCQuintas @mui-bot @alexfauquette