move to plugin

Author: JCQuintas

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

@@ -11,7 +11,6 @@ import {
   ChartsYAxisProps,
 } from '../models/axis';
 import { useXAxes, useYAxes } from '../hooks';
-import { useChartContext } from '../context/ChartProvider';
 
 export interface ChartsAxisProps {
   /**
@@ -90,7 +89,6 @@ function ChartsAxis(props: ChartsAxisProps) {
   const { topAxis, leftAxis, rightAxis, bottomAxis, slots, slotProps } = props;
   const { xAxis, xAxisIds } = useXAxes();
   const { yAxis, yAxisIds } = useYAxes();
-  const { instance } = useChartContext();
 
   const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis, yAxisIds[0]);
   const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis, xAxisIds[0]);
@@ -134,21 +132,6 @@ function ChartsAxis(props: ChartsAxisProps) {
   const leftAxisProps = mergeProps(leftAxis, slots, slotProps);
   const rightAxisProps = mergeProps(rightAxis, slots, slotProps);
 
-  React.useEffect(() => {
-    if (topId) {
-      instance.addAxisSide('top');
-    }
-    if (bottomId) {
-      instance.addAxisSide('bottom');
-    }
-    if (leftId) {
-      instance.addAxisSide('left');
-    }
-    if (rightId) {
-      instance.addAxisSide('right');
-    }
-  }, [topId, bottomId, leftId, rightId, instance]);
-
   return (
     <React.Fragment>
       {topId && <ChartsXAxis {...topAxisProps} position="top" axisId={topId} />}

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts

@@ -12,7 +12,7 @@ import { defaultizeAxis } from './defaultizeAxis';
 
 export const useChartCartesianAxis: ChartPlugin<
   UseChartCartesianAxisSignature<ChartSeriesType>
-> = ({ params, store, seriesConfig }) => {
+> = ({ params, store, seriesConfig, instance }) => {
   const { xAxis, yAxis, dataset } = params;
 
   if (process.env.NODE_ENV !== 'production') {
@@ -31,6 +31,13 @@ export const useChartCartesianAxis: ChartPlugin<
     }
   }
 
+  React.useEffect(() => {
+    instance.addAxisSide('top');
+    instance.addAxisSide('bottom');
+    instance.addAxisSide('left');
+    instance.addAxisSide('right');
+  }, [instance]);
+
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const formattedSeries = useSelector(store, selectorChartSeriesState);