Skip to content

Commit

Permalink
Merge remote-tracking branch 'mui/master' into fix-columns-and-column…
Browse files Browse the repository at this point in the history
…Groups-update-error
  • Loading branch information
cherniavskii committed Sep 2, 2024
2 parents bdc532e + 2cb93f4 commit d06f2a5
Show file tree
Hide file tree
Showing 69 changed files with 962 additions and 489 deletions.
10 changes: 3 additions & 7 deletions docs/data/charts/pie/PieActiveArc.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';

const data = [
{ id: 0, value: 10, label: 'series A' },
{ id: 1, value: 15, label: 'series B' },
{ id: 2, value: 20, label: 'series C' },
];
import { desktopOS, valueFormatter } from './webUsageStats';

export default function PieActiveArc() {
return (
<PieChart
series={[
{
data,
data: desktopOS,
highlightScope: { fade: 'global', highlight: 'item' },
faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
valueFormatter,
},
]}
height={200}
Expand Down
10 changes: 3 additions & 7 deletions docs/data/charts/pie/PieActiveArc.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';

const data = [
{ id: 0, value: 10, label: 'series A' },
{ id: 1, value: 15, label: 'series B' },
{ id: 2, value: 20, label: 'series C' },
];
import { desktopOS, valueFormatter } from './webUsageStats';

export default function PieActiveArc() {
return (
<PieChart
series={[
{
data,
data: desktopOS,
highlightScope: { fade: 'global', highlight: 'item' },
faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
valueFormatter,
},
]}
height={200}
Expand Down
3 changes: 2 additions & 1 deletion docs/data/charts/pie/PieActiveArc.tsx.preview
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<PieChart
series={[
{
data,
data: desktopOS,
highlightScope: { fade: 'global', highlight: 'item' },
faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
valueFormatter,
},
]}
height={200}
Expand Down
29 changes: 5 additions & 24 deletions docs/data/charts/pie/PieAnimation.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,7 @@ import Slider from '@mui/material/Slider';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { PieChart } from '@mui/x-charts/PieChart';

const data1 = [
{ label: 'Group A', value: 400 },
{ label: 'Group B', value: 300 },
{ label: 'Group C', value: 300 },
{ label: 'Group D', value: 200 },
];

const data2 = [
{ label: '1', value: 100 },
{ label: '2', value: 300 },
{ label: '3', value: 100 },
{ label: '4', value: 80 },
{ label: '5', value: 40 },
{ label: '6', value: 30 },
{ label: '7', value: 50 },
{ label: '8', value: 100 },
{ label: '9', value: 200 },
{ label: '10', value: 150 },
{ label: '11', value: 50 },
];
import { mobileAndDesktopOS, valueFormatter } from './webUsageStats';

export default function PieAnimation() {
const [radius, setRadius] = React.useState(50);
Expand All @@ -50,11 +30,12 @@ export default function PieAnimation() {
<PieChart
height={300}
series={[
{ data: data1, outerRadius: radius },
{
data: data2.slice(0, itemNb),
data: mobileAndDesktopOS.slice(0, itemNb),
innerRadius: radius,
arcLabel: (params) => params.label ?? '',
arcLabelMinAngle: 20,
valueFormatter,
},
]}
skipAnimation={skipAnimation}
Expand All @@ -75,7 +56,7 @@ export default function PieAnimation() {
onChange={handleItemNbChange}
valueLabelDisplay="auto"
min={1}
max={10}
max={8}
aria-labelledby="input-item-number"
/>
<Typography id="input-radius" gutterBottom>
Expand Down
28 changes: 5 additions & 23 deletions docs/data/charts/pie/PieAnimation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,7 @@ import Slider from '@mui/material/Slider';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { PieChart } from '@mui/x-charts/PieChart';

const data1 = [
{ label: 'Group A', value: 400 },
{ label: 'Group B', value: 300 },
{ label: 'Group C', value: 300 },
{ label: 'Group D', value: 200 },
];
const data2 = [
{ label: '1', value: 100 },
{ label: '2', value: 300 },
{ label: '3', value: 100 },
{ label: '4', value: 80 },
{ label: '5', value: 40 },
{ label: '6', value: 30 },
{ label: '7', value: 50 },
{ label: '8', value: 100 },
{ label: '9', value: 200 },
{ label: '10', value: 150 },
{ label: '11', value: 50 },
];
import { mobileAndDesktopOS, valueFormatter } from './webUsageStats';

export default function PieAnimation() {
const [radius, setRadius] = React.useState(50);
Expand All @@ -49,11 +30,12 @@ export default function PieAnimation() {
<PieChart
height={300}
series={[
{ data: data1, outerRadius: radius },
{
data: data2.slice(0, itemNb),
data: mobileAndDesktopOS.slice(0, itemNb),
innerRadius: radius,
arcLabel: (params) => params.label ?? '',
arcLabelMinAngle: 20,
valueFormatter,
},
]}
skipAnimation={skipAnimation}
Expand All @@ -74,7 +56,7 @@ export default function PieAnimation() {
onChange={handleItemNbChange}
valueLabelDisplay="auto"
min={1}
max={10}
max={8}
aria-labelledby="input-item-number"
/>
<Typography id="input-radius" gutterBottom>
Expand Down
31 changes: 15 additions & 16 deletions docs/data/charts/pie/PieArcLabel.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,34 @@
import * as React from 'react';
import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';

const data = [
{ value: 5, label: 'A' },
{ value: 10, label: 'B' },
{ value: 15, label: 'C' },
{ value: 20, label: 'D' },
];

const size = {
width: 400,
height: 200,
};
import { desktopOS, valueFormatter } from './webUsageStats';

export default function PieArcLabel() {
return (
<PieChart
series={[
{
arcLabel: (item) => `${item.label} (${item.value})`,
arcLabelMinAngle: 45,
data,
arcLabel: (item) => `${item.value}%`,
arcLabelMinAngle: 35,
arcLabelRadius: '60%',
...data,
},
]}
sx={{
[`& .${pieArcLabelClasses.root}`]: {
fill: 'white',
fontWeight: 'bold',
},
}}
{...size}
/>
);
}

const size = {
width: 400,
height: 200,
};

const data = {
data: desktopOS,
valueFormatter,
};
31 changes: 15 additions & 16 deletions docs/data/charts/pie/PieArcLabel.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,34 @@
import * as React from 'react';
import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';

const data = [
{ value: 5, label: 'A' },
{ value: 10, label: 'B' },
{ value: 15, label: 'C' },
{ value: 20, label: 'D' },
];

const size = {
width: 400,
height: 200,
};
import { desktopOS, valueFormatter } from './webUsageStats';

export default function PieArcLabel() {
return (
<PieChart
series={[
{
arcLabel: (item) => `${item.label} (${item.value})`,
arcLabelMinAngle: 45,
data,
arcLabel: (item) => `${item.value}%`,
arcLabelMinAngle: 35,
arcLabelRadius: '60%',
...data,
},
]}
sx={{
[`& .${pieArcLabelClasses.root}`]: {
fill: 'white',
fontWeight: 'bold',
},
}}
{...size}
/>
);
}

const size = {
width: 400,
height: 200,
};

const data = {
data: desktopOS,
valueFormatter,
};
8 changes: 4 additions & 4 deletions docs/data/charts/pie/PieArcLabel.tsx.preview
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<PieChart
series={[
{
arcLabel: (item) => `${item.label} (${item.value})`,
arcLabelMinAngle: 45,
data,
arcLabel: (item) => `${item.value}%`,
arcLabelMinAngle: 35,
arcLabelRadius: '60%',
...data,
},
]}
sx={{
[`& .${pieArcLabelClasses.root}`]: {
fill: 'white',
fontWeight: 'bold',
},
}}
Expand Down
55 changes: 18 additions & 37 deletions docs/data/charts/pie/PieClickNoSnap.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,9 @@ import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';

import { PieChart } from '@mui/x-charts/PieChart';

import { HighlightedCode } from '@mui/docs/HighlightedCode';

const data1 = [
{ label: 'Group A', value: 400 },
{ label: 'Group B', value: 300 },
{ label: 'Group C', value: 300 },
{ label: 'Group D', value: 200 },
];

const data2 = [
{ label: 'A1', value: 100 },
{ label: 'A2', value: 300 },
{ label: 'B1', value: 100 },
{ label: 'B2', value: 80 },
{ label: 'B3', value: 40 },
{ label: 'B4', value: 30 },
{ label: 'B5', value: 50 },
{ label: 'C1', value: 100 },
{ label: 'C2', value: 200 },
{ label: 'D1', value: 150 },
{ label: 'D2', value: 50 },
];
const series = [
{
innerRadius: 0,
outerRadius: 80,
id: 'series-1',
data: data1,
},
{
innerRadius: 100,
outerRadius: 120,
id: 'series-2',
data: data2,
},
];
import { mobileAndDesktopOS, platforms, valueFormatter } from './webUsageStats';

export default function PieClickNoSnap() {
const [itemData, setItemData] = React.useState();
Expand Down Expand Up @@ -95,3 +59,20 @@ ${itemData ? JSON.stringify(itemData, null, 2) : '// The data will appear here'}
</Stack>
);
}

const series = [
{
innerRadius: 0,
outerRadius: 80,
id: 'platform-series',
data: platforms,
valueFormatter,
},
{
innerRadius: 100,
outerRadius: 120,
id: 'OS-series',
data: mobileAndDesktopOS,
valueFormatter,
},
];
Loading

0 comments on commit d06f2a5

Please sign in to comment.