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

package/CHANGELOG.md

@@ -3,6 +3,86 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.14.0
+
+_Aug 23, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Allow [filtering the axis on zoom](https://mui.com/x/react-charts/zoom-and-pan/#zoom-filtering), making the axis adapt by removing values outside the view.
+
+  <img width="600" src="https://github.com/user-attachments/assets/e65bbd00-d2a8-4136-81cd-3598f1373c16" alt="filtering the axis on zoom" />
+
+- 📊 Improve bar chart performances
+- 🌍 Improve Czech (cs-CZ) and Hebrew (he-IL) locales on the Data Grid
+- 🌍 Improve Chinese (zh-HK), Hebrew (he-IL), and Vietnamese (vi-VN) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.14.0`
+
+- [DataGrid] Use readonly array result for `getTreeDataPath` (#11743) @pcorpet
+- [DataGrid] Use `event.key` for `Tab` and `Escape` keys (#14170) @k-rajat19
+- [DataGrid] Introduce selectors with arguments (#14236) @MBilalShafi
+- [DataGrid] include `api` in `gridCellParams` interface (#14201) @k-rajat19
+- [l10n] Improve Czech (cs-CZ) locale (#14135) @chirimiri22
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+
+#### `@mui/x-data-grid-pro@7.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.14.0`.
+
+#### `@mui/x-data-grid-premium@7.14.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.14.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste not working for a single cell on non-first page (#14261) @arminmeh
+- [DataGridPremium] Fix `onCellSelectionModelChange` not triggered when additional cell range is selected (#14199) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.14.0`
+
+- [l10n] Improve Chinese (zh-HK) locale (#13289) @yeeharn
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+- [l10n] Improve Vietnamese (vi-VN) locale (#14238) @locnbk2002
+- [TimePicker] Handle `Space` and `Enter` on the `TimeClock` component @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.14.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.14.0`
+
+- [charts] Fix grid overflow with zooming (#14280) @alexfauquette
+- [charts] Improve bar chart performances (#14278) @alexfauquette
+- [charts] Test pointer events (#14042) @alexfauquette
+- [charts] Use `isPointInside` function for both graphs and axis (#14222) @JCQuintas
+
+#### `@mui/x-charts-pro@7.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.14.0`, plus:
+
+- [charts-pro] Zoom axis filtering (#14121) @JCQuintas
+
+### Docs
+
+- [docs] Consistent use of UTC and timezones (#14250) @oliviertassinari
+- [docs] Fix missing leading slashes in URLs (#14249) @oliviertassinari
+- [docs] Dash usage revision on pickers pages (#14260) @arthurbalduini
+
+### Core
+
+- [core] Follow JSDocs convention @oliviertassinari
+- [core] Prepare for material v6 (#14143) @LukasTy
+- [code-infra] Set up `eslint-plugin-testing-library` (#14232) @LukasTy
+- [infra] Updated mui-x roadmap links with new project URL (#14271) @michelengelen
+
 ## 7.13.0
 
 _Aug 16, 2024_
@@ -58,7 +138,7 @@ Same changes as in `@mui/x-date-pickers@7.13.0`.
 - [charts] Rename `CartesianContextProvider` to `CartesianProvider` (#14102) @JCQuintas
 - [charts] Support axis with the same value for all data points (#14191) @alexfauquette
 
-#### `@mui/x-date-charts-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-charts-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
 Same changes as in `@mui/x-charts@7.13.0`.
 
@@ -132,7 +212,7 @@ Same changes as in `@mui/x-date-pickers@7.12.1`.
 - [charts] Fix charts vendor publish config (#14073) @JCQuintas
 - [charts] Move `plugins` to `PluginProvider` (#14056) @JCQuintas
 
-#### `@mui/x-date-charts-pro@7.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-charts-pro@7.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
 Same changes as in `@mui/x-charts@7.12.1`, plus:
 

package/ChartContainerPro/ChartContainerPro.js

@@ -178,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,
@@ -239,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/Heatmap/Heatmap.js

@@ -289,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,
@@ -352,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/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js

@@ -155,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,
@@ -216,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/ScatterChartPro/ScatterChartPro.js

@@ -284,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,
@@ -345,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/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/context/CartesianProviderPro/createAxisFilterMapper.d.ts

@@ -0,0 +1,12 @@
+import { FormattedSeries, ExtremumGettersConfig, ExtremumFilter, ZoomAxisFilters, GetZoomAxisFilters } from '@mui/x-charts/internals';
+import { ChartsAxisProps, ScaleName, AxisConfig } from '@mui/x-charts';
+import { ZoomData } from '../ZoomProvider';
+type CreateAxisFilterMapperParams = {
+    zoomData: ZoomData[];
+    extremumGetter: ExtremumGettersConfig;
+    formattedSeries: FormattedSeries;
+    direction: 'x' | 'y';
+};
+export declare const createAxisFilterMapper: ({ zoomData, extremumGetter, formattedSeries, direction }: CreateAxisFilterMapperParams) => (axis: AxisConfig<ScaleName, any, ChartsAxisProps>, axisIndex: number) => ExtremumFilter | null;
+export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;
+export {};

package/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/context/ZoomProvider/Zoom.types.d.ts

@@ -93,6 +93,16 @@ export type ZoomOptions = {
      * @default true
      */
     panning?: boolean;
+    /**
+     * Defines how to filter the axis data when it is outside of the zoomed range of this axis.
+     *
+     * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same.
+     * - `discard`: The data outside the zoomed range is discarded for the other axes.
+     *    The other axes will be adjusted to fit the zoomed range.
+     *
+     * @default 'keep'
+     */
+    filterMode?: 'discard' | 'keep';
 };
 export type ZoomData = {
     /**

package/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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v7.0.0-alpha.1
+ * @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/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyMzc1NTYwMDAwMA==";
+  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/modern/ChartContainerPro/ChartContainerPro.js

@@ -178,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,
@@ -239,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/Heatmap/Heatmap.js

@@ -289,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,
@@ -352,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

@@ -155,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,
@@ -216,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

@@ -284,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,
@@ -345,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,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,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.1
+ * @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 = "MTcyMzc1NTYwMDAwMA==";
+  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

@@ -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

@@ -298,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,
@@ -361,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

@@ -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

@@ -293,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,
@@ -354,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,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,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetAxisFilters = exports.createAxisFilterMapper = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _getScale = require("../../../../x-charts/src/internals/getScale");
+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, _getScale.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.2
  *
  * @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 = "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "7.0.0-alpha.1",
+  "version": "7.0.0-alpha.2",
   "description": "The Pro plan edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -30,15 +30,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.0",
-    "@mui/system": "^5.16.5",
-    "@mui/utils": "^5.16.5",
+    "@mui/system": "^5.16.7",
+    "@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-charts": "7.14.0",
+    "@mui/x-license": "7.14.0",
+    "@mui/x-charts-vendor": "7.14.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",