Skip to content

Commit e85605b

Browse files
JCQuintasJCQuintas
authored
Merge branch 'master' into sankey-link-color
2 parents 0566e1a + 26dbfde commit e85605b

File tree

282 files changed

+15541
-1073
lines changed

Some content is hidden

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

282 files changed

+15541
-1073
lines changed

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,7 @@ MUI X Premium unlocks the most advanced features of the Data Grid, including ro
8989
The Premium version is available under a commercial license—visit the [Pricing page](https://mui.com/pricing/) for details.
9090

9191
- [`@mui/x-data-grid-premium`](https://www.npmjs.com/package/@mui/x-data-grid-premium)
92-
<!-- TODO: CHARTS-PREMIUM: uncomment when ready -->
93-
<!-- - [`@mui/x-charts-premium`](https://www.npmjs.com/package/@mui/x-charts-premium) -->
92+
- [`@mui/x-charts-premium`](https://www.npmjs.com/package/@mui/x-charts-premium)
9493

9594
## Support
9695

‎docs/data/charts/data-grid-integration/data-grid-integration.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: Charts and Data Grid integration
3+
---
4+
5+
# Data Grid integration [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') 🧪
6+
7+
<p class="description">Learn how to integrate the MUI X Charts and Data Grid for better data visualization.</p>
8+
9+
MUI X Charts seamlessly integrate with the [Data Grid](/x/react-data-grid/) for data visualization with dynamic Chart updates based on the Data Grid state changes (whether through the Data Grid API or user interactions).
10+
11+
:::warning
12+
This feature is in preview. It is ready for production use, but its API, visuals and behavior may change in future minor or patch releases.
13+
:::
14+
15+
This integration is possible via the `<GridChartsIntegrationContextProvider />` and `<GridChartsRendererProxy />` components from the `@mui/x-data-grid-premium` package, and the `<ChartRenderer />` component from the `@mui/x-charts-premium` package.
16+
17+
Check [Data Grid - Charts integration](/x/react-data-grid/charts-integration/) for more information and examples.
18+
19+
The demo below shows how to implement all of the elements mentioned above:
20+
21+
{{"demo": "../../data-grid/charts-integration/GridChartsIntegrationBasic.js", "bg": "inline"}}

‎docs/data/charts/localization/data.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,39 @@
44
"importName": "frFR",
55
"localeName": "French",
66
"missingKeysCount": 5,
7-
"totalKeysCount": 7,
7+
"totalKeysCount": 103,
88
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-charts/src/locales/frFR.ts"
99
},
1010
{
1111
"languageTag": "el-GR",
1212
"importName": "elGR",
1313
"localeName": "Greek",
14-
"missingKeysCount": 0,
15-
"totalKeysCount": 7,
14+
"missingKeysCount": 96,
15+
"totalKeysCount": 103,
1616
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-charts/src/locales/elGR.ts"
1717
},
1818
{
1919
"languageTag": "pt-PT",
2020
"importName": "ptPT",
2121
"localeName": "Portuguese",
22-
"missingKeysCount": 0,
23-
"totalKeysCount": 7,
22+
"missingKeysCount": 96,
23+
"totalKeysCount": 103,
2424
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-charts/src/locales/ptPT.ts"
2525
},
2626
{
2727
"languageTag": "pt-BR",
2828
"importName": "ptBR",
2929
"localeName": "Portuguese (Brazil)",
30-
"missingKeysCount": 0,
31-
"totalKeysCount": 7,
30+
"missingKeysCount": 96,
31+
"totalKeysCount": 103,
3232
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-charts/src/locales/ptBR.ts"
3333
},
3434
{
3535
"languageTag": "sv-SE",
3636
"importName": "svSE",
3737
"localeName": "Swedish",
38-
"missingKeysCount": 0,
39-
"totalKeysCount": 7,
38+
"missingKeysCount": 96,
39+
"totalKeysCount": 103,
4040
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-charts/src/locales/svSE.ts"
4141
}
4242
]

‎docs/data/data-grid/charts-integration/GridChartsIntegrationBasic.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from 'react';
2+
import { useDemoData } from '@mui/x-data-grid-generator';
3+
import {
4+
DataGridPremium,
5+
GridChartsPanel,
6+
GridChartsIntegrationContextProvider,
7+
GridChartsRendererProxy,
8+
GridSidebarValue,
9+
} from '@mui/x-data-grid-premium';
10+
import {
11+
ChartsRenderer,
12+
configurationOptions,
13+
} from '@mui/x-charts-premium/ChartsRenderer';
14+
15+
export default function GridChartsIntegrationBasic() {
16+
const { data } = useDemoData({
17+
dataSet: 'Employee',
18+
rowLength: 20,
19+
editable: true,
20+
});
21+
22+
return (
23+
<GridChartsIntegrationContextProvider>
24+
<div style={{ gap: 32, width: '100%' }}>
25+
<div style={{ height: 420, paddingBottom: 16 }}>
26+
<DataGridPremium
27+
{...data}
28+
showToolbar
29+
chartsIntegration
30+
slots={{
31+
chartsPanel: GridChartsPanel,
32+
}}
33+
slotProps={{
34+
chartsPanel: {
35+
schema: configurationOptions,
36+
},
37+
}}
38+
initialState={{
39+
sidebar: {
40+
open: true,
41+
value: GridSidebarValue.Charts,
42+
},
43+
chartsIntegration: {
44+
charts: {
45+
main: {
46+
dimensions: ['name'],
47+
values: ['salary'],
48+
chartType: 'column',
49+
},
50+
},
51+
},
52+
}}
53+
experimentalFeatures={{
54+
charts: true,
55+
}}
56+
/>
57+
</div>
58+
<GridChartsRendererProxy id="main" renderer={ChartsRenderer} />
59+
</div>
60+
</GridChartsIntegrationContextProvider>
61+
);
62+
}

‎docs/data/data-grid/charts-integration/GridChartsIntegrationBasic.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from 'react';
2+
import { useDemoData } from '@mui/x-data-grid-generator';
3+
import {
4+
DataGridPremium,
5+
GridChartsPanel,
6+
GridChartsIntegrationContextProvider,
7+
GridChartsRendererProxy,
8+
GridSidebarValue,
9+
} from '@mui/x-data-grid-premium';
10+
import {
11+
ChartsRenderer,
12+
configurationOptions,
13+
} from '@mui/x-charts-premium/ChartsRenderer';
14+
15+
export default function GridChartsIntegrationBasic() {
16+
const { data } = useDemoData({
17+
dataSet: 'Employee',
18+
rowLength: 20,
19+
editable: true,
20+
});
21+
22+
return (
23+
<GridChartsIntegrationContextProvider>
24+
<div style={{ gap: 32, width: '100%' }}>
25+
<div style={{ height: 420, paddingBottom: 16 }}>
26+
<DataGridPremium
27+
{...data}
28+
showToolbar
29+
chartsIntegration
30+
slots={{
31+
chartsPanel: GridChartsPanel,
32+
}}
33+
slotProps={{
34+
chartsPanel: {
35+
schema: configurationOptions,
36+
},
37+
}}
38+
initialState={{
39+
sidebar: {
40+
open: true,
41+
value: GridSidebarValue.Charts,
42+
},
43+
chartsIntegration: {
44+
charts: {
45+
main: {
46+
dimensions: ['name'],
47+
values: ['salary'],
48+
chartType: 'column',
49+
},
50+
},
51+
},
52+
}}
53+
experimentalFeatures={{
54+
charts: true,
55+
}}
56+
/>
57+
</div>
58+
<GridChartsRendererProxy id="main" renderer={ChartsRenderer} />
59+
</div>
60+
</GridChartsIntegrationContextProvider>
61+
);
62+
}

0 commit comments

Comments
 (0)