Skip to content

[charts] Update zoom slider design #17682

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

Merged
merged 7 commits into from
May 6, 2025
Merged

[charts] Update zoom slider design #17682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b21966a
[charts] Update zoom slider design
bernardobelchior May 5, 2025
06a76c3
Gen docs. Remove size mention in docs.
bernardobelchior May 5, 2025
858fac3
Add margin
bernardobelchior May 5, 2025
2d494a1
Update demo
bernardobelchior May 5, 2025
e6ba3e3
Update color
bernardobelchior May 5, 2025
df62fa7
Update demo
bernardobelchior May 5, 2025
47aab94
Avoid exporting internal constants
bernardobelchior May 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions docs/data/charts/zoom-and-pan/ZoomSlider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const data = Array.from({ length: dataLength }).map((_, i) => ({
}));
const series2Data = Array.from({ length: dataLength }).map((_, i) => ({
x: i,
y: 50 + Math.sin(i / 5) * 25,
y: 50 + Math.sin(i / 10) * 25,
}));

const xData = data.map((d) => d.x);
Expand Down Expand Up @@ -38,12 +38,23 @@ export default function ZoomSlider() {
},
]}
yAxis={[
{ zoom: { slider: { enabled: true } } },
{ id: 'y2', position: 'right', zoom: { slider: { enabled: true } } },
{ id: 'y', width: 28, zoom: { slider: { enabled: true } } },
{
id: 'y2',
position: 'right',
width: 28,
zoom: { slider: { enabled: true } },
},
]}
series={[{ data }, { data: series2Data, xAxisId: 'x2', yAxisId: 'y2' }]}
height={400}
margin={{ bottom: 40 }}
initialZoom={[
{ axisId: 'x', start: 10, end: 90 },
{ axisId: 'x2', start: 30, end: 70 },
{ axisId: 'y', start: 10, end: 90 },
{ axisId: 'y2', start: 30, end: 70 },
]}
/>
);
}
17 changes: 14 additions & 3 deletions docs/data/charts/zoom-and-pan/ZoomSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const data = Array.from({ length: dataLength }).map((_, i) => ({
}));
const series2Data = Array.from({ length: dataLength }).map((_, i) => ({
x: i,
y: 50 + Math.sin(i / 5) * 25,
y: 50 + Math.sin(i / 10) * 25,
}));

const xData = data.map((d) => d.x);
Expand Down Expand Up @@ -38,12 +38,23 @@ export default function ZoomSlider() {
},
]}
yAxis={[
{ zoom: { slider: { enabled: true } } },
{ id: 'y2', position: 'right', zoom: { slider: { enabled: true } } },
{ id: 'y', width: 28, zoom: { slider: { enabled: true } } },
{
id: 'y2',
position: 'right',
width: 28,
zoom: { slider: { enabled: true } },
},
]}
series={[{ data }, { data: series2Data, xAxisId: 'x2', yAxisId: 'y2' }]}
height={400}
margin={{ bottom: 40 }}
initialZoom={[
{ axisId: 'x', start: 10, end: 90 },
{ axisId: 'x2', start: 30, end: 70 },
{ axisId: 'y', start: 10, end: 90 },
{ axisId: 'y2', start: 30, end: 70 },
]}
/>
);
}
2 changes: 0 additions & 2 deletions docs/data/charts/zoom-and-pan/zoom-and-pan.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,6 @@ You can provide an overview and allow the manipulation of the zoomed area by set

{{"demo": "ZoomSlider.js"}}

Optionally, you can set the `zoom.slider.size` property to customize the zoom slider's size, that is, the height on an x-axis and the width on a y-axis.
Copy link
Member

Choose a reason for hiding this comment

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

I assume you removed this option because the size might vary according to the presence or not of the preview.

If yes, I would be in favor of keeping it, and adapting the default value according to the presence (or not) of a preview (when we introduce it).

This size does not need to be the size of the slider itself, but the size allocated to render the slider.

Basically here you would keep all you constants, and use the ZOOM_SLIDER_SIZE as a default value for zoom.slider.size. Such that users could create smaller/larger sliders and use adapt this value

Copy link
Member Author

Choose a reason for hiding this comment

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

I removed this option because the size is now kind of fixed. If we increase the size, how do we scale all the components of the slider?

and use the ZOOM_SLIDER_SIZE as a default value for zoom.slider.size. Such that users could create smaller/larger sliders and use adapt this value

And center the slider in that size? Yeah, I could do that. We would need to have a minimum value, though, to avoid bleeding onto other elements of the chart. We could remove the internal concept of margin in that case.

Copy link
Member

Choose a reason for hiding this comment

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

We could remove the internal concept of margin in that case.

For me you can keep all the rest as it is.

The component renders a fixed size slider, but the size available for the slider can be customized.

For now the only usage would be if a user create his own super small slider and then need to set zoom.slider.size = 10.

But I assume with time we will make the creation of custom slider easier and easier so it worths keeping this entry point

Copy link
Member Author

Choose a reason for hiding this comment

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

Makes sense. I'll bring that code back in a follow-up where we allow the slider to be customized using a slot.

Copy link
Member Author

Choose a reason for hiding this comment

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

PR: #17736


### Composition

When using composition, you can render the axes' sliders by rendering the `ChartZoomSlider` component.
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/x/api/charts/bar-chart-pro.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/pages/x/api/charts/line-chart-pro.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/pages/x/api/charts/scatter-chart-pro.json
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 0 additions & 16 deletions packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -466,7 +465,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -547,7 +545,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -628,7 +625,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -709,7 +705,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -790,7 +785,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -871,7 +865,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -952,7 +945,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -1052,7 +1044,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -1141,7 +1132,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -1221,7 +1211,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -1301,7 +1290,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -1381,7 +1369,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -1461,7 +1448,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -1541,7 +1527,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down Expand Up @@ -1621,7 +1606,6 @@ BarChartPro.propTypes = {
panning: PropTypes.bool,
slider: PropTypes.shape({
enabled: PropTypes.bool,
size: PropTypes.number,
}),
step: PropTypes.number,
}),
Expand Down
8 changes: 2 additions & 6 deletions packages/x-charts-pro/src/ChartZoomSlider/ChartZoomSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,7 @@ export function ChartZoomSlider() {
return null;
}

return (
<ChartAxisZoomSlider key={axisId} size={slider.size} axisId={axisId} axisDirection="x" />
);
return <ChartAxisZoomSlider key={axisId} axisId={axisId} axisDirection="x" />;
})}
{yAxisIds.map((axisId) => {
const yAxis = yAxes[axisId];
Expand All @@ -33,9 +31,7 @@ export function ChartZoomSlider() {
return null;
}

return (
<ChartAxisZoomSlider key={axisId} size={slider.size} axisId={axisId} axisDirection="y" />
);
return <ChartAxisZoomSlider key={axisId} axisId={axisId} axisDirection="y" />;
})}
</React.Fragment>
);
Expand Down
Loading