@mui/x-charts 8.0.0-alpha.7 → 8.0.0-alpha.9

package/context/PolarProvider/PolarProvider.js

@@ -1,49 +1,61 @@
 'use client';
 
-import * as React from 'react';
-import { computeAxisValue } from "../../internals/computeAxisValue.js";
-import { useDrawingArea } from "../../hooks/useDrawingArea.js";
-import { useSeries } from "../../hooks/useSeries.js";
-import { PolarContext } from "./PolarContext.js";
-import { useRadiusExtremumGetter } from "../PluginProvider/useRadiusExtremumGetter.js";
-import { useRotationExtremumGetter } from "../PluginProvider/useRotationExtremumGetter.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function PolarProvider(props) {
-  const {
-    rotationAxis,
-    radiusAxis,
-    children
-  } = props;
-  const formattedSeries = useSeries();
-  const drawingArea = useDrawingArea();
-  const rotationExtremumGetters = useRotationExtremumGetter();
-  const radiusExtremumGetters = useRadiusExtremumGetter();
-  const rotationValues = React.useMemo(() => computeAxisValue({
-    drawingArea,
-    formattedSeries,
-    axis: rotationAxis,
-    extremumGetters: rotationExtremumGetters,
-    axisDirection: 'rotation'
-  }), [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters]);
-  const radiusValues = React.useMemo(() => computeAxisValue({
-    drawingArea,
-    formattedSeries,
-    axis: radiusAxis,
-    extremumGetters: radiusExtremumGetters,
-    axisDirection: 'radius'
-  }), [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters]);
-  const value = React.useMemo(() => ({
-    isInitialized: true,
-    data: {
-      rotationAxis: rotationValues.axis,
-      radiusAxis: radiusValues.axis,
-      rotationAxisIds: rotationValues.axisIds,
-      radiusAxisIds: radiusValues.axisIds
-    }
-  }), [rotationValues, radiusValues]);
-  return /*#__PURE__*/_jsx(PolarContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-export { PolarProvider };
+// 'use client';
+// import * as React from 'react';
+// import { computeAxisValue } from '../../internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue';
+// import { useDrawingArea } from '../../hooks/useDrawingArea';
+// import { useSeries } from '../../hooks/useSeries';
+// import { PolarContext } from './PolarContext';
+// import { useRadiusExtremumGetter } from '../PluginProvider/useRadiusExtremumGetter';
+// import { useRotationExtremumGetter } from '../PluginProvider/useRotationExtremumGetter';
+// import { PolarProviderProps } from './Polar.types';
+
+// function PolarProvider(props: PolarProviderProps) {
+//   const { rotationAxis, radiusAxis, children } = props;
+
+//   const formattedSeries = useSeries();
+//   const drawingArea = useDrawingArea();
+//   const rotationExtremumGetters = useRotationExtremumGetter();
+//   const radiusExtremumGetters = useRadiusExtremumGetter();
+
+//   const rotationValues = React.useMemo(
+//     () =>
+//       computeAxisValue({
+//         drawingArea,
+//         formattedSeries,
+//         axis: rotationAxis,
+//         extremumGetters: rotationExtremumGetters,
+//         axisDirection: 'rotation',
+//       }),
+//     [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters],
+//   );
+
+//   const radiusValues = React.useMemo(
+//     () =>
+//       computeAxisValue({
+//         drawingArea,
+//         formattedSeries,
+//         axis: radiusAxis,
+//         extremumGetters: radiusExtremumGetters,
+//         axisDirection: 'radius',
+//       }),
+//     [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters],
+//   );
+
+//   const value = React.useMemo(
+//     () => ({
+//       isInitialized: true,
+//       data: {
+//         rotationAxis: rotationValues.axis,
+//         radiusAxis: radiusValues.axis,
+//         rotationAxisIds: rotationValues.axisIds,
+//         radiusAxisIds: radiusValues.axisIds,
+//       },
+//     }),
+//     [rotationValues, radiusValues],
+//   );
+
+//   return <PolarContext.Provider value={value}>{children}</PolarContext.Provider>;
+// }
+
+// export { PolarProvider };

package/context/PolarProvider/getAxisExtremum.d.ts

@@ -1,4 +0,0 @@
-import { AxisConfig } from '../../models';
-import { FormattedSeries } from '../SeriesProvider';
-import { ExtremumGettersConfig } from '../PluginProvider';
-export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig, axisIndex: number, formattedSeries: FormattedSeries) => number[];

package/context/PolarProvider/getAxisExtremum.js

@@ -1,20 +1,48 @@
-const axisExtremumCallback = (acc, chartType, axis, getters, axisIndex, formattedSeries) => {
-  const getter = getters[chartType];
-  const series = formattedSeries[chartType]?.series ?? {};
-  const [minChartTypeData, maxChartTypeData] = getter?.({
-    series,
-    axis,
-    axisIndex,
-    isDefaultAxis: axisIndex === 0
-  }) ?? [Infinity, -Infinity];
-  const [minData, maxData] = acc;
-  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
-};
-export const getAxisExtremum = (axis, getters, axisIndex, formattedSeries) => {
-  const charTypes = Object.keys(getters);
-  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries), [Infinity, -Infinity]);
-  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
-    return [Infinity, -Infinity];
-  }
-  return extremums;
-};
+// import { AxisConfig } from '../../models';
+// import { CartesianChartSeriesType } from '../../models/seriesType/config';
+// import { FormattedSeries } from '../SeriesProvider';
+// import { ExtremumGettersConfig, ExtremumGetterResult } from '../PluginProvider';
+
+// const axisExtremumCallback = <T extends CartesianChartSeriesType>(
+//   acc: ExtremumGetterResult,
+//   chartType: T,
+//   axis: AxisConfig,
+//   getters: ExtremumGettersConfig<T>,
+//   axisIndex: number,
+//   formattedSeries: FormattedSeries,
+// ): ExtremumGetterResult => {
+//   const getter = getters[chartType];
+//   const series = formattedSeries[chartType]?.series ?? {};
+
+//   const [minChartTypeData, maxChartTypeData] = getter?.({
+//     series,
+//     axis,
+//     axisIndex,
+//     isDefaultAxis: axisIndex === 0,
+//   }) ?? [Infinity, -Infinity];
+
+//   const [minData, maxData] = acc;
+
+//   return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+// };
+
+// export const getAxisExtremum = (
+//   axis: AxisConfig,
+//   getters: ExtremumGettersConfig,
+//   axisIndex: number,
+//   formattedSeries: FormattedSeries,
+// ) => {
+//   const charTypes = Object.keys(getters) as CartesianChartSeriesType[];
+
+//   const extremums = charTypes.reduce<ExtremumGetterResult>(
+//     (acc, charType) =>
+//       axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries),
+//     [Infinity, -Infinity],
+//   );
+
+//   if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+//     return [Infinity, -Infinity];
+//   }
+
+//   return extremums;
+// };

package/context/PolarProvider/usePolarContext.d.ts

@@ -1,2 +0,0 @@
-import { PolarContextState } from './Polar.types';
-export declare const usePolarContext: () => PolarContextState;

package/context/PolarProvider/usePolarContext.js

@@ -1,10 +1,11 @@
 'use client';
 
-import * as React from 'react';
-import { PolarContext } from "./PolarContext.js";
-export const usePolarContext = () => {
-  const {
-    data
-  } = React.useContext(PolarContext);
-  return data;
-};
+// 'use client';
+// import * as React from 'react';
+// import { PolarContext } from './PolarContext';
+// import { PolarContextState } from './Polar.types';
+
+// export const usePolarContext = (): PolarContextState => {
+//   const { data } = React.useContext(PolarContext);
+//   return data;
+// };

package/context/index.d.ts

@@ -1,5 +1 @@
 export * from './HighlightedProvider';
-export { ZAxisContextProvider } from './ZAxisContextProvider';
-export type { ZAxisContextProviderProps } from './ZAxisContextProvider';
-export { ChartDataProvider } from './ChartDataProvider';
-export type { ChartDataProviderProps } from './ChartDataProvider';

package/context/index.js

@@ -1,3 +1 @@
-export * from "./HighlightedProvider/index.js";
-export { ZAxisContextProvider } from "./ZAxisContextProvider.js";
-export { ChartDataProvider } from "./ChartDataProvider/index.js";
+export * from "./HighlightedProvider/index.js";

package/hooks/index.d.ts

@@ -2,7 +2,9 @@ export * from './useDrawingArea';
 export * from './useChartId';
 export * from './useScale';
 export * from './useAxis';
+export * from './useZAxis';
 export * from './useColorScale';
 export * from './useSvgRef';
 export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries, } from './useSeries';
 export * from './useLegend';
+export { useChartGradientId, useChartGradientIdObjectBound } from './useChartGradientId';

package/hooks/index.js

@@ -2,7 +2,9 @@ export * from "./useDrawingArea.js";
 export * from "./useChartId.js";
 export * from "./useScale.js";
 export * from "./useAxis.js";
+export * from "./useZAxis.js";
 export * from "./useColorScale.js";
 export * from "./useSvgRef.js";
 export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from "./useSeries.js";
-export * from "./useLegend.js";
+export * from "./useLegend.js";
+export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";

package/hooks/useAxis.d.ts

@@ -1,2 +1,10 @@
-export declare function useXAxis(identifier?: number | string): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsXAxisProps>;
+export declare function useXAxes(): {
+    xAxis: import("../internals").DefaultizedAxisConfig<import("../internals").ChartsAxisProps>;
+    xAxisIds: string[];
+};
+export declare function useYAxes(): {
+    yAxis: import("../internals").DefaultizedAxisConfig<import("..").ChartsYAxisProps>;
+    yAxisIds: string[];
+};
+export declare function useXAxis(identifier?: number | string): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("../internals").ChartsAxisProps>;
 export declare function useYAxis(identifier?: number | string): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsYAxisProps>;

package/hooks/useAxis.js

@@ -1,19 +1,45 @@
 'use client';
 
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-export function useXAxis(identifier) {
+import { selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+export function useXAxes() {
+  const store = useStore();
   const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
+  return {
     xAxis,
     xAxisIds
-  } = useCartesianContext();
+  };
+}
+export function useYAxes() {
+  const store = useStore();
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
+  return {
+    yAxis,
+    yAxisIds
+  };
+}
+export function useXAxis(identifier) {
+  const store = useStore();
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id];
 }
 export function useYAxis(identifier) {
+  const store = useStore();
   const {
-    yAxis,
-    yAxisIds
-  } = useCartesianContext();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id];
 }

package/hooks/useAxisEvents.js

@@ -2,25 +2,29 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
 import { useSvgRef } from "./useSvgRef.js";
-import { useDrawingArea } from "./useDrawingArea.js";
 import { useStore } from "../internals/store/useStore.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+import { useXAxes, useYAxes } from "./useAxis.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
 export const useAxisEvents = disableAxisListener => {
   const svgRef = useSvgRef();
-  const drawingArea = useDrawingArea();
+  const {
+    instance
+  } = useChartContext();
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = useCartesianContext();
-  const store = useStore(disableAxisListener);
+  } = useYAxes();
+  const store = useStore();
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -106,7 +110,7 @@ export const useAxisEvents = disableAxisListener => {
       const svgPoint = getSVGPoint(element, target);
       mousePosition.current.x = svgPoint.x;
       mousePosition.current.y = svgPoint.y;
-      if (!drawingArea.isPointInside(svgPoint, {
+      if (!instance.isPointInside(svgPoint, {
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
@@ -157,5 +161,5 @@ export const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
+  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, instance]);
 };

package/hooks/useChartGradientId.d.ts

@@ -0,0 +1,31 @@
+import { AxisId } from '../models/axis';
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export declare function useChartGradientIdBuilder(): (axisId: AxisId) => string;
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export declare function useChartGradientIdObjectBoundBuilder(): (axisId: AxisId) => string;
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+export declare function useChartGradientId(axisId: AxisId): string;
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+export declare function useChartGradientIdObjectBound(axisId: AxisId): string;

package/hooks/useChartGradientId.js

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+import { useChartId } from "./useChartId.js";
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export function useChartGradientIdBuilder() {
+  const chartId = useChartId();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}`, [chartId]);
+}
+
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export function useChartGradientIdObjectBoundBuilder() {
+  const chartId = useChartId();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}-object-bound`, [chartId]);
+}
+
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+export function useChartGradientId(axisId) {
+  return useChartGradientIdBuilder()(axisId);
+}
+
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+export function useChartGradientIdObjectBound(axisId) {
+  return useChartGradientIdObjectBoundBuilder()(axisId);
+}

package/hooks/useColorScale.js

@@ -1,12 +1,12 @@
 'use client';
 
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { useZAxis } from "./useZAxis.js";
+import { useXAxes, useYAxes } from "./useAxis.js";
+import { useZAxes } from "./useZAxis.js";
 export function useXColorScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = useCartesianContext();
+  } = useXAxes();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].colorScale;
 }
@@ -14,7 +14,7 @@ export function useYColorScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].colorScale;
 }
@@ -22,7 +22,7 @@ export function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = useZAxis();
+  } = useZAxes();
   const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
   return zAxis[id]?.colorScale;
 }

package/hooks/useDrawingArea.d.ts

@@ -1,2 +1,16 @@
-import { DrawingAreaState } from '../context/DrawingAreaProvider';
-export declare function useDrawingArea(): DrawingAreaState;
+export type ChartDrawingArea = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+export declare function useDrawingArea(): {
+    width: number;
+    left: number;
+    right: number;
+    height: number;
+    top: number;
+    bottom: number;
+};

package/hooks/useDrawingArea.js

@@ -1,24 +1,9 @@
 'use client';
 
-import * as React from 'react';
-import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 export function useDrawingArea() {
-  const {
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  } = React.useContext(DrawingAreaContext);
-  return React.useMemo(() => ({
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  }), [height, left, top, width, bottom, right, isPointInside]);
+  const store = useStore();
+  return useSelector(store, selectorChartDrawingArea);
 }

package/hooks/useLegend.js

@@ -1,19 +1,12 @@
 'use client';
 
-import getBarLegend from "../BarChart/legend.js";
-import getScatterLegend from "../ScatterChart/legend.js";
-import getLineLegend from "../LineChart/legend.js";
-import getPieLegend from "../PieChart/legend.js";
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/index.js";
 import { useSeries } from "./useSeries.js";
-const legendGetter = {
-  bar: getBarLegend,
-  scatter: getScatterLegend,
-  line: getLineLegend,
-  pie: getPieLegend
-};
-function getSeriesToDisplay(series) {
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+function getSeriesToDisplay(series, seriesConfig) {
   return Object.keys(series).flatMap(seriesType => {
-    const getter = legendGetter[seriesType];
+    const getter = seriesConfig[seriesType].legendGetter;
     return getter === undefined ? [] : getter(series[seriesType]);
   });
 }
@@ -29,7 +22,9 @@ function getSeriesToDisplay(series) {
  */
 export function useLegend() {
   const series = useSeries();
+  const store = useStore();
+  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
   return {
-    items: getSeriesToDisplay(series)
+    items: getSeriesToDisplay(series, seriesConfig)
   };
 }

package/hooks/useSeries.d.ts

@@ -1,11 +1,10 @@
-import { FormattedSeries } from '../context/SeriesProvider';
 /**
  * Get access to the internal state of series.
  * Structured by type of series:
  * { seriesType?: { series: { id1: precessedValue, ... }, seriesOrder: [id1, ...] } }
  * @returns FormattedSeries series
  */
-export declare function useSeries(): FormattedSeries;
+export declare function useSeries(): import("../internals").ProcessedSeries<keyof import("../internals").ChartsSeriesConfig>;
 /**
  * Get access to the internal state of pie series.
  * The returned object contains:
@@ -13,7 +12,10 @@ export declare function useSeries(): FormattedSeries;
  * - seriesOrder: the array of series ids.
  * @returns {{ series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined}  pieSeries
  */
-export declare function usePieSeries(): FormattedSeries['pie'];
+export declare function usePieSeries(): {
+    series: Record<import("../internals").SeriesId, import("..").DefaultizedPieSeriesType>;
+    seriesOrder: import("../internals").SeriesId[];
+} | undefined;
 /**
  * Get access to the internal state of line series.
  * The returned object contains:
@@ -21,7 +23,7 @@ export declare function usePieSeries(): FormattedSeries['pie'];
  * - seriesOrder: the array of series ids.
  * @returns {{ series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined}  lineSeries
  */
-export declare function useLineSeries(): FormattedSeries['line'];
+export declare function useLineSeries(): import("../internals").SeriesProcessorResult<"line"> | undefined;
 /**
  * Get access to the internal state of bar series.
  * The returned object contains:
@@ -29,7 +31,7 @@ export declare function useLineSeries(): FormattedSeries['line'];
  * - seriesOrder: the array of series ids.
  * @returns {{ series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined}  barSeries
  */
-export declare function useBarSeries(): FormattedSeries['bar'];
+export declare function useBarSeries(): import("../internals").SeriesProcessorResult<"bar"> | undefined;
 /**
  * Get access to the internal state of scatter series.
  * The returned object contains:
@@ -37,4 +39,7 @@ export declare function useBarSeries(): FormattedSeries['bar'];
  * - seriesOrder: the array of series ids.
  * @returns {{ series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined}  scatterSeries
  */
-export declare function useScatterSeries(): FormattedSeries['scatter'];
+export declare function useScatterSeries(): {
+    series: Record<import("../internals").SeriesId, import("..").DefaultizedScatterSeriesType>;
+    seriesOrder: import("../internals").SeriesId[];
+} | undefined;

package/hooks/useSeries.js

@@ -1,8 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { SeriesContext } from "../context/SeriesProvider/index.js";
-
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartSeriesProcessed } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 /**
  * Get access to the internal state of series.
  * Structured by type of series:
@@ -10,14 +11,8 @@ import { SeriesContext } from "../context/SeriesProvider/index.js";
  * @returns FormattedSeries series
  */
 export function useSeries() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(SeriesContext);
-  if (!isInitialized) {
-    throw new Error(['MUI X: Could not find the series ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
-  }
-  return data;
+  const store = useStore();
+  return useSelector(store, selectorChartSeriesProcessed);
 }
 
 /**