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

package/modern/internals/consumeSlots.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["slots", "slotProps"],
+  _excluded2 = ["ownerState"];
+import { useTheme, useThemeProps } from '@mui/material/styles';
+import resolveProps from '@mui/utils/resolveProps';
+import useSlotProps from '@mui/utils/useSlotProps';
+import * as React from 'react';
+
+/**
+ * A higher order component that consumes a slot from the props and renders the component provided in the slot.
+ *
+ * This HOC will wrap a single component, and will render the component provided in the slot, if it exists.
+ *
+ * If you need to render multiple components, you can manually consume the slots from the props and render them in your component instead of using this HOC.
+ *
+ * In the example below, `MyComponent` will render the component provided in `mySlot` slot, if it exists. Otherwise, it will render the `DefaultComponent`.
+ *
+ * @example
+ *
+ * ```tsx
+ * type MyComponentProps = {
+ *   direction: 'row' | 'column';
+ *   slots?: {
+ *     mySlot?: React.JSXElementConstructor<{ direction: 'row' | 'column' }>;
+ *   }
+ * };
+ *
+ * const MyComponent = consumeSlots(
+ *   'MuiMyComponent',
+ *   'mySlot',
+ *   function DefaultComponent(props: MyComponentProps) {
+ *     return (
+ *       <div className={props.classes.root}>
+ *         {props.direction}
+ *       </div>
+ *     );
+ *   }
+ * );
+ * ```
+ *
+ * @param {string} name The mui component name.
+ * @param {string} slotPropName The name of the prop to retrieve the slot from.
+ * @param {object} options Options for the HOC.
+ * @param {boolean} options.propagateSlots Whether to propagate the slots to the component, this is always false if the slot is provided.
+ * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
+ * @param {Array<keyof Props>} options.omitProps An array of props to omit from the component.
+ * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
+ * @param InComponent The component to render if the slot is not provided.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const consumeSlots = (name, slotPropName, options, InComponent) => {
+  function ConsumeSlotsInternal(props, ref) {
+    const themedProps = useThemeProps({
+      props,
+      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      name
+    });
+    const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
+    const defaultizedProps = resolveProps(defaultProps, themedProps);
+    const _ref = defaultizedProps,
+      {
+        slots,
+        slotProps
+      } = _ref,
+      other = _objectWithoutPropertiesLoose(_ref, _excluded);
+    const theme = useTheme();
+    const classes = options.classesResolver?.(defaultizedProps, theme);
+
+    // Can be a function component or a forward ref component.
+    const Component = slots?.[slotPropName] ?? InComponent;
+    const propagateSlots = options.propagateSlots && !slots?.[slotPropName];
+    const _useSlotProps = useSlotProps({
+        elementType: Component,
+        externalSlotProps: slotProps?.[slotPropName],
+        additionalProps: _extends({}, other, {
+          classes
+        }, propagateSlots && {
+          slots,
+          slotProps
+        }),
+        ownerState: {}
+      }),
+      originalOutProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+    const outProps = _extends({}, originalOutProps);
+    for (const prop of options.omitProps ?? []) {
+      delete outProps[prop];
+    }
+
+    // Component can be wrapped in React.forwardRef or just a function that accepts (props, ref).
+    // If it is a plain function which accepts two arguments, we need to wrap it in React.forwardRef.
+    const OutComponent = Component.length >= 2 ? /*#__PURE__*/React.forwardRef(Component) : Component;
+    if (process.env.NODE_ENV !== 'production') {
+      OutComponent.displayName = `${name}.slots.${slotPropName}`;
+    }
+    return /*#__PURE__*/_jsx(OutComponent, _extends({}, outProps, {
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React.forwardRef(ConsumeSlotsInternal);
+};

package/modern/internals/consumeThemeProps.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useTheme, useThemeProps } from '@mui/material/styles';
 import resolveProps from '@mui/utils/resolveProps';
 import * as React from 'react';
-import * as ReactIs from 'react-is';
 
 /**
  * A higher order component that consumes and merges the theme `defaultProps` and handles the `classes` and renders the component.
@@ -50,30 +49,22 @@ import * as ReactIs from 'react-is';
  * @param InComponent The component to render if the slot is not provided.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export const consumeThemeProps = (name, options, InComponent) => {
-  function InternalComponent(props, ref) {
-    const themedProps = useThemeProps({
-      props,
-      // eslint-disable-next-line material-ui/mui-name-matches-component-name
-      name
-    });
-    const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
-    const outProps = resolveProps(defaultProps, themedProps);
-    const theme = useTheme();
-    const classes = options.classesResolver?.(outProps, theme);
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line react-compiler/react-compiler
-      InComponent.displayName = name;
-    }
-    const OutComponent = ReactIs.isForwardRef(InComponent) ? InComponent :
-    /*#__PURE__*/
-    // InComponent needs to be a function that accepts `(props, ref)`
-    // @ts-expect-error
-    React.forwardRef(InComponent);
-    return /*#__PURE__*/_jsx(OutComponent, _extends({}, outProps, {
-      classes: classes,
-      ref: ref
-    }));
+export const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.forwardRef(function ConsumeThemeInternal(props, ref) {
+  const themedProps = useThemeProps({
+    props,
+    // eslint-disable-next-line material-ui/mui-name-matches-component-name
+    name
+  });
+  const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
+  const outProps = resolveProps(defaultProps, themedProps);
+  const theme = useTheme();
+  const classes = options.classesResolver?.(outProps, theme);
+  const OutComponent = /*#__PURE__*/React.forwardRef(InComponent);
+  if (process.env.NODE_ENV !== 'production') {
+    OutComponent.displayName = `consumeThemeProps(${name})`;
   }
-  return /*#__PURE__*/React.forwardRef(InternalComponent);
-};
+  return /*#__PURE__*/_jsx(OutComponent, _extends({}, outProps, {
+    classes: classes,
+    ref: ref
+  }));
+});

package/modern/internals/index.js

@@ -1,5 +1,7 @@
 // Components
 export * from "./components/ChartsAxesGradients/index.js";
+export * from "./components/ChartsWrapper/index.js";
+export * from "../ChartsLabel/ChartsLabelMark.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";
@@ -11,6 +13,18 @@ export { useBarChartProps } from "../BarChart/useBarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../context/ChartDataProvider/useChartDataProviderProps.js";
 
+// plugins
+export * from "./plugins/corePlugins/useChartId/index.js";
+export * from "./plugins/corePlugins/useChartSeries/index.js";
+export * from "./plugins/corePlugins/useChartDimensions/index.js";
+export * from "./plugins/featurePlugins/useChartZAxis/index.js";
+export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
+export * from "./plugins/featurePlugins/useChartInteraction/index.js";
+export * from "./plugins/utils/selectors.js";
+export * from "./store/useCharts.js";
+export * from "./store/useStore.js";
+export * from "./store/useSelector.js";
+
 // utils
 export * from "./defaultizeValueFormatter.js";
 export * from "./configInit.js";
@@ -19,23 +33,17 @@ export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export { unstable_cleanupDOM } from "./domUtils.js";
 export * from "./getScale.js";
-export * from "./computeAxisValue.js";
 
 // contexts
 
-export * from "../context/CartesianProvider/index.js";
-export * from "../context/DrawingAreaProvider/index.js";
-export * from "../context/SeriesProvider/index.js";
-export * from "../context/ZAxisContextProvider.js";
-export * from "../context/PluginProvider/index.js";
 export * from "../context/AnimationProvider/index.js";
-export { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
+export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartDataProvider/index.js";
-export * from "../context/SizeProvider/index.js";
 export * from "../context/ChartProvider/index.js";
 
 // series configuration
 export * from "../models/seriesType/config.js";
 export * from "../models/seriesType/common.js";
 export * from "../models/z-axis.js";
-export * from "../models/axis.js";
+export * from "../models/axis.js";
+export * from "./plugins/models/index.js";

package/modern/internals/plugins/allPlugins.js

@@ -1,3 +1,6 @@
-// This file should be removed after creating all plugins  in favor of a file per chart type.
+// This file should be removed after creating all plugins in favor of a file per chart type.
+
+import { useChartCartesianAxis } from "./featurePlugins/useChartCartesianAxis/index.js";
 import { useChartInteraction } from "./featurePlugins/useChartInteraction/index.js";
-export const ALL_PLUGINS = [useChartInteraction];
+import { useChartZAxis } from "./featurePlugins/useChartZAxis/index.js";
+export const ALL_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction];

package/modern/internals/plugins/corePlugins/corePlugins.js

@@ -1,7 +1,9 @@
+import { useChartDimensions } from "./useChartDimensions/useChartDimensions.js";
 import { useChartId } from "./useChartId/index.js";
+import { useChartSeries } from "./useChartSeries/index.js";
 
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export const CHART_CORE_PLUGINS = [useChartId];
+export const CHART_CORE_PLUGINS = [useChartId, useChartDimensions, useChartSeries];

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

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

package/modern/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/modern/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/modern/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js

@@ -0,0 +1 @@
+export {};

package/modern/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/modern/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/modern/internals/plugins/corePlugins/useChartSeries/index.js

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

package/{context/SeriesProvider → modern/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;
 };

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

@@ -0,0 +1,72 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { blueberryTwilightPalette } from "../../../../colorPalettes/index.js";
+import { preprocessSeries } from "./processSeries.js";
+export const useChartSeries = ({
+  params,
+  store,
+  seriesConfig
+}) => {
+  const {
+    series,
+    dataset,
+    theme,
+    colors
+  } = params;
+
+  // 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;
+    }
+    store.update(prev => _extends({}, prev, {
+      series: _extends({}, prev.series, {
+        processedSeries: preprocessSeries({
+          series,
+          colors: typeof colors === 'function' ? colors(theme) : colors,
+          seriesConfig,
+          dataset
+        })
+      })
+    }));
+  }, [colors, dataset, series, theme, seriesConfig, store]);
+  return {};
+};
+useChartSeries.params = {
+  dataset: true,
+  series: true,
+  colors: true,
+  theme: true
+};
+const EMPTY_ARRAY = [];
+useChartSeries.getDefaultizedParams = ({
+  params
+}) => _extends({
+  series: EMPTY_ARRAY
+}, params, {
+  colors: params.colors ?? blueberryTwilightPalette,
+  theme: params.theme ?? 'light'
+});
+useChartSeries.getInitialState = ({
+  series = [],
+  colors,
+  theme,
+  dataset
+}, _, seriesConfig) => {
+  return {
+    series: {
+      seriesConfig,
+      processedSeries: preprocessSeries({
+        series,
+        colors: typeof colors === 'function' ? colors(theme) : colors,
+        seriesConfig,
+        dataset
+      })
+    }
+  };
+};

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

@@ -0,0 +1,4 @@
+import { createSelector } from "../../utils/selectors.js";
+export const selectorChartSeriesState = state => state.series;
+export const selectorChartSeriesProcessed = createSelector(selectorChartSeriesState, seriesState => seriesState.processedSeries);
+export const selectorChartSeriesConfig = createSelector(selectorChartSeriesState, seriesState => seriesState.seriesConfig);

package/modern/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/corePlugins/useChartSeries/useColorProcessor.js

@@ -0,0 +1,21 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector } from "../../../store/useSelector.js";
+import { useStore } from "../../../store/useStore.js";
+import { selectorChartSeriesConfig } from "./useChartSeries.selectors.js";
+export function useColorProcessor(seriesType) {
+  const store = useStore();
+  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
+  const colorProcessors = React.useMemo(() => {
+    const rep = {};
+    Object.keys(seriesConfig).forEach(seriesT => {
+      rep[seriesT] = seriesConfig[seriesT].colorProcessor;
+    });
+    return rep;
+  }, [seriesConfig]);
+  if (!seriesType) {
+    return colorProcessors;
+  }
+  return colorProcessors[seriesType];
+}