@mui/x-charts-pro 7.0.0-alpha.0 → 7.0.0-alpha.2

package/modern/ChartContainerPro/ChartContainerPro.js

@@ -6,7 +6,7 @@ import { HighlightedProvider, ZAxisContextProvider } from '@mui/x-charts/context
 import { ChartsAxesGradients, DrawingProvider, InteractionProvider, PluginProvider, SeriesProvider } from '@mui/x-charts/internals';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
-import { CartesianContextProviderPro } from '../context/CartesianProviderPro';
+import { CartesianProviderPro } from '../context/CartesianProviderPro';
 import { ZoomProvider } from '../context/ZoomProvider';
 import { useChartContainerProProps } from './useChartContainerProProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainer(
     seriesProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
-    cartesianContextProps,
+    cartesianProviderProps,
     chartsSurfaceProps,
     pluginProviderProps,
     children
@@ -26,9 +26,9 @@ const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainer(
   useLicenseVerifier('x-charts-pro', releaseInfo);
   return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
     children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
-      children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
-        children: /*#__PURE__*/_jsx(ZoomProvider, _extends({}, zoomProviderProps, {
-          children: /*#__PURE__*/_jsx(CartesianContextProviderPro, _extends({}, cartesianContextProps, {
+      children: /*#__PURE__*/_jsx(ZoomProvider, _extends({}, zoomProviderProps, {
+        children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
+          children: /*#__PURE__*/_jsx(CartesianProviderPro, _extends({}, cartesianProviderProps, {
             children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
               children: /*#__PURE__*/_jsx(InteractionProvider, {
                 children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
@@ -165,6 +165,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -177,6 +178,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.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,
@@ -225,6 +227,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -237,6 +240,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.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/ChartContainerPro/useChartContainerProProps.js

@@ -11,7 +11,7 @@ export const useChartContainerProProps = (props, ref) => {
     children,
     drawingProviderProps,
     seriesProviderProps,
-    cartesianContextProps,
+    cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps,
@@ -31,7 +31,7 @@ export const useChartContainerProProps = (props, ref) => {
     drawingProviderProps,
     pluginProviderProps,
     seriesProviderProps,
-    cartesianContextProps,
+    cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps

package/modern/Heatmap/Heatmap.js

@@ -276,6 +276,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -288,6 +289,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.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,
@@ -338,6 +340,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -350,6 +353,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.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/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js

@@ -142,6 +142,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -154,6 +155,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.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,
@@ -202,6 +204,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -214,6 +217,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.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/ScatterChartPro/ScatterChartPro.js

@@ -271,6 +271,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -283,6 +284,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,
@@ -331,6 +333,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
@@ -343,6 +346,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,42 +1,78 @@
+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
 } = cartesianProviderUtils;
-function CartesianContextProviderPro(props) {
+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: {
@@ -51,4 +87,4 @@ function CartesianContextProviderPro(props) {
     children: children
   });
 }
-export { CartesianContextProviderPro };
+export { CartesianProviderPro };

package/modern/context/CartesianProviderPro/createAxisFilterMapper.js

@@ -0,0 +1,61 @@
+import { getAxisExtremum, isDefined } from '@mui/x-charts/internals';
+import { getScale } from '../../../../x-charts/src/internals/getScale';
+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.0
+ * @mui/x-charts-pro v7.0.0-alpha.2
  *
  * @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 = "MTcyMzE1NDQwMDAwMA==";
+  const releaseInfo = "MTcyNDM2MDQwMDAwMA==";
   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/ChartContainerPro/ChartContainerPro.js

@@ -27,7 +27,7 @@ const ChartContainerPro = exports.ChartContainerPro = /*#__PURE__*/React.forward
     seriesProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
-    cartesianContextProps,
+    cartesianProviderProps,
     chartsSurfaceProps,
     pluginProviderProps,
     children
@@ -35,9 +35,9 @@ const ChartContainerPro = exports.ChartContainerPro = /*#__PURE__*/React.forward
   (0, _useLicenseVerifier.useLicenseVerifier)('x-charts-pro', releaseInfo);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.DrawingProvider, (0, _extends2.default)({}, drawingProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomProvider.ZoomProvider, (0, _extends2.default)({}, zoomProviderProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProviderPro.CartesianContextProviderPro, (0, _extends2.default)({}, cartesianContextProps, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomProvider.ZoomProvider, (0, _extends2.default)({}, zoomProviderProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProviderPro.CartesianProviderPro, (0, _extends2.default)({}, cartesianProviderProps, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.InteractionProvider, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
@@ -174,6 +174,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
@@ -186,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,
@@ -234,6 +236,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
@@ -246,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/ChartContainerPro/useChartContainerProProps.js

@@ -18,7 +18,7 @@ const useChartContainerProProps = (props, ref) => {
     children,
     drawingProviderProps,
     seriesProviderProps,
-    cartesianContextProps,
+    cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps,
@@ -38,7 +38,7 @@ const useChartContainerProProps = (props, ref) => {
     drawingProviderProps,
     pluginProviderProps,
     seriesProviderProps,
-    cartesianContextProps,
+    cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps

package/node/Heatmap/Heatmap.js

@@ -285,6 +285,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
@@ -297,6 +298,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,
@@ -347,6 +349,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
@@ -359,6 +362,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/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js

@@ -151,6 +151,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
@@ -163,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,
@@ -211,6 +213,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
@@ -223,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

@@ -280,6 +280,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
@@ -292,6 +293,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,
@@ -340,6 +342,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
@@ -352,6 +355,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,50 +1,87 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CartesianContextProviderPro = CartesianContextProviderPro;
+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; }
 const {
   computeValue
 } = _internals.cartesianProviderUtils;
-function CartesianContextProviderPro(props) {
+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: {