@mui/x-charts 8.0.0-alpha.2 → 8.0.0-alpha.4

package/node/ChartsLabel/ChartsLabelMark.js

@@ -0,0 +1,114 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsLabelMark = void 0;
+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 _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _labelMarkClasses = require("./labelMarkClasses");
+var _consumeThemeProps = require("../internals/consumeThemeProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["type", "color", "className", "classes"];
+const Root = (0, _styles.styled)('div', {
+  name: 'MuiChartsLabelMark',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(() => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    [`&.${_labelMarkClasses.labelMarkClasses.line}`]: {
+      width: 16,
+      display: 'flex',
+      alignItems: 'center',
+      [`.${_labelMarkClasses.labelMarkClasses.mask}`]: {
+        height: 4,
+        width: '100%',
+        borderRadius: 1,
+        overflow: 'hidden'
+      }
+    },
+    [`&.${_labelMarkClasses.labelMarkClasses.square}`]: {
+      height: 13,
+      width: 13,
+      borderRadius: 2,
+      overflow: 'hidden'
+    },
+    [`&.${_labelMarkClasses.labelMarkClasses.circle}`]: {
+      height: 15,
+      width: 15,
+      borderRadius: '50%',
+      overflow: 'hidden'
+    },
+    svg: {
+      display: 'block',
+      height: '100%',
+      width: '100%'
+    }
+  };
+});
+
+/**
+ * @ignore - internal component.
+ *
+ * Generates the label mark for the tooltip and legend.
+ */
+const ChartsLabelMark = exports.ChartsLabelMark = (0, _consumeThemeProps.consumeThemeProps)('MuiChartsLabelMark', {
+  classesResolver: _labelMarkClasses.useUtilityClasses
+}, function ChartsLabelMark(props, ref) {
+  const {
+      type,
+      color,
+      className,
+      classes
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes?.root, className),
+    ownerState: props,
+    "aria-hidden": "true",
+    ref: ref
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes?.mask,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+        viewBox: "0 0 24 24",
+        preserveAspectRatio: type === 'line' ? 'none' : undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          width: "24",
+          height: "24",
+          fill: color
+        })
+      })
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabelMark.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * The color of the mark.
+   */
+  color: _propTypes.default.string,
+  /**
+   * The type of the mark.
+   * @default 'square'
+   */
+  type: _propTypes.default.oneOf(['circle', 'line', 'square'])
+} : void 0;

package/node/ChartsLabel/labelClasses.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelUtilityClass = getLabelUtilityClass;
+exports.useUtilityClasses = exports.labelClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getLabelUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsLabel', slot);
+}
+const labelClasses = exports.labelClasses = (0, _generateUtilityClasses.default)('MuiChartsLabel', ['root']);
+const useUtilityClasses = props => {
+  const slots = {
+    root: ['root']
+  };
+  return (0, _composeClasses.default)(slots, getLabelUtilityClass, props.classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/node/ChartsLabel/labelGradientClasses.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelGradientUtilityClass = getLabelGradientUtilityClass;
+exports.useUtilityClasses = exports.labelGradientClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getLabelGradientUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsLabelGradient', slot);
+}
+const labelGradientClasses = exports.labelGradientClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelGradient', ['root', 'column', 'row', 'mask']);
+const useUtilityClasses = props => {
+  const {
+    direction
+  } = props;
+  const slots = {
+    root: ['root', direction],
+    mask: ['mask']
+  };
+  return (0, _composeClasses.default)(slots, getLabelGradientUtilityClass, props.classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/node/ChartsLabel/labelMarkClasses.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelMarkUtilityClass = getLabelMarkUtilityClass;
+exports.useUtilityClasses = exports.labelMarkClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getLabelMarkUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsLabelMark', slot);
+}
+const labelMarkClasses = exports.labelMarkClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask']);
+const useUtilityClasses = props => {
+  const {
+    type
+  } = props;
+  const slots = {
+    root: ['root', type],
+    mask: ['mask']
+  };
+  return (0, _composeClasses.default)(slots, getLabelMarkUtilityClass, props.classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/node/ChartsLegend/useAxis.js

@@ -1,14 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAxis = useAxis;
-var React = _interopRequireWildcard(require("react"));
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useCartesianContext = require("../context/CartesianProvider/useCartesianContext");
+var _useZAxis = require("../hooks/useZAxis");
 /**
  * Helper to select an axis definition according to its direction and id.
  */
@@ -25,7 +23,7 @@ function useAxis({
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxis)();
   switch (axisDirection) {
     case 'x':
       {

package/node/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -21,11 +21,11 @@ function ChartsAxisTooltipContent(props) {
     classes: propClasses,
     sx
   } = props;
-  const tootlipData = (0, _useAxisTooltip.useAxisTooltip)();
+  const tooltipData = (0, _useAxisTooltip.useAxisTooltip)();
   const xAxis = (0, _hooks.useXAxis)();
   const yAxis = (0, _hooks.useYAxis)();
   const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
-  if (tootlipData === null) {
+  if (tooltipData === null) {
     return null;
   }
   const {
@@ -33,7 +33,7 @@ function ChartsAxisTooltipContent(props) {
     axisValue,
     axisFormattedValue,
     seriesItems
-  } = tootlipData;
+  } = tooltipData;
   const axis = axisDirection === 'x' ? xAxis : yAxis;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
@@ -42,8 +42,10 @@ function ChartsAxisTooltipContent(props) {
       className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipRow, {
+          className: classes.row,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
             colSpan: 3,
+            className: (0, _clsx.default)(classes.cell, classes.axisValueCell),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
               children: axisFormattedValue
             })

package/node/ChartsTooltip/ChartsTooltipTable.js

@@ -17,11 +17,10 @@ const ChartsTooltipPaper = exports.ChartsTooltipPaper = (0, _styles.styled)('div
 })(({
   theme
 }) => ({
-  boxShadow: theme.shadows[1],
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  transition: theme.transitions.create('box-shadow'),
-  borderRadius: theme.shape.borderRadius
+  borderRadius: theme.shape.borderRadius,
+  border: `solid ${(theme.vars || theme).palette.divider} 1px`
 }));
 
 /**
@@ -51,10 +50,10 @@ const ChartsTooltipRow = exports.ChartsTooltipRow = (0, _styles.styled)('tr', {
   theme
 }) => ({
   'tr:first-of-type& td': {
-    paddingTop: theme.spacing(1)
+    paddingTop: theme.spacing(0.5)
   },
   'tr:last-of-type& td': {
-    paddingBottom: theme.spacing(1)
+    paddingBottom: theme.spacing(0.5)
   }
 }));
 
@@ -71,17 +70,23 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td',
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
   [`&.${_chartsTooltipClasses.chartsTooltipClasses.labelCell}`]: {
-    paddingLeft: theme.spacing(1)
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1.5),
+    fontWeight: theme.typography.fontWeightRegular
+  },
+  [`&.${_chartsTooltipClasses.chartsTooltipClasses.valueCell}, &.${_chartsTooltipClasses.chartsTooltipClasses.axisValueCell}`]: {
+    color: (theme.vars || theme).palette.text.primary,
+    fontWeight: theme.typography.fontWeightMedium
   },
   [`&.${_chartsTooltipClasses.chartsTooltipClasses.valueCell}`]: {
-    paddingLeft: theme.spacing(4),
-    color: (theme.vars || theme).palette.text.primary
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5)
   },
   'td:first-of-type&': {
-    paddingLeft: theme.spacing(2)
+    paddingLeft: theme.spacing(1.5)
   },
   'td:last-of-type&': {
-    paddingRight: theme.spacing(2)
+    paddingRight: theme.spacing(1.5)
   }
 }));
 
@@ -100,9 +105,6 @@ const ChartsTooltipMark = exports.ChartsTooltipMark = (0, _styles.styled)('div',
   width: theme.spacing(1),
   height: theme.spacing(1),
   borderRadius: '50%',
-  boxShadow: theme.shadows[1],
-  backgroundColor: color,
-  borderColor: (theme.vars || theme).palette.background.paper,
-  border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
+  background: color,
   boxSizing: 'content-box'
 }));

package/node/ChartsTooltip/chartsTooltipClasses.js

@@ -13,7 +13,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 function getChartsTooltipUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChartsTooltip', slot);
 }
-const chartsTooltipClasses = exports.chartsTooltipClasses = (0, _generateUtilityClasses.default)('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);
+const chartsTooltipClasses = exports.chartsTooltipClasses = (0, _generateUtilityClasses.default)('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell', 'axisValueCell']);
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -24,7 +24,8 @@ const useUtilityClasses = classes => {
     mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
-    valueCell: ['valueCell']
+    valueCell: ['valueCell'],
+    axisValueCell: ['axisValueCell']
   };
   return (0, _composeClasses.default)(slots, getChartsTooltipUtilityClass, classes);
 };

package/node/ChartsTooltip/useAxisTooltip.js

@@ -1,15 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAxisTooltip = useAxisTooltip;
-var React = _interopRequireWildcard(require("react"));
 var _useSeries = require("../hooks/useSeries");
 var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
 var _useStore = require("../internals/store/useStore");
 var _useSelector = require("../internals/store/useSelector");
@@ -17,6 +14,7 @@ var _getLabel = require("../internals/getLabel");
 var _isCartesian = require("../internals/isCartesian");
 var _utils = require("./utils");
 var _useAxis = require("../hooks/useAxis");
+var _useZAxis = require("../hooks/useZAxis");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 function useAxisTooltip() {
   const defaultXAxis = (0, _useAxis.useXAxis)();
@@ -32,7 +30,7 @@ function useAxisTooltip() {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxis)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   if (axisData === null) {
     return null;

package/node/ChartsTooltip/useItemTooltip.js

@@ -1,22 +1,20 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useItemTooltip = useItemTooltip;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _useSeries = require("../hooks/useSeries");
 var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
 var _getLabel = require("../internals/getLabel");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
+var _useZAxis = require("../hooks/useZAxis");
 function useItemTooltip() {
   const store = (0, _useStore.useStore)();
   const item = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionItem);
@@ -30,7 +28,7 @@ function useItemTooltip() {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxis)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];

package/node/PieChart/PieArc.js

@@ -31,10 +31,11 @@ const useUtilityClasses = ownerState => {
     classes,
     id,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    dataIndex
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${id}`, `data-index-${dataIndex}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return (0, _composeClasses.default)(slots, getPieArcUtilityClass, classes);
 };
@@ -45,9 +46,9 @@ const PieArcRoot = (0, _styles.styled)(_web.animated.path, {
 })(({
   theme
 }) => ({
+  // Got to move stroke to an element prop instead of style.
   stroke: (theme.vars || theme).palette.background.paper,
-  strokeWidth: 1,
-  strokeLinejoin: 'round'
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, filter 0.2s ease-in'
 }));
 function PieArc(props) {
   const {
@@ -88,7 +89,12 @@ function PieArc(props) {
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
-    className: classes.root
+    className: classes.root,
+    fill: ownerState.color,
+    opacity: ownerState.isFaded ? 0.3 : 1,
+    filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
+    strokeWidth: 1,
+    strokeLinejoin: "round"
   }, other, getInteractionItemProps({
     type: 'pie',
     seriesId: id,

package/node/PieChart/PieArcPlot.js

@@ -16,8 +16,7 @@ var _PieArc = require("./PieArc");
 var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 function PieArcPlot(props) {
   const {
       slots,
@@ -54,16 +53,14 @@ function PieArcPlot(props) {
   }
   const Arc = slots?.pieArc ?? _PieArc.PieArc;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: transition((_ref, item, _, index) => {
-      let {
-          startAngle,
-          endAngle,
-          paddingAngle: pA,
-          innerRadius: iR,
-          outerRadius: oR,
-          cornerRadius: cR
-        } = _ref,
-        style = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
+    children: transition(({
+      startAngle,
+      endAngle,
+      paddingAngle: pA,
+      innerRadius: iR,
+      outerRadius: oR,
+      cornerRadius: cR
+    }, item, _, index) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
         startAngle: startAngle,
         endAngle: endAngle,
@@ -71,7 +68,6 @@ function PieArcPlot(props) {
         innerRadius: iR,
         outerRadius: oR,
         cornerRadius: cR,
-        style: style,
         id: id,
         color: item.color,
         dataIndex: index,

package/node/PieChart/PiePlot.js

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.PiePlot = PiePlot;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
 var _getPercentageValue = require("../internals/getPercentageValue");
 var _getPieCoordinates = require("./getPieCoordinates");
 var _useSeries = require("../hooks/useSeries");
 var _AnimationProvider = require("../context/AnimationProvider");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -40,7 +40,7 @@ function PiePlot(props) {
     top,
     width,
     height
-  } = React.useContext(_DrawingAreaProvider.DrawingAreaContext);
+  } = (0, _hooks.useDrawingArea)();
   const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
   if (seriesData === undefined) {
     return null;

package/node/ScatterChart/ScatterPlot.js

@@ -13,8 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Scatter = require("./Scatter");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _getColor = _interopRequireDefault(require("./getColor"));
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useSeries = require("../hooks/useSeries");
+var _useZAxis = require("../hooks/useZAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -37,7 +37,7 @@ function ScatterPlot(props) {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxis)();
   if (seriesData === undefined) {
     return null;
   }

package/node/ScatterChart/extremums.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getExtremumY = exports.getExtremumX = void 0;
-const mergeMinMax = (acc, val) => {
-  return [Math.min(acc[0], val[0]), Math.max(acc[1], val[1])];
-};
+const mergeMinMax = (acc, val) => [val[0] === null ? acc[0] : Math.min(acc[0], val[0]), val[1] === null ? acc[1] : Math.max(acc[1], val[1])];
 const getExtremumX = params => {
   const {
     series,

package/node/ScatterChart/formatter.js

@@ -18,8 +18,8 @@ const formatter = ({
     }
     const data = !datasetKeys ? seriesData.data ?? [] : dataset?.map(d => {
       return {
-        x: d[datasetKeys.x],
-        y: d[datasetKeys.y],
+        x: d[datasetKeys.x] ?? null,
+        y: d[datasetKeys.y] ?? null,
         z: datasetKeys.z && d[datasetKeys.z],
         id: d[datasetKeys.id]
       };

package/node/hooks/useColorScale.js

@@ -1,16 +1,14 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useXColorScale = useXColorScale;
 exports.useYColorScale = useYColorScale;
 exports.useZColorScale = useZColorScale;
-var React = _interopRequireWildcard(require("react"));
 var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+var _useZAxis = require("./useZAxis");
 function useXColorScale(identifier) {
   const {
     xAxis,
@@ -31,7 +29,7 @@ function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxis)();
   const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
   return zAxis[id]?.colorScale;
 }

package/node/hooks/useZAxis.js

@@ -0,0 +1,15 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useZAxis = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+const useZAxis = () => {
+  const data = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  return data;
+};
+exports.useZAxis = useZAxis;

package/node/index.js

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