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

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -1,15 +1,19 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["scale", "ticksNumber"];
+const _excluded = ["scale", "tickNumber"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
+import { getMinXTranslation } from '../internals/geometry';
+import { useMounted } from '../hooks/useMounted';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -27,42 +31,112 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAxisUtilityClass, classes);
 };
+function addLabelDimension(xTicks, {
+  tickLabelStyle: style,
+  tickLabelInterval,
+  isMounted
+}) {
+  const withDimension = xTicks.map(tick => {
+    if (!isMounted || tick.formattedValue === undefined) {
+      return _extends({}, tick, {
+        width: 0,
+        height: 0
+      });
+    }
+    const tickSizes = getWordsByLines({
+      style,
+      needsComputation: true,
+      text: tick.formattedValue
+    });
+    return _extends({}, tick, {
+      width: Math.max(...tickSizes.map(size => size.width)),
+      height: Math.max(tickSizes.length * tickSizes[0].height)
+    });
+  });
+  if (typeof tickLabelInterval === 'function') {
+    return withDimension.map((item, index) => _extends({}, item, {
+      skipLabel: !tickLabelInterval(item.value, index)
+    }));
+  }
+
+  // Filter label to avoid overlap
+  let textStart = 0;
+  let textEnd = 0;
+  return withDimension.map((item, labelIndex) => {
+    const {
+      width,
+      offset,
+      labelOffset,
+      height
+    } = item;
+    const distance = getMinXTranslation(width, height, style?.angle);
+    const textPosition = offset + labelOffset;
+    const gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin.
+
+    textStart = textPosition - gapRatio * distance / 2;
+    if (labelIndex > 0 && textStart < textEnd) {
+      // Except for the first label, we skip all label that overlap with the last accepted.
+      // Notice that the early return prevents `textEnd` from being updated.
+      return _extends({}, item, {
+        skipLabel: true
+      });
+    }
+    textEnd = textPosition + gapRatio * distance / 2;
+    return item;
+  });
+}
 const defaultProps = {
   position: 'bottom',
   disableLine: false,
   disableTicks: false,
-  tickFontSize: 12,
-  labelFontSize: 14,
   tickSize: 6
 };
+
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
+ */
 function ChartsXAxis(inProps) {
   const props = useThemeProps({
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsXAxis'
   });
+  const {
+    xAxisIds
+  } = React.useContext(CartesianContext);
   const _React$useContext = React.useContext(CartesianContext),
-    _props$axisId = props.axisId,
+    _ref = props.axisId ?? xAxisIds[0],
     {
       xAxis: {
-        [_props$axisId]: {
+        [_ref]: {
           scale: xScale,
-          ticksNumber
+          tickNumber
         }
       }
     } = _React$useContext,
-    settings = _objectWithoutPropertiesLoose(_React$useContext.xAxis[_props$axisId], _excluded);
+    settings = _objectWithoutPropertiesLoose(_React$useContext.xAxis[_ref], _excluded);
+  const isMounted = useMounted();
   const defaultizedProps = _extends({}, defaultProps, settings, props);
   const {
     position,
     disableLine,
     disableTicks,
-    tickFontSize,
+    tickLabelStyle,
     label,
+    labelStyle,
+    tickFontSize,
     labelFontSize,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
-    slotProps
+    slotProps,
+    tickInterval,
+    tickLabelInterval
   } = defaultizedProps;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
@@ -75,20 +149,52 @@ function ChartsXAxis(inProps) {
     height
   } = React.useContext(DrawingContext);
   const tickSize = disableTicks ? 4 : tickSizeProp;
+  const positionSign = position === 'bottom' ? 1 : -1;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? ChartsText;
+  const Label = slots?.axisLabel ?? ChartsText;
+  const axisTickLabelProps = useSlotProps({
+    elementType: TickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
+    additionalProps: {
+      style: _extends({
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
+        fontSize: tickFontSize ?? 12
+      }, tickLabelStyle),
+      className: classes.tickLabel
+    },
+    className: classes.tickLabel,
+    ownerState: {}
+  });
   const xTicks = useTicks({
     scale: xScale,
-    ticksNumber,
-    valueFormatter
+    tickNumber,
+    valueFormatter,
+    tickInterval
+  });
+  const xTicksWithDimension = addLabelDimension(xTicks, {
+    tickLabelStyle: axisTickLabelProps.style,
+    tickLabelInterval,
+    isMounted
   });
-  const positionSigne = position === 'bottom' ? 1 : -1;
   const labelRefPoint = {
     x: left + width / 2,
-    y: positionSigne * (tickFontSize + tickSize + 10)
+    y: positionSign * (tickSize + 22)
   };
-  const Line = slots?.axisLine ?? ChartsLine;
-  const Tick = slots?.axisTick ?? ChartsTick;
-  const TickLabel = slots?.axisTickLabel ?? ChartsTickLabel;
-  const Label = slots?.axisLabel ?? ChartsLabel;
+  const axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      style: _extends({
+        fontSize: labelFontSize ?? 14,
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
+      }, labelStyle)
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
@@ -96,40 +202,33 @@ function ChartsXAxis(inProps) {
       x1: xScale.range()[0],
       x2: xScale.range()[1],
       className: classes.line
-    }, slotProps?.axisLine)), xTicks.map(({
+    }, slotProps?.axisLine)), xTicksWithDimension.map(({
       formattedValue,
       offset,
-      labelOffset
+      labelOffset,
+      skipLabel
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
-      const yTickLabel = positionSigne * (tickSize + 3);
+      const yTickLabel = positionSign * (tickSize + 3);
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
-          y2: positionSigne * tickSize,
+          y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
+        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
-          y: yTickLabel,
-          "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps?.axisTickLabel, {
-          children: formattedValue
+          y: yTickLabel
+        }, axisTickLabelProps, {
+          text: formattedValue.toString()
         }))]
       }, index);
-    }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
-      },
-      className: classes.label
-    }, slotProps?.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/_jsx("g", {
+      className: classes.label,
+      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
@@ -138,9 +237,10 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Id of the axis to render.
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
    */
-  axisId: PropTypes.string.isRequired,
+  axisId: PropTypes.string,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -167,8 +267,13 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   /**
    * The font size of the axis label.
    * @default 14
+   * @deprecated Consider using `labelStyle.fontSize` instead.
    */
   labelFontSize: PropTypes.number,
+  /**
+   * The style applied to the axis label.
+   */
+  labelStyle: PropTypes.object,
   /**
    * Position of the axis.
    */
@@ -191,8 +296,28 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   /**
    * The font size of the axis ticks text.
    * @default 12
+   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
    */
   tickFontSize: PropTypes.number,
+  /**
+   * Defines which ticks are displayed. Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   */
+  tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+  /**
+   * The style applied to ticks text.
+   */
+  tickLabelStyle: PropTypes.object,
   /**
    * Maximal step between two ticks.
    * When using time data, the value is assumed to be in ms.

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -1,14 +1,16 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["scale", "ticksNumber"];
+const _excluded = ["scale", "tickNumber"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
-import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsText } from '../internals/components/ChartsText';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -35,22 +37,35 @@ const defaultProps = {
   labelFontSize: 14,
   tickSize: 6
 };
+
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
+ */
 function ChartsYAxis(inProps) {
   const props = useThemeProps({
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsYAxis'
   });
+  const {
+    yAxisIds
+  } = React.useContext(CartesianContext);
   const _React$useContext = React.useContext(CartesianContext),
-    _props$axisId = props.axisId,
+    _ref = props.axisId ?? yAxisIds[0],
     {
       yAxis: {
-        [_props$axisId]: {
+        [_ref]: {
           scale: yScale,
-          ticksNumber
+          tickNumber
         }
       }
     } = _React$useContext,
-    settings = _objectWithoutPropertiesLoose(_React$useContext.yAxis[_props$axisId], _excluded);
+    settings = _objectWithoutPropertiesLoose(_React$useContext.yAxis[_ref], _excluded);
   const defaultizedProps = _extends({}, defaultProps, settings, props);
   const {
     position,
@@ -77,18 +92,44 @@ function ChartsYAxis(inProps) {
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = useTicks({
     scale: yScale,
-    ticksNumber,
+    tickNumber,
     valueFormatter
   });
-  const positionSigne = position === 'right' ? 1 : -1;
+  const positionSign = position === 'right' ? 1 : -1;
   const labelRefPoint = {
-    x: positionSigne * (tickFontSize + tickSize + 10),
+    x: positionSign * (tickFontSize + tickSize + 10),
     y: top + height / 2
   };
-  const Line = slots?.axisLine ?? ChartsLine;
-  const Tick = slots?.axisTick ?? ChartsTick;
-  const TickLabel = slots?.axisTickLabel ?? ChartsTickLabel;
-  const Label = slots?.axisLabel ?? ChartsLabel;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? ChartsText;
+  const Label = slots?.axisLabel ?? ChartsText;
+  const axisTickLabelProps = useSlotProps({
+    elementType: TickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
+    additionalProps: {
+      style: {
+        fontSize: tickFontSize,
+        textAnchor: position === 'right' ? 'start' : 'end',
+        dominantBaseline: 'central'
+      },
+      className: classes.tickLabel
+    },
+    ownerState: {}
+  });
+  const axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      style: {
+        fontSize: labelFontSize,
+        angle: positionSign * 90,
+        textAnchor: 'middle',
+        dominantBaseline: 'auto'
+      }
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
@@ -101,36 +142,26 @@ function ChartsYAxis(inProps) {
       offset,
       labelOffset
     }, index) => {
-      const xTickLabel = positionSigne * (tickSize + 2);
+      const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(0, ${offset})`,
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
-          x2: positionSigne * tickSize,
+          x2: positionSign * tickSize,
           className: classes.tick
         }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel,
-          "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps?.axisTickLabel, {
-          children: formattedValue.toLocaleString()
-        }))]
+          text: formattedValue.toString()
+        }, axisTickLabelProps))]
       }, index);
-    }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transform: `rotate(${positionSigne * 90}deg)`,
-        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
-      },
-      className: classes.label
-    }, slotProps?.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/_jsx("g", {
+      className: classes.label,
+      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
@@ -139,9 +170,10 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Id of the axis to render.
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
    */
-  axisId: PropTypes.string.isRequired,
+  axisId: PropTypes.string,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -168,8 +200,13 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   /**
    * The font size of the axis label.
    * @default 14
+   * @deprecated Consider using `labelStyle.fontSize` instead.
    */
   labelFontSize: PropTypes.number,
+  /**
+   * The style applied to the axis label.
+   */
+  labelStyle: PropTypes.object,
   /**
    * Position of the axis.
    */
@@ -192,8 +229,28 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   /**
    * The font size of the axis ticks text.
    * @default 12
+   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
    */
   tickFontSize: PropTypes.number,
+  /**
+   * Defines which ticks are displayed. Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   */
+  tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+  /**
+   * The style applied to ticks text.
+   */
+  tickLabelStyle: PropTypes.object,
   /**
    * Maximal step between two ticks.
    * When using time data, the value is assumed to be in ms.

package/modern/LineChart/AreaElement.js

@@ -55,6 +55,16 @@ AreaElementPath.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/)
+ * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+ *
+ * API:
+ *
+ * - [AreaElement API](https://mui.com/x/api/charts/area-element/)
+ */
 function AreaElement(props) {
   const {
       id,

package/modern/LineChart/AreaPlot.js

@@ -10,6 +10,17 @@ import { AreaElement } from './AreaElement';
 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/)
+ * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+ */
 function AreaPlot(props) {
   const {
       slots,
@@ -41,20 +52,28 @@ function AreaPlot(props) {
         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.`);
+        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) => connectNulls || 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) => ({
+        const formattedData = xData?.map((x, index) => ({
           x,
           y: stackedData[index]
-        }));
+        })) ?? [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
         return !!series[seriesId].area && /*#__PURE__*/_jsx(AreaElement, {
           id: seriesId,
           d: areaPath.curve(curve)(d3Data) || undefined,