-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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.
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
[charts] Allow Zoom
to be controllable
#13858
Merged
Merged
Changes from all commits
Commits
Show all changes
31 commits
Select commit
Hold shift + click to select a range
200f1cf
Setup controllable zoom provider
JCQuintas edd7287
Add props to chart components
JCQuintas 490976b
Make sure props are passed to base components
JCQuintas 2e1729c
Pass props to responsive container
JCQuintas a9bca05
Update typings
JCQuintas fa493a1
update setup zoom
JCQuintas 6a22d69
use useCallback for function
JCQuintas 0881fef
Add example
JCQuintas 84c37b4
Diff will be reset at end
JCQuintas 11fa572
Merge commit '8f3964d87a73fe7f463db05d004ba14cdc79d158' into zoom-con…
JCQuintas cbe460b
Update zoom and onZoomChange types
JCQuintas efd54c8
Update proptypes
JCQuintas 474fe38
disable zoom props on heatmap
JCQuintas aa54fe5
Improve typings
JCQuintas 3582782
Export only necessary public typings
JCQuintas f88f2e9
Update api
JCQuintas 3532c2e
Merge commit '45facf87e7b86072c26ce8ffd71b26d256bc3c24' into zoom-con…
JCQuintas 18b8b11
Apply suggestions from code review
JCQuintas 5c6cb0e
From ...restProps to ...other
JCQuintas f447c60
Move useResponsiveChartContainerProps inside the pro version
JCQuintas 59afaa6
Don't initialize zoom data for users
JCQuintas 9063bff
Ensure app doesn't break with wrong axis id
JCQuintas 8cbff71
Update API and document important public apis
JCQuintas 5264729
Initialize zoom when not controlled
JCQuintas e089235
Got to initialize data regardless of control
JCQuintas cf74279
Merge commit 'cd68580bd2c80a44960952ce8fbdddf7c2ccbd89' into zoom-con…
JCQuintas dd59b07
Fix case
JCQuintas b9650e0
move entire hook logic to pro hook
JCQuintas ada828c
remove [[...]] usage
JCQuintas 3b92675
Move default zoom data initialization to provider
JCQuintas 43ab3fa
Use ref to prevent re-renders
JCQuintas File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,145 @@ | ||
import * as React from 'react'; | ||
import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; | ||
|
||
import { Button } from '@mui/base'; | ||
|
||
export default function ZoomControlled() { | ||
const [zoom, setZoom] = React.useState([ | ||
{ | ||
axisId: 'my-x-axis', | ||
start: 20, | ||
end: 40, | ||
}, | ||
]); | ||
|
||
return ( | ||
<div> | ||
<Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}> | ||
Reset zoom | ||
</Button> | ||
<LineChartPro | ||
{...chartProps} | ||
zoom={zoom} | ||
onZoomChange={setZoom} | ||
xAxis={[ | ||
{ | ||
zoom: true, | ||
scaleType: 'point', | ||
id: 'my-x-axis', | ||
data: data.map((v, i) => i), | ||
}, | ||
]} | ||
/> | ||
</div> | ||
); | ||
} | ||
|
||
const data = [ | ||
{ | ||
y1: 443.28, | ||
y2: 153.9, | ||
}, | ||
{ | ||
y1: 110.5, | ||
y2: 217.8, | ||
}, | ||
{ | ||
y1: 175.23, | ||
y2: 286.32, | ||
}, | ||
{ | ||
y1: 195.97, | ||
y2: 325.12, | ||
}, | ||
{ | ||
y1: 351.77, | ||
y2: 144.58, | ||
}, | ||
{ | ||
y1: 43.253, | ||
y2: 146.51, | ||
}, | ||
{ | ||
y1: 376.34, | ||
y2: 309.69, | ||
}, | ||
{ | ||
y1: 31.514, | ||
y2: 236.38, | ||
}, | ||
{ | ||
y1: 231.31, | ||
y2: 440.72, | ||
}, | ||
{ | ||
y1: 108.04, | ||
y2: 20.29, | ||
}, | ||
{ | ||
y1: 321.77, | ||
y2: 484.17, | ||
}, | ||
{ | ||
y1: 120.18, | ||
y2: 54.962, | ||
}, | ||
{ | ||
y1: 366.2, | ||
y2: 418.5, | ||
}, | ||
{ | ||
y1: 451.45, | ||
y2: 181.32, | ||
}, | ||
{ | ||
y1: 294.8, | ||
y2: 440.9, | ||
}, | ||
{ | ||
y1: 121.83, | ||
y2: 273.52, | ||
}, | ||
{ | ||
y1: 287.7, | ||
y2: 346.7, | ||
}, | ||
{ | ||
y1: 134.06, | ||
y2: 74.528, | ||
}, | ||
{ | ||
y1: 104.5, | ||
y2: 150.9, | ||
}, | ||
{ | ||
y1: 413.07, | ||
y2: 26.483, | ||
}, | ||
{ | ||
y1: 74.68, | ||
y2: 333.2, | ||
}, | ||
{ | ||
y1: 360.6, | ||
y2: 422.0, | ||
}, | ||
{ | ||
y1: 330.72, | ||
y2: 488.06, | ||
}, | ||
]; | ||
|
||
const chartProps = { | ||
width: 600, | ||
height: 300, | ||
series: [ | ||
{ | ||
label: 'Series A', | ||
data: data.map((v) => v.y1), | ||
}, | ||
{ | ||
label: 'Series B', | ||
data: data.map((v) => v.y2), | ||
}, | ||
], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,145 @@ | ||
import * as React from 'react'; | ||
import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; | ||
import { ZoomData } from '@mui/x-charts-pro/context'; | ||
import { Button } from '@mui/base'; | ||
|
||
export default function ZoomControlled() { | ||
const [zoom, setZoom] = React.useState<ZoomData[]>([ | ||
{ | ||
axisId: 'my-x-axis', | ||
start: 20, | ||
end: 40, | ||
}, | ||
]); | ||
|
||
return ( | ||
<div> | ||
<Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}> | ||
Reset zoom | ||
</Button> | ||
<LineChartPro | ||
{...chartProps} | ||
zoom={zoom} | ||
onZoomChange={setZoom} | ||
xAxis={[ | ||
{ | ||
zoom: true, | ||
scaleType: 'point', | ||
id: 'my-x-axis', | ||
data: data.map((v, i) => i), | ||
}, | ||
]} | ||
/> | ||
</div> | ||
); | ||
} | ||
|
||
const data = [ | ||
{ | ||
y1: 443.28, | ||
y2: 153.9, | ||
}, | ||
{ | ||
y1: 110.5, | ||
y2: 217.8, | ||
}, | ||
{ | ||
y1: 175.23, | ||
y2: 286.32, | ||
}, | ||
{ | ||
y1: 195.97, | ||
y2: 325.12, | ||
}, | ||
{ | ||
y1: 351.77, | ||
y2: 144.58, | ||
}, | ||
{ | ||
y1: 43.253, | ||
y2: 146.51, | ||
}, | ||
{ | ||
y1: 376.34, | ||
y2: 309.69, | ||
}, | ||
{ | ||
y1: 31.514, | ||
y2: 236.38, | ||
}, | ||
{ | ||
y1: 231.31, | ||
y2: 440.72, | ||
}, | ||
{ | ||
y1: 108.04, | ||
y2: 20.29, | ||
}, | ||
{ | ||
y1: 321.77, | ||
y2: 484.17, | ||
}, | ||
{ | ||
y1: 120.18, | ||
y2: 54.962, | ||
}, | ||
{ | ||
y1: 366.2, | ||
y2: 418.5, | ||
}, | ||
{ | ||
y1: 451.45, | ||
y2: 181.32, | ||
}, | ||
{ | ||
y1: 294.8, | ||
y2: 440.9, | ||
}, | ||
{ | ||
y1: 121.83, | ||
y2: 273.52, | ||
}, | ||
{ | ||
y1: 287.7, | ||
y2: 346.7, | ||
}, | ||
{ | ||
y1: 134.06, | ||
y2: 74.528, | ||
}, | ||
{ | ||
y1: 104.5, | ||
y2: 150.9, | ||
}, | ||
{ | ||
y1: 413.07, | ||
y2: 26.483, | ||
}, | ||
{ | ||
y1: 74.68, | ||
y2: 333.2, | ||
}, | ||
{ | ||
y1: 360.6, | ||
y2: 422.0, | ||
}, | ||
{ | ||
y1: 330.72, | ||
y2: 488.06, | ||
}, | ||
]; | ||
|
||
const chartProps = { | ||
width: 600, | ||
height: 300, | ||
series: [ | ||
{ | ||
label: 'Series A', | ||
data: data.map((v) => v.y1), | ||
}, | ||
{ | ||
label: 'Series B', | ||
data: data.map((v) => v.y2), | ||
}, | ||
], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}> | ||
Reset zoom | ||
</Button> | ||
<LineChartPro | ||
{...chartProps} | ||
zoom={zoom} | ||
onZoomChange={setZoom} | ||
xAxis={[ | ||
{ | ||
zoom: true, | ||
scaleType: 'point', | ||
id: 'my-x-axis', | ||
data: data.map((v, i) => i), | ||
}, | ||
]} | ||
/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Currently
axisId
is required. Should we allow{start,end}
to be passed when there is only one zoom enabled?