@mui/x-charts 6.0.0-alpha.16 → 6.0.0-alpha.17

package/BarChart/formatter.js

@@ -60,7 +60,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v.toLocaleString())
+    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v?.toLocaleString())
   };
 };
 var _default = exports.default = formatter;

package/CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.17.0
+
+_Oct 27, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 The Tree View package is now officially stable!
+
+![tree-view-example](https://github.com/mui/mui-x/assets/550141/77d1fe66-d912-49ba-b38f-b853fb90446a)
+
+- ✨ Improve the handling of non-numeric values by Data Grid aggregation
+- 🚀 Support lines with different domains on the line charts
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.17.0`
+
+- [DataGrid] Allow custom debounce time for row positions calculation (#10708) @cherniavskii
+- [DataGrid] Persist stable row index for focused row (#10674) @cherniavskii
+
+#### `@mui/x-data-grid-pro@6.17.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.17.0`, plus:
+
+- [DataGridPro] Fix `undefined` values passed to `valueFormatter` for tree leaf nodes (#10748) @cherniavskii
+
+#### `@mui/x-data-grid-premium@6.17.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.17.0`, plus:
+
+- [DataGridPremium] Fix `avg` aggregation to ignore non-numeric values (#10787) @cherniavskii
+- [DataGridPremium] Fix `size` aggregation to ignore `undefined` values (#10745) @cherniavskii
+- [DataGridPremium] Fix `sum` aggregation to ignore non-numeric values (#10730) @cherniavskii
+- [DataGridPremium] Fix cell selection throwing index error on second page and beyond (#10784) @MBilalShafi
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.17.0`
+
+- [fields] POC: Use `contentEditable` on `FakeTextField` (#10779) @flaviendelangle
+- [pickers] Fix weekday label localization (#10809) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.17.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.17.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.17`
+
+- [charts] Fix text position in Safari (#10815) @lhilgert9
+- [charts] Support lines with different domains (#10801) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@6.17.0`
+
+No change
+
+### Docs
+
+- [docs] Correct editing related props' description (#10798) @MBilalShafi
+- [docs] Fix RTL data grid demo (#10728) @oliviertassinari
+- [docs] Fix unclosed warning (#10796) @flaviendelangle
+- [docs] Improve performance of `Save and restore the state from external storage` recipe (#10811) @michelengelen
+
+- [test] Add missing type on `cleanText` utility function (#10780) @flaviendelangle
+
 ## 6.16.3
 
 _Oct 20, 2023_

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -49,27 +49,33 @@ function DefaultChartsAxisContent(props) {
           label,
           valueFormatter,
           data
-        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.markCell,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
-              ownerState: {
-                color
-              },
-              boxShadow: 1
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.labelCell,
-            children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-              children: label
-            }) : null
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.valueCell,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-              children: valueFormatter(data[dataIndex])
-            })
-          })]
-        }, id))
+        }) => {
+          const formattedValue = valueFormatter(data[dataIndex]);
+          if (formattedValue == null) {
+            return null;
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: classes.markCell,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
+                ownerState: {
+                  color
+                },
+                boxShadow: 1
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: classes.labelCell,
+              children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                children: label
+              }) : null
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: classes.valueCell,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                children: formattedValue
+              })
+            })]
+          }, id);
+        })
       })]
     })
   });

package/LineChart/AreaPlot.js

@@ -61,20 +61,26 @@ function AreaPlot(props) {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          data
         } = series[seriesId];
         const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+          }
         }
-        const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).y0(d => yScale(d.y[0])).y1(d => yScale(d.y[1]));
+        const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).defined((_, i) => data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
         const curve = (0, _getCurve.default)(series[seriesId].curve);
         const d3Data = xData?.map((x, index) => ({
           x,
           y: stackedData[index]
-        }));
+        })) ?? [];
         return !!series[seriesId].area && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaElement.AreaElement, {
           id: seriesId,
           d: areaPath.curve(curve)(d3Data) || undefined,

package/LineChart/LineHighlightPlot.js

@@ -68,9 +68,10 @@ function LineHighlightPlot(props) {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
+          data,
           disableHighlight
         } = series[seriesId];
-        if (disableHighlight) {
+        if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
         const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);

package/LineChart/LinePlot.js

@@ -60,25 +60,26 @@ function LinePlot(props) {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          data
         } = series[seriesId];
         const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
-        }
-        const linePath = (0, _d3Shape.line)().x(d => xScale(d.x)).y(d => yScale(d.y[1]));
         if (process.env.NODE_ENV !== 'production') {
-          if (xData.length !== stackedData.length) {
-            throw new Error(`MUI: data length of the x axis (${xData.length} items) does not match length of series (${stackedData.length} items)`);
+          if (xData === undefined) {
+            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
           }
         }
+        const linePath = (0, _d3Shape.line)().x(d => xScale(d.x)).defined((_, i) => data[i] != null).y(d => yScale(d.y[1]));
         const curve = (0, _getCurve.default)(series[seriesId].curve);
         const d3Data = xData?.map((x, index) => ({
           x,
-          y: stackedData[index] ?? [0, 0]
-        }));
+          y: stackedData[index]
+        })) ?? [];
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineElement.LineElement, {
           id: seriesId,
           d: linePath.curve(curve)(d3Data) || undefined,

package/LineChart/MarkPlot.js

@@ -60,6 +60,7 @@ function MarkPlot(props) {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
+          data,
           showMark = true
         } = series[seriesId];
         if (showMark === false) {
@@ -86,28 +87,48 @@ function MarkPlot(props) {
           throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
         }
         return xData?.map((x, index) => {
-          const y = stackedData[index][1];
+          const value = data[index] == null ? null : stackedData[index][1];
           return {
             x: xScale(x),
-            y: yScale(y),
+            y: value === null ? null : yScale(value),
             position: x,
-            value: y,
+            value,
             index
           };
-        }).filter(isInRange).map(({
+        }).filter(({
           x,
           y,
           index,
           position,
           value
         }) => {
-          return showMark === true || showMark({
+          if (value === null || y === null) {
+            // Remove missing data point
+            return false;
+          }
+          if (!isInRange({
+            x,
+            y
+          })) {
+            // Remove out of range
+            return false;
+          }
+          if (showMark === true) {
+            return true;
+          }
+          return showMark({
             x,
             y,
             index,
             position,
             value
-          }) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
+          });
+        }).map(({
+          x,
+          y,
+          index
+        }) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
             id: seriesId,
             dataIndex: index,
             shape: "circle",
@@ -115,7 +136,7 @@ function MarkPlot(props) {
             x: x,
             y: y,
             highlightScope: series[seriesId].highlightScope
-          }, slotProps?.mark), `${seriesId}-${index}`) : null;
+          }, slotProps?.mark), `${seriesId}-${index}`);
         });
       });
     })

package/LineChart/formatter.js

@@ -31,7 +31,7 @@ const formatter = (params, dataset) => {
           d3Dataset[index][id] = value;
         }
       });
-    } else if (dataset === undefined) {
+    } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
       throw new Error([`MUI: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
@@ -47,7 +47,8 @@ const formatter = (params, dataset) => {
       // Use dataKey if needed and available
       const dataKey = series[id].dataKey;
       return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    })).value((d, key) => d[key] ?? 0) // defaultize null value to 0
+    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = (0, _extends2.default)({}, series[id], {
@@ -59,7 +60,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v.toLocaleString())
+    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v?.toLocaleString())
   };
 };
 var _default = exports.default = formatter;

package/esm/BarChart/formatter.js

@@ -53,7 +53,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v.toLocaleString())
+    series: defaultizeValueFormatter(completedSeries, v => v == null ? void 0 : v.toLocaleString())
   };
 };
 export default formatter;

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -41,27 +41,33 @@ export function DefaultChartsAxisContent(props) {
           label,
           valueFormatter,
           data
-        }) => /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.markCell,
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-              ownerState: {
-                color
-              },
-              boxShadow: 1
-            })
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.labelCell,
-            children: label ? /*#__PURE__*/_jsx(Typography, {
-              children: label
-            }) : null
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.valueCell,
-            children: /*#__PURE__*/_jsx(Typography, {
-              children: valueFormatter(data[dataIndex])
-            })
-          })]
-        }, id))
+        }) => {
+          const formattedValue = valueFormatter(data[dataIndex]);
+          if (formattedValue == null) {
+            return null;
+          }
+          return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+            children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.markCell,
+              children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+                ownerState: {
+                  color
+                },
+                boxShadow: 1
+              })
+            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.labelCell,
+              children: label ? /*#__PURE__*/_jsx(Typography, {
+                children: label
+              }) : null
+            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.valueCell,
+              children: /*#__PURE__*/_jsx(Typography, {
+                children: formattedValue
+              })
+            })]
+          }, id);
+        })
       })]
     })
   });

package/esm/LineChart/AreaPlot.js

@@ -49,23 +49,30 @@ function AreaPlot(props) {
       ids: groupIds
     }) => {
       return groupIds.flatMap(seriesId => {
+        var _xData$map;
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          data
         } = series[seriesId];
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+          }
         }
-        const areaPath = d3Area().x(d => xScale(d.x)).y0(d => yScale(d.y[0])).y1(d => yScale(d.y[1]));
+        const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
         const curve = getCurveFactory(series[seriesId].curve);
-        const d3Data = xData == null ? void 0 : xData.map((x, index) => ({
+        const d3Data = (_xData$map = xData == null ? void 0 : xData.map((x, index) => ({
           x,
           y: stackedData[index]
-        }));
+        }))) != null ? _xData$map : [];
         return !!series[seriesId].area && /*#__PURE__*/_jsx(AreaElement, {
           id: seriesId,
           d: areaPath.curve(curve)(d3Data) || undefined,

package/esm/LineChart/LineHighlightPlot.js

@@ -60,9 +60,10 @@ function LineHighlightPlot(props) {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
+          data,
           disableHighlight
         } = series[seriesId];
-        if (disableHighlight) {
+        if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);

package/esm/LineChart/LinePlot.js

@@ -48,31 +48,30 @@ function LinePlot(props) {
       ids: groupIds
     }) => {
       return groupIds.flatMap(seriesId => {
+        var _xData$map;
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          data
         } = series[seriesId];
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
-        }
-        const linePath = d3Line().x(d => xScale(d.x)).y(d => yScale(d.y[1]));
         if (process.env.NODE_ENV !== 'production') {
-          if (xData.length !== stackedData.length) {
-            throw new Error(`MUI: data length of the x axis (${xData.length} items) does not match length of series (${stackedData.length} items)`);
+          if (xData === undefined) {
+            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
           }
         }
+        const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => data[i] != null).y(d => yScale(d.y[1]));
         const curve = getCurveFactory(series[seriesId].curve);
-        const d3Data = xData == null ? void 0 : xData.map((x, index) => {
-          var _stackedData$index;
-          return {
-            x,
-            y: (_stackedData$index = stackedData[index]) != null ? _stackedData$index : [0, 0]
-          };
-        });
+        const d3Data = (_xData$map = xData == null ? void 0 : xData.map((x, index) => ({
+          x,
+          y: stackedData[index]
+        }))) != null ? _xData$map : [];
         return /*#__PURE__*/_jsx(LineElement, {
           id: seriesId,
           d: linePath.curve(curve)(d3Data) || undefined,

package/esm/LineChart/MarkPlot.js

@@ -52,6 +52,7 @@ function MarkPlot(props) {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
+          data,
           showMark = true
         } = series[seriesId];
         if (showMark === false) {
@@ -78,28 +79,48 @@ function MarkPlot(props) {
           throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
         }
         return xData == null ? void 0 : xData.map((x, index) => {
-          const y = stackedData[index][1];
+          const value = data[index] == null ? null : stackedData[index][1];
           return {
             x: xScale(x),
-            y: yScale(y),
+            y: value === null ? null : yScale(value),
             position: x,
-            value: y,
+            value,
             index
           };
-        }).filter(isInRange).map(({
+        }).filter(({
           x,
           y,
           index,
           position,
           value
         }) => {
-          return showMark === true || showMark({
+          if (value === null || y === null) {
+            // Remove missing data point
+            return false;
+          }
+          if (!isInRange({
+            x,
+            y
+          })) {
+            // Remove out of range
+            return false;
+          }
+          if (showMark === true) {
+            return true;
+          }
+          return showMark({
             x,
             y,
             index,
             position,
             value
-          }) ? /*#__PURE__*/_jsx(Mark, _extends({
+          });
+        }).map(({
+          x,
+          y,
+          index
+        }) => {
+          return /*#__PURE__*/_jsx(Mark, _extends({
             id: seriesId,
             dataIndex: index,
             shape: "circle",
@@ -107,7 +128,7 @@ function MarkPlot(props) {
             x: x,
             y: y,
             highlightScope: series[seriesId].highlightScope
-          }, slotProps == null ? void 0 : slotProps.mark), `${seriesId}-${index}`) : null;
+          }, slotProps == null ? void 0 : slotProps.mark), `${seriesId}-${index}`);
         });
       });
     })

package/esm/LineChart/formatter.js

@@ -24,7 +24,7 @@ const formatter = (params, dataset) => {
           d3Dataset[index][id] = value;
         }
       });
-    } else if (dataset === undefined) {
+    } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
       throw new Error([`MUI: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
@@ -40,7 +40,11 @@ const formatter = (params, dataset) => {
       // Use dataKey if needed and available
       const dataKey = series[id].dataKey;
       return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    })).value((d, key) => {
+      var _d$key;
+      return (_d$key = d[key]) != null ? _d$key : 0;
+    }) // defaultize null value to 0
+    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
@@ -52,7 +56,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v.toLocaleString())
+    series: defaultizeValueFormatter(completedSeries, v => v == null ? void 0 : v.toLocaleString())
   };
 };
 export default formatter;

package/esm/internals/components/ChartsText.js

@@ -69,6 +69,8 @@ export function ChartsText(props) {
     children: wordsByLines.map((line, index) => /*#__PURE__*/_jsx("tspan", {
       x: x,
       dy: `${index === 0 ? startDy : wordsByLines[0].height}px`,
+      dominantBaseline: dominantBaseline // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
+      ,
       children: line.text
     }, index))
   }));

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.16
+ * @mui/x-charts v6.0.0-alpha.17
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/ChartsText.js

@@ -79,6 +79,8 @@ function ChartsText(props) {
     children: wordsByLines.map((line, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("tspan", {
       x: x,
       dy: `${index === 0 ? startDy : wordsByLines[0].height}px`,
+      dominantBaseline: dominantBaseline // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
+      ,
       children: line.text
     }, index))
   }));

package/internals/defaultizeColor.d.ts

@@ -51,7 +51,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     stackOrder?: "reverse" | "none" | "appearance" | "ascending" | "descending" | "insideOut" | undefined;
 } | {
     type: "line";
-    data?: number[] | undefined;
+    data?: (number | null)[] | undefined;
     dataKey?: string | undefined;
     stack?: string | undefined;
     area?: boolean | undefined;

package/legacy/BarChart/formatter.js

@@ -57,7 +57,7 @@ var formatter = function formatter(params, dataset) {
     seriesOrder: seriesOrder,
     stackingGroups: stackingGroups,
     series: defaultizeValueFormatter(completedSeries, function (v) {
-      return v.toLocaleString();
+      return v == null ? void 0 : v.toLocaleString();
     })
   };
 };

package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -41,6 +41,10 @@ export function DefaultChartsAxisContent(props) {
             label = _ref.label,
             valueFormatter = _ref.valueFormatter,
             data = _ref.data;
+          var formattedValue = valueFormatter(data[dataIndex]);
+          if (formattedValue == null) {
+            return null;
+          }
           return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: classes.markCell,
@@ -58,7 +62,7 @@ export function DefaultChartsAxisContent(props) {
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: classes.valueCell,
               children: /*#__PURE__*/_jsx(Typography, {
-                children: valueFormatter(data[dataIndex])
+                children: formattedValue
               })
             })]
           }, id);

package/legacy/LineChart/AreaPlot.js

@@ -42,32 +42,41 @@ function AreaPlot(props) {
     children: stackingGroups.flatMap(function (_ref) {
       var groupIds = _ref.ids;
       return groupIds.flatMap(function (seriesId) {
+        var _xData$map;
         var _series$seriesId = series[seriesId],
           _series$seriesId$xAxi = _series$seriesId.xAxisKey,
           xAxisKey = _series$seriesId$xAxi === void 0 ? defaultXAxisId : _series$seriesId$xAxi,
           _series$seriesId$yAxi = _series$seriesId.yAxisKey,
           yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
-          stackedData = _series$seriesId.stackedData;
+          stackedData = _series$seriesId.stackedData,
+          data = _series$seriesId.data;
         var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         var yScale = yAxis[yAxisKey].scale;
         var xData = xAxis[xAxisKey].data;
-        if (xData === undefined) {
-          throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot."));
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot."));
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error("MUI: data length of the x axis (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)"));
+          }
         }
         var areaPath = d3Area().x(function (d) {
           return xScale(d.x);
+        }).defined(function (_, i) {
+          return data[i] != null;
         }).y0(function (d) {
-          return yScale(d.y[0]);
+          return d.y && yScale(d.y[0]);
         }).y1(function (d) {
-          return yScale(d.y[1]);
+          return d.y && yScale(d.y[1]);
         });
         var curve = getCurveFactory(series[seriesId].curve);
-        var d3Data = xData == null ? void 0 : xData.map(function (x, index) {
+        var d3Data = (_xData$map = xData == null ? void 0 : xData.map(function (x, index) {
           return {
             x: x,
             y: stackedData[index]
           };
-        });
+        })) != null ? _xData$map : [];
         return !!series[seriesId].area && /*#__PURE__*/_jsx(AreaElement, {
           id: seriesId,
           d: areaPath.curve(curve)(d3Data) || undefined,

package/legacy/LineChart/LineHighlightPlot.js

@@ -54,8 +54,9 @@ function LineHighlightPlot(props) {
           _series$seriesId$yAxi = _series$seriesId.yAxisKey,
           yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
           stackedData = _series$seriesId.stackedData,
+          data = _series$seriesId.data,
           disableHighlight = _series$seriesId.disableHighlight;
-        if (disableHighlight) {
+        if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
         var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);

package/legacy/LineChart/LinePlot.js

@@ -41,36 +41,39 @@ function LinePlot(props) {
     children: stackingGroups.flatMap(function (_ref) {
       var groupIds = _ref.ids;
       return groupIds.flatMap(function (seriesId) {
+        var _xData$map;
         var _series$seriesId = series[seriesId],
           _series$seriesId$xAxi = _series$seriesId.xAxisKey,
           xAxisKey = _series$seriesId$xAxi === void 0 ? defaultXAxisId : _series$seriesId$xAxi,
           _series$seriesId$yAxi = _series$seriesId.yAxisKey,
           yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
-          stackedData = _series$seriesId.stackedData;
+          stackedData = _series$seriesId.stackedData,
+          data = _series$seriesId.data;
         var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         var yScale = yAxis[yAxisKey].scale;
         var xData = xAxis[xAxisKey].data;
-        if (xData === undefined) {
-          throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot"));
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot"));
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error("MUI: data length of the x axis (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)"));
+          }
         }
         var linePath = d3Line().x(function (d) {
           return xScale(d.x);
+        }).defined(function (_, i) {
+          return data[i] != null;
         }).y(function (d) {
           return yScale(d.y[1]);
         });
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData.length !== stackedData.length) {
-            throw new Error("MUI: data length of the x axis (".concat(xData.length, " items) does not match length of series (").concat(stackedData.length, " items)"));
-          }
-        }
         var curve = getCurveFactory(series[seriesId].curve);
-        var d3Data = xData == null ? void 0 : xData.map(function (x, index) {
-          var _stackedData$index;
+        var d3Data = (_xData$map = xData == null ? void 0 : xData.map(function (x, index) {
           return {
             x: x,
-            y: (_stackedData$index = stackedData[index]) != null ? _stackedData$index : [0, 0]
+            y: stackedData[index]
           };
-        });
+        })) != null ? _xData$map : [];
         return /*#__PURE__*/_jsx(LineElement, {
           id: seriesId,
           d: linePath.curve(curve)(d3Data) || undefined,

package/legacy/LineChart/MarkPlot.js

@@ -48,6 +48,7 @@ function MarkPlot(props) {
           _series$seriesId$yAxi = _series$seriesId.yAxisKey,
           yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
           stackedData = _series$seriesId.stackedData,
+          data = _series$seriesId.data,
           _series$seriesId$show = _series$seriesId.showMark,
           showMark = _series$seriesId$show === void 0 ? true : _series$seriesId$show;
         if (showMark === false) {
@@ -73,27 +74,46 @@ function MarkPlot(props) {
           throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot"));
         }
         return xData == null ? void 0 : xData.map(function (x, index) {
-          var y = stackedData[index][1];
+          var value = data[index] == null ? null : stackedData[index][1];
           return {
             x: xScale(x),
-            y: yScale(y),
+            y: value === null ? null : yScale(value),
             position: x,
-            value: y,
+            value: value,
             index: index
           };
-        }).filter(isInRange).map(function (_ref3) {
+        }).filter(function (_ref3) {
           var x = _ref3.x,
             y = _ref3.y,
             index = _ref3.index,
             position = _ref3.position,
             value = _ref3.value;
-          return showMark === true || showMark({
+          if (value === null || y === null) {
+            // Remove missing data point
+            return false;
+          }
+          if (!isInRange({
+            x: x,
+            y: y
+          })) {
+            // Remove out of range
+            return false;
+          }
+          if (showMark === true) {
+            return true;
+          }
+          return showMark({
             x: x,
             y: y,
             index: index,
             position: position,
             value: value
-          }) ? /*#__PURE__*/_jsx(Mark, _extends({
+          });
+        }).map(function (_ref4) {
+          var x = _ref4.x,
+            y = _ref4.y,
+            index = _ref4.index;
+          return /*#__PURE__*/_jsx(Mark, _extends({
             id: seriesId,
             dataIndex: index,
             shape: "circle",
@@ -101,7 +121,7 @@ function MarkPlot(props) {
             x: x,
             y: y,
             highlightScope: series[seriesId].highlightScope
-          }, slotProps == null ? void 0 : slotProps.mark), "".concat(seriesId, "-").concat(index)) : null;
+          }, slotProps == null ? void 0 : slotProps.mark), "".concat(seriesId, "-").concat(index));
         });
       });
     })

package/legacy/LineChart/formatter.js

@@ -22,7 +22,7 @@ var formatter = function formatter(params, dataset) {
           d3Dataset[index][id] = value;
         }
       });
-    } else if (dataset === undefined) {
+    } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
       throw new Error(["MUI: line series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
@@ -36,7 +36,11 @@ var formatter = function formatter(params, dataset) {
       // Use dataKey if needed and available
       var dataKey = series[id].dataKey;
       return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    })).value(function (d, key) {
+      var _d$key;
+      return (_d$key = d[key]) != null ? _d$key : 0;
+    }) // defaultize null value to 0
+    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach(function (id, index) {
       var dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
@@ -56,7 +60,7 @@ var formatter = function formatter(params, dataset) {
     seriesOrder: seriesOrder,
     stackingGroups: stackingGroups,
     series: defaultizeValueFormatter(completedSeries, function (v) {
-      return v.toLocaleString();
+      return v == null ? void 0 : v.toLocaleString();
     })
   };
 };

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.16
+ * @mui/x-charts v6.0.0-alpha.17
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/components/ChartsText.js

@@ -70,6 +70,8 @@ export function ChartsText(props) {
       return /*#__PURE__*/_jsx("tspan", {
         x: x,
         dy: "".concat(index === 0 ? startDy : wordsByLines[0].height, "px"),
+        dominantBaseline: dominantBaseline // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
+        ,
         children: line.text
       }, index);
     })

package/models/seriesType/line.d.ts

@@ -28,7 +28,7 @@ export interface LineSeriesType extends CommonSeriesType<number>, CartesianSerie
     /**
      * Data associated to the line.
      */
-    data?: number[];
+    data?: (number | null)[];
     /**
      * The key used to retrive data from the dataset.
      */

package/modern/BarChart/formatter.js

@@ -53,7 +53,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v.toLocaleString())
+    series: defaultizeValueFormatter(completedSeries, v => v?.toLocaleString())
   };
 };
 export default formatter;

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -40,27 +40,33 @@ export function DefaultChartsAxisContent(props) {
           label,
           valueFormatter,
           data
-        }) => /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.markCell,
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-              ownerState: {
-                color
-              },
-              boxShadow: 1
-            })
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.labelCell,
-            children: label ? /*#__PURE__*/_jsx(Typography, {
-              children: label
-            }) : null
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.valueCell,
-            children: /*#__PURE__*/_jsx(Typography, {
-              children: valueFormatter(data[dataIndex])
-            })
-          })]
-        }, id))
+        }) => {
+          const formattedValue = valueFormatter(data[dataIndex]);
+          if (formattedValue == null) {
+            return null;
+          }
+          return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+            children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.markCell,
+              children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+                ownerState: {
+                  color
+                },
+                boxShadow: 1
+              })
+            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.labelCell,
+              children: label ? /*#__PURE__*/_jsx(Typography, {
+                children: label
+              }) : null
+            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.valueCell,
+              children: /*#__PURE__*/_jsx(Typography, {
+                children: formattedValue
+              })
+            })]
+          }, id);
+        })
       })]
     })
   });

package/modern/LineChart/AreaPlot.js

@@ -52,20 +52,26 @@ function AreaPlot(props) {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          data
         } = series[seriesId];
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+          }
         }
-        const areaPath = d3Area().x(d => xScale(d.x)).y0(d => yScale(d.y[0])).y1(d => yScale(d.y[1]));
+        const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
         const curve = getCurveFactory(series[seriesId].curve);
         const d3Data = xData?.map((x, index) => ({
           x,
           y: stackedData[index]
-        }));
+        })) ?? [];
         return !!series[seriesId].area && /*#__PURE__*/_jsx(AreaElement, {
           id: seriesId,
           d: areaPath.curve(curve)(d3Data) || undefined,

package/modern/LineChart/LineHighlightPlot.js

@@ -59,9 +59,10 @@ function LineHighlightPlot(props) {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
+          data,
           disableHighlight
         } = series[seriesId];
-        if (disableHighlight) {
+        if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);

package/modern/LineChart/LinePlot.js

@@ -51,25 +51,26 @@ function LinePlot(props) {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          data
         } = series[seriesId];
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
-        }
-        const linePath = d3Line().x(d => xScale(d.x)).y(d => yScale(d.y[1]));
         if (process.env.NODE_ENV !== 'production') {
-          if (xData.length !== stackedData.length) {
-            throw new Error(`MUI: data length of the x axis (${xData.length} items) does not match length of series (${stackedData.length} items)`);
+          if (xData === undefined) {
+            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
           }
         }
+        const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => data[i] != null).y(d => yScale(d.y[1]));
         const curve = getCurveFactory(series[seriesId].curve);
         const d3Data = xData?.map((x, index) => ({
           x,
-          y: stackedData[index] ?? [0, 0]
-        }));
+          y: stackedData[index]
+        })) ?? [];
         return /*#__PURE__*/_jsx(LineElement, {
           id: seriesId,
           d: linePath.curve(curve)(d3Data) || undefined,

package/modern/LineChart/MarkPlot.js

@@ -51,6 +51,7 @@ function MarkPlot(props) {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
+          data,
           showMark = true
         } = series[seriesId];
         if (showMark === false) {
@@ -77,28 +78,48 @@ function MarkPlot(props) {
           throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
         }
         return xData?.map((x, index) => {
-          const y = stackedData[index][1];
+          const value = data[index] == null ? null : stackedData[index][1];
           return {
             x: xScale(x),
-            y: yScale(y),
+            y: value === null ? null : yScale(value),
             position: x,
-            value: y,
+            value,
             index
           };
-        }).filter(isInRange).map(({
+        }).filter(({
           x,
           y,
           index,
           position,
           value
         }) => {
-          return showMark === true || showMark({
+          if (value === null || y === null) {
+            // Remove missing data point
+            return false;
+          }
+          if (!isInRange({
+            x,
+            y
+          })) {
+            // Remove out of range
+            return false;
+          }
+          if (showMark === true) {
+            return true;
+          }
+          return showMark({
             x,
             y,
             index,
             position,
             value
-          }) ? /*#__PURE__*/_jsx(Mark, _extends({
+          });
+        }).map(({
+          x,
+          y,
+          index
+        }) => {
+          return /*#__PURE__*/_jsx(Mark, _extends({
             id: seriesId,
             dataIndex: index,
             shape: "circle",
@@ -106,7 +127,7 @@ function MarkPlot(props) {
             x: x,
             y: y,
             highlightScope: series[seriesId].highlightScope
-          }, slotProps?.mark), `${seriesId}-${index}`) : null;
+          }, slotProps?.mark), `${seriesId}-${index}`);
         });
       });
     })

package/modern/LineChart/formatter.js

@@ -24,7 +24,7 @@ const formatter = (params, dataset) => {
           d3Dataset[index][id] = value;
         }
       });
-    } else if (dataset === undefined) {
+    } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
       throw new Error([`MUI: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
@@ -40,7 +40,8 @@ const formatter = (params, dataset) => {
       // Use dataKey if needed and available
       const dataKey = series[id].dataKey;
       return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    })).value((d, key) => d[key] ?? 0) // defaultize null value to 0
+    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
@@ -52,7 +53,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v.toLocaleString())
+    series: defaultizeValueFormatter(completedSeries, v => v?.toLocaleString())
   };
 };
 export default formatter;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.16
+ * @mui/x-charts v6.0.0-alpha.17
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/ChartsText.js

@@ -69,6 +69,8 @@ export function ChartsText(props) {
     children: wordsByLines.map((line, index) => /*#__PURE__*/_jsx("tspan", {
       x: x,
       dy: `${index === 0 ? startDy : wordsByLines[0].height}px`,
+      dominantBaseline: dominantBaseline // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
+      ,
       children: line.text
     }, index))
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "6.0.0-alpha.16",
+  "version": "6.0.0-alpha.17",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",