@mui/x-charts 7.11.0 → 7.12.0

package/ChartsYAxis/ChartsYAxis.js

@@ -9,8 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/base/utils");
-var _utils2 = require("@mui/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _useTicks = require("../hooks/useTicks");
@@ -35,7 +35,7 @@ const useUtilityClasses = ownerState => {
     tickLabel: ['tickLabel'],
     label: ['label']
   };
-  return (0, _utils2.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _axisClasses.getAxisUtilityClass, classes);
 };
 const defaultProps = {
   position: 'left',
@@ -119,7 +119,7 @@ function ChartsYAxis(inProps) {
   const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
   const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
   const revertAnchor = !isRTL && position === 'right' || isRTL && position !== 'right';
-  const axisTickLabelProps = (0, _utils.useSlotProps)({
+  const axisTickLabelProps = (0, _useSlotProps.default)({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
@@ -132,7 +132,7 @@ function ChartsYAxis(inProps) {
     className: classes.tickLabel,
     ownerState: {}
   });
-  const axisLabelProps = (0, _utils.useSlotProps)({
+  const axisLabelProps = (0, _useSlotProps.default)({
     elementType: Label,
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
@@ -145,7 +145,7 @@ function ChartsYAxis(inProps) {
     },
     ownerState: {}
   });
-  const lineSlotProps = (0, _utils.useSlotProps)({
+  const lineSlotProps = (0, _useSlotProps.default)({
     elementType: Line,
     externalSlotProps: slotProps?.axisLine,
     additionalProps: {

package/Gauge/GaugeReferenceArc.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GaugeReferenceArc = GaugeReferenceArc;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _d3Shape = require("d3-shape");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _styles = require("@mui/material/styles");
 var _GaugeProvider = require("./GaugeProvider");
 var _jsxRuntime = require("react/jsx-runtime");

package/Gauge/GaugeValueArc.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GaugeValueArc = GaugeValueArc;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _d3Shape = require("d3-shape");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _styles = require("@mui/material/styles");
 var _GaugeProvider = require("./GaugeProvider");
 var _jsxRuntime = require("react/jsx-runtime");

package/LineChart/AnimatedArea.d.ts

@@ -833,26 +833,26 @@ export declare const AreaElementPath: import("@emotion/styled").StyledComponent<
         strokeWidth?: import("csstype").Property.StrokeWidth<string | number> | undefined;
         textAnchor?: import("csstype").Property.TextAnchor | undefined;
         vectorEffect?: import("csstype").Property.VectorEffect | undefined;
-        x?: string | number;
-        y?: string | number;
-        z?: string | number;
-        translateX?: string | number;
-        translateY?: string | number;
-        translateZ?: string | number;
-        translate3d?: readonly [string | number, string | number, string | number];
-        rotateX?: string | number;
-        rotateY?: string | number;
-        rotateZ?: string | number;
-        rotate3d?: readonly [number, number, number, string | number];
-        scaleX?: number;
-        scaleY?: number;
-        scaleZ?: number;
-        scale3d?: readonly [number, number, number];
-        skew?: (string | number) | readonly [string | number, string | number];
-        skewX?: string | number;
-        skewY?: string | number;
-        matrix?: readonly [number, number, number, number, number, number];
-        matrix3d?: readonly [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number];
+        x?: (string | number) | undefined;
+        y?: (string | number) | undefined;
+        z?: (string | number) | undefined;
+        translateX?: (string | number) | undefined;
+        translateY?: (string | number) | undefined;
+        translateZ?: (string | number) | undefined;
+        translate3d?: readonly [string | number, string | number, string | number] | undefined;
+        rotateX?: (string | number) | undefined;
+        rotateY?: (string | number) | undefined;
+        rotateZ?: (string | number) | undefined;
+        rotate3d?: readonly [number, number, number, string | number] | undefined;
+        scaleX?: number | undefined;
+        scaleY?: number | undefined;
+        scaleZ?: number | undefined;
+        scale3d?: readonly [number, number, number] | undefined;
+        skew?: ((string | number) | readonly [string | number, string | number]) | undefined;
+        skewX?: (string | number) | undefined;
+        skewY?: (string | number) | undefined;
+        matrix?: readonly [number, number, number, number, number, number] | undefined;
+        matrix3d?: readonly [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number] | undefined;
     } | undefined;
     unicode?: number | string | undefined;
     fill?: string | undefined;

package/LineChart/AnimatedArea.js

@@ -11,8 +11,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _d3Color = require("d3-color");
 var _web = require("@react-spring/web");
+var _d3Color = require("@mui/x-charts-vendor/d3-color");
 var _useAnimatedPath = require("../internals/useAnimatedPath");
 var _cleanId = require("../internals/cleanId");
 var _hooks = require("../hooks");

package/LineChart/AnimatedLine.d.ts

@@ -833,26 +833,26 @@ export declare const LineElementPath: import("@emotion/styled").StyledComponent<
         strokeWidth?: import("csstype").Property.StrokeWidth<string | number> | undefined;
         textAnchor?: import("csstype").Property.TextAnchor | undefined;
         vectorEffect?: import("csstype").Property.VectorEffect | undefined;
-        x?: string | number;
-        y?: string | number;
-        z?: string | number;
-        translateX?: string | number;
-        translateY?: string | number;
-        translateZ?: string | number;
-        translate3d?: readonly [string | number, string | number, string | number];
-        rotateX?: string | number;
-        rotateY?: string | number;
-        rotateZ?: string | number;
-        rotate3d?: readonly [number, number, number, string | number];
-        scaleX?: number;
-        scaleY?: number;
-        scaleZ?: number;
-        scale3d?: readonly [number, number, number];
-        skew?: (string | number) | readonly [string | number, string | number];
-        skewX?: string | number;
-        skewY?: string | number;
-        matrix?: readonly [number, number, number, number, number, number];
-        matrix3d?: readonly [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number];
+        x?: (string | number) | undefined;
+        y?: (string | number) | undefined;
+        z?: (string | number) | undefined;
+        translateX?: (string | number) | undefined;
+        translateY?: (string | number) | undefined;
+        translateZ?: (string | number) | undefined;
+        translate3d?: readonly [string | number, string | number, string | number] | undefined;
+        rotateX?: (string | number) | undefined;
+        rotateY?: (string | number) | undefined;
+        rotateZ?: (string | number) | undefined;
+        rotate3d?: readonly [number, number, number, string | number] | undefined;
+        scaleX?: number | undefined;
+        scaleY?: number | undefined;
+        scaleZ?: number | undefined;
+        scale3d?: readonly [number, number, number] | undefined;
+        skew?: ((string | number) | readonly [string | number, string | number]) | undefined;
+        skewX?: (string | number) | undefined;
+        skewY?: (string | number) | undefined;
+        matrix?: readonly [number, number, number, number, number, number] | undefined;
+        matrix3d?: readonly [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number] | undefined;
     } | undefined;
     unicode?: number | string | undefined;
     fill?: string | undefined;

package/LineChart/AnimatedLine.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _web = require("@react-spring/web");
-var _d3Color = require("d3-color");
+var _d3Color = require("@mui/x-charts-vendor/d3-color");
 var _styles = require("@mui/material/styles");
 var _useAnimatedPath = require("../internals/useAnimatedPath");
 var _cleanId = require("../internals/cleanId");

package/LineChart/AreaElement.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { AnimatedAreaProps } from './AnimatedArea';
 import { SeriesId } from '../models/seriesType/common';
 export interface AreaElementClasses {
@@ -28,7 +29,7 @@ export interface AreaElementSlots {
     area?: React.JSXElementConstructor<AnimatedAreaProps>;
 }
 export interface AreaElementSlotProps {
-    area?: AnimatedAreaProps;
+    area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
 }
 export interface AreaElementProps extends Omit<AreaElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedAreaProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
     d: string;

package/LineChart/AreaElement.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _utils = require("@mui/base/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
@@ -76,7 +76,7 @@ function AreaElement(props) {
   };
   const classes = useUtilityClasses(ownerState);
   const Area = slots?.area ?? _AnimatedArea.AnimatedArea;
-  const areaProps = (0, _utils.useSlotProps)({
+  const areaProps = (0, _useSlotProps.default)({
     elementType: Area,
     externalSlotProps: slotProps?.area,
     additionalProps: (0, _extends2.default)({}, getInteractionItemProps({

package/LineChart/AreaPlot.js

@@ -9,7 +9,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _d3Shape = require("d3-shape");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _AreaElement = require("./AreaElement");
 var _useScale = require("../hooks/useScale");
@@ -45,22 +45,26 @@ const useAggregatedData = () => {
     return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
     .map(seriesId => {
       const {
+        xAxisId: xAxisIdProp,
+        yAxisId: yAxisIdProp,
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
         stackedData,
         data,
         connectNulls
       } = series[seriesId];
-      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-      const yScale = yAxis[yAxisKey].scale;
-      const xData = xAxis[xAxisKey].data;
-      const gradientUsed = yAxis[yAxisKey].colorScale && [yAxisKey, 'y'] || xAxis[xAxisKey].colorScale && [xAxisKey, 'x'] || undefined;
+      const xAxisId = xAxisIdProp ?? xAxisKey;
+      const yAxisId = yAxisIdProp ?? yAxisKey;
+      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+      const yScale = yAxis[yAxisId].scale;
+      const xData = xAxis[xAxisId].data;
+      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
       if (process.env.NODE_ENV !== 'production') {
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         if (xData.length < stackedData.length) {
-          throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          throw new Error(`MUI X: The 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)).defined((_, i) => connectNulls || data[i] != null).y0(d => {

package/LineChart/LineChart.js

@@ -58,7 +58,10 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      "data-drawing-container": true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
@@ -246,7 +249,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
@@ -299,7 +301,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,

package/LineChart/LineElement.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { AnimatedLineProps } from './AnimatedLine';
 import { SeriesId } from '../models/seriesType/common';
 export interface LineElementClasses {
@@ -28,7 +29,7 @@ export interface LineElementSlots {
     line?: React.JSXElementConstructor<AnimatedLineProps>;
 }
 export interface LineElementSlotProps {
-    line?: AnimatedLineProps;
+    line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
 }
 export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
     d: string;

package/LineChart/LineElement.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _utils = require("@mui/base/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
@@ -76,7 +76,7 @@ function LineElement(props) {
   };
   const classes = useUtilityClasses(ownerState);
   const Line = slots?.line ?? _AnimatedLine.AnimatedLine;
-  const lineProps = (0, _utils.useSlotProps)({
+  const lineProps = (0, _useSlotProps.default)({
     elementType: Line,
     externalSlotProps: slotProps?.line,
     additionalProps: (0, _extends2.default)({}, getInteractionItemProps({

package/LineChart/LineHighlightPlot.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { LineHighlightElementProps } from './LineHighlightElement';
 export interface LineHighlightPlotSlots {
     lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
 }
 export interface LineHighlightPlotSlotProps {
-    lineHighlight?: Partial<LineHighlightElementProps>;
+    lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
 }
 export interface LineHighlightPlotProps extends React.SVGAttributes<SVGSVGElement> {
     /**

package/LineChart/LineHighlightPlot.js

@@ -69,20 +69,24 @@ function LineHighlightPlot(props) {
     }) => {
       return groupIds.flatMap(seriesId => {
         const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
           data,
           disableHighlight
         } = series[seriesId];
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-        const yScale = yAxis[yAxisKey].scale;
-        const xData = xAxis[xAxisKey].data;
+        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
@@ -93,7 +97,7 @@ function LineHighlightPlot(props) {
         })) {
           return null;
         }
-        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
           id: seriesId,
           color: colorGetter(highlightedIndex),

package/LineChart/LinePlot.js

@@ -9,7 +9,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _d3Shape = require("d3-shape");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
@@ -44,22 +44,26 @@ const useAggregatedData = () => {
   }) => {
     return groupIds.flatMap(seriesId => {
       const {
+        xAxisId: xAxisIdProp,
+        yAxisId: yAxisIdProp,
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
         stackedData,
         data,
         connectNulls
       } = series[seriesId];
-      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-      const yScale = yAxis[yAxisKey].scale;
-      const xData = xAxis[xAxisKey].data;
-      const gradientUsed = yAxis[yAxisKey].colorScale && [yAxisKey, 'y'] || xAxis[xAxisKey].colorScale && [xAxisKey, 'x'] || undefined;
+      const xAxisId = xAxisIdProp ?? xAxisKey;
+      const yAxisId = yAxisIdProp ?? yAxisKey;
+      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+      const yScale = yAxis[yAxisId].scale;
+      const xData = xAxis[xAxisId].data;
+      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
       if (process.env.NODE_ENV !== 'production') {
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         if (xData.length < stackedData.length) {
-          throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          throw new Error(`MUI X: The 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) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));

package/LineChart/MarkElement.js

@@ -15,7 +15,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
-var _d3Shape = require("d3-shape");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _web = require("@react-spring/web");
 var _getSymbol = require("../internals/getSymbol");
 var _InteractionProvider = require("../context/InteractionProvider");

package/LineChart/MarkPlot.js

@@ -66,6 +66,8 @@ function MarkPlot(props) {
     }) => {
       return groupIds.map(seriesId => {
         const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
@@ -75,15 +77,17 @@ function MarkPlot(props) {
         if (showMark === false) {
           return null;
         }
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-        const yScale = yAxis[yAxisKey].scale;
-        const xData = xAxis[xAxisKey].data;
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
+        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         const clipId = (0, _cleanId.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
-        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {

package/LineChart/extremums.js

@@ -31,7 +31,10 @@ const getExtremumY = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === undefined).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
+  }).reduce((acc, seriesId) => {
     const {
       area,
       stackedData

package/LineChart/formatter.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _d3Shape = require("d3-shape");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _stackSeries = require("../internals/stackSeries");
 var _defaultizeValueFormatter = require("../internals/defaultizeValueFormatter");
 let warnedOnce = false;
@@ -38,7 +38,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
-      throw new Error([`MUI X Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+      throw new Error([`MUI X: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -63,7 +63,7 @@ const formatter = (params, dataset) => {
           if (typeof value !== 'number') {
             if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
               warnedOnce = true;
-              console.error([`MUI X charts: your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+              console.error([`MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
             }
             return null;
           }

package/PieChart/PieArc.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _d3Shape = require("d3-shape");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _web = require("@react-spring/web");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
@@ -84,6 +84,7 @@ function PieArc(props) {
       innerRadius: iR,
       outerRadius: oR
     })),
+    visibility: (0, _web.to)([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible'),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,

package/PieChart/PieArcLabel.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _web = require("@react-spring/web");
-var _d3Shape = require("d3-shape");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");

package/PieChart/PieChart.js

@@ -293,7 +293,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
@@ -346,7 +345,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,

package/PieChart/formatter.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _d3Shape = require("d3-shape");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _getLabel = require("../internals/getLabel");
 const getSortingComparator = (comparator = 'none') => {
   if (typeof comparator === 'function') {

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -105,7 +105,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
@@ -158,7 +157,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,

package/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -63,11 +63,11 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
   }, [computeSize, inHeight, inWidth]);
   if (process.env.NODE_ENV !== 'production') {
     if (displayError.current && inWidth === undefined && width === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
       displayError.current = false;
     }
     if (displayError.current && inHeight === undefined && height === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
       displayError.current = false;
     }
   }

package/ResponsiveChartContainer/useResponsiveChartContainerProps.d.ts

@@ -1,7 +1,7 @@
 import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
 export declare const useResponsiveChartContainerProps: (props: ResponsiveChartContainerProps, ref: React.ForwardedRef<unknown>) => {
     hasIntrinsicSize: number;
-    chartContainerProps: Omit<import("..").ChartsSurfaceProps & Omit<import("../internals").SeriesContextProviderProps, "seriesFormatters"> & Omit<import("../internals").DrawingProviderProps, "svgRef"> & Pick<import("../internals").CartesianContextProviderProps, "dataset"> & import("..").ZAxisContextProviderProps & import("..").HighlightedProviderProps, "children"> & {
+    chartContainerProps: Omit<import("..").ChartsSurfaceProps & Omit<import("../internals").SeriesProviderProps, "seriesFormatters"> & Omit<import("../internals").DrawingProviderProps, "svgRef"> & Pick<import("../internals").CartesianContextProviderProps, "dataset"> & import("..").ZAxisContextProviderProps & import("..").HighlightedProviderProps, "children"> & {
         xAxis?: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsXAxisProps>, "id">[];
         yAxis?: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsYAxisProps>, "id">[];
         children?: import("react").ReactNode;
@@ -15,6 +15,6 @@ export declare const useResponsiveChartContainerProps: (props: ResponsiveChartCo
             height: number | undefined;
         };
         ref: import("react").MutableRefObject<null>;
-        className?: string;
+        className?: string | undefined;
     };
 };