Skip to content

Commit 7998f10

Browse files
alexfauquettealexfauquette
committed
Merge remote-tracking branch 'upstream/master' into heatmap-legend
2 parents 35c0ae7 + 0138d76 commit 7998f10

57 files changed

Lines changed: 1205 additions & 430 deletions

File tree

Some content is hidden

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

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import * as React from 'react';
2+
import { BarChart } from '@mui/x-charts/BarChart';
3+
4+
import { axisClasses } from '@mui/x-charts/ChartsAxis';
5+
6+
export default function GroupedAxes() {
7+
return (
8+
<BarChart
9+
xAxis={[
10+
{
11+
id: 'months',
12+
scaleType: 'band',
13+
data: time,
14+
valueFormatter: formatShortMonth,
15+
height: 24,
16+
},
17+
{
18+
scaleType: 'band',
19+
data: time.filter((_, index) => index % 3 === 0),
20+
valueFormatter: formatQuarterYear,
21+
position: 'bottom',
22+
tickLabelPlacement: 'middle',
23+
height: 35,
24+
disableLine: true,
25+
disableTicks: true,
26+
},
27+
]}
28+
{...chartConfig}
29+
sx={{
30+
[`& .${axisClasses.id}-months .${axisClasses.tickContainer}:nth-child(3n - 1) .${axisClasses.tick}`]:
31+
{ transform: 'scaleY(4)' },
32+
}}
33+
/>
34+
);
35+
}
36+
37+
const formatQuarterYear = (date, context) => {
38+
if (context.location === 'tick') {
39+
const quarter = Math.floor(date.getMonth() / 3) + 1;
40+
const year = date.getFullYear().toString().slice(-2);
41+
return `Q${quarter} '${year}`;
42+
}
43+
return date.toLocaleDateString('en-US', { month: 'long' });
44+
};
45+
46+
const formatShortMonth = (date, context) => {
47+
if (context.location === 'tick') {
48+
return date.toLocaleDateString('en-US', { month: 'short' });
49+
}
50+
return date.toLocaleDateString('en-US', { month: 'long' });
51+
};
52+
53+
const time = [
54+
new Date(2015, 0, 1),
55+
new Date(2015, 1, 1),
56+
new Date(2015, 2, 1),
57+
new Date(2015, 3, 1),
58+
new Date(2015, 4, 1),
59+
new Date(2015, 5, 1),
60+
new Date(2015, 6, 1),
61+
new Date(2015, 7, 1),
62+
new Date(2015, 8, 1),
63+
new Date(2015, 9, 1),
64+
new Date(2015, 10, 1),
65+
new Date(2015, 11, 1),
66+
];
67+
68+
const a = [
69+
4000, 3000, 2000, 2780, 1890, 2390, 3490, 2400, 1398, 9800, 3908, 4800, 2400,
70+
];
71+
72+
const b = [
73+
2400, 1398, 9800, 3908, 4800, 3800, 4300, 2181, 2500, 2100, 3000, 2000, 3908,
74+
];
75+
76+
const getPercents = (array) =>
77+
array.map((v, index) => (100 * v) / (a[index] + b[index]));
78+
79+
const chartConfig = {
80+
height: 300,
81+
series: [
82+
{
83+
data: getPercents(a),
84+
label: 'Income',
85+
valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`,
86+
},
87+
{
88+
data: getPercents(b),
89+
label: 'Expenses',
90+
valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`,
91+
},
92+
],
93+
yAxis: [
94+
{
95+
valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`,
96+
},
97+
],
98+
};

‎docs/data/charts/axis/GroupedAxes.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import * as React from 'react';
2+
import { BarChart } from '@mui/x-charts/BarChart';
3+
import { AxisValueFormatterContext } from '@mui/x-charts/internals';
4+
import { axisClasses } from '@mui/x-charts/ChartsAxis';
5+
6+
export default function GroupedAxes() {
7+
return (
8+
<BarChart
9+
xAxis={[
10+
{
11+
id: 'months',
12+
scaleType: 'band',
13+
data: time,
14+
valueFormatter: formatShortMonth,
15+
height: 24,
16+
},
17+
{
18+
scaleType: 'band',
19+
data: time.filter((_, index) => index % 3 === 0),
20+
valueFormatter: formatQuarterYear,
21+
position: 'bottom',
22+
tickLabelPlacement: 'middle',
23+
height: 35,
24+
disableLine: true,
25+
disableTicks: true,
26+
},
27+
]}
28+
{...chartConfig}
29+
sx={{
30+
[`& .${axisClasses.id}-months .${axisClasses.tickContainer}:nth-child(3n - 1) .${axisClasses.tick}`]:
31+
{ transform: 'scaleY(4)' },
32+
}}
33+
/>
34+
);
35+
}
36+
37+
const formatQuarterYear = (date: Date, context: AxisValueFormatterContext) => {
38+
if (context.location === 'tick') {
39+
const quarter = Math.floor(date.getMonth() / 3) + 1;
40+
const year = date.getFullYear().toString().slice(-2);
41+
return `Q${quarter} '${year}`;
42+
}
43+
return date.toLocaleDateString('en-US', { month: 'long' });
44+
};
45+
46+
const formatShortMonth = (date: Date, context: AxisValueFormatterContext) => {
47+
if (context.location === 'tick') {
48+
return date.toLocaleDateString('en-US', { month: 'short' });
49+
}
50+
return date.toLocaleDateString('en-US', { month: 'long' });
51+
};
52+
53+
const time = [
54+
new Date(2015, 0, 1),
55+
new Date(2015, 1, 1),
56+
new Date(2015, 2, 1),
57+
new Date(2015, 3, 1),
58+
new Date(2015, 4, 1),
59+
new Date(2015, 5, 1),
60+
new Date(2015, 6, 1),
61+
new Date(2015, 7, 1),
62+
new Date(2015, 8, 1),
63+
new Date(2015, 9, 1),
64+
new Date(2015, 10, 1),
65+
new Date(2015, 11, 1),
66+
];
67+
const a = [
68+
4000, 3000, 2000, 2780, 1890, 2390, 3490, 2400, 1398, 9800, 3908, 4800, 2400,
69+
];
70+
const b = [
71+
2400, 1398, 9800, 3908, 4800, 3800, 4300, 2181, 2500, 2100, 3000, 2000, 3908,
72+
];
73+
74+
const getPercents = (array: number[]) =>
75+
array.map((v, index) => (100 * v) / (a[index] + b[index]));
76+
77+
const chartConfig = {
78+
height: 300,
79+
series: [
80+
{
81+
data: getPercents(a),
82+
label: 'Income',
83+
valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
84+
},
85+
{
86+
data: getPercents(b),
87+
label: 'Expenses',
88+
valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
89+
},
90+
],
91+
yAxis: [
92+
{
93+
valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
94+
},
95+
],
96+
} as const;

‎docs/data/charts/axis/axis.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -214,10 +214,14 @@ The axis is still computed and used for the scaling.
214214
You can display multiple axes on the same side.
215215
If two or more axes share the same `position`, they are displayed in the order they are defined from closest to the chart to farthest.
216216

217-
To avoid overlapping, you can use the `height` prop for `xAxis` and `width` for `yAxis` to increase the space between the axes.
218-
219217
{{"demo": "MultipleAxes.js"}}
220218

219+
### Grouped Axes
220+
221+
You can group axes together by rendering more than one axis on the same side.
222+
223+
{{"demo": "GroupedAxes.js"}}
224+
221225
## Axis customization
222226

223227
You can further customize the axis rendering besides the axis definition.

0 commit comments

Comments
 (0)