@mui/x-charts 7.17.0 → 7.18.0

package/modern/BarChart/BarChart.js

@@ -196,6 +196,16 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/modern/ChartsTooltip/index.js

@@ -4,4 +4,7 @@ export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
 export * from "./DefaultChartsAxisTooltipContent.js";
 export * from "./DefaultChartsItemTooltipContent.js";
-export * from "./ChartsTooltipTable.js";
+export * from "./ChartsTooltipTable.js";
+export * from "./useItemTooltip.js";
+export * from "./useAxisTooltip.js";
+export { useMouseTracker } from "./utils.js";

package/modern/ChartsTooltip/useAxisTooltip.js

@@ -0,0 +1,84 @@
+'use client';
+
+import * as React from 'react';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { getLabel } from "../internals/getLabel.js";
+import { isCartesianSeriesType } from "../internals/isCartesian.js";
+import { utcFormatter } from "./utils.js";
+export function useAxisTooltip() {
+  const {
+    axis
+  } = React.useContext(InteractionContext);
+  const series = useSeries();
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = useCartesianContext();
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(ZAxisContext);
+  const colorProcessors = useColorProcessor();
+
+  // By default use the x-axis
+  const isXaxis = axis.x !== null && axis.x.index !== -1;
+  const axisData = isXaxis ? axis.x && axis.x : axis.y && axis.y;
+  if (axisData === null) {
+    return null;
+  }
+  const {
+    index: dataIndex,
+    value: axisValue
+  } = axisData;
+  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
+  const usedAxis = isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
+  const relevantSeries = Object.keys(series).filter(isCartesianSeriesType).flatMap(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.map(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+      const providedXAxisId = seriesToAdd.xAxisId ?? seriesToAdd.xAxisKey;
+      const providedYAxisId = seriesToAdd.yAxisId ?? seriesToAdd.yAxisKey;
+      const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+
+      // Test if the series uses the default axis
+      if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+        const xAxisId = providedXAxisId ?? xAxisIds[0];
+        const yAxisId = providedYAxisId ?? yAxisIds[0];
+        const zAxisId = seriesToAdd.zAxisId ?? seriesToAdd.zAxisKey ?? zAxisIds[0];
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId])(dataIndex) ?? '';
+        const value = seriesToAdd.data[dataIndex] ?? null;
+        const formattedValue = seriesToAdd.valueFormatter(value, {
+          dataIndex
+        });
+        const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
+        return {
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel
+        };
+      }
+      return undefined;
+    });
+  }).filter(item => item != null);
+  const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
+  const axisFormattedValue = axisFormatter(axisValue, {
+    location: 'tooltip'
+  });
+  return {
+    identifier: axis,
+    seriesItems: relevantSeries,
+    axisValue,
+    axisFormattedValue
+  };
+}

package/modern/ChartsTooltip/useItemTooltip.js

@@ -0,0 +1,64 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { getLabel } from "../internals/getLabel.js";
+export function useItemTooltip() {
+  const {
+    item
+  } = React.useContext(InteractionContext);
+  const series = useSeries();
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = useCartesianContext();
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(ZAxisContext);
+  const colorProcessors = useColorProcessor();
+  const xAxisId = series.xAxisId ?? series.xAxisKey ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? series.yAxisKey ?? yAxisIds[0];
+  const zAxisId = series.zAxisId ?? series.zAxisKey ?? zAxisIds[0];
+  if (!item || item.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series[item.type].series[item.seriesId];
+  const getColor = colorProcessors[itemSeries.type]?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  if (itemSeries.type === 'pie') {
+    const point = itemSeries.data[item.dataIndex];
+    const label = getLabel(point.label, 'tooltip');
+    const value = _extends({}, point, {
+      label
+    });
+    const formattedValue = itemSeries.valueFormatter?.(value, {
+      dataIndex: item.dataIndex
+    });
+    return {
+      identifier: item,
+      color: getColor(item.dataIndex),
+      label,
+      value,
+      formattedValue
+    };
+  }
+  const label = getLabel(itemSeries.label, 'tooltip');
+  const value = itemSeries.data[item.dataIndex];
+  const formattedValue = itemSeries.valueFormatter?.(value, {
+    dataIndex: item.dataIndex
+  });
+  return {
+    identifier: item,
+    color: getColor(item.dataIndex),
+    label,
+    value,
+    formattedValue
+  };
+}

package/modern/LineChart/AnimatedLine.js

@@ -44,29 +44,19 @@ function AnimatedLine(props) {
       ownerState
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    left,
-    top,
-    bottom,
-    width,
-    height,
-    right
-  } = useDrawingArea();
+  const drawingArea = useDrawingArea();
   const chartId = useChartId();
   const stringInterpolator = useStringInterpolator(d);
-  const transitionAppear = useTransition([1], {
-    from: {
-      animatedWidth: left
-    },
-    to: {
-      animatedWidth: width + left + right
-    },
-    enter: {
-      animatedWidth: width + left + right
-    },
-    leave: {
-      animatedWidth: left
-    },
+  const transitionAppear = useTransition([drawingArea], {
+    from: v => ({
+      animatedWidth: v.left
+    }),
+    enter: v => ({
+      animatedWidth: v.width + v.left + v.right
+    }),
+    leave: v => ({
+      animatedWidth: v.width + v.left + v.right
+    }),
     reset: false,
     immediate: skipAnimation
   });
@@ -91,7 +81,7 @@ function AnimatedLine(props) {
         x: 0,
         y: 0,
         width: style.animatedWidth,
-        height: top + height + bottom
+        height: drawingArea.top + drawingArea.height + drawingArea.bottom
       }))
     }), /*#__PURE__*/_jsx("g", {
       clipPath: `url(#${clipId})`,

package/modern/LineChart/LineChart.js

@@ -200,6 +200,16 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: PropTypes.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/modern/PieChart/PieChart.js

@@ -240,6 +240,16 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Callback fired when a pie arc is clicked.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -74,6 +74,16 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
   plugins: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.

package/modern/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -3,8 +3,12 @@
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
-export const useChartContainerDimensions = (inWidth, inHeight) => {
-  const displayError = React.useRef(false);
+export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender) => {
+  const stateRef = React.useRef({
+    displayError: false,
+    initialCompute: true,
+    computeRun: 0
+  });
   const rootRef = React.useRef(null);
   const [width, setWidth] = React.useState(0);
   const [height, setHeight] = React.useState(0);
@@ -13,7 +17,7 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
   const computeSize = React.useCallback(() => {
     const mainEl = rootRef?.current;
     if (!mainEl) {
-      return;
+      return {};
     }
     const win = ownerWindow(mainEl);
     const computedStyle = win.getComputedStyle(mainEl);
@@ -21,11 +25,31 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
     const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
     setWidth(newWidth);
     setHeight(newHeight);
+    return {
+      width: newWidth,
+      height: newHeight
+    };
   }, []);
   React.useEffect(() => {
     // Ensure the error detection occurs after the first rendering.
-    displayError.current = true;
+    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 (!resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
+      return;
+    }
+    const computedSize = computeSize();
+    if (computedSize.width !== width || computedSize.height !== height) {
+      stateRef.current.computeRun += 1;
+    } else if (stateRef.current.initialCompute) {
+      stateRef.current.initialCompute = false;
+    }
+  }, [width, height, computeSize, resolveSizeBeforeRender]);
   useEnhancedEffect(() => {
     if (inWidth !== undefined && inHeight !== undefined) {
       return () => {};
@@ -55,13 +79,13 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
     };
   }, [computeSize, inHeight, inWidth]);
   if (process.env.NODE_ENV !== 'production') {
-    if (displayError.current && inWidth === undefined && width === 0) {
+    if (stateRef.current.displayError && inWidth === undefined && width === 0) {
       console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
-      displayError.current = false;
+      stateRef.current.displayError = false;
     }
-    if (displayError.current && inHeight === undefined && height === 0) {
+    if (stateRef.current.displayError && inHeight === undefined && height === 0) {
       console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
-      displayError.current = false;
+      stateRef.current.displayError = false;
     }
   }
   return {

package/modern/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -2,12 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
+const _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
 import { useChartContainerDimensions } from "./useChartContainerDimensions.js";
 export const useResponsiveChartContainerProps = (props, ref) => {
   const {
       width,
       height,
+      resolveSizeBeforeRender,
       margin,
       children,
       series,
@@ -30,7 +31,7 @@ export const useResponsiveChartContainerProps = (props, ref) => {
     containerRef,
     width: dWidth,
     height: dHeight
-  } = useChartContainerDimensions(width, height);
+  } = useChartContainerDimensions(width, height, resolveSizeBeforeRender);
   const resizableChartContainerProps = _extends({}, other, {
     ownerState: {
       width,

package/modern/ScatterChart/ScatterChart.js

@@ -177,6 +177,16 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/modern/SparkLineChart/SparkLineChart.js

@@ -193,6 +193,16 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default 'line'
    */
   plotType: PropTypes.oneOf(['bar', 'line']),
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Set to `true` to highlight the value.
    * With line, it shows a point.

package/modern/context/CartesianProvider/CartesianProvider.js

@@ -1,10 +1,10 @@
 'use client';
 
 import * as React from 'react';
+import { computeAxisValue } from "../../internals/computeAxisValue.js";
 import { useDrawingArea } from "../../hooks/useDrawingArea.js";
 import { useSeries } from "../../hooks/useSeries.js";
 import { CartesianContext } from "./CartesianContext.js";
-import { computeValue } from "./computeValue.js";
 import { useXExtremumGetter } from "../PluginProvider/useXExtremumGetter.js";
 import { useYExtremumGetter } from "../PluginProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,14 +18,14 @@ function CartesianProvider(props) {
   const drawingArea = useDrawingArea();
   const xExtremumGetters = useXExtremumGetter();
   const yExtremumGetters = useYExtremumGetter();
-  const xValues = React.useMemo(() => computeValue({
+  const xValues = React.useMemo(() => computeAxisValue({
     drawingArea,
     formattedSeries,
     axis: xAxis,
     extremumGetters: xExtremumGetters,
     axisDirection: 'x'
   }), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
-  const yValues = React.useMemo(() => computeValue({
+  const yValues = React.useMemo(() => computeAxisValue({
     drawingArea,
     formattedSeries,
     axis: yAxis,

package/modern/context/CartesianProvider/getAxisExtremum.js

@@ -1,18 +1,19 @@
-const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
+const axisExtremumCallback = (acc, chartType, axis, getters, axisIndex, formattedSeries, getFilters) => {
   const getter = getters[chartType];
   const series = formattedSeries[chartType]?.series ?? {};
   const [minChartTypeData, maxChartTypeData] = getter?.({
     series,
     axis,
-    isDefaultAxis,
+    axisIndex,
+    isDefaultAxis: axisIndex === 0,
     getFilters
   }) ?? [Infinity, -Infinity];
   const [minData, maxData] = acc;
   return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
 };
-export const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
+export const getAxisExtremum = (axis, getters, axisIndex, formattedSeries, getFilters) => {
   const charTypes = Object.keys(getters);
-  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries, getFilters), [Infinity, -Infinity]);
+  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries, getFilters), [Infinity, -Infinity]);
   if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
     return [Infinity, -Infinity];
   }

package/modern/context/CartesianProvider/index.js

@@ -1,9 +1,4 @@
-import { computeValue } from "./computeValue.js";
 export * from "./CartesianProvider.js";
 export * from "./CartesianContext.js";
 export * from "./useCartesianContext.js";
-export * from "./Cartesian.types.js";
-const cartesianProviderUtils = {
-  computeValue
-};
-export { cartesianProviderUtils };
+export * from "./Cartesian.types.js";

package/modern/context/PluginProvider/PluginContext.js

@@ -5,7 +5,9 @@ export const PluginContext = /*#__PURE__*/React.createContext({
     colorProcessors: {},
     seriesFormatters: {},
     xExtremumGetters: {},
-    yExtremumGetters: {}
+    yExtremumGetters: {},
+    rotationExtremumGetters: {},
+    radiusExtremumGetters: {}
   }
 });
 if (process.env.NODE_ENV !== 'production') {

package/modern/context/PluginProvider/index.js

@@ -7,4 +7,6 @@ export * from "./ExtremumGetter.types.js";
 export * from "./useColorProcessor.js";
 export * from "./useSeriesFormatter.js";
 export * from "./useXExtremumGetter.js";
-export * from "./useYExtremumGetter.js";
+export * from "./useYExtremumGetter.js";
+export * from "./useRadiusExtremumGetter.js";
+export * from "./useRotationExtremumGetter.js";

package/modern/context/PluginProvider/mergePlugins.js

@@ -9,6 +9,8 @@ export function mergePlugins(plugins) {
   const colorProcessors = {};
   const xExtremumGetters = {};
   const yExtremumGetters = {};
+  const rotationExtremumGetters = {};
+  const radiusExtremumGetters = {};
   for (let i = 0; i < defaultizedPlugins.length; i += 1) {
     const plugin = defaultizedPlugins[i];
     const seriesType = plugin.seriesType;
@@ -20,11 +22,19 @@ export function mergePlugins(plugins) {
     if (plugin.yExtremumGetter) {
       yExtremumGetters[seriesType] = plugin.yExtremumGetter;
     }
+    if (plugin.rotationExtremumGetter) {
+      rotationExtremumGetters[seriesType] = plugin.rotationExtremumGetter;
+    }
+    if (plugin.radiusExtremumGetter) {
+      radiusExtremumGetters[seriesType] = plugin.radiusExtremumGetter;
+    }
   }
   return {
     seriesFormatters,
     colorProcessors,
     xExtremumGetters,
-    yExtremumGetters
+    yExtremumGetters,
+    rotationExtremumGetters,
+    radiusExtremumGetters
   };
 }

package/modern/context/PluginProvider/useRadiusExtremumGetter.js

@@ -0,0 +1,17 @@
+'use client';
+
+import * as React from 'react';
+import { PluginContext } from "./PluginContext.js";
+export function useRadiusExtremumGetter(seriesType) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(PluginContext);
+  if (!isInitialized) {
+    throw new Error(['MUI X: Could not find the plugin context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  if (!seriesType) {
+    return data.radiusExtremumGetters;
+  }
+  return data.radiusExtremumGetters[seriesType];
+}

package/modern/context/PluginProvider/useRotationExtremumGetter.js

@@ -0,0 +1,17 @@
+'use client';
+
+import * as React from 'react';
+import { PluginContext } from "./PluginContext.js";
+export function useRotationExtremumGetter(seriesType) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(PluginContext);
+  if (!isInitialized) {
+    throw new Error(['MUI X: Could not find the plugin context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  if (!seriesType) {
+    return data.rotationExtremumGetters;
+  }
+  return data.rotationExtremumGetters[seriesType];
+}

package/modern/context/PolarProvider/Polar.types.js

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

package/modern/context/PolarProvider/PolarContext.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export const PolarContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    rotationAxis: {},
+    radiusAxis: {},
+    rotationAxisIds: [],
+    radiusAxisIds: []
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  PolarContext.displayName = 'PolarContext';
+}

package/modern/context/PolarProvider/PolarProvider.js

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

package/modern/context/PolarProvider/getAxisExtremum.js

@@ -0,0 +1,20 @@
+const axisExtremumCallback = (acc, chartType, axis, getters, axisIndex, formattedSeries) => {
+  const getter = getters[chartType];
+  const series = formattedSeries[chartType]?.series ?? {};
+  const [minChartTypeData, maxChartTypeData] = getter?.({
+    series,
+    axis,
+    axisIndex,
+    isDefaultAxis: axisIndex === 0
+  }) ?? [Infinity, -Infinity];
+  const [minData, maxData] = acc;
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+};
+export const getAxisExtremum = (axis, getters, axisIndex, formattedSeries) => {
+  const charTypes = Object.keys(getters);
+  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries), [Infinity, -Infinity]);
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extremums;
+};