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

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -0,0 +1,175 @@
+'use client';
+
+/* eslint-disable react-compiler/react-compiler */
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import ownerWindow from '@mui/utils/ownerWindow';
+import { DEFAULT_MARGINS } from "../../../../constants/index.js";
+import { selectorChartDimensionsState } from "./useChartDimensions.selectors.js";
+const MAX_COMPUTE_RUN = 10;
+export const useChartDimensions = ({
+  params,
+  store,
+  svgRef
+}) => {
+  const hasInSize = params.width !== undefined && params.height !== undefined;
+  const stateRef = React.useRef({
+    displayError: false,
+    initialCompute: true,
+    computeRun: 0
+  });
+  // States only used for the initialization of the size.
+  const [innerWidth, setInnerWidth] = React.useState(0);
+  const [innerHeight, setInnerHeight] = React.useState(0);
+  const computeSize = React.useCallback(() => {
+    const mainEl = svgRef?.current;
+    if (!mainEl) {
+      return {};
+    }
+    const win = ownerWindow(mainEl);
+    const computedStyle = win.getComputedStyle(mainEl);
+    const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
+    const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
+    store.update(prev => {
+      const prevWidth = prev.dimensions.width + prev.dimensions.left + prev.dimensions.right;
+      const prevHeight = prev.dimensions.height + prev.dimensions.top + prev.dimensions.bottom;
+      if (prevWidth === newWidth && prevHeight === newHeight) {
+        return prev;
+      }
+      return _extends({}, prev, {
+        dimensions: _extends({}, prev.dimensions, {
+          width: newWidth - prev.dimensions.left - prev.dimensions.right,
+          height: newHeight - prev.dimensions.top - prev.dimensions.bottom
+        })
+      });
+    });
+    return {
+      height: newHeight,
+      width: newWidth
+    };
+  }, [store, svgRef]);
+  store.update(prev => {
+    if ((params.width === undefined || prev.dimensions.propsWidth === params.width) && (params.height === undefined || prev.dimensions.propsHeight === params.height)) {
+      return prev;
+    }
+    return _extends({}, prev, {
+      dimensions: _extends({}, prev.dimensions, {
+        width: params.width === undefined ? prev.dimensions.width : params.width - prev.dimensions.left - prev.dimensions.right,
+        height: params.height === undefined ? prev.dimensions.height : params.height - prev.dimensions.top - prev.dimensions.bottom,
+        propsWidth: params.width,
+        propsHeight: params.height
+      })
+    });
+  });
+  React.useEffect(() => {
+    // Ensure the error detection occurs after the first rendering.
+    stateRef.current.displayError = true;
+  }, []);
+
+  // This effect is used to compute the size of the container on the initial render.
+  // It is not bound to the raf loop to avoid an unwanted "resize" event.
+  // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
+  useEnhancedEffect(() => {
+    // computeRun is used to avoid infinite loops.
+    if (hasInSize || !stateRef.current.initialCompute || stateRef.current.computeRun > MAX_COMPUTE_RUN) {
+      return;
+    }
+    const computedSize = computeSize();
+    if (computedSize.width !== innerWidth || computedSize.height !== innerHeight) {
+      stateRef.current.computeRun += 1;
+      if (computedSize.width !== undefined) {
+        setInnerWidth(computedSize.width);
+      }
+      if (computedSize.height !== undefined) {
+        setInnerHeight(computedSize.height);
+      }
+    } else if (stateRef.current.initialCompute) {
+      stateRef.current.initialCompute = false;
+    }
+  }, [innerHeight, innerWidth, computeSize, hasInSize]);
+  useEnhancedEffect(() => {
+    if (hasInSize) {
+      return () => {};
+    }
+    computeSize();
+    const elementToObserve = svgRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+    let animationFrame;
+    const observer = new ResizeObserver(() => {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = requestAnimationFrame(() => {
+        computeSize();
+      });
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return () => {
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [computeSize, hasInSize, svgRef]);
+  if (process.env.NODE_ENV !== 'production') {
+    if (stateRef.current.displayError && params.width === undefined && innerWidth === 0) {
+      console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      stateRef.current.displayError = false;
+    }
+    if (stateRef.current.displayError && params.height === undefined && innerHeight === 0) {
+      console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      stateRef.current.displayError = false;
+    }
+  }
+  const isPointInside = React.useCallback(({
+    x,
+    y
+  }, options) => {
+    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
+    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
+      return true;
+    }
+    const drawingArea = selectorChartDimensionsState(store.value);
+    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
+    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
+    if (options?.direction === 'x') {
+      return isInsideX;
+    }
+    if (options?.direction === 'y') {
+      return isInsideY;
+    }
+    return isInsideX && isInsideY;
+  }, [store.value]);
+  return {
+    instance: {
+      isPointInside
+    }
+  };
+};
+useChartDimensions.params = {
+  width: true,
+  height: true,
+  margin: true
+};
+useChartDimensions.getDefaultizedParams = ({
+  params
+}) => _extends({}, params, {
+  margin: params.margin ? _extends({}, DEFAULT_MARGINS, params.margin) : DEFAULT_MARGINS
+});
+useChartDimensions.getInitialState = ({
+  width,
+  height,
+  margin
+}) => ({
+  dimensions: _extends({}, margin, {
+    width: (width ?? 0) - margin.left - margin.right,
+    height: (height ?? 0) - margin.top - margin.bottom,
+    propsWidth: width,
+    propsHeight: height
+  })
+});

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

@@ -0,0 +1,264 @@
+import { ChartRootSelector } from '../../utils/selectors';
+import { UseChartDimensionsSignature } from './useChartDimensions.types';
+export declare const selectorChartDimensionsState: ChartRootSelector<UseChartDimensionsSignature>;
+export declare const selectorChartDrawingArea: ((state: import("../useChartId/useChartId.types").UseChartIdState & import("./useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => {
+    width: number;
+    left: number;
+    right: number;
+    height: number;
+    top: number;
+    bottom: number;
+}) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number;
+        left: number;
+        right: number;
+        height: number;
+        top: number;
+        bottom: number;
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number;
+        left: number;
+        right: number;
+        height: number;
+        top: number;
+        bottom: number;
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        width: number;
+        left: number;
+        right: number;
+        height: number;
+        top: number;
+        bottom: number;
+    };
+    dependencies: [ChartRootSelector<UseChartDimensionsSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+export declare const selectorChartPropsSize: ((state: import("../useChartId/useChartId.types").UseChartIdState & import("./useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => {
+    width: number | undefined;
+    height: number | undefined;
+}) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number | undefined;
+        height: number | undefined;
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number | undefined;
+        height: number | undefined;
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        width: number | undefined;
+        height: number | undefined;
+    };
+    dependencies: [ChartRootSelector<UseChartDimensionsSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+export declare const selectorChartContainerSize: ((state: import("../useChartId/useChartId.types").UseChartIdState & import("./useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => {
+    width: number;
+    height: number;
+}) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number;
+        height: number;
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number;
+        height: number;
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        width: number;
+        height: number;
+    };
+    dependencies: [ChartRootSelector<UseChartDimensionsSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export declare const selectorChartHasIntrinsicSize: ((state: import("../useChartId/useChartId.types").UseChartIdState & import("./useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        width: number;
+        height: number;
+    }) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        width: number;
+        height: number;
+    }) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [((state: import("../useChartId/useChartId.types").UseChartIdState & import("./useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
+        cacheKey: import("../../models").ChartStateCacheKey;
+    }) => {
+        width: number;
+        height: number;
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: {
+            left: number;
+            top: number;
+            bottom: number;
+            right: number;
+            width: number;
+            height: number;
+            propsWidth: number | undefined;
+            propsHeight: number | undefined;
+        }) => {
+            width: number;
+            height: number;
+        };
+        memoizedResultFunc: ((resultFuncArgs_0: {
+            left: number;
+            top: number;
+            bottom: number;
+            right: number;
+            width: number;
+            height: number;
+            propsWidth: number | undefined;
+            propsHeight: number | undefined;
+        }) => {
+            width: number;
+            height: number;
+        }) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => {
+            width: number;
+            height: number;
+        };
+        dependencies: [ChartRootSelector<UseChartDimensionsSignature>];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from "../../utils/selectors.js";
+export const selectorChartDimensionsState = state => state.dimensions;
+export const selectorChartDrawingArea = createSelector(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.width,
+  left: dimensionsState.left,
+  right: dimensionsState.right,
+  height: dimensionsState.height,
+  top: dimensionsState.top,
+  bottom: dimensionsState.bottom
+}));
+export const selectorChartPropsSize = createSelector(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.propsWidth,
+  height: dimensionsState.propsHeight
+}));
+export const selectorChartContainerSize = createSelector(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.width + dimensionsState.left + dimensionsState.right,
+  height: dimensionsState.height + dimensionsState.top + dimensionsState.bottom
+}));
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export const selectorChartHasIntrinsicSize = createSelector(selectorChartContainerSize, svgSize => svgSize.width > 0 && svgSize.height > 0);

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

@@ -0,0 +1,99 @@
+import { ChartPluginSignature } from '../../models';
+export interface ChartMargin {
+    /**
+     * The gap between the left border of the SVG and the drawing area.
+     */
+    left: number;
+    /**
+     * The gap between the top border of the SVG and the drawing area.
+     */
+    top: number;
+    /**
+     * The gap between the bottom border of the SVG and the drawing area.
+     */
+    bottom: number;
+    /**
+     * The gap between the right border of the SVG and the drawing area.
+     */
+    right: number;
+}
+export interface UseChartDimensionsParameters {
+    /**
+     * The width of the chart in px. If not defined, it takes the width of the parent element.
+     */
+    width?: number;
+    /**
+     * The height of the chart in px. If not defined, it takes the height of the parent element.
+     */
+    height?: number;
+    /**
+     * The margin between the SVG and the drawing area.
+     * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+     * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+     */
+    margin?: Partial<ChartMargin>;
+}
+export type UseChartDimensionsDefaultizedParameters = UseChartDimensionsParameters & {
+    margin: ChartMargin;
+};
+export interface UseChartDimensionsState {
+    dimensions: {
+        /**
+         * The gap between the left border of the SVG and the drawing area.
+         */
+        left: number;
+        /**
+         * The gap between the top border of the SVG and the drawing area.
+         */
+        top: number;
+        /**
+         * The gap between the bottom border of the SVG and the drawing area.
+         */
+        bottom: number;
+        /**
+         * The gap between the right border of the SVG and the drawing area.
+         */
+        right: number;
+        /**
+         * The width of the drawing area.
+         */
+        width: number;
+        /**
+         * The height of the drawing area.
+         */
+        height: number;
+        /**
+         * The SVG width in px provided by props.
+         */
+        propsWidth: number | undefined;
+        /**
+         * The SVG height in px provided by props.
+         */
+        propsHeight: number | undefined;
+    };
+}
+export interface UseChartDimensionsInstance {
+    /**
+     * Checks if a point is inside the drawing area.
+     * @param {Object} point The point to check.
+     * @param {number} point.x The x coordinate of the point.
+     * @param {number} point.y The y coordinate of the point.
+     * @param {Object} options The options of the check.
+     * @param {Element} [options.targetElement] The element to check if it is allowed to overflow the drawing area.
+     * @param {'x' | 'y'} [options.direction] The direction to check.
+     * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+     */
+    isPointInside: (point: {
+        x: number;
+        y: number;
+    }, options?: {
+        targetElement?: Element;
+        direction?: 'x' | 'y';
+    }) => boolean;
+}
+export type UseChartDimensionsSignature = ChartPluginSignature<{
+    params: UseChartDimensionsParameters;
+    defaultizedParams: UseChartDimensionsDefaultizedParameters;
+    state: UseChartDimensionsState;
+    instance: UseChartDimensionsInstance;
+}>;

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

@@ -1,2 +1,3 @@
 export { useChartId } from './useChartId';
 export type { UseChartIdSignature, UseChartIdParameters, UseChartIdDefaultizedParameters, } from './useChartId.types';
+export * from './useChartId.selectors';

package/internals/plugins/corePlugins/useChartId/index.js

@@ -1 +1,2 @@
-export { useChartId } from "./useChartId.js";
+export { useChartId } from "./useChartId.js";
+export * from "./useChartId.selectors.js";

package/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -7,7 +7,7 @@ export const useChartId = ({
 }) => {
   React.useEffect(() => {
     store.update(prevState => {
-      if (params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
+      if (params.id === undefined || params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
         return prevState;
       }
       return _extends({}, prevState, {

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

@@ -5,7 +5,7 @@ import { UseChartIdSignature } from './useChartId.types';
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export declare const selectorChartId: ((state: import("./useChartId.types").UseChartIdState & Partial<{}> & {
+export declare const selectorChartId: ((state: import("./useChartId.types").UseChartIdState & import("../useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
 }) => string | undefined) & {
     clearCache: () => void;
@@ -31,6 +31,6 @@ export declare const selectorChartId: ((state: import("./useChartId.types").UseC
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };

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

@@ -4,7 +4,7 @@ export interface UseChartIdParameters {
      * This prop is used to help implement the accessibility logic.
      * If you don't provide this prop. It falls back to a randomly generated id.
      */
-    id: string | undefined;
+    id?: string | undefined;
 }
 export type UseChartIdDefaultizedParameters = Required<UseChartIdParameters>;
 export interface UseChartIdState {

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

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

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

@@ -0,0 +1,2 @@
+export { useChartSeries } from "./useChartSeries.js";
+export * from "./useChartSeries.selectors.js";

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

@@ -0,0 +1,18 @@
+import { AllSeriesType } from '../../../../models/seriesType';
+import { ChartSeriesType, DatasetType } from '../../../../models/seriesType/config';
+import { ChartSeriesConfig } from '../../models/seriesConfig';
+import { SeriesProcessorResult } from '../../models/seriesConfig/seriesProcessor.types';
+/**
+ * This methods is the interface between what the developer is providing and what components receives
+ * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
+ * It also add defaultized values such as the ids, colors
+ * @param series The array of series provided by the developer
+ * @param colors The color palette used to defaultize series colors
+ * @returns An object structuring all the series by type.
+ */
+export declare const preprocessSeries: <TSeriesType extends ChartSeriesType>({ series, colors, seriesConfig, dataset, }: {
+    series: AllSeriesType<TSeriesType>[];
+    colors: string[];
+    seriesConfig: ChartSeriesConfig<TSeriesType>;
+    dataset?: DatasetType;
+}) => { [type in TSeriesType]?: SeriesProcessorResult<TSeriesType> | undefined; };

package/{modern/context/SeriesProvider → internals/plugins/corePlugins/useChartSeries}/processSeries.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { defaultizeColor } from "../../internals/defaultizeColor.js";
+import { defaultizeColor } from "../../../defaultizeColor.js";
 /**
  * This methods is the interface between what the developer is providing and what components receives
  * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
@@ -11,11 +11,14 @@ import { defaultizeColor } from "../../internals/defaultizeColor.js";
 export const preprocessSeries = ({
   series,
   colors,
-  seriesFormatters,
+  seriesConfig,
   dataset
 }) => {
   // Group series by type
   const seriesGroups = {};
+  // Notice the line about uses `ChartSeriesType` instead of TSeriesType.
+  // That's probably because the series.type is not propagated from the generic but hardcoded in the config.
+
   series.forEach((seriesData, seriesIndex) => {
     const {
       id = `auto-generated-id-${seriesIndex}`,
@@ -35,13 +38,13 @@ export const preprocessSeries = ({
     }, defaultizeColor(seriesData, seriesIndex, colors));
     seriesGroups[type].seriesOrder.push(id);
   });
-  const formattedSeries = {};
+  const processedSeries = {};
   // Apply formatter on a type group
-  Object.keys(seriesFormatters).forEach(type => {
+  Object.keys(seriesConfig).forEach(type => {
     const group = seriesGroups[type];
     if (group !== undefined) {
-      formattedSeries[type] = seriesFormatters[type]?.(group, dataset) ?? seriesGroups[type];
+      processedSeries[type] = seriesConfig[type]?.seriesProcessor?.(group, dataset) ?? seriesGroups[type];
     }
   });
-  return formattedSeries;
+  return processedSeries;
 };