Skip to content

Commit 94211fd

Browse files
bernardobelchiorbernardobelchior
authored
[charts] Update zoom slider design (#17682)
1 parent e66bec9 commit 94211fd

File tree

21 files changed

+100
-121
lines changed

21 files changed

+100
-121
lines changed

‎docs/data/charts/zoom-and-pan/ZoomSlider.js

+14-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const data = Array.from({ length: dataLength }).map((_, i) => ({
88
}));
99
const series2Data = Array.from({ length: dataLength }).map((_, i) => ({
1010
x: i,
11-
y: 50 + Math.sin(i / 5) * 25,
11+
y: 50 + Math.sin(i / 10) * 25,
1212
}));
1313

1414
const xData = data.map((d) => d.x);
@@ -38,12 +38,23 @@ export default function ZoomSlider() {
3838
},
3939
]}
4040
yAxis={[
41-
{ zoom: { slider: { enabled: true } } },
42-
{ id: 'y2', position: 'right', zoom: { slider: { enabled: true } } },
41+
{ id: 'y', width: 28, zoom: { slider: { enabled: true } } },
42+
{
43+
id: 'y2',
44+
position: 'right',
45+
width: 28,
46+
zoom: { slider: { enabled: true } },
47+
},
4348
]}
4449
series={[{ data }, { data: series2Data, xAxisId: 'x2', yAxisId: 'y2' }]}
4550
height={400}
4651
margin={{ bottom: 40 }}
52+
initialZoom={[
53+
{ axisId: 'x', start: 10, end: 90 },
54+
{ axisId: 'x2', start: 30, end: 70 },
55+
{ axisId: 'y', start: 10, end: 90 },
56+
{ axisId: 'y2', start: 30, end: 70 },
57+
]}
4758
/>
4859
);
4960
}

‎docs/data/charts/zoom-and-pan/ZoomSlider.tsx

+14-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const data = Array.from({ length: dataLength }).map((_, i) => ({
88
}));
99
const series2Data = Array.from({ length: dataLength }).map((_, i) => ({
1010
x: i,
11-
y: 50 + Math.sin(i / 5) * 25,
11+
y: 50 + Math.sin(i / 10) * 25,
1212
}));
1313

1414
const xData = data.map((d) => d.x);
@@ -38,12 +38,23 @@ export default function ZoomSlider() {
3838
},
3939
]}
4040
yAxis={[
41-
{ zoom: { slider: { enabled: true } } },
42-
{ id: 'y2', position: 'right', zoom: { slider: { enabled: true } } },
41+
{ id: 'y', width: 28, zoom: { slider: { enabled: true } } },
42+
{
43+
id: 'y2',
44+
position: 'right',
45+
width: 28,
46+
zoom: { slider: { enabled: true } },
47+
},
4348
]}
4449
series={[{ data }, { data: series2Data, xAxisId: 'x2', yAxisId: 'y2' }]}
4550
height={400}
4651
margin={{ bottom: 40 }}
52+
initialZoom={[
53+
{ axisId: 'x', start: 10, end: 90 },
54+
{ axisId: 'x2', start: 30, end: 70 },
55+
{ axisId: 'y', start: 10, end: 90 },
56+
{ axisId: 'y2', start: 30, end: 70 },
57+
]}
4758
/>
4859
);
4960
}

‎docs/data/charts/zoom-and-pan/zoom-and-pan.md

-2
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,6 @@ You can provide an overview and allow the manipulation of the zoomed area by set
6262

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

65-
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.
66-
6765
### Composition
6866

6967
When using composition, you can render the axes' sliders by rendering the `ChartZoomSlider` component.

‎docs/pages/x/api/charts/bar-chart-pro.json

+2-2
Large diffs are not rendered by default.

‎docs/pages/x/api/charts/line-chart-pro.json

+2-2
Large diffs are not rendered by default.

‎docs/pages/x/api/charts/scatter-chart-pro.json

+2-2
Large diffs are not rendered by default.

‎packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

-16
Original file line numberDiff line numberDiff line change
@@ -376,7 +376,6 @@ BarChartPro.propTypes = {
376376
panning: PropTypes.bool,
377377
slider: PropTypes.shape({
378378
enabled: PropTypes.bool,
379-
size: PropTypes.number,
380379
}),
381380
step: PropTypes.number,
382381
}),
@@ -466,7 +465,6 @@ BarChartPro.propTypes = {
466465
panning: PropTypes.bool,
467466
slider: PropTypes.shape({
468467
enabled: PropTypes.bool,
469-
size: PropTypes.number,
470468
}),
471469
step: PropTypes.number,
472470
}),
@@ -547,7 +545,6 @@ BarChartPro.propTypes = {
547545
panning: PropTypes.bool,
548546
slider: PropTypes.shape({
549547
enabled: PropTypes.bool,
550-
size: PropTypes.number,
551548
}),
552549
step: PropTypes.number,
553550
}),
@@ -628,7 +625,6 @@ BarChartPro.propTypes = {
628625
panning: PropTypes.bool,
629626
slider: PropTypes.shape({
630627
enabled: PropTypes.bool,
631-
size: PropTypes.number,
632628
}),
633629
step: PropTypes.number,
634630
}),
@@ -709,7 +705,6 @@ BarChartPro.propTypes = {
709705
panning: PropTypes.bool,
710706
slider: PropTypes.shape({
711707
enabled: PropTypes.bool,
712-
size: PropTypes.number,
713708
}),
714709
step: PropTypes.number,
715710
}),
@@ -790,7 +785,6 @@ BarChartPro.propTypes = {
790785
panning: PropTypes.bool,
791786
slider: PropTypes.shape({
792787
enabled: PropTypes.bool,
793-
size: PropTypes.number,
794788
}),
795789
step: PropTypes.number,
796790
}),
@@ -871,7 +865,6 @@ BarChartPro.propTypes = {
871865
panning: PropTypes.bool,
872866
slider: PropTypes.shape({
873867
enabled: PropTypes.bool,
874-
size: PropTypes.number,
875868
}),
876869
step: PropTypes.number,
877870
}),
@@ -952,7 +945,6 @@ BarChartPro.propTypes = {
952945
panning: PropTypes.bool,
953946
slider: PropTypes.shape({
954947
enabled: PropTypes.bool,
955-
size: PropTypes.number,
956948
}),
957949
step: PropTypes.number,
958950
}),
@@ -1052,7 +1044,6 @@ BarChartPro.propTypes = {
10521044
panning: PropTypes.bool,
10531045
slider: PropTypes.shape({
10541046
enabled: PropTypes.bool,
1055-
size: PropTypes.number,
10561047
}),
10571048
step: PropTypes.number,
10581049
}),
@@ -1141,7 +1132,6 @@ BarChartPro.propTypes = {
11411132
panning: PropTypes.bool,
11421133
slider: PropTypes.shape({
11431134
enabled: PropTypes.bool,
1144-
size: PropTypes.number,
11451135
}),
11461136
step: PropTypes.number,
11471137
}),
@@ -1221,7 +1211,6 @@ BarChartPro.propTypes = {
12211211
panning: PropTypes.bool,
12221212
slider: PropTypes.shape({
12231213
enabled: PropTypes.bool,
1224-
size: PropTypes.number,
12251214
}),
12261215
step: PropTypes.number,
12271216
}),
@@ -1301,7 +1290,6 @@ BarChartPro.propTypes = {
13011290
panning: PropTypes.bool,
13021291
slider: PropTypes.shape({
13031292
enabled: PropTypes.bool,
1304-
size: PropTypes.number,
13051293
}),
13061294
step: PropTypes.number,
13071295
}),
@@ -1381,7 +1369,6 @@ BarChartPro.propTypes = {
13811369
panning: PropTypes.bool,
13821370
slider: PropTypes.shape({
13831371
enabled: PropTypes.bool,
1384-
size: PropTypes.number,
13851372
}),
13861373
step: PropTypes.number,
13871374
}),
@@ -1461,7 +1448,6 @@ BarChartPro.propTypes = {
14611448
panning: PropTypes.bool,
14621449
slider: PropTypes.shape({
14631450
enabled: PropTypes.bool,
1464-
size: PropTypes.number,
14651451
}),
14661452
step: PropTypes.number,
14671453
}),
@@ -1541,7 +1527,6 @@ BarChartPro.propTypes = {
15411527
panning: PropTypes.bool,
15421528
slider: PropTypes.shape({
15431529
enabled: PropTypes.bool,
1544-
size: PropTypes.number,
15451530
}),
15461531
step: PropTypes.number,
15471532
}),
@@ -1621,7 +1606,6 @@ BarChartPro.propTypes = {
16211606
panning: PropTypes.bool,
16221607
slider: PropTypes.shape({
16231608
enabled: PropTypes.bool,
1624-
size: PropTypes.number,
16251609
}),
16261610
step: PropTypes.number,
16271611
}),

‎packages/x-charts-pro/src/ChartZoomSlider/ChartZoomSlider.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,7 @@ export function ChartZoomSlider() {
2020
return null;
2121
}
2222

23-
return (
24-
<ChartAxisZoomSlider key={axisId} size={slider.size} axisId={axisId} axisDirection="x" />
25-
);
23+
return <ChartAxisZoomSlider key={axisId} axisId={axisId} axisDirection="x" />;
2624
})}
2725
{yAxisIds.map((axisId) => {
2826
const yAxis = yAxes[axisId];
@@ -33,9 +31,7 @@ export function ChartZoomSlider() {
3331
return null;
3432
}
3533

36-
return (
37-
<ChartAxisZoomSlider key={axisId} size={slider.size} axisId={axisId} axisDirection="y" />
38-
);
34+
return <ChartAxisZoomSlider key={axisId} axisId={axisId} axisDirection="y" />;
3935
})}
4036
</React.Fragment>
4137
);

0 commit comments

Comments
 (0)