@mui/x-charts 8.0.0-alpha.9 → 8.0.0-beta.0

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

@@ -0,0 +1,14 @@
+import { createSelector } from "../../utils/selectors.js";
+const EMPTY_AXIS_INTERACTION = {
+  x: null,
+  y: null
+};
+const selectInteraction = state => state.interaction;
+export const selectorChartsInteractionIsInitialized = createSelector(selectInteraction, interaction => interaction !== undefined);
+export const selectorChartsInteractionItem = createSelector(selectInteraction, interaction => interaction?.item ?? null);
+export const selectorChartsInteractionAxis = createSelector(selectInteraction, interaction => interaction?.axis ?? EMPTY_AXIS_INTERACTION);
+export const selectorChartsInteractionXAxis = createSelector(selectorChartsInteractionAxis, axis => axis.x);
+export const selectorChartsInteractionYAxis = createSelector(selectorChartsInteractionAxis, axis => axis.y);
+export const selectorChartsInteractionItemIsDefined = createSelector(selectorChartsInteractionItem, item => item !== null);
+export const selectorChartsInteractionXAxisIsDefined = createSelector(selectorChartsInteractionXAxis, x => x !== null);
+export const selectorChartsInteractionYAxisIsDefined = createSelector(selectorChartsInteractionYAxis, y => y !== null);

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

@@ -0,0 +1,49 @@
+import { ChartPluginSignature } from "../../models/index.js";
+import { ChartItemIdentifier, ChartSeriesType } from "../../../../models/seriesType/config.js";
+export interface UseChartInteractionInstance {
+  /**
+   * Remove all interaction.
+   */
+  cleanInteraction: () => void;
+  /**
+   * Setter for the item the user is interacting with.
+   * @param {ChartItemIdentifier} newItem The identifier of the item.
+   */
+  setItemInteraction: (newItem: ChartItemIdentifier<ChartSeriesType>) => void;
+  /**
+   * Remove item interaction if the current if the provided item is still the one interacting.
+   * @param {ChartItemIdentifier} itemToRemove The identifier of the item.
+   */
+  removeItemInteraction: (itemToRemove?: ChartItemIdentifier<ChartSeriesType>) => void;
+  /**
+   * Set the new axis the user is interacting with.
+   * @param {Partial<AxisInteractionData>} newAxis The new axis identifier.
+   */
+  setAxisInteraction: (newAxis: Partial<AxisInteractionData>) => void;
+}
+export type AxisInteractionData = {
+  x: null | {
+    value: number | Date | string;
+    index: number;
+  };
+  y: null | {
+    value: number | Date | string;
+    index: number;
+  };
+};
+export interface UseChartInteractionState {
+  interaction: {
+    /**
+     * The item currently interacting.
+     */
+    item: null | ChartItemIdentifier<ChartSeriesType>;
+    /**
+     * The x- and y-axes currently interacting.
+     */
+    axis: AxisInteractionData;
+  };
+}
+export type UseChartInteractionSignature = ChartPluginSignature<{
+  instance: UseChartInteractionInstance;
+  state: UseChartInteractionState;
+}>;

package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.js

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

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

@@ -0,0 +1,27 @@
+import { AxisConfig, ScaleName } from "../../../../models/index.js";
+import { ChartsAxisProps, ChartsRotationAxisProps, ChartsRadiusAxisProps, PolarAxisDefaultized, AxisId } from "../../../../models/axis.js";
+import { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { ChartDrawingArea } from '../../../../hooks';
+import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
+export type DefaultizedAxisConfig<AxisProps extends ChartsRotationAxisProps | ChartsRadiusAxisProps> = {
+  [axisId: AxisId]: PolarAxisDefaultized<ScaleName, any, AxisProps>;
+};
+type ComputeResult<T extends ChartsAxisProps> = {
+  axis: DefaultizedAxisConfig<T>;
+  axisIds: string[];
+};
+type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
+  drawingArea: ChartDrawingArea;
+  formattedSeries: ProcessedSeries<T>;
+  seriesConfig: ChartSeriesConfig<T>;
+};
+export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
+  axis?: AxisConfig<'linear', any, ChartsRadiusAxisProps>[];
+  axisDirection: 'radius';
+}): ComputeResult<ChartsRadiusAxisProps>;
+export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
+  axis?: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
+  axisDirection: 'rotation';
+}): ComputeResult<ChartsRotationAxisProps>;
+export {};

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

@@ -0,0 +1,128 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
+import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
+import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
+import { getTickNumber } from "../../../../hooks/useTicks.js";
+import { getScale } from "../../../getScale.js";
+import { getAxisExtremum } from "./getAxisExtremum.js";
+import { deg2rad } from "../../../angleConversion.js";
+function getRange(drawingArea, axisDirection, axis) {
+  if (axisDirection === 'rotation') {
+    if (axis.scaleType === 'point') {
+      const angles = [deg2rad(axis.startAngle, 0), deg2rad(axis.endAngle, 2 * Math.PI)];
+      const diff = angles[1] - angles[0];
+      if (diff > Math.PI * 2 - 0.1) {
+        // If we cover a full circle, we remove a slice to avoid having data point at the same place.
+        angles[1] -= diff / axis.data.length;
+      }
+      return angles;
+    }
+    return [deg2rad(axis.startAngle, 0), deg2rad(axis.endAngle, 2 * Math.PI)];
+  }
+  return [0, Math.min(drawingArea.height, drawingArea.width) / 2];
+}
+const isDateData = data => data?.[0] instanceof Date;
+function createDateFormatter(axis, range) {
+  const timeScale = scaleTime(axis.data, range);
+  return (v, {
+    location
+  }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
+}
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+const DEFAULT_BAR_GAP_RATIO = 0.1;
+export function computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis: allAxis,
+  seriesConfig,
+  axisDirection
+}) {
+  if (allAxis === undefined) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
+  const completeAxis = {};
+  allAxis.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    const range = getRange(drawingArea, axisDirection, axis);
+    const [minData, maxData] = getAxisExtremum(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
+    const data = axis.data ?? [];
+    if (isBandScaleConfig(axis)) {
+      const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+      const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+      completeAxis[axis.id] = _extends({
+        offset: 0,
+        categoryGapRatio,
+        barGapRatio
+      }, axis, {
+        data,
+        scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+          values: axis.data
+        }, axis.colorMap)) : getColorScale(axis.colorMap))
+      });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, range);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
+    }
+    if (isPointScaleConfig(axis)) {
+      completeAxis[axis.id] = _extends({
+        offset: 0
+      }, axis, {
+        data,
+        scale: scalePoint(axis.data, range),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+          values: axis.data
+        }, axis.colorMap)) : getColorScale(axis.colorMap))
+      });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, range);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
+    }
+    if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+      // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
+      return;
+    }
+    const scaleType = axis.scaleType ?? 'linear';
+    const domainLimit = axis.domainLimit ?? 'nice';
+    const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
+    if (typeof domainLimit === 'function') {
+      const {
+        min,
+        max
+      } = domainLimit(minData, maxData);
+      axisExtremums[0] = min;
+      axisExtremums[1] = max;
+    }
+    const rawTickNumber = getTickNumber(_extends({}, axis, {
+      range,
+      domain: axisExtremums
+    }));
+    const tickNumber = rawTickNumber / ((range[1] - range[0]) / 100);
+    const scale = getScale(scaleType, axisExtremums, range);
+    const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
+    const [minDomain, maxDomain] = finalScale.domain();
+    const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
+    completeAxis[axis.id] = _extends({
+      offset: 0
+    }, axis, {
+      data,
+      scaleType: scaleType,
+      scale: finalScale.domain(domain),
+      tickNumber,
+      colorScale: axis.colorMap && getColorScale(axis.colorMap)
+    });
+  });
+  return {
+    axis: completeAxis,
+    axisIds: allAxis.map(({
+      id
+    }) => id)
+  };
+}

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

@@ -0,0 +1,5 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { ScaleName } from "../../../../models/index.js";
+import { PolarAxisConfig } from "../../../../models/axis.js";
+import { DatasetType } from "../../../../models/seriesType/config.js";
+export declare function defaultizeAxis<TScale extends ScaleName = ScaleName>(inAxis: MakeOptional<PolarAxisConfig<TScale, any>, 'id'>[] | undefined, dataset: Readonly<DatasetType> | undefined, axisName: 'rotation' | 'radius'): PolarAxisConfig<TScale, any>[];

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/defaultizeAxis.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_RADIUS_AXIS_KEY, DEFAULT_ROTATION_AXIS_KEY } from "../../../../constants/index.js";
+export function defaultizeAxis(inAxis, dataset, axisName) {
+  const DEFAULT_AXIS_KEY = axisName === 'rotation' ? DEFAULT_ROTATION_AXIS_KEY : DEFAULT_RADIUS_AXIS_KEY;
+  const inputAxes = inAxis && inAxis.length > 0 ? inAxis : [{
+    id: DEFAULT_AXIS_KEY
+  }];
+  return inputAxes.map((axisConfig, index) => {
+    const id = `defaultized-${axisName}-axis-${index}`;
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return _extends({
+        id
+      }, axisConfig);
+    }
+    if (dataset === undefined) {
+      throw new Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+    }
+    return _extends({
+      id,
+      data: dataset.map(d => d[dataKey])
+    }, axisConfig);
+  });
+}

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/getAxisExtremum.d.ts

@@ -0,0 +1,5 @@
+import { AxisConfig } from "../../../../models/axis.js";
+import { PolarChartSeriesType } from "../../../../models/seriesType/config.js";
+import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
+export declare const getAxisExtremum: <TSeriesType extends PolarChartSeriesType>(axis: AxisConfig, axisDirection: "rotation" | "radius", seriesConfig: ChartSeriesConfig<TSeriesType>, axisIndex: number, formattedSeries: ProcessedSeries<TSeriesType>) => number[];

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/getAxisExtremum.js

@@ -0,0 +1,21 @@
+import { isPolarSeriesType } from "../../../isPolar.js";
+const axisExtremumCallback = (acc, chartType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries) => {
+  const getter = axisDirection === 'rotation' ? seriesConfig[chartType].rotationExtremumGetter : seriesConfig[chartType].radiusExtremumGetter;
+  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, axisDirection, seriesConfig, axisIndex, formattedSeries) => {
+  const polarSeriesTypes = Object.keys(seriesConfig).filter(isPolarSeriesType);
+  const extremums = polarSeriesTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries), [Infinity, -Infinity]);
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extremums;
+};

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.d.ts

@@ -0,0 +1,9 @@
+import { PolarAxisDefaultized } from "../../../../models/axis.js";
+/**
+ * For a pointer coordinate, this function returns the value and dataIndex associated.
+ * Returns `null` if the coordinate is outside of values.
+ */
+export declare function getAxisValue(axisConfig: PolarAxisDefaultized, pointerValue: number): {
+  index: number;
+  value: any;
+} | null;

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.js

@@ -0,0 +1,33 @@
+import { isBandScale } from "../../../isBandScale.js";
+import { clampAngleRad } from "../../../clampAngle.js";
+
+/**
+ * For a pointer coordinate, this function returns the value and dataIndex associated.
+ * Returns `null` if the coordinate is outside of values.
+ */
+export function getAxisValue(axisConfig, pointerValue) {
+  const {
+    scale,
+    data: axisData,
+    reverse
+  } = axisConfig;
+  if (!isBandScale(scale)) {
+    throw new Error('MUI X: getAxisValue is not implemented for polare continuous axes.');
+  }
+  const angleGap = clampAngleRad(pointerValue - Math.min(...scale.range()));
+  const dataIndex = scale.bandwidth() === 0 ? Math.floor((angleGap + scale.step() / 2) / scale.step()) % axisData.length : Math.floor(angleGap / scale.step());
+  if (dataIndex < 0 || dataIndex >= axisData.length) {
+    return null;
+  }
+  if (reverse) {
+    const reverseIndex = axisData.length - 1 - dataIndex;
+    return {
+      index: reverseIndex,
+      value: axisData[reverseIndex]
+    };
+  }
+  return {
+    index: dataIndex,
+    value: axisData[dataIndex]
+  };
+}

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/index.d.ts

@@ -0,0 +1,3 @@
+export { useChartPolarAxis } from "./useChartPolarAxis.js";
+export type * from './useChartPolarAxis.types';
+export * from "./useChartPolarAxis.selectors.js";

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/index.js

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

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

@@ -0,0 +1,3 @@
+import { ChartPlugin } from "../../models/index.js";
+import { UseChartPolarAxisSignature } from "./useChartPolarAxis.types.js";
+export declare const useChartPolarAxis: ChartPlugin<UseChartPolarAxisSignature<any>>;

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -0,0 +1,180 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import { useSelector } from "../../../store/useSelector.js";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
+import { defaultizeAxis } from "./defaultizeAxis.js";
+import { getAxisValue } from "./getAxisValue.js";
+import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
+import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.js";
+import { getSVGPoint } from "../../../getSVGPoint.js";
+export const useChartPolarAxis = ({
+  params,
+  store,
+  seriesConfig,
+  svgRef,
+  instance
+}) => {
+  const {
+    rotationAxis,
+    radiusAxis,
+    dataset
+  } = params;
+  if (process.env.NODE_ENV !== 'production') {
+    const ids = [...(rotationAxis ?? []), ...(radiusAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
+    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
+    if (duplicates.size > 0) {
+      warnOnce([`MUI X: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+    }
+  }
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const center = useSelector(store, selectorChartPolarCenter);
+  const isInteractionEnabled = useSelector(store, selectorChartsInteractionIsInitialized);
+  const {
+    axis: rotationAxisWithScale,
+    axisIds: rotationAxisIds
+  } = useSelector(store, selectorChartRotationAxis);
+  const {
+    axis: radiusAxisWithScale,
+    axisIds: radiusAxisIds
+  } = useSelector(store, selectorChartRadiusAxis);
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartPolarAxis`
+  // 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, {
+      polarAxis: _extends({}, prev.polarAxis, {
+        rotation: defaultizeAxis(rotationAxis, dataset, 'rotation'),
+        radius: defaultizeAxis(radiusAxis, dataset, 'radius')
+      })
+    }));
+  }, [seriesConfig, drawingArea, rotationAxis, radiusAxis, dataset, store]);
+  const svg2rotation = React.useCallback((x, y) => Math.atan2(x - center.cx, center.cy - y), [center.cx, center.cy]);
+  const svg2polar = React.useCallback((x, y) => {
+    const angle = Math.atan2(x - center.cx, center.cy - y);
+    return [Math.sqrt((x - center.cx) ** 2 + (center.cy - y) ** 2), angle];
+  }, [center.cx, center.cy]);
+  const polar2svg = React.useCallback((radius, rotation) => {
+    return [center.cx + radius * Math.sin(rotation), center.cy - radius * Math.cos(rotation)];
+  }, [center.cx, center.cy]);
+  const usedRotationAxisId = rotationAxisIds[0];
+  const usedRadiusAxisId = radiusAxisIds[0];
+
+  // Use a ref to avoid rerendering on every mousemove event.
+  const mousePosition = React.useRef({
+    isInChart: false,
+    x: -1,
+    y: -1
+  });
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (!isInteractionEnabled || element === null || params.disableAxisListener) {
+      return () => {};
+    }
+    const handleOut = () => {
+      mousePosition.current = {
+        isInChart: false,
+        x: -1,
+        y: -1
+      };
+      instance.cleanInteraction?.();
+    };
+    const handleMove = event => {
+      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
+      const svgPoint = getSVGPoint(element, target);
+      mousePosition.current.x = svgPoint.x;
+      mousePosition.current.y = svgPoint.y;
+
+      // Test if it's in the drawing area
+      if (!instance.isPointInside(svgPoint, {
+        targetElement: event.target
+      })) {
+        if (mousePosition.current.isInChart) {
+          store.update(prev => _extends({}, prev, {
+            interaction: {
+              item: null,
+              axis: {
+                x: null,
+                y: null
+              }
+            }
+          }));
+          mousePosition.current.isInChart = false;
+        }
+        return;
+      }
+
+      // Test if it's in the radar circle
+      const radiusSquare = (center.cx - svgPoint.x) ** 2 + (center.cy - svgPoint.y) ** 2;
+      const maxRadius = radiusAxisWithScale[usedRadiusAxisId].scale.range()[1];
+      if (radiusSquare > maxRadius ** 2) {
+        if (mousePosition.current.isInChart) {
+          store.update(prev => _extends({}, prev, {
+            interaction: {
+              item: null,
+              axis: {
+                x: null,
+                y: null
+              }
+            }
+          }));
+          mousePosition.current.isInChart = false;
+        }
+        return;
+      }
+      mousePosition.current.isInChart = true;
+      const angle = svg2rotation(svgPoint.x, svgPoint.y);
+      instance.setAxisInteraction?.({
+        x: getAxisValue(rotationAxisWithScale[usedRotationAxisId], angle),
+        y: null
+      });
+    };
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerout', handleOut);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
+    return () => {
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerout', handleOut);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
+    };
+  }, [svgRef, store, center, radiusAxisWithScale, usedRadiusAxisId, rotationAxisWithScale, usedRotationAxisId, instance, params.disableAxisListener, isInteractionEnabled, svg2rotation]);
+  return {
+    instance: {
+      svg2polar,
+      svg2rotation,
+      polar2svg
+    }
+  };
+};
+useChartPolarAxis.params = {
+  rotationAxis: true,
+  radiusAxis: true,
+  dataset: true,
+  disableAxisListener: true
+};
+useChartPolarAxis.getInitialState = params => ({
+  polarAxis: {
+    rotation: defaultizeAxis(params.rotationAxis, params.dataset, 'rotation'),
+    radius: defaultizeAxis(params.radiusAxis, params.dataset, 'radius')
+  }
+});