Skip to content

Commit 797e9e9

Browse files
alexfauquettealexfauquette
authored
[charts-premium] Stabilize the radial charts (#22655)
1 parent 37ef74f commit 797e9e9

64 files changed

Lines changed: 194 additions & 156 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/export/PrintChart.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
1414
import { useChartProApiRef } from '@mui/x-charts-pro/hooks';
1515
import { RadarChartPro } from '@mui/x-charts-pro/RadarChartPro';
1616
import { PieChartPro } from '@mui/x-charts-pro/PieChartPro';
17-
import { Unstable_SankeyChart } from '@mui/x-charts-pro/SankeyChart';
17+
import { SankeyChart } from '@mui/x-charts-pro/SankeyChart';
1818
import { data } from './randomData';
1919
import { heatmapData } from './heatmapData';
2020

@@ -182,9 +182,7 @@ function Chart({ apiRef, type }) {
182182
);
183183

184184
case 'sankey':
185-
return (
186-
<Unstable_SankeyChart apiRef={apiRef} height={300} series={sankeySeries} />
187-
);
185+
return <SankeyChart apiRef={apiRef} height={300} series={sankeySeries} />;
188186

189187
default:
190188
throw new Error(`Unknown chart type: ${type}`);

‎docs/data/charts/export/PrintChart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
1414
import { useChartProApiRef } from '@mui/x-charts-pro/hooks';
1515
import { RadarChartPro } from '@mui/x-charts-pro/RadarChartPro';
1616
import { PieChartPro } from '@mui/x-charts-pro/PieChartPro';
17-
import { Unstable_SankeyChart } from '@mui/x-charts-pro/SankeyChart';
17+
import { SankeyChart } from '@mui/x-charts-pro/SankeyChart';
1818
import { data } from './randomData';
1919
import { heatmapData } from './heatmapData';
2020

@@ -198,7 +198,7 @@ function Chart<T extends ChartType = ChartType>({
198198
);
199199
case 'sankey':
200200
return (
201-
<Unstable_SankeyChart
201+
<SankeyChart
202202
apiRef={apiRef as React.RefObject<ChartProApi<'sankey'> | undefined>}
203203
height={300}
204204
series={sankeySeries}

‎docs/data/charts/radar/CompositionExample.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Stack from '@mui/material/Stack';
22
import {
3-
Unstable_RadarDataProvider as RadarDataProvider,
3+
RadarDataProvider,
44
RadarGrid,
55
RadarSeriesMarks,
66
RadarSeriesArea,

‎docs/data/charts/radar/CompositionExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Stack from '@mui/material/Stack';
22
import {
3-
Unstable_RadarDataProvider as RadarDataProvider,
3+
RadarDataProvider,
44
RadarGrid,
55
RadarSeriesMarks,
66
RadarSeriesArea,

‎docs/data/charts/radial-axes/BandHighlight.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import RadioGroup from '@mui/material/RadioGroup';
55
import FormControlLabel from '@mui/material/FormControlLabel';
66
import Radio from '@mui/material/Radio';
77
import Stack from '@mui/material/Stack';
8-
import { Unstable_RadialLineChart as RadialLineChart } from '@mui/x-charts-premium/RadialLineChart';
8+
import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart';
99
import { dataset, valueFormatter } from '../dataset/weather';
1010

1111
export default function BandHighlight() {

‎docs/data/charts/radial-axes/BandHighlight.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import RadioGroup from '@mui/material/RadioGroup';
55
import FormControlLabel from '@mui/material/FormControlLabel';
66
import Radio from '@mui/material/Radio';
77
import Stack from '@mui/material/Stack';
8-
import { Unstable_RadialLineChart as RadialLineChart } from '@mui/x-charts-premium/RadialLineChart';
8+
import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart';
99
import { dataset, valueFormatter } from '../dataset/weather';
1010

1111
export default function BandHighlight() {

‎docs/data/charts/radial-axes/RadialGridPlayground.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import Box from '@mui/material/Box';
22
import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo';
33
import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
44
import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
5-
import { Unstable_ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
6-
import { Unstable_ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
5+
import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
6+
import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
77

88
export default function RadialGridPlayground() {
99
return (
@@ -33,7 +33,7 @@ export default function RadialGridPlayground() {
3333
}}
3434
renderDemo={(props) => (
3535
<Box sx={{ width: '100%', maxWidth: 400 }}>
36-
<Unstable_ChartsRadialDataProvider
36+
<ChartsRadialDataProvider
3737
height={300}
3838
rotationAxis={[
3939
{
@@ -56,16 +56,13 @@ export default function RadialGridPlayground() {
5656
>
5757
<ChartsLayerContainer>
5858
<ChartsSvgLayer>
59-
<Unstable_ChartsRadialGrid
60-
rotation={props.rotation}
61-
radius={props.radius}
62-
/>
59+
<ChartsRadialGrid rotation={props.rotation} radius={props.radius} />
6360
</ChartsSvgLayer>
6461
</ChartsLayerContainer>
65-
</Unstable_ChartsRadialDataProvider>
62+
</ChartsRadialDataProvider>
6663
</Box>
6764
)}
68-
getCode={({ props }) => `<Unstable_ChartsRadialDataProvider
65+
getCode={({ props }) => `<ChartsRadialDataProvider
6966
rotationAxis={[{
7067
startAngle: ${props.startAngle},
7168
endAngle: ${props.endAngle},
@@ -77,8 +74,8 @@ export default function RadialGridPlayground() {
7774
tickNumber: ${props.radiusTickNumber},
7875
}]}
7976
>
80-
<Unstable_ChartsRadialGrid ${[props.rotation && 'rotation', props.radius && 'radius'].filter(Boolean).join(' ')} />
81-
</Unstable_ChartsRadialDataProvider>`}
77+
<ChartsRadialGrid ${[props.rotation && 'rotation', props.radius && 'radius'].filter(Boolean).join(' ')} />
78+
</ChartsRadialDataProvider>`}
8279
/>
8380
);
8481
}

‎docs/data/charts/radial-axes/RadialGridPlayground.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import Box from '@mui/material/Box';
22
import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo';
33
import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
44
import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
5-
import { Unstable_ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
6-
import { Unstable_ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
5+
import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
6+
import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
77

88
export default function RadialGridPlayground() {
99
return (
@@ -35,7 +35,7 @@ export default function RadialGridPlayground() {
3535
}
3636
renderDemo={(props) => (
3737
<Box sx={{ width: '100%', maxWidth: 400 }}>
38-
<Unstable_ChartsRadialDataProvider
38+
<ChartsRadialDataProvider
3939
height={300}
4040
rotationAxis={[
4141
{
@@ -58,16 +58,13 @@ export default function RadialGridPlayground() {
5858
>
5959
<ChartsLayerContainer>
6060
<ChartsSvgLayer>
61-
<Unstable_ChartsRadialGrid
62-
rotation={props.rotation}
63-
radius={props.radius}
64-
/>
61+
<ChartsRadialGrid rotation={props.rotation} radius={props.radius} />
6562
</ChartsSvgLayer>
6663
</ChartsLayerContainer>
67-
</Unstable_ChartsRadialDataProvider>
64+
</ChartsRadialDataProvider>
6865
</Box>
6966
)}
70-
getCode={({ props }) => `<Unstable_ChartsRadialDataProvider
67+
getCode={({ props }) => `<ChartsRadialDataProvider
7168
rotationAxis={[{
7269
startAngle: ${props.startAngle},
7370
endAngle: ${props.endAngle},
@@ -79,8 +76,8 @@ export default function RadialGridPlayground() {
7976
tickNumber: ${props.radiusTickNumber},
8077
}]}
8178
>
82-
<Unstable_ChartsRadialGrid ${[props.rotation && 'rotation', props.radius && 'radius'].filter(Boolean).join(' ')} />
83-
</Unstable_ChartsRadialDataProvider>`}
79+
<ChartsRadialGrid ${[props.rotation && 'rotation', props.radius && 'radius'].filter(Boolean).join(' ')} />
80+
</ChartsRadialDataProvider>`}
8481
/>
8582
);
8683
}

‎docs/data/charts/radial-axes/RadiusAxisPlayground.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import Box from '@mui/material/Box';
22
import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo';
33
import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
44
import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
5-
import { Unstable_ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
6-
import { Unstable_ChartsRadiusAxis as ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis';
7-
import { Unstable_ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
5+
import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
6+
import { ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis';
7+
import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
88

99
export default function RadiusAxisPlayground() {
1010
return (
@@ -55,7 +55,7 @@ export default function RadiusAxisPlayground() {
5555
width: '100%',
5656
}}
5757
>
58-
<Unstable_ChartsRadialDataProvider
58+
<ChartsRadialDataProvider
5959
height={400}
6060
rotationAxis={[
6161
{
@@ -77,7 +77,7 @@ export default function RadiusAxisPlayground() {
7777
>
7878
<ChartsLayerContainer>
7979
<ChartsSvgLayer>
80-
<Unstable_ChartsRadialGrid rotation radius />
80+
<ChartsRadialGrid rotation radius />
8181
<ChartsRadiusAxis
8282
position={props.position}
8383
disableLine={props.disableLine}
@@ -88,10 +88,10 @@ export default function RadiusAxisPlayground() {
8888
/>
8989
</ChartsSvgLayer>
9090
</ChartsLayerContainer>
91-
</Unstable_ChartsRadialDataProvider>
91+
</ChartsRadialDataProvider>
9292
</Box>
9393
)}
94-
getCode={({ props }) => `<Unstable_ChartsRadialDataProvider
94+
getCode={({ props }) => `<ChartsRadialDataProvider
9595
rotationAxis={[{
9696
startAngle: ${props.startAngle},
9797
endAngle: ${props.endAngle},
@@ -113,9 +113,9 @@ ${[
113113
.join('\n')}
114114
}]}
115115
>
116-
<Unstable_ChartsRadialGrid rotation radius />
116+
<ChartsRadialGrid rotation radius />
117117
<ChartsRadiusAxis />
118-
</Unstable_ChartsRadialDataProvider>`}
118+
</ChartsRadialDataProvider>`}
119119
/>
120120
);
121121
}

‎docs/data/charts/radial-axes/RadiusAxisPlayground.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import Box from '@mui/material/Box';
22
import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo';
33
import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
44
import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
5-
import { Unstable_ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
6-
import { Unstable_ChartsRadiusAxis as ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis';
7-
import { Unstable_ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
5+
import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
6+
import { ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis';
7+
import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
88

99
export default function RadiusAxisPlayground() {
1010
return (
@@ -57,7 +57,7 @@ export default function RadiusAxisPlayground() {
5757
width: '100%',
5858
}}
5959
>
60-
<Unstable_ChartsRadialDataProvider
60+
<ChartsRadialDataProvider
6161
height={400}
6262
rotationAxis={[
6363
{
@@ -79,7 +79,7 @@ export default function RadiusAxisPlayground() {
7979
>
8080
<ChartsLayerContainer>
8181
<ChartsSvgLayer>
82-
<Unstable_ChartsRadialGrid rotation radius />
82+
<ChartsRadialGrid rotation radius />
8383
<ChartsRadiusAxis
8484
position={props.position}
8585
disableLine={props.disableLine}
@@ -90,10 +90,10 @@ export default function RadiusAxisPlayground() {
9090
/>
9191
</ChartsSvgLayer>
9292
</ChartsLayerContainer>
93-
</Unstable_ChartsRadialDataProvider>
93+
</ChartsRadialDataProvider>
9494
</Box>
9595
)}
96-
getCode={({ props }) => `<Unstable_ChartsRadialDataProvider
96+
getCode={({ props }) => `<ChartsRadialDataProvider
9797
rotationAxis={[{
9898
startAngle: ${props.startAngle},
9999
endAngle: ${props.endAngle},
@@ -115,9 +115,9 @@ ${[
115115
.join('\n')}
116116
}]}
117117
>
118-
<Unstable_ChartsRadialGrid rotation radius />
118+
<ChartsRadialGrid rotation radius />
119119
<ChartsRadiusAxis />
120-
</Unstable_ChartsRadialDataProvider>`}
120+
</ChartsRadialDataProvider>`}
121121
/>
122122
);
123123
}

0 commit comments

Comments
 (0)