@mui/x-charts 6.0.0-alpha.9 → 6.18.1

package/esm/LineChart/LineChart.js

@@ -15,6 +15,16 @@ import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
+ */
 const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   const {
     xAxis,
@@ -91,7 +101,10 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -101,6 +114,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
+   * The two properties accept the following values:
+   * - 'none': display nothing.
+   * - 'line': display a line at the current mouse position.
+   * - 'band': display a band at the current mouse position. Only available with band scale.
+   */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
@@ -111,18 +131,22 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -134,13 +158,25 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
   disableAxisListener: PropTypes.bool,
   /**
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
   height: PropTypes.number,
   /**
    * Indicate which axis to display the left of the charts.
@@ -148,41 +184,47 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
-    itemWidth: PropTypes.number,
-    markSize: PropTypes.number,
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number
-    }),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    spacing: PropTypes.number
+    slots: PropTypes.object
   }),
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default object Depends on the charts type.
+   */
   margin: PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
@@ -195,18 +237,22 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -215,6 +261,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   series: PropTypes.arrayOf(PropTypes.shape({
     area: PropTypes.bool,
     color: PropTypes.string,
+    connectNulls: PropTypes.bool,
     curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
     data: PropTypes.arrayOf(PropTypes.number),
     dataKey: PropTypes.string,
@@ -250,6 +297,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -258,18 +307,22 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -281,7 +334,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
   width: PropTypes.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
@@ -294,6 +355,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -302,12 +364,19 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
@@ -320,6 +389,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -328,6 +398,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,

package/esm/LineChart/LineElement.js

@@ -57,6 +57,16 @@ LineElementPath.propTypes = {
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineElement API](https://mui.com/x/api/charts/line-element/)
+ */
 function LineElement(props) {
   var _slots$line;
   const {

package/esm/LineChart/LineHighlightElement.js

@@ -33,6 +33,16 @@ const HighlightElement = styled('circle', {
   transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
   fill: ownerState.color
 }));
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+ */
 function LineHighlightElement(props) {
   const {
       x,

package/esm/LineChart/LineHighlightPlot.js

@@ -9,6 +9,16 @@ import { LineHighlightElement } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { InteractionContext } from '../context/InteractionProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+ */
 function LineHighlightPlot(props) {
   var _axis$x, _slots$lineHighlight;
   const {
@@ -50,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);
@@ -62,7 +73,7 @@ function LineHighlightPlot(props) {
           throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
         }
         const x = xScale(xData[highlightedIndex]);
-        const y = yScale(stackedData[highlightedIndex][1]);
+        const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
         return /*#__PURE__*/_jsx(Element, _extends({
           id: seriesId,
           color: series[seriesId].color,

package/esm/LineChart/LinePlot.js

@@ -10,6 +10,16 @@ import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+ */
 function LinePlot(props) {
   const {
       slots,
@@ -38,31 +48,32 @@ function LinePlot(props) {
       ids: groupIds
     }) => {
       return groupIds.flatMap(seriesId => {
+        var _xData$map;
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          data,
+          connectNulls
         } = 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) => connectNulls || 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 formattedData = (_xData$map = xData == null ? void 0 : xData.map((x, index) => ({
+          x,
+          y: stackedData[index]
+        }))) != null ? _xData$map : [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
         return /*#__PURE__*/_jsx(LineElement, {
           id: seriesId,
           d: linePath.curve(curve)(d3Data) || undefined,

package/esm/LineChart/MarkElement.js

@@ -38,7 +38,7 @@ const MarkElementPath = styled('path', {
 }) => ({
   transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
   transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
-  fill: theme.palette.background.paper,
+  fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
   strokeWidth: 2
 }));
@@ -59,6 +59,16 @@ MarkElementPath.propTypes = {
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+ */
 function MarkElement(props) {
   var _axis$x;
   const {

package/esm/LineChart/MarkPlot.js

@@ -8,6 +8,16 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+ */
 function MarkPlot(props) {
   var _slots$mark;
   const {
@@ -42,6 +52,7 @@ function MarkPlot(props) {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
+          data,
           showMark = true
         } = series[seriesId];
         if (showMark === false) {
@@ -68,36 +79,57 @@ 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",
             color: series[seriesId].color,
             x: x,
-            y: y,
+            y: y // Don't knwo why TS don't get from the filter that y can't be null
+            ,
             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;