@mui/x-charts 7.6.2 → 7.7.1

package/esm/LineChart/LineChart.js

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useId from '@mui/utils/useId';
 import PropTypes from 'prop-types';
 import { AreaPlot } from './AreaPlot';
 import { LinePlot } from './LinePlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { MarkPlot } from './MarkPlot';
 import { ChartsAxis } from '../ChartsAxis/ChartsAxis';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
@@ -15,7 +13,8 @@ import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
 import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
-import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlay } from '../ChartsOverlay';
+import { useLineChartProps } from './useLineChartProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -29,110 +28,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    tooltip,
-    onAxisClick,
-    onAreaClick,
-    onLineClick,
-    onMarkClick,
-    axisHighlight = {
-      x: 'line'
-    },
-    disableLineItemHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    children,
-    slots,
-    slotProps,
-    skipAnimation,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
-  const id = useId();
-  const clipPathId = `${id}-clip-path`;
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
-    ref: ref,
-    series: series.map(s => _extends({
-      disableHighlight: !!disableLineItemHighlight,
-      type: 'line'
-    }, s)),
-    width: width,
-    height: height,
-    margin: margin,
-    xAxis: xAxis ?? [{
-      id: DEFAULT_X_AXIS_KEY,
-      scaleType: 'point',
-      data: Array.from({
-        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
-      }, (_, index) => index)
-    }],
-    yAxis: yAxis,
-    colors: colors,
-    dataset: dataset,
-    sx: sx,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
-      onAxisClick: onAxisClick
-    }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
-      vertical: grid.vertical,
-      horizontal: grid.horizontal
-    }), /*#__PURE__*/_jsxs("g", {
-      clipPath: `url(#${clipPathId})`,
-      children: [/*#__PURE__*/_jsx(AreaPlot, {
-        slots: slots,
-        slotProps: slotProps,
-        onItemClick: onAreaClick,
-        skipAnimation: skipAnimation
-      }), /*#__PURE__*/_jsx(LinePlot, {
-        slots: slots,
-        slotProps: slotProps,
-        onItemClick: onLineClick,
-        skipAnimation: skipAnimation
-      }), /*#__PURE__*/_jsx(ChartsOverlay, {
-        loading: loading,
-        slots: slots,
-        slotProps: slotProps
-      })]
-    }), /*#__PURE__*/_jsx(ChartsAxis, {
-      topAxis: topAxis,
-      leftAxis: leftAxis,
-      rightAxis: rightAxis,
-      bottomAxis: bottomAxis,
-      slots: slots,
-      slotProps: slotProps
-    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(MarkPlot, {
-      slots: slots,
-      slotProps: slotProps,
-      onItemClick: onMarkClick,
-      skipAnimation: skipAnimation
-    }), /*#__PURE__*/_jsx(LineHighlightPlot, {
-      slots: slots,
-      slotProps: slotProps
-    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
-      slots: slots,
-      slotProps: slotProps
-    })), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
-      slots: slots,
-      slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsClipPath, {
-      id: clipPathId
-    }), children]
-  });
+    chartContainerProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    areaPlotProps,
+    linePlotProps,
+    markPlotProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    lineHighlightPlotProps,
+    legendProps,
+    tooltipProps,
+    children
+  } = useLineChartProps(props);
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({
+    ref: ref
+  }, chartContainerProps, {
+    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+      children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps))]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps)), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+  }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/LineChart/LineHighlightPlot.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { LineHighlightElement } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { InteractionContext } from '../context/InteractionProvider';
@@ -28,7 +28,7 @@ function LineHighlightPlot(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = useLineSeries();
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   const {
     axis
   } = React.useContext(InteractionContext);

package/esm/LineChart/LinePlot.js

@@ -4,7 +4,7 @@ const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from 'd3-shape';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
@@ -14,7 +14,7 @@ import { useLineSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
   const seriesData = useLineSeries();
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   if (seriesData === undefined) {
     return [];
   }

package/esm/LineChart/MarkPlot.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { useChartId } from '../hooks/useChartId';
@@ -31,7 +31,7 @@ function MarkPlot(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = useLineSeries();
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   const chartId = useChartId();
   const Mark = slots?.mark ?? MarkElement;
   if (seriesData === undefined) {

package/esm/LineChart/useLineChartProps.js

@@ -0,0 +1,144 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useId from '@mui/utils/useId';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
+/**
+ * A helper function that extracts LineChartProps from the input props
+ * and returns an object with props for the children components of LineChart.
+ *
+ * @param props The input props for LineChart
+ * @returns An object with props for the children components of LineChart
+ */
+export const useLineChartProps = props => {
+  const {
+    xAxis,
+    yAxis,
+    series,
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    sx,
+    tooltip,
+    onAxisClick,
+    onAreaClick,
+    onLineClick,
+    onMarkClick,
+    axisHighlight,
+    disableLineItemHighlight,
+    legend,
+    grid,
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    children,
+    slots,
+    slotProps,
+    skipAnimation,
+    loading,
+    highlightedItem,
+    onHighlightChange
+  } = props;
+  const id = useId();
+  const clipPathId = `${id}-clip-path`;
+  const chartContainerProps = {
+    series: series.map(s => _extends({
+      disableHighlight: !!disableLineItemHighlight,
+      type: 'line'
+    }, s)),
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    xAxis: xAxis ?? [{
+      id: DEFAULT_X_AXIS_KEY,
+      scaleType: 'point',
+      data: Array.from({
+        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+      }, (_, index) => index)
+    }],
+    yAxis,
+    sx,
+    highlightedItem,
+    onHighlightChange,
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
+  };
+  const axisClickHandlerProps = {
+    onAxisClick
+  };
+  const gridProps = {
+    vertical: grid?.vertical,
+    horizontal: grid?.horizontal
+  };
+  const clipPathGroupProps = {
+    clipPath: `url(#${clipPathId})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const areaPlotProps = {
+    slots,
+    slotProps,
+    onAreaClick,
+    skipAnimation
+  };
+  const linePlotProps = {
+    slots,
+    slotProps,
+    onLineClick,
+    skipAnimation
+  };
+  const markPlotProps = {
+    slots,
+    slotProps,
+    onMarkClick,
+    skipAnimation
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const chartsAxisProps = {
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    slots,
+    slotProps
+  };
+  const axisHighlightProps = _extends({
+    x: 'line'
+  }, axisHighlight);
+  const lineHighlightPlotProps = {
+    slots,
+    slotProps
+  };
+  const legendProps = _extends({}, legend, {
+    slots,
+    slotProps
+  });
+  const tooltipProps = _extends({}, tooltip, {
+    slots,
+    slotProps
+  });
+  return {
+    chartContainerProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    areaPlotProps,
+    linePlotProps,
+    markPlotProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    lineHighlightPlotProps,
+    legendProps,
+    tooltipProps,
+    children
+  };
+};

package/esm/PieChart/PieChart.js

@@ -9,7 +9,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { PiePlot } from './PiePlot';
 import { useIsRTL } from '../internals/useIsRTL';
-import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlay } from '../ChartsOverlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
   top: 5,

package/esm/ResponsiveChartContainer/ResizableContainer.js

@@ -0,0 +1,26 @@
+import { styled } from '@mui/material/styles';
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+export const ResizableContainer = styled('div', {
+  name: 'MuiResponsiveChart',
+  slot: 'Container'
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexGrow: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  '&>svg': {
+    width: '100%',
+    height: '100%'
+  }
+}));

package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -3,30 +3,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["width", "height"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import { ChartContainer } from '../ChartContainer';
 import { useChartContainerDimensions } from './useChartContainerDimensions';
+import { ResizableContainer } from './ResizableContainer';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ResizableContainer = styled('div', {
-  name: 'MuiResponsiveChart',
-  slot: 'Container'
-})(({
-  ownerState
-}) => ({
-  width: ownerState.width ?? '100%',
-  height: ownerState.height ?? '100%',
-  display: 'flex',
-  position: 'relative',
-  flexGrow: 1,
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  '&>svg': {
-    width: '100%',
-    height: '100%'
-  }
-}));
 const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
       width: inWidth,
@@ -227,6 +207,29 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
+  })),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: PropTypes.arrayOf(PropTypes.shape({
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    id: PropTypes.string
   }))
 } : void 0;
 export { ResponsiveChartContainer };

package/esm/ScatterChart/ScatterChart.js

@@ -6,11 +6,12 @@ import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
-import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlay } from '../ChartsOverlay';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { ChartsGrid } from '../ChartsGrid';
 import { ZAxisContextProvider } from '../context/ZAxisContextProvider';
+import { useScatterChartProps } from './useScatterChartProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -24,81 +25,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    zAxis,
-    series,
-    tooltip,
-    axisHighlight,
-    voronoiMaxRadius,
-    disableVoronoi,
-    legend,
-    width,
-    height,
-    margin,
-    colors,
-    sx,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    onItemClick,
-    children,
-    slots,
-    slotProps,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
-  return /*#__PURE__*/_jsx(ResponsiveChartContainer, {
-    ref: ref,
-    series: series.map(s => _extends({
-      type: 'scatter'
-    }, s)),
-    width: width,
-    height: height,
-    margin: margin,
-    colors: colors,
-    xAxis: xAxis,
-    yAxis: yAxis,
-    sx: sx,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    children: /*#__PURE__*/_jsxs(ZAxisContextProvider, {
-      zAxis: zAxis,
-      children: [!disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, {
-        voronoiMaxRadius: voronoiMaxRadius,
-        onItemClick: onItemClick
-      }), /*#__PURE__*/_jsx(ChartsAxis, {
-        topAxis: topAxis,
-        leftAxis: leftAxis,
-        rightAxis: rightAxis,
-        bottomAxis: bottomAxis,
-        slots: slots,
-        slotProps: slotProps
-      }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
-        vertical: grid.vertical,
-        horizontal: grid.horizontal
-      }), /*#__PURE__*/_jsx(ScatterPlot, {
-        slots: slots,
-        slotProps: slotProps,
-        onItemClick: disableVoronoi ? onItemClick : undefined
-      }), /*#__PURE__*/_jsx(ChartsOverlay, {
-        loading: loading,
-        slots: slots,
-        slotProps: slotProps
-      }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
-        slots: slots,
-        slotProps: slotProps
-      })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
-        x: "none",
-        y: "none"
-      }, axisHighlight)), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({
-        trigger: "item"
-      }, tooltip)), children]
-    })
-  });
+    chartContainerProps,
+    zAxisProps,
+    voronoiHandlerProps,
+    chartsAxisProps,
+    gridProps,
+    scatterPlotProps,
+    overlayProps,
+    legendProps,
+    axisHighlightProps,
+    tooltipProps,
+    children
+  } = useScatterChartProps(props);
+  return /*#__PURE__*/_jsx(ResponsiveChartContainer, _extends({
+    ref: ref
+  }, chartContainerProps, {
+    children: /*#__PURE__*/_jsxs(ZAxisContextProvider, _extends({}, zAxisProps, {
+      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), children]
+    }))
+  }));
 });
 process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/ScatterChart/ScatterPlot.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Scatter } from './Scatter';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import getColor from './getColor';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
 import { useScatterSeries } from '../hooks/useSeries';
@@ -24,7 +24,7 @@ function ScatterPlot(props) {
     onItemClick
   } = props;
   const seriesData = useScatterSeries();
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   const {
     zAxis,
     zAxisIds