Merge branch 'next' into getRowsToExport

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@49abf0ba24d0b7953cb586944e918a0b92074c80 # v2.22.4
+        uses: github/codeql-action/init@74483a38d39275f33fcff5f35b679b5ca4a26a99 # v2.22.5
         with:
           languages: typescript
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -29,4 +29,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@49abf0ba24d0b7953cb586944e918a0b92074c80 # v2.22.4
+        uses: github/codeql-action/analyze@74483a38d39275f33fcff5f35b679b5ca4a26a99 # v2.22.5

.github/workflows/scorecards.yml

@@ -44,6 +44,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@49abf0ba24d0b7953cb586944e918a0b92074c80 # v2.22.4
+        uses: github/codeql-action/upload-sarif@74483a38d39275f33fcff5f35b679b5ca4a26a99 # v2.22.5
         with:
           sarif_file: results.sarif

CHANGELOG.md

@@ -3,6 +3,67 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.18.0
+
+_Nov 3, 2023_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 The Charts package is now officially stable!
+- 🥧 Pie charts are now animated.
+- 📈 Line charts now support partial data, and can interpolate missing data.
+
+<img width="380" alt="line charts with partial data" src="https://github.com/mui/mui-x/assets/45398769/385ecf77-19b2-4a03-8aef-5d547db1d9ad">
+
+- ✨ Allow to ignore [diacritics](https://en.wikipedia.org/wiki/Diacritic) when filtering
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/[email protected]`
+
+- [DataGrid] Allow to ignore [diacritics](https://en.wikipedia.org/wiki/Diacritic) when filtering (#10569) @cherniavskii
+- [DataGrid] Fix a typo in `gridFilterApi` (#10786) @vu-dao-93
+- [DataGrid] Fix `undefined` row id (#10670) @romgrk
+- [DataGrid] Make column autosizing work with dynamic row height (#10693) @cherniavskii
+- [l10n] Allow to customize sorting label per column (#10839) @JerryWu1234
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+#### `@mui/[email protected]` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Date Pickers
+
+#### `@mui/[email protected]`
+
+- [pickers] Add reference links to calendar components (#10644) @michelengelen
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Charts / `@mui/[email protected]`
+
+- [charts] Add animation on pie chart (#10782) @alexfauquette
+- [charts] Add reference links to shared/misc chart components (#10660) @michelengelen
+- [charts] Allows to connect nulls (#10803) @alexfauquette
+- [charts] Fix axis highlight in dark mode (#10820) @LukasTy
+
+### Docs
+
+- [docs] Add a data grid recipe for autosizing columns after fetching row-data (#10822) @michelengelen
+- [docs] Add a data grid recipe showing how to remove cell outline on `focus` (#10843) @michelengelen
+- [docs] Add demo about how to use charts margin (#10886) @alexfauquette
+- [docs] Improve custom field input demos readability (#10559) @LukasTy
+
+### Core
+
+- [core] Generate `slot` API descriptions based on `slots` or `components` (#10879) @LukasTy
+
 ## 6.17.0
 
 _Oct 27, 2023_

docs/.link-check-errors.txt

@@ -15,4 +15,3 @@ Broken links found by `yarn docs:link-check` that exist:
 - https://mui.com/x/api/data-grid/data-grid/#props
 - https://mui.com/x/api/data-grid/data-grid/#slots
 - https://mui.com/x/api/date-pickers/date-picker/#slots
-- https://mui.com/x/react-data-grid/migration-v4/

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+const data = [4000, 3000, 2000, null, 1890, 2390, 3490];
+const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
+
+export default function AreaChartConnectNulls() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <LineChart
+        xAxis={[{ data: xData, scaleType: 'point' }]}
+        series={[{ data, showMark: false, area: true }]}
+        height={200}
+        margin={{ top: 10, bottom: 20 }}
+      />
+      <LineChart
+        xAxis={[{ data: xData, scaleType: 'point' }]}
+        series={[{ data, showMark: false, area: true, connectNulls: true }]}
+        height={200}
+        margin={{ top: 10, bottom: 20 }}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+const data = [4000, 3000, 2000, null, 1890, 2390, 3490];
+const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
+
+export default function AreaChartConnectNulls() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <LineChart
+        xAxis={[{ data: xData, scaleType: 'point' }]}
+        series={[{ data, showMark: false, area: true }]}
+        height={200}
+        margin={{ top: 10, bottom: 20 }}
+      />
+      <LineChart
+        xAxis={[{ data: xData, scaleType: 'point' }]}
+        series={[{ data, showMark: false, area: true, connectNulls: true }]}
+        height={200}
+        margin={{ top: 10, bottom: 20 }}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,12 @@
+<LineChart
+  xAxis={[{ data: xData, scaleType: 'point' }]}
+  series={[{ data, showMark: false, area: true }]}
+  height={200}
+  margin={{ top: 10, bottom: 20 }}
+/>
+<LineChart
+  xAxis={[{ data: xData, scaleType: 'point' }]}
+  series={[{ data, showMark: false, area: true, connectNulls: true }]}
+  height={200}
+  margin={{ top: 10, bottom: 20 }}
+/>

docs/data/charts/areas-demo/areas-demo.md

@@ -21,3 +21,7 @@ title: Charts - Areas demonstration
 ## PercentAreaChart
 
 {{"demo": "PercentAreaChart.js"}}
+
+## AreaChartConnectNulls
+
+{{"demo": "AreaChartConnectNulls.js"}}

docs/data/charts/line-demo/LineChartConnectNulls.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+const data = [4000, 3000, 2000, null, 1890, 2390, 3490];
+const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
+export default function LineChartConnectNulls() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <LineChart
+        xAxis={[{ data: xData, scaleType: 'point' }]}
+        series={[{ data }]}
+        height={200}
+        margin={{ top: 10, bottom: 20 }}
+      />
+      <LineChart
+        xAxis={[{ data: xData, scaleType: 'point' }]}
+        series={[{ data, connectNulls: true }]}
+        height={200}
+        margin={{ top: 10, bottom: 20 }}
+      />
+    </Stack>
+  );
+}

docs/data/charts/line-demo/LineChartConnectNulls.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+const data = [4000, 3000, 2000, null, 1890, 2390, 3490];
+const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
+export default function LineChartConnectNulls() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <LineChart
+        xAxis={[{ data: xData, scaleType: 'point' }]}
+        series={[{ data }]}
+        height={200}
+        margin={{ top: 10, bottom: 20 }}
+      />
+      <LineChart
+        xAxis={[{ data: xData, scaleType: 'point' }]}
+        series={[{ data, connectNulls: true }]}
+        height={200}
+        margin={{ top: 10, bottom: 20 }}
+      />
+    </Stack>
+  );
+}

docs/data/charts/line-demo/LineChartConnectNulls.tsx.preview

@@ -0,0 +1,12 @@
+<LineChart
+  xAxis={[{ data: xData, scaleType: 'point' }]}
+  series={[{ data }]}
+  height={200}
+  margin={{ top: 10, bottom: 20 }}
+/>
+<LineChart
+  xAxis={[{ data: xData, scaleType: 'point' }]}
+  series={[{ data, connectNulls: true }]}
+  height={200}
+  margin={{ top: 10, bottom: 20 }}
+/>

docs/data/charts/line-demo/line-demo.md

@@ -21,3 +21,7 @@ title: Charts - Line demonstration
 ## BiaxialLineChart
 
 {{"demo": "BiaxialLineChart.js"}}
+
+## LineChartConnectNulls
+
+{{"demo": "LineChartConnectNulls.js"}}

docs/data/charts/lines/ConnectNulls.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+export default function ConnectNulls() {
+  const [connectNulls, setConnectNulls] = React.useState(true);
+
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <FormControlLabel
+        checked={connectNulls}
+        control={
+          <Checkbox onChange={(event) => setConnectNulls(event.target.checked)} />
+        }
+        label="connectNulls"
+        labelPlacement="end"
+      />
+      <LineChart
+        xAxis={[{ data: [1, 2, 3, 5, 8, 10, 12, 15, 16, 18, 20] }]}
+        series={[
+          {
+            data: [2, 5, 6.5, 3, 8, 10, 9.5, 2.5, 6, 10, 8],
+          },
+          {
+            data: [null, null, 5.5, 2, null, null, 8.5, 1.5, 5],
+            connectNulls,
+            area: true,
+          },
+        ]}
+        height={200}
+        margin={{ top: 10, bottom: 20 }}
+      />
+    </Stack>
+  );
+}

docs/data/charts/lines/ConnectNulls.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+export default function ConnectNulls() {
+  const [connectNulls, setConnectNulls] = React.useState(true);
+
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <FormControlLabel
+        checked={connectNulls}
+        control={
+          <Checkbox onChange={(event) => setConnectNulls(event.target.checked)} />
+        }
+        label="connectNulls"
+        labelPlacement="end"
+      />
+      <LineChart
+        xAxis={[{ data: [1, 2, 3, 5, 8, 10, 12, 15, 16, 18, 20] }]}
+        series={[
+          {
+            data: [2, 5, 6.5, 3, 8, 10, 9.5, 2.5, 6, 10, 8],
+          },
+          {
+            data: [null, null, 5.5, 2, null, null, 8.5, 1.5, 5],
+            connectNulls,
+            area: true,
+          },
+        ]}
+        height={200}
+        margin={{ top: 10, bottom: 20 }}
+      />
+    </Stack>
+  );
+}

docs/data/charts/lines/DifferentLength.js

@@ -18,7 +18,8 @@ export default function DifferentLength() {
           valueFormatter: (value) => (value == null ? '?' : value.toString()),
         },
       ]}
-      height={300}
+      height={200}
+      margin={{ top: 10, bottom: 20 }}
     />
   );
 }

docs/data/charts/lines/DifferentLength.tsx

@@ -18,7 +18,8 @@ export default function DifferentLength() {
           valueFormatter: (value) => (value == null ? '?' : value.toString()),
         },
       ]}
-      height={300}
+      height={200}
+      margin={{ top: 10, bottom: 20 }}
     />
   );
 }

docs/data/charts/lines/lines.md

@@ -54,6 +54,8 @@ For more information, see [stacking docs](/x/react-charts/stacking/).
 
 ## Partial data
 
+### Skip missing points
+
 Line series can have less data than the axis.
 You can handle lines with partial data or data starting at different points by providing `null` values.
 
@@ -79,6 +81,14 @@ The following code plots a line for x between 2 and 4.
 
 :::
 
+### Connect missing points
+
+Line series accepts a `connectNulls` property which will continue the interpolation across points with a `null` value.
+This property can link two sets of points, with `null` data between them.
+However, it can not extrapolate the curve before the first non-null data point or after the last one.
+
+{{"demo": "ConnectNulls.js"}}
+
 ## Styling
 
 ### Interpolation

docs/data/charts/overview/overview.md

@@ -8,10 +8,6 @@ packageName: '@mui/x-charts'
 
 <p class="description">A fast and extendable library of react chart components for data visualization.</p>
 
-:::warning
-This library is in the alpha phase. This means it might receive some breaking changes if they are needed to improve the components.
-:::
-
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Overview

docs/data/charts/pie/PieActiveArc.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PieChart, pieArcClasses } from '@mui/x-charts/PieChart';
+import { PieChart } from '@mui/x-charts/PieChart';
 
 const data = [
   { id: 0, value: 10, label: 'series A' },
@@ -14,14 +14,9 @@ export default function PieActiveArc() {
         {
           data,
           highlightScope: { faded: 'global', highlighted: 'item' },
-          faded: { innerRadius: 30, additionalRadius: -30 },
+          faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
         },
       ]}
-      sx={{
-        [`& .${pieArcClasses.faded}`]: {
-          fill: 'gray',
-        },
-      }}
       height={200}
     />
   );