Skip to content

Commit

Permalink
[charts] Allow zoom on Y axis and add zoom options to configure zoomi…
Browse files Browse the repository at this point in the history 
…ng behaviour (mui#13726)

Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
  • Loading branch information
@JCQuintas @alexfauquette @thomasmoon
2 people authored and thomasmoon committed Sep 6, 2024
1 parent a2e3423 commit aab47d1
Show file tree
Hide file tree
Showing 38 changed files with 867 additions and 257 deletions.
24 changes: 16 additions & 8 deletions docs/data/charts/zoom-and-pan/ZoomBarChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,14 @@ export default function ZoomBarChart() {
<BarChartPro
width={600}
height={300}
zoom
series={[
xAxis={[
{
label: 'Series A',
data: data.map((v) => v.y1),
},
{
label: 'Series B',
data: data.map((v) => v.y2),
scaleType: 'band',
data: data.map((v, i) => i),
zoom: true,
},
]}
series={series}
/>
);
}
Expand Down Expand Up @@ -115,3 +112,14 @@ const data = [
y2: 488.06,
},
];

const series = [
{
label: 'Series A',
data: data.map((v) => v.y1),
},
{
label: 'Series B',
data: data.map((v) => v.y2),
},
];
24 changes: 16 additions & 8 deletions docs/data/charts/zoom-and-pan/ZoomBarChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,14 @@ export default function ZoomBarChart() {
<BarChartPro
width={600}
height={300}
zoom
series={[
xAxis={[
{
label: 'Series A',
data: data.map((v) => v.y1),
},
{
label: 'Series B',
data: data.map((v) => v.y2),
scaleType: 'band',
data: data.map((v, i) => i),
zoom: true,
},
]}
series={series}
/>
);
}
Expand Down Expand Up @@ -115,3 +112,14 @@ const data = [
y2: 488.06,
},
];

const series = [
{
label: 'Series A',
data: data.map((v) => v.y1),
},
{
label: 'Series B',
data: data.map((v) => v.y2),
},
];
13 changes: 5 additions & 8 deletions docs/data/charts/zoom-and-pan/ZoomBarChart.tsx.preview
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
<BarChartPro
width={600}
height={300}
zoom
series={[
xAxis={[
{
label: 'Series A',
data: data.map((v) => v.y1),
},
{
label: 'Series B',
data: data.map((v) => v.y2),
scaleType: 'band',
data: data.map((v, i) => i),
zoom: true,
},
]}
series={series}
/>
24 changes: 16 additions & 8 deletions docs/data/charts/zoom-and-pan/ZoomLineChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,14 @@ export default function ZoomLineChart() {
<LineChartPro
width={600}
height={300}
zoom
series={[
xAxis={[
{
label: 'Series A',
data: data.map((v) => v.y1),
},
{
label: 'Series B',
data: data.map((v) => v.y2),
zoom: true,
scaleType: 'point',
data: data.map((v, i) => i),
},
]}
series={series}
/>
);
}
Expand Down Expand Up @@ -115,3 +112,14 @@ const data = [
y2: 488.06,
},
];

const series = [
{
label: 'Series A',
data: data.map((v) => v.y1),
},
{
label: 'Series B',
data: data.map((v) => v.y2),
},
];
24 changes: 16 additions & 8 deletions docs/data/charts/zoom-and-pan/ZoomLineChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,14 @@ export default function ZoomLineChart() {
<LineChartPro
width={600}
height={300}
zoom
series={[
xAxis={[
{
label: 'Series A',
data: data.map((v) => v.y1),
},
{
label: 'Series B',
data: data.map((v) => v.y2),
zoom: true,
scaleType: 'point',
data: data.map((v, i) => i),
},
]}
series={series}
/>
);
}
Expand Down Expand Up @@ -115,3 +112,14 @@ const data = [
y2: 488.06,
},
];

const series = [
{
label: 'Series A',
data: data.map((v) => v.y1),
},
{
label: 'Series B',
data: data.map((v) => v.y2),
},
];
13 changes: 5 additions & 8 deletions docs/data/charts/zoom-and-pan/ZoomLineChart.tsx.preview
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
<LineChartPro
width={600}
height={300}
zoom
series={[
xAxis={[
{
label: 'Series A',
data: data.map((v) => v.y1),
},
{
label: 'Series B',
data: data.map((v) => v.y2),
zoom: true,
scaleType: 'point',
data: data.map((v, i) => i),
},
]}
series={series}
/>
151 changes: 151 additions & 0 deletions docs/data/charts/zoom-and-pan/ZoomOptionsNoSnap.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
import * as React from 'react';
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';

const knobs = [
{
propName: 'panning',
knob: 'switch',
defaultValue: true,
},
{
propName: 'minStart',
knob: 'number',
defaultValue: 0,
step: 1,
min: 0,
max: 50,
},
{
propName: 'maxEnd',
knob: 'number',
defaultValue: 100,
step: 1,
min: 50,
max: 100,
},
{
propName: 'minSpan',
knob: 'number',
defaultValue: 10,
step: 1,
min: 0,
max: 100,
},
{
propName: 'maxSpan',
knob: 'number',
defaultValue: 100,
step: 1,
min: 0,
max: 100,
},
{
propName: 'step',
knob: 'number',
defaultValue: 5,
step: 1,
min: 1,
max: 100,
},
];

export default function ZoomOptionsNoSnap() {
return (
<ChartsUsageDemo
componentName="Zoom Options demo"
data={knobs}
renderDemo={(props) => (
<div style={{ width: '100%', margin: 4 }}>
<BarChartPro
height={300}
xAxis={[
{
scaleType: 'band',
data: data.map((v, i) => i),
zoom: props,
},
]}
series={series}
/>
</div>
)}
getCode={({ props }) => {
return [
`import { BarChart } from '@mui/x-charts/BarChart';`,
'',
`<BarChart`,
` // ...`,
` xAxis={[`,
` {`,
` // ...`,
` zoom: {`,
` minStart: ${props.minStart},`,
` maxEnd: ${props.maxEnd},`,
` minSpan: ${props.minSpan},`,
` maxSpan: ${props.maxSpan},`,
` step: ${props.step},`,
` panning: ${props.panning},`,
` }`,
` }`,
` ]}`,
'/>',
].join('\n');
}}
/>
);
}

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,
},
];

const series = [
{
label: 'Series A',
data: data.map((v) => v.y1),
},
{
label: 'Series B',
data: data.map((v) => v.y2),
},
];
Loading

0 comments on commit aab47d1

Please sign in to comment.