[charts] Add initial Zoom&Pan to the Pro charts

packages/x-charts/src/BarChart/BarPlot.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { BarElement, BarElementSlotProps, BarElementSlots } from './BarElement';
 import { AxisDefaultized } from '../models/axis';
 import { FormatterResult } from '../models/seriesType/config';
@@ -89,7 +89,7 @@ const useAggregatedData = (): {
   const seriesData =
     useBarSeries() ??
     ({ series: {}, stackingGroups: [], seriesOrder: [] } as FormatterResult<'bar'>);
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   const chartId = useChartId();
 
   const { series, stackingGroups } = seriesData;

packages/x-charts/src/BarChart/checkScaleErrors.ts

@@ -1,8 +1,8 @@
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-import { AxisDefaultized, isBandScaleConfig, isPointScaleConfig } from '../models/axis';
+import { AxisDefaultized, AxisId, isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { SeriesId } from '../models/seriesType/common';
 
-const getAxisMessage = (axisDirection: 'x' | 'y', axisKey: string) => {
+const getAxisMessage = (axisDirection: 'x' | 'y', axisKey: AxisId) => {
   const axisName = `${axisDirection}-axis`;
   const axisKeyName = `${axisDirection}Axis`;
   const axisDefaultKey = axisDirection === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
@@ -14,10 +14,10 @@ const getAxisMessage = (axisDirection: 'x' | 'y', axisKey: string) => {
 export function checkScaleErrors(
   verticalLayout: boolean,
   seriesId: SeriesId,
-  xAxisKey: string,
-  xAxis: { DEFAULT_X_AXIS_KEY: AxisDefaultized } & { [axisKey: string]: AxisDefaultized },
-  yAxisKey: string,
-  yAxis: { DEFAULT_X_AXIS_KEY: AxisDefaultized } & { [axisKey: string]: AxisDefaultized },
+  xAxisKey: AxisId,
+  xAxis: { [axisKey: AxisId]: AxisDefaultized },
+  yAxisKey: AxisId,
+  yAxis: { [axisKey: AxisId]: AxisDefaultized },
 ): void {
   const xAxisConfig = xAxis[xAxisKey];
   const yAxisConfig = yAxis[yAxisKey];

packages/x-charts/src/ChartContainer/ChartContainer.tsx

@@ -13,12 +13,14 @@ import { ChartsSurface, ChartsSurfaceProps } from '../ChartsSurface';
 import {
   CartesianContextProvider,
   CartesianContextProviderProps,
-} from '../context/CartesianContextProvider';
+} from '../context/CartesianProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import { HighlightedProvider, HighlightedProviderProps } from '../context';
 import { ChartsPluginType } from '../models/plugin';
 import { ChartSeriesType } from '../models/seriesType/config';
 import { usePluginsMerge } from './usePluginsMerge';
+import { ZoomProvider } from '../context/ZoomProvider';
+import { CartesianContextProviderPro } from '../context/CartesianProvider/CartesianProviderPro';
 
 export type ChartContainerProps = Omit<
   ChartsSurfaceProps &
@@ -63,44 +65,55 @@ const ChartContainer = React.forwardRef(function ChartContainer(props: ChartCont
   useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
 
   return (
-    <DrawingProvider width={width} height={height} margin={margin} svgRef={svgRef}>
-      <ColorProvider colorProcessors={colorProcessors}>
-        <SeriesContextProvider
-          series={series}
-          colors={colors}
-          dataset={dataset}
-          seriesFormatters={seriesFormatters}
-        >
-          <CartesianContextProvider
-            xAxis={xAxis}
-            yAxis={yAxis}
+    // TODO: Remove to pro package
+    <ZoomProvider>
+      <DrawingProvider width={width} height={height} margin={margin} svgRef={svgRef}>
+        <ColorProvider colorProcessors={colorProcessors}>
+          <SeriesContextProvider
+            series={series}
+            colors={colors}
             dataset={dataset}
-            xExtremumGetters={xExtremumGetters}
-            yExtremumGetters={yExtremumGetters}
+            seriesFormatters={seriesFormatters}
           >
-            <InteractionProvider>
-              <HighlightedProvider
-                highlightedItem={highlightedItem}
-                onHighlightChange={onHighlightChange}
+            <CartesianContextProviderPro
+              xAxis={xAxis}
+              yAxis={yAxis}
+              dataset={dataset}
+              xExtremumGetters={xExtremumGetters}
+              yExtremumGetters={yExtremumGetters}
+            >
+              <CartesianContextProvider
+                xAxis={xAxis}
+                yAxis={yAxis}
+                dataset={dataset}
+                xExtremumGetters={xExtremumGetters}
+                yExtremumGetters={yExtremumGetters}
               >
-                <ChartsSurface
-                  width={width}
-                  height={height}
-                  ref={handleRef}
-                  sx={sx}
-                  title={title}
-                  desc={desc}
-                  disableAxisListener={disableAxisListener}
-                >
-                  <ChartsAxesGradients />
-                  {children}
-                </ChartsSurface>
-              </HighlightedProvider>
-            </InteractionProvider>
-          </CartesianContextProvider>
-        </SeriesContextProvider>
-      </ColorProvider>
-    </DrawingProvider>
+                <InteractionProvider>
+                  <HighlightedProvider
+                    highlightedItem={highlightedItem}
+                    onHighlightChange={onHighlightChange}
+                  >
+                    <ChartsSurface
+                      width={width}
+                      height={height}
+                      ref={handleRef}
+                      sx={sx}
+                      title={title}
+                      desc={desc}
+                      disableAxisListener={disableAxisListener}
+                    >
+                      <ChartsAxesGradients />
+                      {children}
+                    </ChartsSurface>
+                  </HighlightedProvider>
+                </InteractionProvider>
+              </CartesianContextProvider>
+            </CartesianContextProviderPro>
+          </SeriesContextProvider>
+        </ColorProvider>
+      </DrawingProvider>
+    </ZoomProvider>
   );
 });
 

packages/x-charts/src/ChartContainer/usePluginsMerge.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ChartsPluginType, ColorProcessorsConfig } from '../models';
 import { ChartSeriesType } from '../models/seriesType/config';
-import { ExtremumGettersConfig } from '../context/CartesianContextProvider';
+import { ExtremumGettersConfig } from '../context/CartesianProvider';
 import { SeriesFormatterConfig } from '../context/SeriesContextProvider';
 import { defaultPlugins } from './defaultPlugins';
 

packages/x-charts/src/ChartsAxis/ChartsAxis.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { ChartsXAxis } from '../ChartsXAxis';
 import { ChartsYAxis } from '../ChartsYAxis';
 import {
@@ -49,8 +49,8 @@ export interface ChartsAxisProps {
 }
 
 const getAxisId = (
-  propsValue: undefined | null | string | ChartsXAxisProps | ChartsYAxisProps,
-  defaultAxisId?: string,
+  propsValue: undefined | null | AxisId | ChartsXAxisProps | ChartsYAxisProps,
+  defaultAxisId?: AxisId,
 ): AxisId | null => {
   if (propsValue == null) {
     return null;
@@ -62,7 +62,7 @@ const getAxisId = (
 };
 
 const mergeProps = (
-  axisConfig: undefined | null | string | ChartsXAxisProps | ChartsYAxisProps,
+  axisConfig: undefined | null | AxisId | ChartsXAxisProps | ChartsYAxisProps,
   slots?: Partial<ChartsAxisSlots>,
   slotProps?: Partial<ChartsAxisSlotProps>,
 ) => {
@@ -86,7 +86,7 @@ const mergeProps = (
  */
 function ChartsAxis(props: ChartsAxisProps) {
   const { topAxis, leftAxis, rightAxis, bottomAxis, slots, slotProps } = props;
-  const { xAxis, xAxisIds, yAxis, yAxisIds } = React.useContext(CartesianContext);
+  const { xAxis, xAxisIds, yAxis, yAxisIds } = useCartesianContext();
 
   // TODO: use for plotting line without ticks or any thing
   // const drawingArea = React.useContext(DrawingContext);

packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx

@@ -5,7 +5,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { styled } from '@mui/material/styles';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { isBandScale } from '../internals/isBandScale';
 
@@ -67,7 +67,7 @@ export type ChartsAxisHighlightProps = {
  */
 function ChartsAxisHighlight(props: ChartsAxisHighlightProps) {
   const { x: xAxisHighlight, y: yAxisHighlight } = props;
-  const { xAxisIds, xAxis, yAxisIds, yAxis } = React.useContext(CartesianContext);
+  const { xAxisIds, xAxis, yAxisIds, yAxis } = useCartesianContext();
   const classes = useUtilityClasses();
 
   const USED_X_AXIS_ID = xAxisIds[0];

packages/x-charts/src/ChartsGrid/ChartsGrid.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, useThemeProps } from '@mui/material/styles';
 
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import {
   ChartsGridClasses,
@@ -69,7 +69,7 @@ function ChartsGrid(props: ChartsGridProps) {
   const themeProps = useThemeProps({ props, name: 'MuiChartsGrid' });
 
   const { vertical, horizontal, ...other } = themeProps;
-  const { xAxis, xAxisIds, yAxis, yAxisIds } = React.useContext(CartesianContext);
+  const { xAxis, xAxisIds, yAxis, yAxisIds } = useCartesianContext();
 
   const classes = useUtilityClasses(themeProps);
 

packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
 import { useSeries } from '../hooks/useSeries';
 import { useSvgRef } from '../hooks';
+import { useCartesianContext } from '../context/CartesianProvider';
 
 type AxisData = {
   dataIndex: number;
@@ -27,7 +27,7 @@ function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) {
   const svgRef = useSvgRef();
   const series = useSeries();
   const { axis } = React.useContext(InteractionContext);
-  const { xAxisIds, xAxis, yAxisIds, yAxis } = React.useContext(CartesianContext);
+  const { xAxisIds, xAxis, yAxisIds, yAxis } = useCartesianContext();
 
   React.useEffect(() => {
     const element = svgRef.current;

packages/x-charts/src/ChartsSurface.tsx

@@ -2,6 +2,7 @@ import { styled, SxProps, Theme } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useAxisEvents } from './hooks/useAxisEvents';
+import { useSetupZoom } from './context/ZoomProvider';
 
 type ViewBox = {
   x?: number;
@@ -55,6 +56,7 @@ const ChartsSurface = React.forwardRef<SVGSVGElement, ChartsSurfaceProps>(functi
   const svgView = { width, height, x: 0, y: 0, ...viewBox };
 
   useAxisEvents(disableAxisListener);
+  useSetupZoom();
 
   return (
     <ChartChartsSurfaceStyles

packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { SxProps, Theme } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { AxisInteractionData } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
 import { AxisDefaultized } from '../models/axis';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
@@ -59,7 +59,7 @@ function ChartsAxisTooltipContent(props: {
   const dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index;
   const axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value;
 
-  const { xAxisIds, xAxis, yAxisIds, yAxis } = React.useContext(CartesianContext);
+  const { xAxisIds, xAxis, yAxisIds, yAxis } = useCartesianContext();
   const { zAxisIds, zAxis } = React.useContext(ZAxisContext);
   const series = useSeries();
 

packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx

@@ -6,7 +6,7 @@ import { ItemInteractionData } from '../context/InteractionProvider';
 import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
 import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
 import { useColorProcessor } from '../hooks/useColor';
 import { useSeries } from '../hooks/useSeries';
@@ -44,7 +44,7 @@ function ChartsItemTooltipContent<T extends ChartSeriesType>(props: {
 
   const series = useSeries()[itemData.type]!.series[itemData.seriesId] as ChartSeriesDefaultized<T>;
 
-  const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext);
+  const { xAxis, yAxis, xAxisIds, yAxisIds } = useCartesianContext();
   const { zAxis, zAxisIds } = React.useContext(ZAxisContext);
   const colorProcessors = useColorProcessor();
 

packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Delaunay } from 'd3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
 import { ScatterItemIdentifier } from '../models';
@@ -32,7 +32,7 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
   const { voronoiMaxRadius, onItemClick } = props;
   const svgRef = useSvgRef();
   const { left, top, width, height } = useDrawingArea();
-  const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext);
+  const { xAxis, yAxis, xAxisIds, yAxisIds } = useCartesianContext();
   const { dispatch } = React.useContext(InteractionContext);
 
   const { series, seriesOrder } = useScatterSeries() ?? {};

packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks, TickItemType } from '../hooks/useTicks';
 import { AxisDefaultized, ChartsXAxisProps } from '../models/axis';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
@@ -98,7 +98,7 @@ const defaultProps = {
  * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
  */
 function ChartsXAxis(inProps: ChartsXAxisProps) {
-  const { xAxisIds, xAxis } = React.useContext(CartesianContext);
+  const { xAxisIds, xAxis } = useCartesianContext();
   const { scale: xScale, tickNumber, reverse, ...settings } = xAxis[inProps.axisId ?? xAxisIds[0]];
 
   const isMounted = useMounted();

packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { ChartsYAxisProps } from '../models/axis';
@@ -44,7 +44,7 @@ const defaultProps = {
  * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
  */
 function ChartsYAxis(inProps: ChartsYAxisProps) {
-  const { yAxisIds, yAxis } = React.useContext(CartesianContext);
+  const { yAxisIds, yAxis } = useCartesianContext();
   const { scale: yScale, tickNumber, ...settings } = yAxis[inProps.axisId ?? yAxisIds[0]];
 
   const themedProps = useThemeProps({ props: { ...settings, ...inProps }, name: 'MuiChartsYAxis' });

packages/x-charts/src/LineChart/AreaPlot.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { area as d3Area } from 'd3-shape';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import {
   AreaElement,
   AreaElementProps,
@@ -14,6 +14,7 @@ import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { LineItemIdentifier } from '../models/seriesType/line';
 import { useChartGradient } from '../internals/components/ChartsAxesGradients';
 import { useLineSeries } from '../hooks/useSeries';
+import { AxisId } from '../models/axis';
 
 export interface AreaPlotSlots extends AreaElementSlots {}
 
@@ -35,7 +36,7 @@ export interface AreaPlotProps
 
 const useAggregatedData = () => {
   const seriesData = useLineSeries();
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
 
   if (seriesData === undefined) {
     return [];
@@ -62,7 +63,7 @@ const useAggregatedData = () => {
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
 
-        const gradientUsed: [string, 'x' | 'y'] | undefined =
+        const gradientUsed: [AxisId, 'x' | 'y'] | undefined =
           (yAxis[yAxisKey].colorScale && [yAxisKey, 'y']) ||
           (xAxis[xAxisKey].colorScale && [xAxisKey, 'x']) ||
           undefined;