@mui/x-charts-pro 7.0.0-alpha.1 → 7.0.0-alpha.3

package/modern/ScatterChartPro/ScatterChartPro.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["zoom", "onZoomChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ScatterPlot } from '@mui/x-charts/ScatterChart';
 import { ZAxisContextProvider } from '@mui/x-charts/context';
@@ -26,7 +27,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
  */
-const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(props, ref) {
+const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiScatterChartPro'
+  });
   const {
       zoom,
       onZoomChange
@@ -284,6 +289,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -345,6 +351,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,

package/modern/context/CartesianProviderPro/CartesianProviderPro.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useDrawingArea, useSeries, CartesianContext, cartesianProviderUtils, useXExtremumGetter, useYExtremumGetter } from '@mui/x-charts/internals';
 import { useZoom } from '../ZoomProvider/useZoom';
+import { createAxisFilterMapper, createGetAxisFilters } from './createAxisFilterMapper';
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   computeValue
@@ -9,34 +11,68 @@ function CartesianProviderPro(props) {
   const {
     xAxis,
     yAxis,
-    dataset,
     children
   } = props;
   const formattedSeries = useSeries();
   const drawingArea = useDrawingArea();
   const {
-    zoomData
+    zoomData,
+    options
   } = useZoom();
   const xExtremumGetters = useXExtremumGetter();
   const yExtremumGetters = useYExtremumGetter();
+  const getFilters = React.useMemo(() => {
+    const xMapper = createAxisFilterMapper({
+      zoomData,
+      extremumGetter: xExtremumGetters,
+      formattedSeries,
+      direction: 'x'
+    });
+    const yMapper = createAxisFilterMapper({
+      zoomData,
+      extremumGetter: yExtremumGetters,
+      formattedSeries,
+      direction: 'y'
+    });
+    const xFilters = xAxis.reduce((acc, axis, index) => {
+      const filter = xMapper(axis, index);
+      if (filter !== null) {
+        acc[axis.id] = filter;
+      }
+      return acc;
+    }, {});
+    const yFilters = yAxis.reduce((acc, axis, index) => {
+      const filter = yMapper(axis, index);
+      if (filter !== null) {
+        acc[axis.id] = filter;
+      }
+      return acc;
+    }, {});
+    if (Object.keys(xFilters).length === 0 && Object.keys(yFilters).length === 0) {
+      return undefined;
+    }
+    return createGetAxisFilters(_extends({}, xFilters, yFilters));
+  }, [formattedSeries, xAxis, xExtremumGetters, yAxis, yExtremumGetters, zoomData]);
   const xValues = React.useMemo(() => computeValue({
     drawingArea,
     formattedSeries,
     axis: xAxis,
     extremumGetters: xExtremumGetters,
-    dataset,
     axisDirection: 'x',
-    zoomData
-  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset, zoomData]);
+    zoomData,
+    zoomOptions: options,
+    getFilters
+  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, zoomData, options, getFilters]);
   const yValues = React.useMemo(() => computeValue({
     drawingArea,
     formattedSeries,
     axis: yAxis,
     extremumGetters: yExtremumGetters,
-    dataset,
     axisDirection: 'y',
-    zoomData
-  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset, zoomData]);
+    zoomData,
+    zoomOptions: options,
+    getFilters
+  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, zoomData, options, getFilters]);
   const value = React.useMemo(() => ({
     isInitialized: true,
     data: {

package/modern/context/CartesianProviderPro/createAxisFilterMapper.js

@@ -0,0 +1,60 @@
+import { getAxisExtremum, isDefined, getScale } from '@mui/x-charts/internals';
+export const createAxisFilterMapper = ({
+  zoomData,
+  extremumGetter,
+  formattedSeries,
+  direction
+}) => (axis, axisIndex) => {
+  if (typeof axis.zoom !== 'object' || axis.zoom.filterMode !== 'discard') {
+    return null;
+  }
+  const zoom = zoomData?.find(({
+    axisId
+  }) => axisId === axis.id);
+  if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
+    // No zoom, or zoom with all data visible
+    return null;
+  }
+  let extremums = [];
+  const scaleType = axis.scaleType;
+  if (scaleType === 'point' || scaleType === 'band') {
+    extremums = [0, (axis.data?.length ?? 1) - 1];
+  } else {
+    extremums = getAxisExtremum(axis, extremumGetter, axisIndex === 0, formattedSeries);
+  }
+  let min;
+  let max;
+
+  // @ts-expect-error The function defaults to linear scale if the scaleType is not recognized.
+  [min, max] = getScale(scaleType, extremums, [0, 100]).nice().domain();
+  min = min instanceof Date ? min.getTime() : min;
+  max = max instanceof Date ? max.getTime() : max;
+  const minVal = min + zoom.start * (max - min) / 100;
+  const maxVal = min + zoom.end * (max - min) / 100;
+  return (value, dataIndex) => {
+    const val = value[direction] ?? axis.data?.[dataIndex];
+    if (val == null) {
+      // If the value does not exist because of missing data point, or out of range index, we just ignore.
+      return true;
+    }
+    if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
+      return dataIndex >= minVal && dataIndex <= maxVal;
+    }
+    return val >= minVal && val <= maxVal;
+  };
+};
+export const createGetAxisFilters = filters => ({
+  currentAxisId,
+  seriesXAxisId,
+  seriesYAxisId,
+  isDefaultAxis
+}) => {
+  return (value, dataIndex) => {
+    const axisId = currentAxisId === seriesXAxisId ? seriesYAxisId : seriesXAxisId;
+    if (!axisId || isDefaultAxis) {
+      return Object.values(filters ?? {})[0]?.(value, dataIndex) ?? true;
+    }
+    const data = [seriesYAxisId, seriesXAxisId].filter(id => id !== currentAxisId).map(id => filters[id ?? '']).filter(isDefined);
+    return data.every(f => f(value, dataIndex));
+  };
+};

package/modern/context/ZoomProvider/defaultizeZoom.js

@@ -6,7 +6,8 @@ const defaultZoomOptions = {
   step: 5,
   minSpan: 10,
   maxSpan: 100,
-  panning: true
+  panning: true,
+  filterMode: 'keep'
 };
 export const defaultizeZoom = (axis, axisDirection) => {
   if (!axis) {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v7.0.0-alpha.1
+ * @mui/x-charts-pro v7.0.0-alpha.3
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyMzc1NTYwMDAwMA==";
+  const releaseInfo = "MTcyNDg4MjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/themeAugmentation/index.js

@@ -0,0 +1,4 @@
+export * from '@mui/x-charts/themeAugmentation';
+export * from './overrides';
+export * from './props';
+export * from './components';

package/node/BarChartPro/BarChartPro.js

@@ -9,6 +9,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 _styles = require("@mui/material/styles");
 var _BarChart = require("@mui/x-charts/BarChart");
 var _ChartsOnAxisClickHandler = require("@mui/x-charts/ChartsOnAxisClickHandler");
 var _ChartsGrid = require("@mui/x-charts/ChartsGrid");
@@ -37,7 +38,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(props, ref) {
+const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiBarChartPro'
+  });
   const {
       zoom,
       onZoomChange

package/node/ChartContainerPro/ChartContainerPro.js

@@ -187,6 +187,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
       maxSpan: _propTypes.default.number,
       minSpan: _propTypes.default.number,
@@ -248,6 +249,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
       maxSpan: _propTypes.default.number,
       minSpan: _propTypes.default.number,

package/node/Heatmap/Heatmap.js

@@ -8,8 +8,9 @@ exports.Heatmap = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _styles = require("@mui/material/styles");
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
 var _ChartsAxis = require("@mui/x-charts/ChartsAxis");
 var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
@@ -24,7 +25,11 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
 const defaultColorMap = (0, _d3Interpolate.interpolateRgbBasis)(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
-const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(props, ref) {
+const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiHeatmap'
+  });
   const {
     xAxis,
     yAxis,
@@ -298,6 +303,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
       maxSpan: _propTypes.default.number,
       minSpan: _propTypes.default.number,
@@ -361,6 +367,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
       maxSpan: _propTypes.default.number,
       minSpan: _propTypes.default.number,

package/node/LineChartPro/LineChartPro.js

@@ -9,6 +9,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 _styles = require("@mui/material/styles");
 var _LineChart = require("@mui/x-charts/LineChart");
 var _ChartsOnAxisClickHandler = require("@mui/x-charts/ChartsOnAxisClickHandler");
 var _ChartsGrid = require("@mui/x-charts/ChartsGrid");
@@ -36,7 +37,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
-const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(props, ref) {
+const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiLineChartPro'
+  });
   const {
       zoom,
       onZoomChange

package/node/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js

@@ -164,6 +164,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
       maxSpan: _propTypes.default.number,
       minSpan: _propTypes.default.number,
@@ -225,6 +226,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
       maxSpan: _propTypes.default.number,
       minSpan: _propTypes.default.number,

package/node/ScatterChartPro/ScatterChartPro.js

@@ -9,6 +9,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 _styles = require("@mui/material/styles");
 var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
 var _ScatterChart = require("@mui/x-charts/ScatterChart");
 var _context = require("@mui/x-charts/context");
@@ -35,7 +36,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *
  * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
  */
-const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(props, ref) {
+const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiScatterChartPro'
+  });
   const {
       zoom,
       onZoomChange
@@ -293,6 +298,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
       maxSpan: _propTypes.default.number,
       minSpan: _propTypes.default.number,
@@ -354,6 +360,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
       maxSpan: _propTypes.default.number,
       minSpan: _propTypes.default.number,

package/node/context/CartesianProviderPro/CartesianProviderPro.js

@@ -1,12 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CartesianProviderPro = CartesianProviderPro;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
 var _useZoom = require("../ZoomProvider/useZoom");
+var _createAxisFilterMapper = require("./createAxisFilterMapper");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -17,34 +20,68 @@ function CartesianProviderPro(props) {
   const {
     xAxis,
     yAxis,
-    dataset,
     children
   } = props;
   const formattedSeries = (0, _internals.useSeries)();
   const drawingArea = (0, _internals.useDrawingArea)();
   const {
-    zoomData
+    zoomData,
+    options
   } = (0, _useZoom.useZoom)();
   const xExtremumGetters = (0, _internals.useXExtremumGetter)();
   const yExtremumGetters = (0, _internals.useYExtremumGetter)();
+  const getFilters = React.useMemo(() => {
+    const xMapper = (0, _createAxisFilterMapper.createAxisFilterMapper)({
+      zoomData,
+      extremumGetter: xExtremumGetters,
+      formattedSeries,
+      direction: 'x'
+    });
+    const yMapper = (0, _createAxisFilterMapper.createAxisFilterMapper)({
+      zoomData,
+      extremumGetter: yExtremumGetters,
+      formattedSeries,
+      direction: 'y'
+    });
+    const xFilters = xAxis.reduce((acc, axis, index) => {
+      const filter = xMapper(axis, index);
+      if (filter !== null) {
+        acc[axis.id] = filter;
+      }
+      return acc;
+    }, {});
+    const yFilters = yAxis.reduce((acc, axis, index) => {
+      const filter = yMapper(axis, index);
+      if (filter !== null) {
+        acc[axis.id] = filter;
+      }
+      return acc;
+    }, {});
+    if (Object.keys(xFilters).length === 0 && Object.keys(yFilters).length === 0) {
+      return undefined;
+    }
+    return (0, _createAxisFilterMapper.createGetAxisFilters)((0, _extends2.default)({}, xFilters, yFilters));
+  }, [formattedSeries, xAxis, xExtremumGetters, yAxis, yExtremumGetters, zoomData]);
   const xValues = React.useMemo(() => computeValue({
     drawingArea,
     formattedSeries,
     axis: xAxis,
     extremumGetters: xExtremumGetters,
-    dataset,
     axisDirection: 'x',
-    zoomData
-  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset, zoomData]);
+    zoomData,
+    zoomOptions: options,
+    getFilters
+  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, zoomData, options, getFilters]);
   const yValues = React.useMemo(() => computeValue({
     drawingArea,
     formattedSeries,
     axis: yAxis,
     extremumGetters: yExtremumGetters,
-    dataset,
     axisDirection: 'y',
-    zoomData
-  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset, zoomData]);
+    zoomData,
+    zoomOptions: options,
+    getFilters
+  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, zoomData, options, getFilters]);
   const value = React.useMemo(() => ({
     isInitialized: true,
     data: {

package/node/context/CartesianProviderPro/createAxisFilterMapper.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetAxisFilters = exports.createAxisFilterMapper = void 0;
+var _internals = require("@mui/x-charts/internals");
+const createAxisFilterMapper = ({
+  zoomData,
+  extremumGetter,
+  formattedSeries,
+  direction
+}) => (axis, axisIndex) => {
+  if (typeof axis.zoom !== 'object' || axis.zoom.filterMode !== 'discard') {
+    return null;
+  }
+  const zoom = zoomData?.find(({
+    axisId
+  }) => axisId === axis.id);
+  if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
+    // No zoom, or zoom with all data visible
+    return null;
+  }
+  let extremums = [];
+  const scaleType = axis.scaleType;
+  if (scaleType === 'point' || scaleType === 'band') {
+    extremums = [0, (axis.data?.length ?? 1) - 1];
+  } else {
+    extremums = (0, _internals.getAxisExtremum)(axis, extremumGetter, axisIndex === 0, formattedSeries);
+  }
+  let min;
+  let max;
+
+  // @ts-expect-error The function defaults to linear scale if the scaleType is not recognized.
+  [min, max] = (0, _internals.getScale)(scaleType, extremums, [0, 100]).nice().domain();
+  min = min instanceof Date ? min.getTime() : min;
+  max = max instanceof Date ? max.getTime() : max;
+  const minVal = min + zoom.start * (max - min) / 100;
+  const maxVal = min + zoom.end * (max - min) / 100;
+  return (value, dataIndex) => {
+    const val = value[direction] ?? axis.data?.[dataIndex];
+    if (val == null) {
+      // If the value does not exist because of missing data point, or out of range index, we just ignore.
+      return true;
+    }
+    if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
+      return dataIndex >= minVal && dataIndex <= maxVal;
+    }
+    return val >= minVal && val <= maxVal;
+  };
+};
+exports.createAxisFilterMapper = createAxisFilterMapper;
+const createGetAxisFilters = filters => ({
+  currentAxisId,
+  seriesXAxisId,
+  seriesYAxisId,
+  isDefaultAxis
+}) => {
+  return (value, dataIndex) => {
+    const axisId = currentAxisId === seriesXAxisId ? seriesYAxisId : seriesXAxisId;
+    if (!axisId || isDefaultAxis) {
+      return Object.values(filters ?? {})[0]?.(value, dataIndex) ?? true;
+    }
+    const data = [seriesYAxisId, seriesXAxisId].filter(id => id !== currentAxisId).map(id => filters[id ?? '']).filter(_internals.isDefined);
+    return data.every(f => f(value, dataIndex));
+  };
+};
+exports.createGetAxisFilters = createGetAxisFilters;

package/node/context/ZoomProvider/defaultizeZoom.js

@@ -13,7 +13,8 @@ const defaultZoomOptions = {
   step: 5,
   minSpan: 10,
   maxSpan: 100,
-  panning: true
+  panning: true,
+  filterMode: 'keep'
 };
 const defaultizeZoom = (axis, axisDirection) => {
   if (!axis) {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v7.0.0-alpha.1
+ * @mui/x-charts-pro v7.0.0-alpha.3
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcyMzc1NTYwMDAwMA==";
+  const releaseInfo = "MTcyNDg4MjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/themeAugmentation/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _themeAugmentation = require("@mui/x-charts/themeAugmentation");
+Object.keys(_themeAugmentation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _themeAugmentation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _themeAugmentation[key];
+    }
+  });
+});
+var _overrides = require("./overrides");
+Object.keys(_overrides).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _overrides[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _overrides[key];
+    }
+  });
+});
+var _props = require("./props");
+Object.keys(_props).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _props[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _props[key];
+    }
+  });
+});
+var _components = require("./components");
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _components[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _components[key];
+    }
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "7.0.0-alpha.1",
+  "version": "7.0.0-alpha.3",
   "description": "The Pro plan edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -29,21 +29,21 @@
     "directory": "packages/x-charts-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.0",
-    "@mui/system": "^5.16.5",
-    "@mui/utils": "^5.16.5",
+    "@babel/runtime": "^7.25.4",
+    "@mui/utils": "^5.16.6",
     "@react-spring/rafz": "^9.7.4",
     "@react-spring/web": "^9.7.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "7.13.0",
-    "@mui/x-charts-vendor": "7.13.0",
-    "@mui/x-license": "7.13.0"
+    "@mui/x-license": "7.15.0",
+    "@mui/x-charts-vendor": "7.15.0",
+    "@mui/x-charts": "7.15.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.15.14 || ^6.0.0",
+    "@mui/system": "^5.15.14 || ^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },