@mui/x-charts 8.0.0-beta.3 → 8.0.0

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

@@ -1,22 +1,78 @@
 import { createSelector } from "../../utils/selectors.js";
 import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
 import { generateSvg2rotation } from "./coordinateTransformation.js";
-import { getAxisIndex } from "./getAxisValue.js";
+import { getAxisIndex } from "./getAxisIndex.js";
 import { selectorChartPolarCenter, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.js";
-export const selectorChartsInteractionRotationAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartPolarCenter, selectorChartRotationAxis], (x, y, center, rotationAxis) => {
-  if (x === null || y === null || !rotationAxis.axis[rotationAxis.axisIds[0]]) {
+const optionalGetAxisId = (_, id) => id;
+const optionalGetAxisIds = (_, ids) => ids;
+
+/**
+ * Get interaction indexes
+ */
+
+function indexGetter(value, axes, ids) {
+  return Array.isArray(ids) ? ids.map(id => getAxisIndex(axes.axis[id], value)) : getAxisIndex(axes.axis[ids], value);
+}
+
+/**
+ * Helper to get the rotation associated to the interaction coordinate.
+ */
+const selectorChartsInteractionRotationAngle = createSelector([selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartPolarCenter], (x, y, center) => {
+  if (x === null || y === null) {
     return null;
   }
-  const rotation = generateSvg2rotation(center)(x, y);
-  return getAxisIndex(rotationAxis.axis[rotationAxis.axisIds[0]], rotation);
+  return generateSvg2rotation(center)(x, y);
 });
-export const selectorChartsInteractionRotationAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex], (x, y, rotationAxis, rotationIndex) => {
-  if (x === null || y === null || rotationIndex === null || rotationIndex === -1) {
+export const selectorChartsInteractionRotationAxisIndex = createSelector([selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisId], (rotation, rotationAxis, id = rotationAxis.axisIds[0]) => rotation === null ? null : indexGetter(rotation, rotationAxis, id));
+export const selectorChartsInteractionRotationAxisIndexes = createSelector([selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisIds], (rotation, rotationAxis, ids = rotationAxis.axisIds) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids));
+export const selectorChartsInteractionRotationAxisValue = createSelector([selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex, optionalGetAxisId], (rotationAxis, rotationIndex, id = rotationAxis.axisIds[0]) => {
+  if (rotationIndex === null || rotationIndex === -1 || rotationAxis.axisIds.length === 0) {
     return null;
   }
-  const data = rotationAxis.axis[rotationAxis.axisIds[0]]?.data;
+  const data = rotationAxis.axis[id]?.data;
   if (!data) {
     return null;
   }
   return data[rotationIndex];
-});
+});
+export const selectorChartsInteractionRotationAxisValues = createSelector([selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndexes, optionalGetAxisIds], (rotationAxis, rotationIndexes, ids = rotationAxis.axisIds) => {
+  if (rotationIndexes === null) {
+    return null;
+  }
+  return ids.map((id, axisIndex) => {
+    const rotationIndex = rotationIndexes[axisIndex];
+    if (rotationIndex === -1) {
+      return null;
+    }
+    return rotationAxis.axis[id].data?.[rotationIndex];
+  });
+});
+
+/**
+ * Get rotation-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipRotationAxes = createSelector([selectorChartsInteractionRotationAxisIndexes, selectorChartRotationAxis], (indexes, axes) => {
+  if (indexes === null) {
+    return [];
+  }
+  return axes.axisIds.map((axisId, axisIndex) => ({
+    axisId,
+    dataIndex: indexes[axisIndex]
+  })).filter(({
+    axisId,
+    dataIndex
+  }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
+});
+
+/**
+ * Get radius-axis ids and corresponding data index that should be displayed in the tooltip.
+ */
+export const selectorChartsInteractionTooltipRadiusAxes = createSelector([], () => {
+  // TODO implement this selector and add it to the `selectorChartsInteractionPolarAxisTooltip`
+  return [];
+});
+
+/**
+ * Return `true` if the axis tooltip has something to display.
+ */
+export const selectorChartsInteractionPolarAxisTooltip = createSelector([selectorChartsInteractionTooltipRotationAxes], rotationTooltip => rotationTooltip.length > 0);

package/esm/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.selectors.d.ts

@@ -1,6 +1,6 @@
 import { ChartRootSelector } from "../../utils/selectors.js";
 import { UseChartVoronoiSignature } from "./useChartVoronoi.types.js";
-export declare const selectorChartsVoronoiIsVoronoiEnabled: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartVoronoi.types").UseChartVoronoiState & Partial<{}> & {
+export declare const selectorChartsVoronoiIsVoronoiEnabled: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("./useChartVoronoi.types").UseChartVoronoiState & Partial<{}> & {
   cacheKey: import("../../models").ChartStateCacheKey;
 }) => boolean | undefined) & {
   clearCache: () => void;

package/esm/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.selectors.d.ts

@@ -1,6 +1,6 @@
 import { ChartState } from "../../models/chart.js";
 import { UseChartZAxisSignature } from "./useChartZAxis.types.js";
-export declare const selectorChartZAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartZAxis.types").UseChartZAxisState & Partial<{}> & {
+export declare const selectorChartZAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("./useChartZAxis.types").UseChartZAxisState & Partial<{}> & {
   cacheKey: import("../../models").ChartStateCacheKey;
 }) => {
   axis: {

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

@@ -29,7 +29,6 @@ export interface UseChartZAxisState {
     axisIds: AxisId[];
   };
 }
-export interface UseChartZAxisInstance {}
 export type UseChartZAxisSignature = ChartPluginSignature<{
   params: UseChartZAxisParameters;
   defaultizedParams: UseChartZAxisDefaultizedParameters;

package/esm/internals/plugins/models/seriesConfig/colorProcessor.types.d.ts

@@ -2,4 +2,13 @@ import type { AxisDefaultized } from '../../../../models/axis';
 import type { DefaultizedSeriesType } from '../../../../models/seriesType';
 import type { ZAxisDefaultized } from '../../../../models/z-axis';
 import type { ChartSeriesType } from '../../../../models/seriesType/config';
-export type ColorProcessor<TSeriesType extends ChartSeriesType> = (series: DefaultizedSeriesType<TSeriesType>, xAxis?: AxisDefaultized, yAxis?: AxisDefaultized, zAxis?: ZAxisDefaultized) => (dataIndex: number) => string;
+/**
+ * Map data index to a color.
+ * If dataIndex is not defined, it falls back to the series color when defined.
+ */
+export type ColorGetter<TSeriesType extends ChartSeriesType> = TSeriesType extends 'pie' | 'funnel' | 'heatmap' ? (dataIndex: number) => string : (dataIndex?: number) => string;
+/**
+ * Transforms charts config to a color getter.
+ * If dataIndex is not defined, it falls back to the series color.
+ */
+export type ColorProcessor<TSeriesType extends ChartSeriesType> = (series: DefaultizedSeriesType<TSeriesType>, xAxis?: AxisDefaultized, yAxis?: AxisDefaultized, zAxis?: ZAxisDefaultized) => ColorGetter<TSeriesType>;

package/esm/internals/plugins/models/seriesConfig/polarExtremumGetter.types.d.ts

@@ -9,8 +9,4 @@ type PolarExtremumGetterParams<TSeriesType extends PolarChartSeriesType> = {
 };
 export type PolarExtremumGetterResult = [number, number];
 export type PolarExtremumGetter<TSeriesType extends PolarChartSeriesType> = (params: PolarExtremumGetterParams<TSeriesType>) => PolarExtremumGetterResult;
-export type PolarExtremumFilter = (value: {
-  x: number | Date | string | null;
-  y: number | Date | string | null;
-}, dataIndex: number) => boolean;
 export {};

package/esm/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts

@@ -1,12 +1,71 @@
-import type { ItemTooltip } from '../../../../ChartsTooltip';
-import type { ChartItemIdentifier, ChartSeriesDefaultized, ChartSeriesType } from '../../../../models/seriesType/config';
+import type { ChartItemIdentifier, ChartSeriesDefaultized, ChartSeriesType, ChartsSeriesConfig } from '../../../../models/seriesType/config';
 import { SeriesId } from "../../../../models/seriesType/common.js";
-import { AxisId } from "../../../../models/axis.js";
+import { AxisDefaultized, AxisId, ChartsXAxisProps, ChartsYAxisProps, ChartsRotationAxisProps, ChartsRadiusAxisProps, PolarAxisDefaultized } from "../../../../models/axis.js";
+import { ChartsLabelMarkProps } from "../../../../ChartsLabel/ChartsLabelMark.js";
+import { ColorGetter } from "./colorProcessor.types.js";
+export interface ItemTooltip<T extends ChartSeriesType> {
+  /**
+   * An object that identifies the item to display.
+   */
+  identifier: ChartItemIdentifier<T>;
+  /**
+   * The color associated with the item.
+   */
+  color: string;
+  /**
+   * The item label.
+   */
+  label: string | undefined;
+  /**
+   * The item value.
+   */
+  value: ChartsSeriesConfig[T]['valueType'];
+  /**
+   * The value formatted with context set to "tooltip".
+   */
+  formattedValue: string | null;
+  /**
+   * The series mark type.
+   */
+  markType: ChartsLabelMarkProps['type'];
+}
+export type ItemTooltipWithMultipleValues<T extends 'radar' = 'radar'> = Pick<ItemTooltip<T>, 'identifier' | 'color' | 'label' | 'markType'> & {
+  values: {
+    /**
+     * The metric label.
+     */
+    label: string | undefined;
+    /**
+     * The value.
+     */
+    value: ChartsSeriesConfig[T]['valueType'];
+    /**
+     * The value formatted with context set to "tooltip".
+     */
+    formattedValue: string | null;
+    /**
+     * The series mark type.
+     */
+    markType: ChartsLabelMarkProps['type'];
+  }[];
+};
+export interface TooltipGetterAxesConfig {
+  x?: AxisDefaultized<any, any, ChartsXAxisProps>;
+  y?: AxisDefaultized<any, any, ChartsYAxisProps>;
+  rotation?: PolarAxisDefaultized<any, any, ChartsRotationAxisProps>;
+  radius?: PolarAxisDefaultized<any, any, ChartsRadiusAxisProps>;
+}
 export type TooltipGetter<TSeriesType extends ChartSeriesType> = (params: {
   series: ChartSeriesDefaultized<TSeriesType>;
-  getColor: (dataIndex: number) => string;
+  axesConfig: TooltipGetterAxesConfig;
+  getColor: ColorGetter<TSeriesType>;
   identifier: ChartItemIdentifier<TSeriesType> | null;
-}) => ItemTooltip<TSeriesType> | null;
+}) => (TSeriesType extends 'radar' ? ItemTooltipWithMultipleValues<TSeriesType> : ItemTooltip<TSeriesType>) | null;
+/**
+ * Return an array of the axes that should trigger the tooltip.
+ *
+ * If `axisId` is set to undefined, the default axis will be used.
+ */
 export type AxisTooltipGetter<TSeriesType extends ChartSeriesType, Directions extends 'x' | 'y' | 'rotation' | 'radius' = 'x' | 'y'> = (series: Record<SeriesId, ChartSeriesDefaultized<TSeriesType>>) => {
   direction: Directions;
   axisId: AxisId | undefined;

package/esm/internals/store/useCharts.d.ts

@@ -16,7 +16,7 @@ import { ChartSeriesConfig } from "../plugins/models/seriesConfig/index.js";
  */
 export declare function useCharts<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(inPlugins: ConvertSignaturesIntoPlugins<TSignatures>, props: Partial<UseChartBaseProps<TSignatures>>, seriesConfig: ChartSeriesConfig<TSeriesType>): {
   contextValue: {
-    store: ChartStore<readonly [import("..").UseChartIdSignature, import("..").UseChartDimensionsSignature, import("..").UseChartSeriesSignature, ...TSignatures]> & UseChartInteractionState;
+    store: ChartStore<readonly [import("..").UseChartIdSignature, import("..").UseChartDimensionsSignature, import("..").UseChartSeriesSignature, import("../plugins/corePlugins/useChartAnimation").UseChartAnimationSignature, ...TSignatures]> & UseChartInteractionState;
     publicAPI: ChartPublicAPI<TSignatures>;
     instance: ChartInstance<TSignatures>;
     svgRef: React.RefObject<SVGSVGElement | null>;

package/esm/internals/store/useSelector.js

@@ -1,7 +1,4 @@
-// use-sync-external-store has no exports field defined
-// See https://github.com/facebook/react/issues/30698
-// eslint-disable-next-line import/extensions
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
 const defaultCompare = Object.is;
 export const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
   const selectorWithArgs = state => selector(state, args);

package/esm/models/axis.d.ts

@@ -1,6 +1,6 @@
-import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-charts-vendor/d3-scale';
+import type { ScaleBand, ScaleLinear, ScaleLogarithmic, ScaleOrdinal, ScalePoint, ScalePower, ScaleSequential, ScaleThreshold, ScaleTime } from '@mui/x-charts-vendor/d3-scale';
 import { SxProps } from '@mui/system/styleFunctionSx';
-import { MakeRequired } from '@mui/x-internals/types';
+import { type MakeOptional, MakeRequired } from '@mui/x-internals/types';
 import { ChartsAxisClasses } from "../ChartsAxis/axisClasses.js";
 import type { TickParams } from '../hooks/useTicks';
 import { ChartsTextProps } from "../ChartsText/index.js";
@@ -349,6 +349,9 @@ export type PolarAxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps
    */
   offset?: number;
 } & CommonAxisConfig<S, V> & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & AxisConfigExtension;
+/**
+ * Use this type for advanced typing. For basic usage, use `XAxis`, `YAxis`, `RotationAxis` or `RadiusAxis`.
+ */
 export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = {
   /**
    * The offset of the axis in pixels. It can be used to move the axis from its default position.
@@ -359,7 +362,12 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps exten
   offset?: number;
 } & CommonAxisConfig<S, V> & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & AxisSideConfig<AxisProps> & TickParams & AxisConfigExtension;
 export interface AxisConfigExtension {}
-export type PolarAxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps> = Omit<PolarAxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S];
+export type PolarAxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps> = Omit<PolarAxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
+  /**
+   * If true, the contents of the axis will be displayed by a tooltip with `trigger='axis'`.
+   */
+  triggerTooltip?: boolean;
+};
 export type AxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = MakeRequired<Omit<AxisConfig<S, V, AxisProps>, 'scaleType'>, 'offset'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
   /**
    * An indication of the expected number of ticks.
@@ -393,4 +401,8 @@ export interface ChartsAxisData {
    */
   seriesValues: Record<string, number | null | undefined>;
 }
+export type XAxis<S extends ScaleName = ScaleName, V = any> = S extends ScaleName ? MakeOptional<AxisConfig<S, V, ChartsXAxisProps>, 'id'> : never;
+export type YAxis<S extends ScaleName = ScaleName, V = any> = S extends ScaleName ? MakeOptional<AxisConfig<S, V, ChartsYAxisProps>, 'id'> : never;
+export type RotationAxis<S extends ScaleName = ScaleName, V = any> = S extends ScaleName ? AxisConfig<S, V, ChartsRotationAxisProps> : never;
+export type RadiusAxis<S extends 'linear' = 'linear', V = any> = S extends 'linear' ? AxisConfig<S, V, ChartsRadiusAxisProps> : never;
 export {};

package/esm/models/axis.js

@@ -7,6 +7,10 @@
  * Config that is shared between cartesian and polar axes.
  */
 
+/**
+ * Use this type for advanced typing. For basic usage, use `XAxis`, `YAxis`, `RotationAxis` or `RadiusAxis`.
+ */
+
 export function isBandScaleConfig(scaleConfig) {
   return scaleConfig.scaleType === 'band';
 }

package/esm/models/index.d.ts

@@ -1,6 +1,6 @@
 export * from "./seriesType/index.js";
 export * from "./stacking.js";
-export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData } from './axis';
+export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData, XAxis, YAxis, RadiusAxis, RotationAxis } from './axis';
 export type { PropsFromSlot } from '@mui/x-internals/slots';
 export type { Position } from './position';
 export type { CurveType } from './curve';

package/esm/models/seriesType/common.d.ts

@@ -56,5 +56,4 @@ export type StackableSeriesType = {
    * @default 'none'
    */
   stackOrder?: StackOrderType;
-};
-export type DefaultizedCartesianSeriesType = Required<CartesianSeriesType>;
+};

package/esm/models/seriesType/index.d.ts

@@ -1,9 +1,21 @@
 import { BarSeriesType, DefaultizedBarSeriesType } from "./bar.js";
 import { CartesianChartSeriesType, ChartSeriesType, ChartsSeriesConfig, StackableChartSeriesType } from "./config.js";
 type AllSeriesType<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['seriesProp'];
+/**
+ * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
+ * Otherwise, it will be removed in next major.
+ */
 type CartesianSeriesType = AllSeriesType<CartesianChartSeriesType>;
 type DefaultizedSeriesType<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['series'];
+/**
+ * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
+ * Otherwise, it will be removed in next major.
+ */
 type DefaultizedCartesianSeriesType = DefaultizedSeriesType<CartesianChartSeriesType>;
+/**
+ * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
+ * Otherwise, it will be removed in next major.
+ */
 type StackableSeriesType = DefaultizedSeriesType<StackableChartSeriesType>;
 export type SeriesItemIdentifier<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
 export * from "./line.js";
@@ -11,6 +23,14 @@ export * from "./bar.js";
 export * from "./scatter.js";
 export * from "./pie.js";
 export * from "./radar.js";
-export type { AllSeriesType, CartesianSeriesType, DefaultizedSeriesType, DefaultizedCartesianSeriesType, StackableSeriesType };
+export type { AllSeriesType, DefaultizedSeriesType, CartesianSeriesType, DefaultizedCartesianSeriesType, StackableSeriesType };
+/**
+ * @deprecated We do not use this function in v8. If it's useful for you use case, please open an issue explaining why.
+ * Otherwise, it will be removed in next major.
+ */
 export declare function isDefaultizedBarSeries(series: DefaultizedSeriesType): series is DefaultizedBarSeriesType;
+/**
+ * @deprecated We do not use this function in v8. If it's useful for you use case, please open an issue explaining why.
+ * Otherwise, it will be removed in next major.
+ */
 export declare function isBarSeries(series: AllSeriesType): series is BarSeriesType;

package/esm/models/seriesType/index.js

@@ -1,5 +1,20 @@
 // Series definition
 
+/**
+ * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
+ * Otherwise, it will be removed in next major.
+ */
+
+/**
+ * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
+ * Otherwise, it will be removed in next major.
+ */
+
+/**
+ * @deprecated We do not use this type in v8. If it's useful for you use case, please open an issue explaining why.
+ * Otherwise, it will be removed in next major.
+ */
+
 // item identifier
 
 export * from "./line.js";
@@ -9,9 +24,18 @@ export * from "./pie.js";
 export * from "./radar.js";
 // Helpers
 
+/**
+ * @deprecated We do not use this function in v8. If it's useful for you use case, please open an issue explaining why.
+ * Otherwise, it will be removed in next major.
+ */
 export function isDefaultizedBarSeries(series) {
   return series.type === 'bar';
 }
+
+/**
+ * @deprecated We do not use this function in v8. If it's useful for you use case, please open an issue explaining why.
+ * Otherwise, it will be removed in next major.
+ */
 export function isBarSeries(series) {
   return series.type === 'bar';
 }

package/esm/models/seriesType/radar.d.ts

@@ -8,9 +8,13 @@ export interface RadarSeriesType extends CommonSeriesType<number> {
    */
   label?: string | ((location: 'tooltip' | 'legend') => string);
   /**
-   * If `true` show marks at value position.
+   * If `true` hide marks at value position.
    */
-  showMark?: boolean;
+  hideMark?: boolean;
+  /**
+   * If `true` fill the series area.
+   */
+  fillArea?: boolean;
 }
 /**
  * An object that allows to identify either a radar series or a radar point (if dataIndex is defined).

package/hooks/animation/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./useAnimate.js";
 export * from "./useAnimateArea.js";
 export * from "./useAnimateBar.js";
 export * from "./useAnimateBarLabel.js";

package/hooks/animation/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _useAnimate = require("./useAnimate");
+Object.keys(_useAnimate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAnimate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAnimate[key];
+    }
+  });
+});
 var _useAnimateArea = require("./useAnimateArea");
 Object.keys(_useAnimateArea).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/hooks/animation/useAnimate.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+export interface UseAnimateParams<Props extends {}, Elem extends Element, T extends {} = Props> {
+  /**
+   * Function that returns the interpolation function for animating props.
+   *
+   * @param {object} lastProps Props to animate from, i.e., props when the animation was last stopped. If this is the first
+   * animation, this value be `initialProps`.
+   * @param {object} newProps Props to animate to.
+   *
+   * @returns {function} Interpolation function that takes a time value between 0 and 1 and returns the interpolated
+   * props at time t. This function is called on every frame of the animation.
+   */
+  createInterpolator: (lastProps: Props, newProps: Props) => (t: number) => Props;
+  /**
+   * Transforms the interpolated props to be passed to `applyProps`, which usually means transforming them to element
+   * attributes, e.g., transforming an array of points into a `d` attribute for a path.
+   *
+   * @param {object} props The interpolated props.
+   *
+   * @returns {object} The transformed props.
+   */
+  transformProps: (props: Props) => T;
+  /**
+   * Applies the transformed props to the element. Usually this will be a call to `element.setAttribute("x", x)` or
+   * to `element.style.width = width` so that updating the element does not go through the React lifecycle (i.e., not
+   * causing a re-render), with the objective of improving performance.
+   *
+   * This function is called on every frame of the animation.
+   * @param {Element} element The element to apply the props to.
+   * @param {object} props The transformed props to apply to the element.
+   */
+  applyProps: (element: Elem, props: T) => void;
+  /**
+   * If `true`, the animation will be skipped and the final props will be applied immediately.
+   */
+  skip?: boolean;
+  /**
+   * Initial props to animate from. If not provided, defaults to the props passed as the first argument of `useAnimate`.
+   */
+  initialProps?: Props;
+  /**
+   * Optional ref to merge with the ref returned from this hook.
+   */
+  ref?: React.Ref<Elem>;
+}
+export type UseAnimateReturn<Elem extends Element, T extends {}> = Omit<T, 'ref'> & {
+  /**
+   * Ref to be passed to the element to animate.
+   */
+  ref: React.Ref<Elem>;
+};
+/**
+ * Hook to customize the animation of an element.
+ * Animates a ref from `initialProps` to `props`.
+ *
+ * @param {object} props The props to animate to.
+ *
+ * @returns an object containing a ref that should be passed to the element to animate and the transformed props.
+ * If `skip` is true, the transformed props are the `props` to animate to; if it is false, the transformed props are the
+ * `initialProps`.
+ *
+ * The animated props are only accessible in `applyProps`. The props returned from this hook are not animated.
+ *
+ * When an animation starts, an interpolator is created using `createInterpolator`.
+ * On every animation frame:
+ * 1. The interpolator is called to get the interpolated props;
+ * 2. `transformProps` is called to transform the interpolated props;
+ * 3. `applyProps` is called to apply the transformed props to the element.
+ *
+ * If `props` change while an animation is progress, the animation will continue towards the new `props`.
+ *
+ * The animation can be skipped by setting `skip` to true. If a transition is in progress, it will immediately end
+ * and `applyProps` be called with the final value. If there isn't a transition in progress, a new one won't be
+ * started and `applyProps` will not be called.
+ * */
+export declare function useAnimate<Props extends {}, Elem extends Element, T extends {} = Props>(props: Props, {
+  createInterpolator,
+  transformProps,
+  applyProps,
+  skip,
+  initialProps,
+  ref
+}: UseAnimateParams<Props, Elem, T>): UseAnimateReturn<Elem, T>;

package/hooks/animation/useAnimate.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimate = useAnimate;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useAnimateInternal = require("../../internals/animation/useAnimateInternal");
+/**
+ * Hook to customize the animation of an element.
+ * Animates a ref from `initialProps` to `props`.
+ *
+ * @param {object} props The props to animate to.
+ *
+ * @returns an object containing a ref that should be passed to the element to animate and the transformed props.
+ * If `skip` is true, the transformed props are the `props` to animate to; if it is false, the transformed props are the
+ * `initialProps`.
+ *
+ * The animated props are only accessible in `applyProps`. The props returned from this hook are not animated.
+ *
+ * When an animation starts, an interpolator is created using `createInterpolator`.
+ * On every animation frame:
+ * 1. The interpolator is called to get the interpolated props;
+ * 2. `transformProps` is called to transform the interpolated props;
+ * 3. `applyProps` is called to apply the transformed props to the element.
+ *
+ * If `props` change while an animation is progress, the animation will continue towards the new `props`.
+ *
+ * The animation can be skipped by setting `skip` to true. If a transition is in progress, it will immediately end
+ * and `applyProps` be called with the final value. If there isn't a transition in progress, a new one won't be
+ * started and `applyProps` will not be called.
+ * */
+function useAnimate(props, {
+  createInterpolator,
+  transformProps,
+  applyProps,
+  skip,
+  initialProps = props,
+  ref
+}) {
+  const transform = transformProps ?? (p => p);
+  const animateRef = (0, _useAnimateInternal.useAnimateInternal)(props, {
+    initialProps,
+    createInterpolator,
+    applyProps: (element, animatedProps) => applyProps(element, transform(animatedProps)),
+    skip
+  });
+  const usedProps = skip ? props : initialProps;
+  return (0, _extends2.default)({}, transformProps(usedProps), {
+    ref: (0, _useForkRef.default)(animateRef, ref)
+  });
+}

package/hooks/animation/useAnimateArea.js

@@ -1,19 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAnimateArea = useAnimateArea;
 var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useAnimate = require("../../internals/animation/useAnimate");
+var _useAnimate = require("./useAnimate");
 /** Animates an area of a line chart using a `path` element.
  * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
  * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
  */
 function useAnimateArea(props) {
-  const ref = (0, _useAnimate.useAnimate)({
+  return (0, _useAnimate.useAnimate)({
     d: props.d
   }, {
     createInterpolator: (lastProps, newProps) => {
@@ -25,10 +23,8 @@ function useAnimateArea(props) {
     applyProps: (element, {
       d
     }) => element.setAttribute('d', d),
-    skip: props.skipAnimation
+    transformProps: p => p,
+    skip: props.skipAnimation,
+    ref: props.ref
   });
-  return {
-    ref: (0, _useForkRef.default)(ref, props.ref),
-    d: props.d
-  };
 }

package/hooks/animation/useAnimateBar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useAnimateBar = useAnimateBar;
 var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
-var _useAnimate = require("../../internals/animation/useAnimate");
+var _useAnimate = require("./useAnimate");
 function barPropsInterpolator(from, to) {
   const interpolateX = (0, _d3Interpolate.interpolateNumber)(from.x, to.x);
   const interpolateY = (0, _d3Interpolate.interpolateNumber)(from.y, to.y);
@@ -35,7 +35,7 @@ function useAnimateBar(props) {
     width: props.layout === 'vertical' ? props.width : 0,
     height: props.layout === 'vertical' ? 0 : props.height
   };
-  const ref = (0, _useAnimate.useAnimate)({
+  return (0, _useAnimate.useAnimate)({
     x: props.x,
     y: props.y,
     width: props.width,
@@ -48,15 +48,9 @@ function useAnimateBar(props) {
       element.setAttribute('width', animatedProps.width.toString());
       element.setAttribute('height', animatedProps.height.toString());
     },
+    transformProps: p => p,
     initialProps,
-    skip: props.skipAnimation
+    skip: props.skipAnimation,
+    ref: props.ref
   });
-  const usedProps = props.skipAnimation ? props : initialProps;
-  return {
-    ref,
-    x: usedProps.x,
-    y: usedProps.y,
-    width: usedProps.width,
-    height: usedProps.height
-  };
 }