[charts] Allow zoom on Y axis and add zoom options to configure zooming behaviour

packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

@@ -14,12 +14,7 @@ import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
 import { ZoomSetup } from '../context/ZoomProvider/ZoomSetup';
 import { useZoom } from '../context/ZoomProvider/useZoom';
 
-export interface BarChartProProps extends BarChartProps {
-  /**
-   * If `true`, the chart will be zoomable.
-   */
-  zoom?: boolean;
-}
+export interface BarChartProProps extends BarChartProps {}
 
 /**
  * Demos:
@@ -33,7 +28,7 @@ export interface BarChartProProps extends BarChartProps {
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
 const BarChartPro = React.forwardRef(function BarChartPro(props: BarChartProProps, ref) {
-  const { zoom, ...restProps } = props;
+  const { ...restProps } = props;
   const {
     chartContainerProps,
     barPlotProps,
@@ -62,7 +57,7 @@ const BarChartPro = React.forwardRef(function BarChartPro(props: BarChartProProp
       <ChartsAxisHighlight {...axisHighlightProps} />
       {!props.loading && <ChartsTooltip {...tooltipProps} />}
       <ChartsClipPath {...clipPathProps} />
-      {zoom && <ZoomSetup />}
+      <ZoomSetup />
       {children}
     </ResponsiveChartContainerPro>
   );

packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx

@@ -64,7 +64,7 @@ const ChartContainerPro = React.forwardRef(function ChartContainer(
           dataset={dataset}
           seriesFormatters={seriesFormatters}
         >
-          <ZoomProvider>
+          <ZoomProvider xAxis={xAxis} yAxis={yAxis}>
             <CartesianContextProviderPro
               xAxis={xAxis}
               yAxis={yAxis}

packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx

@@ -20,12 +20,7 @@ import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
 import { ZoomSetup } from '../context/ZoomProvider/ZoomSetup';
 import { useZoom } from '../context/ZoomProvider/useZoom';
 
-export interface LineChartProProps extends LineChartProps {
-  /**
-   * If `true`, the chart will be zoomable.
-   */
-  zoom?: boolean;
-}
+export interface LineChartProProps extends LineChartProps {}
 
 /**
  * Demos:
@@ -38,7 +33,7 @@ export interface LineChartProProps extends LineChartProps {
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
 const LineChartPro = React.forwardRef(function LineChartPro(props: LineChartProProps, ref) {
-  const { zoom, ...restProps } = props;
+  const { ...restProps } = props;
   const {
     chartContainerProps,
     axisClickHandlerProps,
@@ -73,7 +68,7 @@ const LineChartPro = React.forwardRef(function LineChartPro(props: LineChartProP
       <ChartsLegend {...legendProps} />
       {!props.loading && <ChartsTooltip {...tooltipProps} />}
       <ChartsClipPath {...clipPathProps} />
-      {zoom && <ZoomSetup />}
+      <ZoomSetup />
       {children}
     </ResponsiveChartContainerPro>
   );

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx

@@ -12,12 +12,7 @@ import { useScatterChartProps } from '@mui/x-charts/internals';
 import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
 import { ZoomSetup } from '../context/ZoomProvider/ZoomSetup';
 
-export interface ScatterChartProProps extends ScatterChartProps {
-  /**
-   * If `true`, the chart will be zoomable.
-   */
-  zoom?: boolean;
-}
+export interface ScatterChartProProps extends ScatterChartProps {}
 
 /**
  * Demos:
@@ -33,7 +28,7 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro(
   props: ScatterChartProProps,
   ref,
 ) {
-  const { zoom, ...restProps } = props;
+  const { ...restProps } = props;
   const {
     chartContainerProps,
     zAxisProps,
@@ -58,7 +53,7 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro(
         <ChartsLegend {...legendProps} />
         <ChartsAxisHighlight {...axisHighlightProps} />
         {!props.loading && <ChartsTooltip {...tooltipProps} />}
-        {zoom && <ZoomSetup />}
+        <ZoomSetup />
         {children}
       </ZAxisContextProvider>
     </ResponsiveChartContainerPro>

packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx

@@ -24,20 +24,20 @@ function CartesianContextProviderPro(props: CartesianContextProviderProProps) {
 
   const formattedSeries = useSeries();
   const drawingArea = useDrawingArea();
-  const { zoomRange } = useZoom();
+  const { zoomData } = useZoom();
 
   const xAxis = React.useMemo(() => normalizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
 
   const yAxis = React.useMemo(() => normalizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
 
   const xValues = React.useMemo(
-    () => computeValue(drawingArea, formattedSeries, xAxis, xExtremumGetters, 'x', zoomRange),
-    [drawingArea, formattedSeries, xAxis, xExtremumGetters, zoomRange],
+    () => computeValue(drawingArea, formattedSeries, xAxis, xExtremumGetters, 'x', zoomData),
+    [drawingArea, formattedSeries, xAxis, xExtremumGetters, zoomData],
   );
 
   const yValues = React.useMemo(
-    () => computeValue(drawingArea, formattedSeries, yAxis, yExtremumGetters, 'y'),
-    [drawingArea, formattedSeries, yAxis, yExtremumGetters],
+    () => computeValue(drawingArea, formattedSeries, yAxis, yExtremumGetters, 'y', zoomData),
+    [drawingArea, formattedSeries, yAxis, yExtremumGetters, zoomData],
   );
 
   const value = React.useMemo(

packages/x-charts-pro/src/context/ZoomProvider/Zoom.types.ts

@@ -0,0 +1,71 @@
+import { AxisId } from '@mui/x-charts/internals';
+
+export type ZoomOptions = {
+  /**
+   * The starting percentage of the zoom range. In the range of 0 to 100.
+   *
+   * @default 0
+   */
+  start?: number;
+  /**
+   * The ending percentage of the zoom range. In the range of 0 to 100.
+   *
+   * @default 100
+   */
+  end?: number;
+  /**
+   * The step size of the zoom range. Defines the granularity of the zoom.
+   *
+   * @default 5
+   */
+  step?: number;
+  /**
+   * Restricts the minimal window size in a percentage. In the range of 0 to 100.
+   *
+   * If the window size is smaller than the minSpan, the window will be resized to the minSpan.
+   *
+   * @default 10
+   */
+  minSpan?: number;
+  /**
+   * Restricts the maximal window size in a percentage. In the range of 0 to 100.
+   *
+   * If the window size is larger than the maxSpan, the window will be resized to the maxSpan.
+   *
+   * @default 100
+   */
+  maxSpan?: number;
+  /**
+   * Set to `false` to disable panning. Useful when you want to pan programmatically,
+   * or to show only a specific section of the chart.
+   *
+   * @default true
+   */
+  panning?: boolean;
+};
+
+export type ZoomData = {
+  /**
+   * The starting percentage of the zoom range. In the range of 0 to 100.
+   *
+   * @default 0
+   */
+  start: number;
+  /**
+   * The ending percentage of the zoom range. In the range of 0 to 100.
+   *
+   * @default 100
+   */
+  end: number;
+  /**
+   * The axis id that the zoom data belongs to.
+   */
+  axisId: AxisId;
+};
+
+export type ZoomProps = {
+  zoom: ZoomData[];
+  onZoomChange: (zoom: ZoomData[]) => void;
+};
+
+export type DefaultizedZoomOptions = Required<ZoomOptions> & { axisId: AxisId; axis: 'x' | 'y' };

packages/x-charts-pro/src/context/ZoomProvider/ZoomContext.ts

@@ -1,18 +1,25 @@
 import * as React from 'react';
-import { Initializable } from '@mui/x-charts/internals';
+import { AxisId, Initializable } from '@mui/x-charts/internals';
+import { DefaultizedZoomOptions, ZoomData } from './Zoom.types';
 
 export type ZoomState = {
-  zoomRange: [number, number];
-  setZoomRange: (range: [number, number]) => void;
+  isZoomEnabled: boolean;
+  isPanEnabled: boolean;
+  options: Record<AxisId, DefaultizedZoomOptions>;
+  zoomData: ZoomData[];
+  setZoomData: (zoomData: ZoomData[]) => void;
   isInteracting: boolean;
   setIsInteracting: (isInteracting: boolean) => void;
 };
 
 export const ZoomContext = React.createContext<Initializable<ZoomState>>({
   isInitialized: false,
   data: {
-    zoomRange: [0, 100],
-    setZoomRange: () => {},
+    isZoomEnabled: false,
+    isPanEnabled: false,
+    options: {},
+    zoomData: [],
+    setZoomData: () => {},
     isInteracting: false,
     setIsInteracting: () => {},
   },

packages/x-charts-pro/src/context/ZoomProvider/ZoomProvider.tsx

@@ -1,26 +1,69 @@
 import * as React from 'react';
-import { ZoomContext } from './ZoomContext';
+import { AxisConfig, ScaleName, ChartsXAxisProps, ChartsYAxisProps } from '@mui/x-charts';
+import { cartesianProviderUtils } from '@mui/x-charts/internals';
+import { ZoomContext, ZoomState } from './ZoomContext';
+import { defaultizeZoom } from './defaultizeZoom';
+import { ZoomData } from './Zoom.types';
+
+const { defaultizeAxis } = cartesianProviderUtils;
 
 type ZoomProviderProps = {
   children: React.ReactNode;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: Partial<Pick<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id' | 'zoom'>>[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: Partial<Pick<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id' | 'zoom'>>[];
 };
 
-export function ZoomProvider({ children }: ZoomProviderProps) {
-  const [zoomRange, setZoomRange] = React.useState<[number, number]>([0, 100]);
+export function ZoomProvider({ children, xAxis: inXAxis, yAxis: inYAxis }: ZoomProviderProps) {
   const [isInteracting, setIsInteracting] = React.useState<boolean>(false);
 
+  const options = React.useMemo(
+    () =>
+      [
+        ...(defaultizeZoom(defaultizeAxis(inXAxis, 'x'), 'x') ?? []),
+        ...(defaultizeZoom(defaultizeAxis(inYAxis, 'y'), 'y') ?? []),
+      ].reduce(
+        (acc, v) => {
+          acc[v.axisId] = v;
+          return acc;
+        },
+        {} as ZoomState['options'],
+      ),
+    [inXAxis, inYAxis],
+  );
+
+  const [zoomData, setZoomData] = React.useState<ZoomData[]>(() =>
+    Object.values(options).map(({ axisId, start, end }) => ({ axisId, start, end })),
+  );
+
   const value = React.useMemo(
     () => ({
       isInitialized: true,
       data: {
-        zoomRange,
-        setZoomRange,
+        isZoomEnabled: zoomData.length > 0,
+        isPanEnabled: isPanEnabled(options),
+        options,
+        zoomData,
+        setZoomData,
         isInteracting,
         setIsInteracting,
       },
     }),
-    [zoomRange, setZoomRange, isInteracting, setIsInteracting],
+    [zoomData, setZoomData, isInteracting, setIsInteracting, options],
   );
 
   return <ZoomContext.Provider value={value}>{children}</ZoomContext.Provider>;
 }
+
+function isPanEnabled(options: Record<any, { panning?: boolean }>): boolean {
+  return Object.values(options).some((v) => v.panning) || false;
+}