Skip to content

Commit 68412f1

Browse files
JCQuintasalexfauquette
JCQuintas
and
alexfauquette
authored
[charts] Decouple margin and axis-size (#16418)
Signed-off-by: Jose C Quintas Jr <[email protected]> Co-authored-by: Alexandre Fauquette <[email protected]> Co-authored-by: alex <[email protected]>
1 parent 0063ca6 commit 68412f1

File tree

213 files changed

+1209
-1415
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

213 files changed

+1209
-1415
lines changed

‎docs/data/charts/areas-demo/AreaChartConnectNulls.js

-2
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,11 @@ export default function AreaChartConnectNulls() {
1212
xAxis={[{ data: xData, scaleType: 'point' }]}
1313
series={[{ data, showMark: false, area: true }]}
1414
height={200}
15-
margin={{ top: 10, bottom: 20 }}
1615
/>
1716
<LineChart
1817
xAxis={[{ data: xData, scaleType: 'point' }]}
1918
series={[{ data, showMark: false, area: true, connectNulls: true }]}
2019
height={200}
21-
margin={{ top: 10, bottom: 20 }}
2220
/>
2321
</Stack>
2422
);

‎docs/data/charts/areas-demo/AreaChartConnectNulls.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,11 @@ export default function AreaChartConnectNulls() {
1212
xAxis={[{ data: xData, scaleType: 'point' }]}
1313
series={[{ data, showMark: false, area: true }]}
1414
height={200}
15-
margin={{ top: 10, bottom: 20 }}
1615
/>
1716
<LineChart
1817
xAxis={[{ data: xData, scaleType: 'point' }]}
1918
series={[{ data, showMark: false, area: true, connectNulls: true }]}
2019
height={200}
21-
margin={{ top: 10, bottom: 20 }}
2220
/>
2321
</Stack>
2422
);

‎docs/data/charts/areas-demo/AreaChartConnectNulls.tsx.preview

-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22
xAxis={[{ data: xData, scaleType: 'point' }]}
33
series={[{ data, showMark: false, area: true }]}
44
height={200}
5-
margin={{ top: 10, bottom: 20 }}
65
/>
76
<LineChart
87
xAxis={[{ data: xData, scaleType: 'point' }]}
98
series={[{ data, showMark: false, area: true, connectNulls: true }]}
109
height={200}
11-
margin={{ top: 10, bottom: 20 }}
1210
/>

‎docs/data/charts/areas-demo/AreaChartFillByValue.js

+13-13
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import { LineChart, areaElementClasses } from '@mui/x-charts/LineChart';
88
const data = [4000, 3000, -1000, 500, -2100, -250, 3490];
99
const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
1010

11-
function ColorSwich({ threshold, color1, color2, id }) {
11+
function ColorSwitch({ threshold, color1, color2, id }) {
1212
const { top, height, bottom } = useDrawingArea();
1313
const svgHeight = top + bottom + height;
1414

1515
const scale = useYScale(); // You can provide the axis Id if you have multiple ones
16-
const y0 = scale(threshold); // The coordinate of of the origine
16+
const y0 = scale(threshold); // The coordinate of the origin
1717
const off = y0 !== undefined ? y0 / svgHeight : 0;
1818

1919
return (
@@ -38,41 +38,41 @@ export default function AreaChartFillByValue() {
3838
<Stack direction="column" width="100%" spacing={1}>
3939
<LineChart
4040
xAxis={[{ data: xData, scaleType: 'point' }]}
41-
yAxis={[{ min: -3000, max: 4000 }]}
41+
yAxis={[{ min: -3000, max: 4000, width: 40 }]}
4242
series={[{ data, showMark: false, area: true }]}
4343
height={200}
44-
margin={{ top: 20, bottom: 30, left: 75 }}
44+
margin={{ bottom: 0 }}
4545
sx={{
4646
[`& .${areaElementClasses.root}`]: {
47-
fill: 'url(#swich-color-id-1)',
47+
fill: 'url(#switch-color-id-1)',
4848
filter: 'none', // Remove the default filter.
4949
},
5050
}}
5151
>
52-
<ColorSwich
52+
<ColorSwitch
5353
color1="#11B678" // green
5454
color2="#FF3143" // red
5555
threshold={0}
56-
id="swich-color-id-1"
56+
id="switch-color-id-1"
5757
/>
58-
<rect x={0} y={0} width={5} height="100%" fill="url(#swich-color-id-1)" />
58+
<rect x={0} y={0} width={5} height="100%" fill="url(#switch-color-id-1)" />
5959
</LineChart>
6060

6161
<LineChart
6262
xAxis={[{ data: xData, scaleType: 'point' }]}
63-
yAxis={[{ min: -3000, max: 4000 }]}
63+
yAxis={[{ min: -3000, max: 4000, width: 40 }]}
6464
series={[{ data, showMark: false, area: true }]}
6565
height={200}
66-
margin={{ top: 20, bottom: 30, left: 75 }}
66+
margin={{ bottom: 0 }}
6767
sx={{
6868
[`& .${areaElementClasses.root}`]: {
69-
fill: 'url(#swich-color-id-2)',
69+
fill: 'url(#switch-color-id-2)',
7070
filter: 'none', // Remove the default filter.
7171
},
7272
}}
7373
>
74-
<ColorPalette id="swich-color-id-2" />
75-
<rect x={0} y={0} width={5} height="100%" fill="url(#swich-color-id-2)" />
74+
<ColorPalette id="switch-color-id-2" />
75+
<rect x={0} y={0} width={5} height="100%" fill="url(#switch-color-id-2)" />
7676
</LineChart>
7777
</Stack>
7878
);

‎docs/data/charts/areas-demo/AreaChartFillByValue.tsx

+14-14
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@ import { LineChart, areaElementClasses } from '@mui/x-charts/LineChart';
88
const data = [4000, 3000, -1000, 500, -2100, -250, 3490];
99
const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
1010

11-
type ColorSwichProps = {
11+
type ColorSwitchProps = {
1212
threshold: number;
1313
color1: string;
1414
color2: string;
1515
id: string;
1616
};
1717

18-
function ColorSwich({ threshold, color1, color2, id }: ColorSwichProps) {
18+
function ColorSwitch({ threshold, color1, color2, id }: ColorSwitchProps) {
1919
const { top, height, bottom } = useDrawingArea();
2020
const svgHeight = top + bottom + height;
2121

2222
const scale = useYScale() as ScaleLinear<number, number>; // You can provide the axis Id if you have multiple ones
23-
const y0 = scale(threshold); // The coordinate of of the origine
23+
const y0 = scale(threshold); // The coordinate of the origin
2424
const off = y0 !== undefined ? y0 / svgHeight : 0;
2525

2626
return (
@@ -45,42 +45,42 @@ export default function AreaChartFillByValue() {
4545
<Stack direction="column" width="100%" spacing={1}>
4646
<LineChart
4747
xAxis={[{ data: xData, scaleType: 'point' }]}
48-
yAxis={[{ min: -3000, max: 4000 }]}
48+
yAxis={[{ min: -3000, max: 4000, width: 40 }]}
4949
series={[{ data, showMark: false, area: true }]}
5050
height={200}
51-
margin={{ top: 20, bottom: 30, left: 75 }}
51+
margin={{ bottom: 0 }}
5252
sx={{
5353
[`& .${areaElementClasses.root}`]: {
54-
fill: 'url(#swich-color-id-1)',
54+
fill: 'url(#switch-color-id-1)',
5555
filter: 'none', // Remove the default filter.
5656
},
5757
}}
5858
>
59-
<ColorSwich
59+
<ColorSwitch
6060
color1="#11B678" // green
6161
color2="#FF3143" // red
6262
threshold={0}
63-
id="swich-color-id-1"
63+
id="switch-color-id-1"
6464
/>
65-
<rect x={0} y={0} width={5} height="100%" fill="url(#swich-color-id-1)" />
65+
<rect x={0} y={0} width={5} height="100%" fill="url(#switch-color-id-1)" />
6666
</LineChart>
6767

6868
<LineChart
6969
xAxis={[{ data: xData, scaleType: 'point' }]}
70-
yAxis={[{ min: -3000, max: 4000 }]}
70+
yAxis={[{ min: -3000, max: 4000, width: 40 }]}
7171
series={[{ data, showMark: false, area: true }]}
7272
height={200}
73-
margin={{ top: 20, bottom: 30, left: 75 }}
73+
margin={{ bottom: 0 }}
7474
sx={{
7575
[`& .${areaElementClasses.root}`]: {
76-
fill: 'url(#swich-color-id-2)',
76+
fill: 'url(#switch-color-id-2)',
7777
filter: 'none', // Remove the default filter.
7878
},
7979
}}
8080
>
81-
<ColorPalette id="swich-color-id-2" />
81+
<ColorPalette id="switch-color-id-2" />
8282

83-
<rect x={0} y={0} width={5} height="100%" fill="url(#swich-color-id-2)" />
83+
<rect x={0} y={0} width={5} height="100%" fill="url(#switch-color-id-2)" />
8484
</LineChart>
8585
</Stack>
8686
);

‎docs/data/charts/axis/AxisCustomizationNoSnap.js

+27-26
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// @ts-check
12
import * as React from 'react';
23
import Box from '@mui/material/Box';
34
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
@@ -28,7 +29,10 @@ export default function AxisCustomizationNoSnap() {
2829
{ propName: 'label', knob: 'input', defaultValue: 'my axis' },
2930
{ propName: 'tickSize', knob: 'number', defaultValue: 6 },
3031
]}
31-
renderDemo={(props) => (
32+
renderDemo={(
33+
/** @type {{ disableLine: boolean; disableTicks: boolean; label: string; tickSize: number; }} */
34+
props,
35+
) => (
3236
<Box sx={{ width: '100%', maxWidth: 400 }}>
3337
<ScatterChart
3438
series={[
@@ -38,35 +42,32 @@ export default function AxisCustomizationNoSnap() {
3842
data,
3943
},
4044
]}
41-
leftAxis={null}
42-
bottomAxis={{
43-
...defaultXAxis,
44-
...props,
45-
}}
45+
yAxis={[{ position: 'none' }]}
46+
xAxis={[
47+
{
48+
...defaultXAxis,
49+
...props,
50+
},
51+
]}
4652
height={300}
47-
margin={{ top: 10, left: 20, right: 20 }}
4853
/>
4954
</Box>
5055
)}
51-
getCode={({ props }) =>
52-
[
53-
`import { ScatterChart } from '@mui/x-charts/ScatterChart';`,
54-
'',
55-
`<ScatterChart`,
56-
' {/** ... */}',
57-
` bottomAxis={{`,
58-
...Object.keys(props)
59-
.filter((prop) => props[prop] !== defaultXAxis[prop])
60-
.map(
61-
(prop) =>
62-
` ${prop}: ${
63-
typeof props[prop] === 'string' ? `"${props[prop]}"` : props[prop]
64-
},`,
65-
),
66-
' }}',
67-
'/>',
68-
].join('\n')
69-
}
56+
getCode={(
57+
/** @type {{props: { disableLine: boolean; disableTicks: boolean; label: string; tickSize: number; }}} */
58+
{ props },
59+
) => `import { ScatterChart } from '@mui/x-charts/ScatterChart';
60+
61+
<ScatterChart
62+
// ...
63+
xAxis={{
64+
disableLine: ${props.disableLine},
65+
disableTicks: ${props.disableTicks},
66+
label: "${props.label}",
67+
tickSize: ${props.tickSize},
68+
}}
69+
/>
70+
`}
7071
/>
7172
);
7273
}

‎docs/data/charts/axis/AxisTextCustomizationNoSnap.js

+28-27
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// @ts-check
12
import * as React from 'react';
23
import Box from '@mui/material/Box';
34
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
@@ -23,7 +24,10 @@ export default function AxisTextCustomizationNoSnap() {
2324
{ propName: 'fontSize', knob: 'number', defaultValue: 12 },
2425
{ propName: 'labelFontSize', knob: 'number', defaultValue: 14 },
2526
]}
26-
renderDemo={(props) => (
27+
renderDemo={(
28+
/** @type {{ labelFontSize: number; angle: number; textAnchor: 'start'| 'middle'| 'end'; fontSize: number; }} */
29+
props,
30+
) => (
2731
<Box sx={{ width: '100%', maxWidth: 400 }}>
2832
<BarChart
2933
dataset={dataset}
@@ -32,11 +36,10 @@ export default function AxisTextCustomizationNoSnap() {
3236
scaleType: 'band',
3337
dataKey: 'month',
3438
label: 'months',
39+
height: 40,
3540
labelStyle: {
3641
fontSize: props.labelFontSize,
37-
transform: `translateY(${
38-
5 * Math.abs(Math.sin((Math.PI * props.angle) / 180))
39-
}px)`,
42+
transform: `translateY(10px)`,
4043
},
4144
tickLabelStyle: {
4245
angle: props.angle,
@@ -51,33 +54,31 @@ export default function AxisTextCustomizationNoSnap() {
5154
{ dataKey: 'newYork', label: 'New York', valueFormatter },
5255
{ dataKey: 'seoul', label: 'Seoul', valueFormatter },
5356
]}
57+
margin={{ bottom: 30 }}
5458
{...chartSetting}
5559
/>
5660
</Box>
5761
)}
58-
getCode={({ props }) =>
59-
[
60-
`import { ScatterChart } from '@mui/x-charts/ScatterChart';`,
61-
'',
62-
`<ScatterChart`,
63-
' {/** ... */}',
64-
` bottomAxis={{`,
65-
` labelStyle: {`,
66-
` fontSize: ${props.labelFontSize},`,
67-
` transform: \`translateY(\${
68-
// Hack that should be added in the lib latter.
69-
5 * Math.abs(Math.sin((Math.PI * props.angle) / 180))
70-
}px)\``,
71-
` },`,
72-
` tickLabelStyle: {`,
73-
` angle: ${props.angle},`,
74-
` textAnchor: '${props.textAnchor}',`,
75-
` fontSize: ${props.fontSize},`,
76-
` },`,
77-
' }}',
78-
'/>',
79-
].join('\n')
80-
}
62+
getCode={(
63+
/** @type {{props: { labelFontSize: number; angle: number; textAnchor: 'start'| 'middle'| 'end'; fontSize: number; }}} */
64+
{ props },
65+
) => `import { BarChart } from '@mui/x-charts/BarChart';
66+
67+
<ScatterChart
68+
// ...
69+
xAxis={[
70+
{
71+
labelStyle: {
72+
fontSize: ${props.labelFontSize},
73+
},
74+
tickLabelStyle: {
75+
angle: ${props.angle},
76+
textAnchor: '${props.textAnchor}',
77+
fontSize: ${props.fontSize},
78+
},
79+
},
80+
]}
81+
/>`}
8182
/>
8283
);
8384
}

‎docs/data/charts/axis/AxisWithComposition.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ export default function AxisWithComposition() {
1919
label: 'Quarters',
2020
},
2121
]}
22-
yAxis={[{ id: 'money' }, { id: 'quantities' }]}
22+
yAxis={[
23+
{ id: 'money', position: 'right', width: 40 },
24+
{ id: 'quantities', position: 'left', width: 40 },
25+
]}
2326
series={[
2427
{
2528
type: 'line',
@@ -41,13 +44,13 @@ export default function AxisWithComposition() {
4144
},
4245
]}
4346
height={400}
44-
margin={{ left: 70, right: 70 }}
47+
margin={{ left: 25, right: 25 }}
4548
sx={{
4649
[`.${axisClasses.left} .${axisClasses.label}`]: {
4750
transform: 'translate(-25px, 0)',
4851
},
4952
[`.${axisClasses.right} .${axisClasses.label}`]: {
50-
transform: 'translate(30px, 0)',
53+
transform: 'translate(25px, 0)',
5154
},
5255
}}
5356
>
@@ -59,7 +62,7 @@ export default function AxisWithComposition() {
5962
labelStyle={{ fontSize: 18 }}
6063
/>
6164
<ChartsYAxis axisId="quantities" label="# units sold" />
62-
<ChartsYAxis axisId="money" position="right" label="revenue" />
65+
<ChartsYAxis axisId="money" label="revenue" />
6366
</ChartContainer>
6467
</Box>
6568
);

0 commit comments

Comments
 (0)