@mui/x-charts 7.16.0 → 7.18.0

package/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -1,8 +1,14 @@
+'use client';
+
 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);
@@ -11,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);
@@ -19,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 () => {};
@@ -45,7 +71,7 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
     }
     return () => {
       if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
+        cancelAnimationFrame(animationFrame);
       }
       if (elementToObserve) {
         observer.unobserve(elementToObserve);
@@ -53,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/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -1,11 +1,14 @@
+'use client';
+
 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,
@@ -28,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/ScatterChart/Scatter.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/ScatterChart/ScatterChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -132,6 +134,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     itemMarkWidth: PropTypes.number,
     labelStyle: PropTypes.object,
     markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
     padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
       bottom: PropTypes.number,
       left: PropTypes.number,
@@ -174,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/ScatterChart/ScatterPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/ScatterChart/legend.js

@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/ScatterChart/useScatterChartProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "zAxis", "series", "tooltip", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "legend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];

package/SparkLineChart/SparkLineChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "tooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
@@ -191,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/context/CartesianProvider/CartesianProvider.js

@@ -1,8 +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";
@@ -16,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/context/CartesianProvider/getAxisExtremum.d.ts

@@ -2,4 +2,4 @@ import { AxisConfig } from '../../models';
 import { FormattedSeries } from '../SeriesProvider';
 import { ExtremumGettersConfig } from '../PluginProvider';
 import { GetZoomAxisFilters } from './Cartesian.types';
-export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig, isDefaultAxis: boolean, formattedSeries: FormattedSeries, getFilters?: GetZoomAxisFilters) => number[];
+export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig, axisIndex: number, formattedSeries: FormattedSeries, getFilters?: GetZoomAxisFilters) => number[];

package/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/context/CartesianProvider/index.d.ts

@@ -1,9 +1,4 @@
-import { computeValue } from './computeValue';
 export * from './CartesianProvider';
 export * from './CartesianContext';
 export * from './useCartesianContext';
 export * from './Cartesian.types';
-declare const cartesianProviderUtils: {
-    computeValue: typeof computeValue;
-};
-export { cartesianProviderUtils };

package/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/context/CartesianProvider/useCartesianContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { CartesianContext } from "./CartesianContext.js";
 export const useCartesianContext = () => {

package/context/DrawingProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useId from '@mui/utils/useId';

package/context/HighlightedProvider/HighlightedProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["highlighted", "faded"];

package/context/HighlightedProvider/useHighlighted.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { HighlightedContext } from "./HighlightedContext.js";
 

package/context/HighlightedProvider/useItemHighlighted.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useHighlighted } from "./useHighlighted.js";
 /**
  * A hook to check the highlighted state of the item.

package/context/InteractionProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";

package/context/PluginProvider/ExtremumGetter.types.d.ts

@@ -7,6 +7,7 @@ export type ExtremumGettersConfig<T extends ChartSeriesType = CartesianChartSeri
 type ExtremumGetterParams<T extends ChartSeriesType> = {
     series: Record<SeriesId, ChartSeries<T>>;
     axis: AxisConfig;
+    axisIndex: number;
     isDefaultAxis: boolean;
     getFilters?: (params: {
         currentAxisId: AxisId | undefined;

package/context/PluginProvider/Plugin.types.d.ts

@@ -15,6 +15,8 @@ export type PluginContextState = {
     colorProcessors: ColorProcessorsConfig<ChartSeriesType>;
     xExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
     yExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
+    rotationExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
+    radiusExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
 };
 export type ChartsPlugin<T> = T extends ChartSeriesType ? {
     seriesType: T;
@@ -22,4 +24,6 @@ export type ChartsPlugin<T> = T extends ChartSeriesType ? {
     colorProcessor: ColorProcessor<T>;
     xExtremumGetter?: ExtremumGetter<T>;
     yExtremumGetter?: ExtremumGetter<T>;
+    rotationExtremumGetter?: ExtremumGetter<T>;
+    radiusExtremumGetter?: ExtremumGetter<T>;
 } : never;

package/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/context/PluginProvider/PluginProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { PluginContext } from "./PluginContext.js";
 import { mergePlugins } from "./mergePlugins.js";

package/context/PluginProvider/index.d.ts

@@ -8,3 +8,5 @@ export * from './useColorProcessor';
 export * from './useSeriesFormatter';
 export * from './useXExtremumGetter';
 export * from './useYExtremumGetter';
+export * from './useRadiusExtremumGetter';
+export * from './useRotationExtremumGetter';

package/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/context/PluginProvider/mergePlugins.d.ts

@@ -9,28 +9,38 @@ export declare const defaultPlugins: ({
     colorProcessor: ColorProcessor<"bar">;
     xExtremumGetter?: ExtremumGetter<"bar"> | undefined;
     yExtremumGetter?: ExtremumGetter<"bar"> | undefined;
+    rotationExtremumGetter?: ExtremumGetter<"bar"> | undefined;
+    radiusExtremumGetter?: ExtremumGetter<"bar"> | undefined;
 } | {
     seriesType: "line";
     seriesFormatter: SeriesFormatter<"line">;
     colorProcessor: ColorProcessor<"line">;
     xExtremumGetter?: ExtremumGetter<"line"> | undefined;
     yExtremumGetter?: ExtremumGetter<"line"> | undefined;
+    rotationExtremumGetter?: ExtremumGetter<"line"> | undefined;
+    radiusExtremumGetter?: ExtremumGetter<"line"> | undefined;
 } | {
     seriesType: "scatter";
     seriesFormatter: SeriesFormatter<"scatter">;
     colorProcessor: ColorProcessor<"scatter">;
     xExtremumGetter?: ExtremumGetter<"scatter"> | undefined;
     yExtremumGetter?: ExtremumGetter<"scatter"> | undefined;
+    rotationExtremumGetter?: ExtremumGetter<"scatter"> | undefined;
+    radiusExtremumGetter?: ExtremumGetter<"scatter"> | undefined;
 } | {
     seriesType: "pie";
     seriesFormatter: SeriesFormatter<"pie">;
     colorProcessor: ColorProcessor<"pie">;
     xExtremumGetter?: ExtremumGetter<"pie"> | undefined;
     yExtremumGetter?: ExtremumGetter<"pie"> | undefined;
+    rotationExtremumGetter?: ExtremumGetter<"pie"> | undefined;
+    radiusExtremumGetter?: ExtremumGetter<"pie"> | undefined;
 })[];
 export declare function mergePlugins(plugins?: ChartsPlugin<ChartSeriesType>[]): {
     seriesFormatters: SeriesFormatterConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
     colorProcessors: ColorProcessorsConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
     xExtremumGetters: ExtremumGettersConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
     yExtremumGetters: ExtremumGettersConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
+    rotationExtremumGetters: ExtremumGettersConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
+    radiusExtremumGetters: ExtremumGettersConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
 };

package/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/context/PluginProvider/useColorProcessor.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { PluginContext } from "./PluginContext.js";
 export function useColorProcessor(seriesType) {

package/context/PluginProvider/useRadiusExtremumGetter.d.ts

@@ -0,0 +1,4 @@
+import { ChartSeriesType } from '../../models/seriesType/config';
+import { ExtremumGettersConfig } from './ExtremumGetter.types';
+export declare function useRadiusExtremumGetter<T extends ChartSeriesType>(seriesType: T): ExtremumGettersConfig<T>[T];
+export declare function useRadiusExtremumGetter(): ExtremumGettersConfig<ChartSeriesType>;

package/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/context/PluginProvider/useRotationExtremumGetter.d.ts

@@ -0,0 +1,4 @@
+import { ChartSeriesType } from '../../models/seriesType/config';
+import { ExtremumGettersConfig } from './ExtremumGetter.types';
+export declare function useRotationExtremumGetter<T extends ChartSeriesType>(seriesType: T): ExtremumGettersConfig<T>[T];
+export declare function useRotationExtremumGetter(): ExtremumGettersConfig<ChartSeriesType>;

package/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/context/PluginProvider/useSeriesFormatter.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { PluginContext } from "./PluginContext.js";
 export function useSeriesFormatter(seriesType) {

package/context/PolarProvider/Polar.types.d.ts

@@ -0,0 +1,42 @@
+import { DatasetType } from '../../models/seriesType/config';
+import { AxisDefaultized, ScaleName, AxisId, AxisConfig, ChartsRotationAxisProps, ChartsRadiusAxisProps } from '../../models/axis';
+export type PolarProviderProps = {
+    /**
+     * The configuration of the rotation-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    rotationAxis: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
+    /**
+     * The configuration of the radial-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    radiusAxis: AxisConfig<'linear', any, ChartsRadiusAxisProps>[];
+    /**
+     * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+     */
+    dataset?: DatasetType;
+    children: React.ReactNode;
+};
+export type DefaultizedAxisConfig<Axis> = {
+    [axisId: AxisId]: AxisDefaultized<ScaleName, any, Axis>;
+};
+export type PolarContextState = {
+    /**
+     * Mapping from rotation-axis key to scaling configuration.
+     */
+    rotationAxis: DefaultizedAxisConfig<ChartsRotationAxisProps>;
+    /**
+     * Mapping from radius-axis key to scaling configuration.
+     */
+    radiusAxis: DefaultizedAxisConfig<ChartsRadiusAxisProps>;
+    /**
+     * The rotation-axes IDs sorted by order they got provided.
+     */
+    rotationAxisIds: AxisId[];
+    /**
+     * The radius-axes IDs sorted by order they got provided.
+     */
+    radiusAxisIds: AxisId[];
+};

package/context/PolarProvider/Polar.types.js

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

package/context/PolarProvider/PolarContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Initializable } from '../context.types';
+import { PolarContextState } from './Polar.types';
+export declare const PolarContext: React.Context<Initializable<PolarContextState>>;

package/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/context/PolarProvider/PolarProvider.d.ts

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