[charts] Move z-axis to plugin (mui#16130)

lauri865 · Jan 13, 2025 · aa515ec · aa515ec
1 parent 2c9ddc9
commit aa515ec
Show file tree

Hide file tree

Showing 35 changed files with 316 additions and 322 deletions.
diff --git a/docs/pages/x/api/charts/chart-data-provider.json b/docs/pages/x/api/charts/chart-data-provider.json
@@ -1,16 +1,14 @@
 {
   "props": {
     "colors": { "type": { "name": "any" }, "default": "blueberryTwilightPalette" },
-    "dataset": { "type": { "name": "any" } },
     "height": { "type": { "name": "any" } },
     "highlightedItem": { "type": { "name": "any" } },
     "id": { "type": { "name": "any" } },
     "margin": { "type": { "name": "any" } },
     "onHighlightChange": { "type": { "name": "any" } },
     "series": { "type": { "name": "any" } },
     "skipAnimation": { "type": { "name": "any" } },
-    "width": { "type": { "name": "any" } },
-    "zAxis": { "type": { "name": "any" } }
+    "width": { "type": { "name": "any" } }
   },
   "name": "ChartDataProvider",
   "imports": [

diff --git a/docs/translations/api-docs/charts/chart-data-provider/chart-data-provider.json b/docs/translations/api-docs/charts/chart-data-provider/chart-data-provider.json
@@ -2,9 +2,6 @@
   "componentDescription": "Orchestrates the data providers for the chart components and hooks.\n\nUse this component if you have custom HTML components that need to access the chart data.",
   "propDescriptions": {
     "colors": { "description": "Color palette used to colorize multiple series." },
-    "dataset": {
-      "description": "An array of objects that can be used to populate series and axes data using their <code>dataKey</code> property."
-    },
     "height": {
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
@@ -26,8 +23,7 @@
     },
     "width": {
       "description": "The width of the chart in px. If not defined, it takes the width of the parent element."
-    },
-    "zAxis": { "description": "The configuration of the z-axes." }
+    }
   },
   "classDescriptions": {}
 }
diff --git a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx
@@ -6,16 +6,13 @@ import { Watermark } from '@mui/x-license/Watermark';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { ChartsSurface, ChartsSurfaceProps } from '@mui/x-charts/ChartsSurface';
 import { ChartDataProvider, ChartDataProviderProps } from '@mui/x-charts/context';
-import { ChartSeriesType, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
+import { ChartSeriesType } from '@mui/x-charts/internals';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 import { useChartContainerProProps } from './useChartContainerProProps';
-import { UseChartProZoomSignature } from '../internals/plugins/useChartProZoom/useChartProZoom.types';
+import { AllPluginSignatures } from '../internals/plugins/allPlugins';
 
 export interface ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeriesType>
-  extends ChartDataProviderProps<
-      [UseChartCartesianAxisSignature<TSeries>, UseChartProZoomSignature],
-      TSeries
-    >,
+  extends ChartDataProviderProps<TSeries, AllPluginSignatures<TSeries>>,
     ChartsSurfaceProps {}
 
 const releaseInfo = getReleaseInfo();
@@ -53,9 +50,7 @@ const ChartContainerPro = React.forwardRef(function ChartContainerProInner<
   useLicenseVerifier('x-charts-pro', releaseInfo);
 
   return (
-    <ChartDataProvider<TSeries, [UseChartCartesianAxisSignature<TSeries>, UseChartProZoomSignature]>
-      {...chartDataProviderProProps}
-    >
+    <ChartDataProvider<TSeries, AllPluginSignatures<TSeries>> {...chartDataProviderProProps}>
       <ChartsSurface {...chartsSurfaceProps}>{children}</ChartsSurface>
       <Watermark packageName="x-charts-pro" releaseInfo={releaseInfo} />
     </ChartDataProvider>

diff --git a/packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts b/packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts
@@ -1,26 +1,19 @@
 'use client';
 import {
   ChartDataProviderProps,
-  ChartPlugin,
   ChartSeriesType,
-  useChartCartesianAxis,
-  UseChartCartesianAxisSignature,
   useChartContainerProps,
   UseChartContainerPropsReturnValue,
 } from '@mui/x-charts/internals';
 import * as React from 'react';
 import type { ChartContainerProProps } from './ChartContainerPro';
-import { useChartProZoom } from '../internals/plugins/useChartProZoom';
-import { UseChartProZoomSignature } from '../internals/plugins/useChartProZoom/useChartProZoom.types';
+import { ALL_PLUGINS, AllPluginsType, AllPluginSignatures } from '../internals/plugins/allPlugins';
 
 export type UseChartContainerProPropsReturnValue<TSeries extends ChartSeriesType> = Pick<
   UseChartContainerPropsReturnValue<TSeries>,
   'chartsSurfaceProps' | 'children'
 > & {
-  chartDataProviderProProps: ChartDataProviderProps<
-    [UseChartCartesianAxisSignature<TSeries>, UseChartProZoomSignature],
-    TSeries
-  >;
+  chartDataProviderProProps: ChartDataProviderProps<TSeries, AllPluginSignatures<TSeries>>;
 };
 
 export const useChartContainerProProps = <TSeries extends ChartSeriesType = ChartSeriesType>(
@@ -30,10 +23,7 @@ export const useChartContainerProProps = <TSeries extends ChartSeriesType = Char
   const { initialZoom, onZoomChange, plugins, apiRef, ...baseProps } = props;
 
   const chartDataProviderProProps: Pick<
-    ChartDataProviderProps<
-      [UseChartCartesianAxisSignature<TSeries>, UseChartProZoomSignature],
-      TSeries
-    >,
+    ChartDataProviderProps<TSeries, AllPluginSignatures<TSeries>>,
     'initialZoom' | 'onZoomChange'
   > = {
     initialZoom,
@@ -50,12 +40,7 @@ export const useChartContainerProProps = <TSeries extends ChartSeriesType = Char
       ...chartDataProviderProps,
       ...chartDataProviderProProps,
       apiRef,
-      plugins: plugins ?? [
-        // eslint-disable-next-line react-compiler/react-compiler
-        useChartCartesianAxis as unknown as ChartPlugin<UseChartCartesianAxisSignature<TSeries>>,
-        // eslint-disable-next-line react-compiler/react-compiler
-        useChartProZoom,
-      ],
+      plugins: plugins ?? (ALL_PLUGINS as unknown as AllPluginsType<TSeries>),
     },
     chartsSurfaceProps,
     children,

diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ScatterChartProps, ScatterPlot } from '@mui/x-charts/ScatterChart';
-import { ChartDataProvider, ZAxisContextProvider } from '@mui/x-charts/context';
+import { ChartDataProvider } from '@mui/x-charts/context';
 import { ChartsVoronoiHandler } from '@mui/x-charts/ChartsVoronoiHandler';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
@@ -39,7 +39,6 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro(
   const {
     chartsWrapperProps,
     chartContainerProps,
-    zAxisProps,
     voronoiHandlerProps,
     chartsAxisProps,
     gridProps,
@@ -66,19 +65,17 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro(
       <ChartsWrapper {...chartsWrapperProps}>
         {!props.hideLegend && <ChartsLegend {...legendProps} />}
         <ChartsSurface {...chartsSurfaceProps}>
-          <ZAxisContextProvider {...zAxisProps}>
-            {!props.disableVoronoi && <ChartsVoronoiHandler {...voronoiHandlerProps} />}
-            <ChartsAxis {...chartsAxisProps} />
-            <ChartsGrid {...gridProps} />
-            <g data-drawing-container>
-              {/* The `data-drawing-container` indicates that children are part of the drawing area. Ref: https://github.com/mui/mui-x/issues/13659 */}
-              <ScatterPlot {...scatterPlotProps} />
-            </g>
-            <ChartsOverlay {...overlayProps} />
-            <ChartsAxisHighlight {...axisHighlightProps} />
-            {!props.loading && <Tooltip {...props?.slotProps?.tooltip} trigger="item" />}
-            {children}
-          </ZAxisContextProvider>
+          {!props.disableVoronoi && <ChartsVoronoiHandler {...voronoiHandlerProps} />}
+          <ChartsAxis {...chartsAxisProps} />
+          <ChartsGrid {...gridProps} />
+          <g data-drawing-container>
+            {/* The `data-drawing-container` indicates that children are part of the drawing area. Ref: https://github.com/mui/mui-x/issues/13659 */}
+            <ScatterPlot {...scatterPlotProps} />
+          </g>
+          <ChartsOverlay {...overlayProps} />
+          <ChartsAxisHighlight {...axisHighlightProps} />
+          {!props.loading && <Tooltip {...props?.slotProps?.tooltip} trigger="item" />}
+          {children}
         </ChartsSurface>
       </ChartsWrapper>
     </ChartDataProvider>

diff --git a/packages/x-charts-pro/src/internals/plugins/allPlugins.ts b/packages/x-charts-pro/src/internals/plugins/allPlugins.ts
@@ -0,0 +1,30 @@
+// This file should be removed after creating all plugins in favor of a file per chart type.
+
+import {
+  ChartSeriesType,
+  ConvertSignaturesIntoPlugins,
+  useChartCartesianAxis,
+  UseChartCartesianAxisSignature,
+  useChartInteraction,
+  UseChartInteractionSignature,
+  useChartZAxis,
+  UseChartZAxisSignature,
+} from '@mui/x-charts/internals';
+import { useChartProZoom, UseChartProZoomSignature } from './useChartProZoom';
+
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [
+  UseChartZAxisSignature,
+  UseChartCartesianAxisSignature<TSeries>,
+  UseChartInteractionSignature,
+  UseChartProZoomSignature,
+];
+
+export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> =
+  ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
+
+export const ALL_PLUGINS = [
+  useChartZAxis,
+  useChartCartesianAxis,
+  useChartInteraction,
+  useChartProZoom,
+];
diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/index.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/index.ts
@@ -1,2 +1,3 @@
 export * from './useChartProZoom.selectors';
 export * from './useChartProZoom';
+export * from './useChartProZoom.types';
diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
@@ -5,14 +5,10 @@ import { ChartSeriesType } from '../models/seriesType/config';
 import { ChartDataProvider, ChartDataProviderProps } from '../context/ChartDataProvider';
 import { useChartContainerProps } from './useChartContainerProps';
 import { ChartsSurface, ChartsSurfaceProps } from '../ChartsSurface';
-import { UseChartCartesianAxisSignature } from '../internals/plugins/featurePlugins/useChartCartesianAxis';
-import { UseChartInteractionSignature } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { AllPluginSignatures } from '../internals/plugins/allPlugins';
 
 export interface ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType>
-  extends Omit<
-      ChartDataProviderProps<[UseChartCartesianAxisSignature<SeriesType>], SeriesType>,
-      'children'
-    >,
+  extends Omit<ChartDataProviderProps<SeriesType, AllPluginSignatures<SeriesType>>, 'children'>,
     ChartsSurfaceProps {}
 
 /**
@@ -49,12 +45,7 @@ const ChartContainer = React.forwardRef(function ChartContainer<TSeries extends
   );
 
   return (
-    <ChartDataProvider<
-      TSeries,
-      [UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature]
-    >
-      {...chartDataProviderProps}
-    >
+    <ChartDataProvider<TSeries, AllPluginSignatures<TSeries>> {...chartDataProviderProps}>
       <ChartsSurface {...chartsSurfaceProps}>{children}</ChartsSurface>
     </ChartDataProvider>
   );

diff --git a/packages/x-charts/src/ChartContainer/useChartContainerProps.ts b/packages/x-charts/src/ChartContainer/useChartContainerProps.ts
@@ -3,21 +3,11 @@ import * as React from 'react';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 import { ChartDataProviderProps } from '../context/ChartDataProvider';
 import type { ChartContainerProps } from './ChartContainer';
-import {
-  useChartCartesianAxis,
-  UseChartCartesianAxisSignature,
-} from '../internals/plugins/featurePlugins/useChartCartesianAxis';
-import {
-  useChartInteraction,
-  UseChartInteractionSignature,
-} from '../internals/plugins/featurePlugins/useChartInteraction';
 import { ChartSeriesType } from '../models/seriesType/config';
+import { ALL_PLUGINS, AllPluginSignatures, AllPluginsType } from '../internals/plugins/allPlugins';
 
 export type UseChartContainerPropsReturnValue<TSeries extends ChartSeriesType> = {
-  chartDataProviderProps: ChartDataProviderProps<
-    [UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature],
-    TSeries
-  >;
+  chartDataProviderProps: ChartDataProviderProps<TSeries, AllPluginSignatures<TSeries>>;
   chartsSurfaceProps: ChartsSurfaceProps & { ref: React.Ref<SVGSVGElement> };
   children: React.ReactNode;
 };
@@ -58,10 +48,7 @@ export const useChartContainerProps = <TSeries extends ChartSeriesType = ChartSe
   };
 
   const chartDataProviderProps: Omit<
-    ChartDataProviderProps<
-      [UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature],
-      TSeries
-    >,
+    ChartDataProviderProps<TSeries, AllPluginSignatures<TSeries>>,
     'children'
   > = {
     margin,
@@ -77,7 +64,7 @@ export const useChartContainerProps = <TSeries extends ChartSeriesType = ChartSe
     width,
     height,
     seriesConfig,
-    plugins: [useChartCartesianAxis as any, useChartInteraction],
+    plugins: ALL_PLUGINS as unknown as AllPluginsType<TSeries>,
   };
 
   return {

diff --git a/packages/x-charts/src/ChartsLegend/useAxis.ts b/packages/x-charts/src/ChartsLegend/useAxis.ts
@@ -1,7 +1,7 @@
 'use client';
 import { AxisDefaultized } from '../models/axis';
 import { ZAxisDefaultized } from '../models/z-axis';
-import { useZAxis } from '../hooks/useZAxis';
+import { useZAxes } from '../hooks/useZAxis';
 import { useXAxes, useYAxes } from '../hooks/useAxis';
 import { ColorLegendSelector } from './colorLegend.types';
 
@@ -14,7 +14,7 @@ export function useAxis({
 }: ColorLegendSelector): ZAxisDefaultized | AxisDefaultized {
   const { xAxis, xAxisIds } = useXAxes();
   const { yAxis, yAxisIds } = useYAxes();
-  const { zAxis, zAxisIds } = useZAxis();
+  const { zAxis, zAxisIds } = useZAxes();
 
   switch (axisDirection) {
     case 'x': {

diff --git a/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx
@@ -9,7 +9,7 @@ import { getLabel } from '../internals/getLabel';
 import { isCartesianSeriesType } from '../internals/isCartesian';
 import { utcFormatter } from './utils';
 import { useXAxes, useXAxis, useYAxes, useYAxis } from '../hooks/useAxis';
-import { useZAxis } from '../hooks/useZAxis';
+import { useZAxes } from '../hooks/useZAxis';
 import {
   selectorChartsInteractionXAxis,
   selectorChartsInteractionYAxis,
@@ -53,7 +53,7 @@ export function useAxisTooltip(): UseAxisTooltipReturnValue | null {
   const { xAxis } = useXAxes();
   const { yAxis } = useYAxes();
 
-  const { zAxis, zAxisIds } = useZAxis();
+  const { zAxis, zAxisIds } = useZAxes();
   const colorProcessors = useColorProcessor();
 
   if (axisData === null) {

diff --git a/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx
@@ -11,8 +11,8 @@ import { getLabel } from '../internals/getLabel';
 import { selectorChartsInteractionItem } from '../internals/plugins/featurePlugins/useChartInteraction';
 import { useSelector } from '../internals/store/useSelector';
 import { useStore } from '../internals/store/useStore';
-import { useXAxes, useYAxes } from '../hooks';
-import { useZAxis } from '../hooks/useZAxis';
+import { useXAxes, useYAxes } from '../hooks/useAxis';
+import { useZAxes } from '../hooks/useZAxis';
 import { ChartsLabelMarkProps } from '../ChartsLabel';
 
 export interface UseItemTooltipReturnValue<T extends ChartSeriesType> {
@@ -32,7 +32,7 @@ export function useItemTooltip<T extends ChartSeriesType>(): null | UseItemToolt
 
   const { xAxis, xAxisIds } = useXAxes();
   const { yAxis, yAxisIds } = useYAxes();
-  const { zAxis, zAxisIds } = useZAxis();
+  const { zAxis, zAxisIds } = useZAxes();
   const colorProcessors = useColorProcessor();
 
   const xAxisId = (series as any).xAxisId ?? xAxisIds[0];

diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
@@ -28,7 +28,6 @@ import {
   ChartsVoronoiHandlerProps,
 } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { ChartsGrid, ChartsGridProps } from '../ChartsGrid';
-import { ZAxisContextProvider, ZAxisContextProviderProps } from '../context/ZAxisContextProvider';
 import { useScatterChartProps } from './useScatterChartProps';
 import { useChartContainerProps } from '../ChartContainer/useChartContainerProps';
 import { ChartDataProvider } from '../context';
@@ -50,7 +49,6 @@ export interface ScatterChartSlotProps
 
 export interface ScatterChartProps
   extends Omit<ChartContainerProps, 'series' | 'plugins'>,
-    Omit<ZAxisContextProviderProps, 'children' | 'dataset'>,
     Omit<ChartsAxisProps, 'slots' | 'slotProps'>,
     Omit<ChartsOverlayProps, 'slots' | 'slotProps'>,
     Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
@@ -114,7 +112,6 @@ const ScatterChart = React.forwardRef(function ScatterChart(
   const {
     chartsWrapperProps,
     chartContainerProps,
-    zAxisProps,
     voronoiHandlerProps,
     chartsAxisProps,
     gridProps,
@@ -136,19 +133,17 @@ const ScatterChart = React.forwardRef(function ScatterChart(
       <ChartsWrapper {...chartsWrapperProps}>
         {!props.hideLegend && <ChartsLegend {...legendProps} />}
         <ChartsSurface {...chartsSurfaceProps}>
-          <ZAxisContextProvider {...zAxisProps}>
-            {!props.disableVoronoi && <ChartsVoronoiHandler {...voronoiHandlerProps} />}
-            <ChartsAxis {...chartsAxisProps} />
-            <ChartsGrid {...gridProps} />
-            <g data-drawing-container>
-              {/* The `data-drawing-container` indicates that children are part of the drawing area. Ref: https://github.com/mui/mui-x/issues/13659 */}
-              <ScatterPlot {...scatterPlotProps} />
-            </g>
-            <ChartsOverlay {...overlayProps} />
-            <ChartsAxisHighlight {...axisHighlightProps} />
-            {!props.loading && <Tooltip trigger="item" {...props.slotProps?.tooltip} />}
-            {children}
-          </ZAxisContextProvider>
+          {!props.disableVoronoi && <ChartsVoronoiHandler {...voronoiHandlerProps} />}
+          <ChartsAxis {...chartsAxisProps} />
+          <ChartsGrid {...gridProps} />
+          <g data-drawing-container>
+            {/* The `data-drawing-container` indicates that children are part of the drawing area. Ref: https://github.com/mui/mui-x/issues/13659 */}
+            <ScatterPlot {...scatterPlotProps} />
+          </g>
+          <ChartsOverlay {...overlayProps} />
+          <ChartsAxisHighlight {...axisHighlightProps} />
+          {!props.loading && <Tooltip trigger="item" {...props.slotProps?.tooltip} />}
+          {children}
         </ChartsSurface>
       </ChartsWrapper>
     </ChartDataProvider>