@mui/x-charts 8.20.0 → 8.22.0

package/esm/internals/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./components/ChartsAxesGradients/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
 export * from "./components/NotRendered.js";
+export * from "../BarChart/BarLabel/BarLabelPlot.js";
+export * from "../BarChart/BarClipPath.js";
 export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
@@ -16,6 +18,7 @@ export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./seriesSelectorOfType.js";
+export { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
@@ -23,6 +26,7 @@ export * from "./plugins/corePlugins/useChartInteractionListener/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
+export * from "./plugins/featurePlugins/useChartTooltip/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
 export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
@@ -39,7 +43,6 @@ export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";
 export * from "../RadarChart/RadarChart.plugins.js";
 export * from "../PieChart/PieChart.plugins.js";
-export * from "./defaultizeValueFormatter.js";
 export * from "./configInit.js";
 export * from "./getLabel.js";
 export * from "./getSVGPoint.js";
@@ -56,6 +59,8 @@ export * from "./dateHelpers.js";
 export * from "./invertScale.js";
 export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
+export { checkBarChartScaleErrors } from "../BarChart/checkBarChartScaleErrors.js";
+export { getBandSize } from "./getBandSize.js";
 export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";

package/esm/internals/index.js

@@ -2,6 +2,8 @@
 export * from "./components/ChartsAxesGradients/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
 export * from "./components/NotRendered.js";
+export * from "../BarChart/BarLabel/BarLabelPlot.js";
+export * from "../BarChart/BarClipPath.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";
@@ -19,6 +21,7 @@ export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./seriesSelectorOfType.js";
+export { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 
 // plugins
 export * from "./plugins/corePlugins/useChartId/index.js";
@@ -28,6 +31,7 @@ export * from "./plugins/corePlugins/useChartInteractionListener/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
+export * from "./plugins/featurePlugins/useChartTooltip/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
 export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
@@ -49,7 +53,6 @@ export * from "../RadarChart/RadarChart.plugins.js";
 export * from "../PieChart/PieChart.plugins.js";
 
 // utils
-export * from "./defaultizeValueFormatter.js";
 export * from "./configInit.js";
 export * from "./getLabel.js";
 export * from "./getSVGPoint.js";
@@ -66,6 +69,8 @@ export * from "./dateHelpers.js";
 export * from "./invertScale.js";
 export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
+export { checkBarChartScaleErrors } from "../BarChart/checkBarChartScaleErrors.js";
+export { getBandSize } from "./getBandSize.js";
 
 // contexts
 export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js";

package/esm/internals/invertScale.d.ts

@@ -1,2 +1,2 @@
-import { D3Scale } from "../models/axis.js";
+import { type D3Scale } from "../models/axis.js";
 export declare function invertScale<T>(scale: D3Scale, data: readonly T[], value: number): number | Date | T;

package/esm/internals/invertTextAnchor.d.ts

@@ -1,2 +1,2 @@
-import { ChartsTextStyle } from "../ChartsText/index.js";
+import { type ChartsTextStyle } from "../ChartsText/index.js";
 export declare function invertTextAnchor(textAnchor: ChartsTextStyle['textAnchor']): ChartsTextStyle['textAnchor'];

package/esm/internals/isCartesian.d.ts

@@ -1,3 +1,3 @@
-import { CartesianChartSeriesType, ChartSeriesDefaultized, ChartSeriesType } from "../models/seriesType/config.js";
+import { type CartesianChartSeriesType, type ChartSeriesDefaultized, type ChartSeriesType } from "../models/seriesType/config.js";
 export declare function isCartesianSeriesType(seriesType: string): seriesType is CartesianChartSeriesType;
 export declare function isCartesianSeries(series: ChartSeriesDefaultized<ChartSeriesType>): series is ChartSeriesDefaultized<CartesianChartSeriesType>;

package/esm/internals/isPolar.d.ts

@@ -1,2 +1,2 @@
-import { PolarChartSeriesType } from "../models/seriesType/config.js";
+import { type PolarChartSeriesType } from "../models/seriesType/config.js";
 export declare function isPolarSeriesType(seriesType: string): seriesType is PolarChartSeriesType;

package/esm/internals/material/index.d.ts

@@ -1,6 +1,6 @@
 import type * as React from 'react';
-import { ChartsBaseSlots } from "../../models/slots/chartsBaseSlots.js";
-import { ChartsIconSlots } from "../../models/slots/chartsIconSlots.js";
+import { type ChartsBaseSlots } from "../../models/slots/chartsBaseSlots.js";
+import { type ChartsIconSlots } from "../../models/slots/chartsIconSlots.js";
 export type ChartsSlots = ChartsBaseSlots & ChartsIconSlots;
 export type ChartsSlotProps = { [key in keyof ChartsSlots]: React.ComponentProps<ChartsSlots[key]> };
 export declare const defaultSlotsMaterial: ChartsSlots;

package/esm/internals/plugins/allPlugins.d.ts

@@ -1,12 +1,13 @@
-import { ChartSeriesType } from "../../models/seriesType/config.js";
-import { UseChartCartesianAxisSignature } from "./featurePlugins/useChartCartesianAxis/index.js";
-import { UseChartHighlightSignature } from "./featurePlugins/useChartHighlight/index.js";
-import { UseChartInteractionSignature } from "./featurePlugins/useChartInteraction/index.js";
-import { UseChartKeyboardNavigationSignature } from "./featurePlugins/useChartKeyboardNavigation/index.js";
-import { UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarAxis/index.js";
-import { UseChartClosestPointSignature } from "./featurePlugins/useChartClosestPoint/index.js";
-import { UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
-import { UseChartBrushSignature } from "./featurePlugins/useChartBrush/index.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartBrushSignature>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];
+import { type ChartSeriesType } from "../../models/seriesType/config.js";
+import { type UseChartCartesianAxisSignature } from "./featurePlugins/useChartCartesianAxis/index.js";
+import { type UseChartHighlightSignature } from "./featurePlugins/useChartHighlight/index.js";
+import { type UseChartInteractionSignature } from "./featurePlugins/useChartInteraction/index.js";
+import { type UseChartKeyboardNavigationSignature } from "./featurePlugins/useChartKeyboardNavigation/index.js";
+import { type UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarAxis/index.js";
+import { type UseChartClosestPointSignature } from "./featurePlugins/useChartClosestPoint/index.js";
+import { type UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
+import { type UseChartBrushSignature } from "./featurePlugins/useChartBrush/index.js";
+import { type UseChartTooltipSignature } from "./featurePlugins/useChartTooltip/index.js";
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartBrushSignature>, import("./models/index.js").ChartPlugin<UseChartTooltipSignature>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];

package/esm/internals/plugins/allPlugins.js

@@ -7,4 +7,5 @@ import { useChartKeyboardNavigation } from "./featurePlugins/useChartKeyboardNav
 import { useChartClosestPoint } from "./featurePlugins/useChartClosestPoint/index.js";
 import { useChartZAxis } from "./featurePlugins/useChartZAxis/index.js";
 import { useChartBrush } from "./featurePlugins/useChartBrush/index.js";
-export const DEFAULT_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];
+import { useChartTooltip } from "./featurePlugins/useChartTooltip/index.js";
+export const DEFAULT_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];

package/esm/internals/plugins/corePlugins/corePlugins.d.ts

@@ -1,7 +1,7 @@
 import { type UseChartAnimationSignature } from "./useChartAnimation/index.js";
 import { type UseChartDimensionsSignature } from "./useChartDimensions/index.js";
 import { type UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature/index.js";
-import { type UseChartIdSignature, UseChartIdParameters } from "./useChartId/index.js";
+import { type UseChartIdSignature, type UseChartIdParameters } from "./useChartId/index.js";
 import { type UseChartSeriesSignature } from "./useChartSeries/index.js";
 import { type UseChartInteractionListenerSignature } from "./useChartInteractionListener/index.js";
 /**

package/esm/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.d.ts

@@ -1,3 +1,3 @@
-import { ChartPlugin } from "../../models/index.js";
+import { type ChartPlugin } from "../../models/index.js";
 import type { UseChartAnimationSignature } from "./useChartAnimation.types.js";
 export declare const useChartAnimation: ChartPlugin<UseChartAnimationSignature>;

package/esm/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types.d.ts

@@ -1,4 +1,4 @@
-import { ChartPluginSignature } from "../../models/index.js";
+import { type ChartPluginSignature } from "../../models/index.js";
 import type { UseChartCartesianAxisSignature } from "../../featurePlugins/useChartCartesianAxis/index.js";
 export interface UseChartAnimationParameters {
   /**

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.d.ts

@@ -1,3 +1,3 @@
-import { ChartPlugin } from "../../models/index.js";
+import { type ChartPlugin } from "../../models/index.js";
 import type { UseChartDimensionsSignature } from "./useChartDimensions.types.js";
 export declare const useChartDimensions: ChartPlugin<UseChartDimensionsSignature>;

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.d.ts

@@ -1,6 +1,6 @@
-import { ChartRootSelector } from "../../utils/selectors.js";
+import { type ChartRootSelector } from "../../utils/selectors.js";
 import type { UseChartDimensionsSignature } from "./useChartDimensions.types.js";
-import { ChartState } from "../../models/chart.js";
+import { type ChartState } from "../../models/chart.js";
 export declare const selectorChartDimensionsState: ChartRootSelector<UseChartDimensionsSignature>;
 export declare const selectorChartMargin: (state: ChartState<[UseChartDimensionsSignature]>) => import("./useChartDimensions.types.js").ChartMargin;
 export declare const selectorChartDrawingArea: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -1,4 +1,4 @@
-import { ChartPluginSignature } from "../../models/index.js";
+import { type ChartPluginSignature } from "../../models/index.js";
 import type { UseChartCartesianAxisSignature } from "../../featurePlugins/useChartCartesianAxis/index.js";
 export interface ChartMargin {
   /**

package/esm/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.d.ts

@@ -1,3 +1,3 @@
-import { ChartPlugin } from "../../models/index.js";
+import { type ChartPlugin } from "../../models/index.js";
 import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
 export declare const useChartExperimentalFeatures: ChartPlugin<UseChartExperimentalFeaturesSignature>;

package/esm/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.d.ts

@@ -1,4 +1,4 @@
-import { ChartRootSelector } from "../../utils/selectors.js";
+import { type ChartRootSelector } from "../../utils/selectors.js";
 import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
 export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature>;
 export declare const selectorPreferStrictDomainInLineCharts: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {

package/esm/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.ts

@@ -1,4 +1,4 @@
-import { ChartPluginSignature } from "../../models/index.js";
+import { type ChartPluginSignature } from "../../models/index.js";
 export interface ChartExperimentalFeatures {
   /**
    * Default domainLimit to strict for line chart x-axis.

package/esm/internals/plugins/corePlugins/useChartId/useChartId.d.ts

@@ -1,3 +1,3 @@
-import { ChartPlugin } from "../../models/index.js";
-import { UseChartIdSignature } from "./useChartId.types.js";
+import { type ChartPlugin } from "../../models/index.js";
+import { type UseChartIdSignature } from "./useChartId.types.js";
 export declare const useChartId: ChartPlugin<UseChartIdSignature>;

package/esm/internals/plugins/corePlugins/useChartId/useChartId.types.d.ts

@@ -1,4 +1,4 @@
-import { ChartPluginSignature } from "../../models/index.js";
+import { type ChartPluginSignature } from "../../models/index.js";
 export interface UseChartIdParameters {
   /**
    * This prop is used to help implement the accessibility logic.

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.d.ts

@@ -1,3 +1,3 @@
-import { ChartPlugin } from "../../models/index.js";
-import { UseChartInteractionListenerSignature } from "./useChartInteractionListener.types.js";
+import { type ChartPlugin } from "../../models/index.js";
+import { type UseChartInteractionListenerSignature } from "./useChartInteractionListener.types.js";
 export declare const useChartInteractionListener: ChartPlugin<UseChartInteractionListenerSignature>;

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.types.d.ts

@@ -1,5 +1,5 @@
-import { MoveEvent, PanEvent, PanGestureOptions, PinchEvent, PinchGestureOptions, PressEvent, TapEvent, TurnWheelEvent, type PressAndDragEvent, type PressAndDragGestureOptions, type TapAndDragEvent, type TapAndDragGestureOptions, type TapGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
-import { ChartPluginSignature } from "../../models/index.js";
+import { type MoveEvent, type PanEvent, type PanGestureOptions, type PinchEvent, type PinchGestureOptions, type PressEvent, type TapEvent, type TurnWheelEvent, type PressAndDragEvent, type PressAndDragGestureOptions, type TapAndDragEvent, type TapAndDragGestureOptions, type TapGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
+import { type ChartPluginSignature } from "../../models/index.js";
 export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'zoomTurnWheel' | 'panTurnWheel' | 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd' | 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd' | 'move' | 'moveStart' | 'moveEnd' | 'tap' | 'quickPress' | 'quickPressEnd' | 'zoomDoubleTapReset' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd';
 export type InteractionListenerResult = {
   cleanup: () => void;

package/esm/internals/plugins/corePlugins/useChartSeries/index.d.ts

@@ -1,3 +1,3 @@
 export { useChartSeries } from "./useChartSeries.js";
-export type { UseChartSeriesSignature, UseChartSeriesParameters, UseChartSeriesDefaultizedParameters, ProcessedSeries } from "./useChartSeries.types.js";
+export type { UseChartSeriesSignature, UseChartSeriesParameters, UseChartSeriesDefaultizedParameters, ProcessedSeries, SeriesLayout } from "./useChartSeries.types.js";
 export * from "./useChartSeries.selectors.js";

package/esm/internals/plugins/corePlugins/useChartSeries/processSeries.d.ts

@@ -1,7 +1,8 @@
-import { AllSeriesType } from "../../../../models/seriesType/index.js";
-import { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
-import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
-import { DefaultizedSeriesGroups, ProcessedSeries } from "./useChartSeries.types.js";
+import { type ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
+import { type AllSeriesType } from "../../../../models/seriesType/index.js";
+import { type ChartSeriesType, type DatasetType } from "../../../../models/seriesType/config.js";
+import { type ChartSeriesConfig } from "../../models/seriesConfig/index.js";
+import { type DefaultizedSeriesGroups, type ProcessedSeries, type SeriesLayout } from "./useChartSeries.types.js";
 /**
  * This method groups series by type and adds defaultized values such as the ids and colors.
  * It does NOT apply the series processors - that happens in a selector.
@@ -26,4 +27,12 @@ export declare const defaultizeSeries: <TSeriesType extends ChartSeriesType>({
  * @param dataset The optional dataset
  * @returns Processed series with all transformations applied
  */
-export declare const applySeriesProcessors: <TSeriesType extends ChartSeriesType>(defaultizedSeries: DefaultizedSeriesGroups<TSeriesType>, seriesConfig: ChartSeriesConfig<TSeriesType>, dataset?: Readonly<DatasetType>) => ProcessedSeries<TSeriesType>;
+export declare const applySeriesProcessors: <TSeriesType extends ChartSeriesType>(defaultizedSeries: DefaultizedSeriesGroups<TSeriesType>, seriesConfig: ChartSeriesConfig<TSeriesType>, dataset?: Readonly<DatasetType>) => ProcessedSeries<TSeriesType>;
+/**
+ * Applies series processors with drawing area to series if defined.
+ * @param processedSeries The processed series groups
+ * @param seriesConfig The series configuration
+ * @param drawingArea The drawing area
+ * @returns Processed series with all transformations applied
+ */
+export declare const applySeriesLayout: <TSeriesType extends ChartSeriesType>(processedSeries: ProcessedSeries<TSeriesType>, seriesConfig: ChartSeriesConfig<TSeriesType>, drawingArea: ChartDrawingArea) => SeriesLayout<TSeriesType>;

package/esm/internals/plugins/corePlugins/useChartSeries/processSeries.js

@@ -49,4 +49,33 @@ export const applySeriesProcessors = (defaultizedSeries, seriesConfig, dataset)
     }
   });
   return processedSeries;
+};
+
+/**
+ * Applies series processors with drawing area to series if defined.
+ * @param processedSeries The processed series groups
+ * @param seriesConfig The series configuration
+ * @param drawingArea The drawing area
+ * @returns Processed series with all transformations applied
+ */
+export const applySeriesLayout = (processedSeries, seriesConfig, drawingArea) => {
+  let processingDetected = false;
+  const seriesLayout = {};
+
+  // Apply processors on series type per group
+  Object.keys(processedSeries).forEach(type => {
+    const processor = seriesConfig[type]?.seriesLayout;
+    const thisSeries = processedSeries[type];
+    if (processor !== undefined && thisSeries !== undefined) {
+      const newValue = processor(thisSeries, drawingArea);
+      if (newValue && newValue !== processedSeries[type]) {
+        processingDetected = true;
+        seriesLayout[type] = newValue;
+      }
+    }
+  });
+  if (!processingDetected) {
+    return {};
+  }
+  return seriesLayout;
 };

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.d.ts

@@ -1,3 +1,3 @@
-import { ChartPlugin } from "../../models/index.js";
-import { UseChartSeriesSignature } from "./useChartSeries.types.js";
+import { type ChartPlugin } from "../../models/index.js";
+import { type UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const useChartSeries: ChartPlugin<UseChartSeriesSignature>;

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
+import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
 import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
 import { defaultizeSeries } from "./processSeries.js";
 export const useChartSeries = ({
@@ -18,12 +18,7 @@ export const useChartSeries = ({
 
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartSeries`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
-  const isFirstRender = React.useRef(true);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
+  useEffectAfterFirstRender(() => {
     store.set('series', _extends({}, store.state.series, {
       defaultizedSeries: defaultizeSeries({
         series,

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -1,5 +1,5 @@
-import { ChartRootSelector } from "../../utils/selectors.js";
-import { UseChartSeriesSignature } from "./useChartSeries.types.js";
+import { type ChartRootSelector } from "../../utils/selectors.js";
+import { type UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
 export declare const selectorChartDefaultizedSeries: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -21,4 +21,12 @@ export declare const selectorChartDataset: (args_0: import("../useChartId/useCha
  */
 export declare const selectorChartSeriesProcessed: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
+}) => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
+/**
+ * Get the processed series after applying series processors.
+ * This selector computes the processed series on-demand from the defaultized series.
+ * @returns {ProcessedSeries} The processed series.
+ */
+export declare const selectorChartSeriesLayout: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => import("./useChartSeries.types.js").SeriesLayout<keyof import("../../../index.js").ChartsSeriesConfig>;

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js

@@ -1,5 +1,6 @@
 import { createSelectorMemoized, createSelector } from '@mui/x-internals/store';
-import { applySeriesProcessors } from "./processSeries.js";
+import { applySeriesLayout, applySeriesProcessors } from "./processSeries.js";
+import { selectorChartDrawingArea } from "../useChartDimensions/useChartDimensions.selectors.js";
 export const selectorChartSeriesState = state => state.series;
 export const selectorChartDefaultizedSeries = createSelector(selectorChartSeriesState, seriesState => seriesState.defaultizedSeries);
 export const selectorChartSeriesConfig = createSelector(selectorChartSeriesState, seriesState => seriesState.seriesConfig);
@@ -17,4 +18,13 @@ export const selectorChartDataset = createSelector(selectorChartSeriesState, ser
  */
 export const selectorChartSeriesProcessed = createSelectorMemoized(selectorChartDefaultizedSeries, selectorChartSeriesConfig, selectorChartDataset, function selectorChartSeriesProcessed(defaultizedSeries, seriesConfig, dataset) {
   return applySeriesProcessors(defaultizedSeries, seriesConfig, dataset);
+});
+
+/**
+ * Get the processed series after applying series processors.
+ * This selector computes the processed series on-demand from the defaultized series.
+ * @returns {ProcessedSeries} The processed series.
+ */
+export const selectorChartSeriesLayout = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartDrawingArea, function selectorChartSeriesLayout(processedSeries, seriesConfig, drawingArea) {
+  return applySeriesLayout(processedSeries, seriesConfig, drawingArea);
 });

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.d.ts

@@ -1,8 +1,8 @@
-import { AllSeriesType } from "../../../../models/seriesType/index.js";
-import { ChartsColorPalette } from "../../../../colorPalettes/index.js";
-import { ChartPluginSignature, ChartSeriesConfig } from "../../models/index.js";
-import { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
-import { SeriesProcessorParams, SeriesProcessorResult } from "../../models/seriesConfig/seriesProcessor.types.js";
+import { type AllSeriesType } from "../../../../models/seriesType/index.js";
+import { type ChartsColorPalette } from "../../../../colorPalettes/index.js";
+import { type ChartPluginSignature, type ChartSeriesConfig, type SeriesLayoutGetterResult } from "../../models/index.js";
+import { type ChartSeriesType, type DatasetType } from "../../../../models/seriesType/config.js";
+import { type SeriesProcessorParams, type SeriesProcessorResult } from "../../models/seriesConfig/seriesProcessor.types.js";
 export interface UseChartSeriesParameters<T extends ChartSeriesType = ChartSeriesType> {
   /**
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
@@ -36,6 +36,7 @@ export type UseChartSeriesDefaultizedParameters<T extends ChartSeriesType = Char
   theme: 'light' | 'dark';
 };
 export type ProcessedSeries<TSeriesTypes extends ChartSeriesType = ChartSeriesType> = { [type in TSeriesTypes]?: SeriesProcessorResult<type> };
+export type SeriesLayout<TSeriesTypes extends ChartSeriesType = ChartSeriesType> = { [type in TSeriesTypes]?: SeriesLayoutGetterResult<type> };
 export type DefaultizedSeriesGroups<TSeriesTypes extends ChartSeriesType = ChartSeriesType> = { [type in TSeriesTypes]?: SeriesProcessorParams<type> };
 export interface UseChartSeriesState<T extends ChartSeriesType = ChartSeriesType> {
   series: {

package/esm/internals/plugins/corePlugins/useChartSeries/useColorProcessor.d.ts

@@ -1,5 +1,5 @@
-import { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import { ColorProcessor } from "../../models/seriesConfig/index.js";
+import { type ChartSeriesType } from "../../../../models/seriesType/config.js";
+import { type ColorProcessor } from "../../models/seriesConfig/index.js";
 export type ColorProcessorsConfig<T extends ChartSeriesType> = { [Key in T]?: ColorProcessor<Key> };
 export declare function useColorProcessor<T extends ChartSeriesType>(seriesType: T): ColorProcessor<T>;
 export declare function useColorProcessor(): ColorProcessorsConfig<ChartSeriesType>;

package/esm/internals/plugins/featurePlugins/useChartBrush/useChartBrush.d.ts

@@ -1,3 +1,3 @@
-import { ChartPlugin } from "../../models/index.js";
-import { UseChartBrushSignature } from "./useChartBrush.types.js";
+import { type ChartPlugin } from "../../models/index.js";
+import { type UseChartBrushSignature } from "./useChartBrush.types.js";
 export declare const useChartBrush: ChartPlugin<UseChartBrushSignature>;

package/esm/internals/plugins/featurePlugins/useChartBrush/useChartBrush.selectors.js

@@ -1,4 +1,4 @@
-import { createSelector } from '@mui/x-internals/store';
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import { selectorChartZoomOptionsLookup } from "../useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
 export const selectorBrush = state => state.brush;
@@ -8,7 +8,7 @@ export const selectorBrushStartX = createSelector(selectorBrush, brush => brush?
 export const selectorBrushStartY = createSelector(selectorBrush, brush => brush?.start?.y ?? null);
 export const selectorBrushCurrentX = createSelector(selectorBrush, brush => brush?.current?.x ?? null);
 export const selectorBrushCurrentY = createSelector(selectorBrush, brush => brush?.current?.y ?? null);
-export const selectorBrushState = createSelector(selectorBrushStartX, selectorBrushStartY, selectorBrushCurrentX, selectorBrushCurrentY, (startX, startY, currentX, currentY) => {
+export const selectorBrushState = createSelectorMemoized(selectorBrushStartX, selectorBrushStartY, selectorBrushCurrentX, selectorBrushCurrentY, (startX, startY, currentX, currentY) => {
   if (startX === null || startY === null || currentX === null || currentY === null) {
     return null;
   }

package/esm/internals/plugins/featurePlugins/useChartBrush/useChartBrush.types.d.ts

@@ -1,4 +1,4 @@
-import { ChartPluginSignature } from "../../models/index.js";
+import { type ChartPluginSignature } from "../../models/index.js";
 export type Point = {
   x: number;
   y: number;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.d.ts

@@ -1,11 +1,11 @@
-import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
-import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, AxisId, DefaultedXAxis, DefaultedYAxis, D3Scale } from "../../../../models/axis.js";
-import { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { type ChartsXAxisProps, type ChartsAxisProps, type ChartsYAxisProps, type AxisId, type DefaultedXAxis, type DefaultedYAxis, type D3Scale } from "../../../../models/axis.js";
+import { type ChartSeriesType } from "../../../../models/seriesType/config.js";
 import type { ChartDrawingArea } from "../../../../hooks/index.js";
-import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
-import { ComputedAxisConfig } from "./useChartCartesianAxis.types.js";
-import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
-import { ZoomData } from "./zoom.types.js";
+import { type ChartSeriesConfig } from "../../models/seriesConfig/index.js";
+import { type ComputedAxisConfig } from "./useChartCartesianAxis.types.js";
+import { type ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
+import { type ZoomData } from "./zoom.types.js";
 export type ComputeResult<T extends ChartsAxisProps> = {
   axis: ComputedAxisConfig<T>;
   axisIds: AxisId[];

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -39,7 +39,9 @@ export function computeAxisValue({
     const zoom = zoomMap?.get(axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
     const range = getRange(drawingArea, axisDirection, axis.reverse ?? false);
+    const rawTickNumber = domains[axis.id].tickNumber;
     const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
+    const tickNumber = scaleTickNumberByRange(rawTickNumber, zoomRange);
     const data = axis.data ?? [];
     if (isOrdinalScale(scale)) {
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
@@ -56,7 +58,7 @@ export function computeAxisValue({
         }, axis, {
           data,
           scale,
-          tickNumber: axis.data.length,
+          tickNumber,
           colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
             values: axis.data
           }, axis.colorMap)) : getColorScale(axis.colorMap))
@@ -70,7 +72,7 @@ export function computeAxisValue({
         }, axis, {
           data,
           scale,
-          tickNumber: axis.data.length,
+          tickNumber,
           colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
             values: axis.data
           }, axis.colorMap)) : getColorScale(axis.colorMap))
@@ -86,10 +88,8 @@ export function computeAxisValue({
       // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
       return;
     }
-    const rawTickNumber = domains[axis.id].tickNumber;
     const continuousAxis = axis;
     const scaleType = continuousAxis.scaleType ?? 'linear';
-    const tickNumber = scaleTickNumberByRange(rawTickNumber, zoomRange);
     completeAxis[axis.id] = _extends({
       offset: 0,
       height: 0,

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/createAxisFilterMapper.d.ts

@@ -1,7 +1,7 @@
-import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
-import { AxisConfig } from "../../../../models/index.js";
-import { ExtremumFilter } from "./useChartCartesianAxis.types.js";
-import { GetZoomAxisFilters, ZoomAxisFilters } from "./zoom.types.js";
+import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { type AxisConfig } from "../../../../models/index.js";
+import { type ExtremumFilter } from "./useChartCartesianAxis.types.js";
+import { type GetZoomAxisFilters, type ZoomAxisFilters } from "./zoom.types.js";
 export declare function createDiscreteScaleGetAxisFilter(axisData: AxisConfig['data'], zoomStart: number, zoomEnd: number, direction: 'x' | 'y'): ExtremumFilter;
 export declare function createContinuousScaleGetAxisFilter(domain: readonly NumberValue[], zoomStart: number, zoomEnd: number, direction: 'x' | 'y', axisData: AxisConfig['data']): ExtremumFilter;
 export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/createZoomLookup.d.ts

@@ -1,4 +1,4 @@
-import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from "../../../../models/index.js";
-import { AxisId } from "../../../../models/axis.js";
-import { DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
+import { type AxisConfig, type ChartsXAxisProps, type ChartsYAxisProps, type ScaleName } from "../../../../models/index.js";
+import { type AxisId } from "../../../../models/axis.js";
+import { type DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
 export declare const createZoomLookup: (axisDirection: "x" | "y") => (axes?: AxisConfig<ScaleName, any, ChartsXAxisProps | ChartsYAxisProps>[]) => Record<AxisId, DefaultizedZoomOptions>;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.d.ts

@@ -1,7 +1,7 @@
-import { ZoomOptions } from "./zoom.types.js";
-import { XAxis, YAxis } from "../../../../models/index.js";
-import { DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
-import { DatasetType } from "../../../../models/seriesType/config.js";
+import { type ZoomOptions } from "./zoom.types.js";
+import { type XAxis, type YAxis } from "../../../../models/index.js";
+import { type DefaultedXAxis, type DefaultedYAxis } from "../../../../models/axis.js";
+import { type DatasetType } from "../../../../models/seriesType/config.js";
 type InXAxis = XAxis & {
   zoom?: boolean | ZoomOptions;
 };

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.d.ts

@@ -1,6 +1,6 @@
-import { AxisId } from "../../../../models/axis.js";
-import { DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
-import { ZoomOptions } from "./zoom.types.js";
+import { type AxisId } from "../../../../models/axis.js";
+import { type DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
+import { type ZoomOptions } from "./zoom.types.js";
 export declare const defaultZoomOptions: {
   minStart: number;
   maxEnd: number;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/domain.d.ts

@@ -1,7 +1,7 @@
-import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
-import { ContinuousScaleName, DefaultedAxis } from "../../../../models/axis.js";
-import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
-import { TickParams } from "../../../../hooks/useTicks.js";
+import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { type ContinuousScaleName, type DefaultedAxis } from "../../../../models/axis.js";
+import { type ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+import { type TickParams } from "../../../../hooks/useTicks.js";
 /**
  * Calculates the initial domain and tick number for a given axis.
  * The domain should still run through the zoom filterMode after this step.