@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.8

package/context/InteractionSelectors.d.ts

@@ -5,8 +5,8 @@ declare function selectInteraction(state: ChartState<[UseChartInteractionSignatu
     axis: import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData;
     isVoronoiEnabled?: boolean;
 };
-export declare const selectorChartsInteractionItem: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
-    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+export declare const selectorChartsInteractionItem: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals").ChartStateCacheKey;
 }) => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -36,8 +36,8 @@ export declare const selectorChartsInteractionItem: ((state: import("../internal
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
-    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+export declare const selectorChartsInteractionAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals").ChartStateCacheKey;
 }) => import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").AxisInteractionData) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -67,8 +67,8 @@ export declare const selectorChartsInteractionAxis: ((state: import("../internal
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionXAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
-    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+export declare const selectorChartsInteractionXAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals").ChartStateCacheKey;
 }) => {
     value: number | Date | string;
     index: number;
@@ -110,8 +110,8 @@ export declare const selectorChartsInteractionXAxis: ((state: import("../interna
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionYAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
-    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+export declare const selectorChartsInteractionYAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals").ChartStateCacheKey;
 }) => {
     value: number | Date | string;
     index: number;
@@ -153,8 +153,8 @@ export declare const selectorChartsInteractionYAxis: ((state: import("../interna
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionItemIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
-    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+export declare const selectorChartsInteractionItemIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals").ChartStateCacheKey;
 }) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -167,8 +167,8 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: import("..
         resetResultsCount: () => void;
     };
     lastResult: () => boolean;
-    dependencies: [((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
-        cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+    dependencies: [((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+        cacheKey: import("../internals").ChartStateCacheKey;
     }) => import("..").BarItemIdentifier | import("..").ScatterItemIdentifier | import("..").LineItemIdentifier | import("..").PieItemIdentifier | null) & {
         clearCache: () => void;
         resultsCount: () => number;
@@ -206,8 +206,8 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: import("..
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionXAxisIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
-    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+export declare const selectorChartsInteractionXAxisIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals").ChartStateCacheKey;
 }) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -226,8 +226,8 @@ export declare const selectorChartsInteractionXAxisIsDefined: ((state: import(".
         resetResultsCount: () => void;
     };
     lastResult: () => boolean;
-    dependencies: [((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
-        cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+    dependencies: [((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+        cacheKey: import("../internals").ChartStateCacheKey;
     }) => {
         value: number | Date | string;
         index: number;
@@ -277,8 +277,8 @@ export declare const selectorChartsInteractionXAxisIsDefined: ((state: import(".
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionYAxisIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
-    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+export declare const selectorChartsInteractionYAxisIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals").ChartStateCacheKey;
 }) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -297,8 +297,8 @@ export declare const selectorChartsInteractionYAxisIsDefined: ((state: import(".
         resetResultsCount: () => void;
     };
     lastResult: () => boolean;
-    dependencies: [((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
-        cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+    dependencies: [((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+        cacheKey: import("../internals").ChartStateCacheKey;
     }) => {
         value: number | Date | string;
         index: number;
@@ -348,8 +348,8 @@ export declare const selectorChartsInteractionYAxisIsDefined: ((state: import(".
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
-    cacheKey: import("../internals/plugins/models").ChartStateCacheKey;
+export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    cacheKey: import("../internals").ChartStateCacheKey;
 }) => boolean | undefined) & {
     clearCache: () => void;
     resultsCount: () => number;

package/context/PolarProvider/PolarProvider.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { PolarProviderProps } from './Polar.types';
-declare function PolarProvider(props: PolarProviderProps): React.JSX.Element;
-export { PolarProvider };

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,3 @@
 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,2 @@
 export * from "./HighlightedProvider/index.js";
-export { ZAxisContextProvider } from "./ZAxisContextProvider.js";
 export { ChartDataProvider } from "./ChartDataProvider/index.js";

package/hooks/index.d.ts

@@ -2,6 +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,6 +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 { 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 { 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;
+};