@mui/x-charts 9.0.0-alpha.3 → 9.0.0-beta.0

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -10,13 +10,12 @@ exports.getCircleProps = getCircleProps;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _clsx = require("clsx");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
+var _radarClasses = require("../radarClasses");
 var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
-var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "onItemClick"];
+const _excluded = ["seriesId", "onItemClick", "classes"];
 function getCircleProps(params) {
   const {
     getHighlightState,
@@ -39,16 +38,19 @@ function getCircleProps(params) {
     fill: color,
     stroke: color,
     opacity: fillArea && isItemFaded ? 0.5 : 1,
-    className: (0, _clsx.clsx)(classes.mark, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded)
+    className: classes.seriesMark,
+    'data-highlighted': isItemHighlighted || undefined,
+    'data-faded': isItemFaded || undefined
   };
 }
 function RadarSeriesMarks(props) {
   const {
-      onItemClick
+      onItemClick,
+      classes: inClasses
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(props.seriesId);
-  const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(props.classes);
+  const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
   const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.mjs

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "onItemClick"];
+const _excluded = ["seriesId", "onItemClick", "classes"];
 import * as React from 'react';
-import { clsx } from 'clsx';
 import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
+import { useUtilityClasses } from "../radarClasses.mjs";
 import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
-import { useUtilityClasses } from "./radarSeriesPlotClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getCircleProps(params) {
   const {
@@ -30,16 +29,19 @@ export function getCircleProps(params) {
     fill: color,
     stroke: color,
     opacity: fillArea && isItemFaded ? 0.5 : 1,
-    className: clsx(classes.mark, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded)
+    className: classes.seriesMark,
+    'data-highlighted': isItemHighlighted || undefined,
+    'data-faded': isItemFaded || undefined
   };
 }
 function RadarSeriesMarks(props) {
   const {
-      onItemClick
+      onItemClick,
+      classes: inClasses
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
-  const classes = useUtilityClasses(props.classes);
+  const classes = useUtilityClasses(inClasses);
   const getHighlightState = useItemHighlightStateGetter();
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -7,10 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadarSeriesPlot = RadarSeriesPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
 var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
+var _radarClasses = require("../radarClasses");
 var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
-var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _RadarSeriesArea = require("./RadarSeriesArea");
 var _RadarSeriesMarks = require("./RadarSeriesMarks");
 var _useRadarRotationIndex = require("./useRadarRotationIndex");
@@ -18,6 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function RadarSeriesPlot(props) {
   const {
     seriesId: inSeriesId,
+    className,
     classes: inClasses,
     onAreaClick,
     onMarkClick
@@ -26,9 +28,9 @@ function RadarSeriesPlot(props) {
   const getRotationIndex = (0, _useRadarRotationIndex.useRadarRotationIndex)();
   const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
   const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
-  const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(inClasses);
+  const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-    className: classes.root,
+    className: (0, _clsx.default)(classes.seriesRoot, className),
     children: seriesCoordinates?.map(({
       seriesId,
       points,

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.mjs

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
 import { useInteractionAllItemProps } from "./useInteractionAllItemProps.mjs";
+import { useUtilityClasses } from "../radarClasses.mjs";
 import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
-import { useUtilityClasses } from "./radarSeriesPlotClasses.mjs";
 import { getPathProps } from "./RadarSeriesArea.mjs";
 import { getCircleProps } from "./RadarSeriesMarks.mjs";
 import { useRadarRotationIndex } from "./useRadarRotationIndex.mjs";
@@ -11,6 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function RadarSeriesPlot(props) {
   const {
     seriesId: inSeriesId,
+    className,
     classes: inClasses,
     onAreaClick,
     onMarkClick
@@ -21,7 +23,7 @@ function RadarSeriesPlot(props) {
   const getHighlightState = useItemHighlightStateGetter();
   const classes = useUtilityClasses(inClasses);
   return /*#__PURE__*/_jsx("g", {
-    className: classes.root,
+    className: clsx(classes.seriesRoot, className),
     children: seriesCoordinates?.map(({
       seriesId,
       points,

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.d.mts

@@ -1,9 +1,11 @@
 import type * as React from 'react';
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.mjs";
+import { type RadarClasses } from "../radarClasses.mjs";
 import { type RadarItemIdentifier } from "../../models/seriesType/radar.mjs";
-export interface RadarSeriesAreaClasses extends RadarSeriesPlotClasses {}
-export interface RadarSeriesMarksClasses extends RadarSeriesPlotClasses {}
 interface CommonRadarSeriesPlotProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * The id of the series to display.
    * If undefined all series are displayed.
@@ -12,7 +14,7 @@ interface CommonRadarSeriesPlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<RadarSeriesPlotClasses>;
+  classes?: Partial<RadarClasses>;
 }
 export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {
   /**

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.d.ts

@@ -1,9 +1,11 @@
 import type * as React from 'react';
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
+import { type RadarClasses } from "../radarClasses.js";
 import { type RadarItemIdentifier } from "../../models/seriesType/radar.js";
-export interface RadarSeriesAreaClasses extends RadarSeriesPlotClasses {}
-export interface RadarSeriesMarksClasses extends RadarSeriesPlotClasses {}
 interface CommonRadarSeriesPlotProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * The id of the series to display.
    * If undefined all series are displayed.
@@ -12,7 +14,7 @@ interface CommonRadarSeriesPlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<RadarSeriesPlotClasses>;
+  classes?: Partial<RadarClasses>;
 }
 export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {
   /**

package/RadarChart/RadarSeriesPlot/index.d.mts

@@ -1,6 +1,4 @@
 export * from "./RadarSeriesPlot.mjs";
 export type * from "./RadarSeriesPlot.types.mjs";
 export { RadarSeriesArea } from "./RadarSeriesArea.mjs";
-export { RadarSeriesMarks } from "./RadarSeriesMarks.mjs";
-export type { RadarSeriesPlotClasses, RadarSeriesPlotClassKey } from "./radarSeriesPlotClasses.mjs";
-export { radarSeriesPlotClasses } from "./radarSeriesPlotClasses.mjs";
+export { RadarSeriesMarks } from "./RadarSeriesMarks.mjs";

package/RadarChart/RadarSeriesPlot/index.d.ts

@@ -1,6 +1,4 @@
 export * from "./RadarSeriesPlot.js";
 export type * from "./RadarSeriesPlot.types.js";
 export { RadarSeriesArea } from "./RadarSeriesArea.js";
-export { RadarSeriesMarks } from "./RadarSeriesMarks.js";
-export type { RadarSeriesPlotClasses, RadarSeriesPlotClassKey } from "./radarSeriesPlotClasses.js";
-export { radarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
+export { RadarSeriesMarks } from "./RadarSeriesMarks.js";

package/RadarChart/RadarSeriesPlot/index.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   RadarSeriesArea: true,
-  RadarSeriesMarks: true,
-  radarSeriesPlotClasses: true
+  RadarSeriesMarks: true
 };
 Object.defineProperty(exports, "RadarSeriesArea", {
   enumerable: true,
@@ -20,12 +19,6 @@ Object.defineProperty(exports, "RadarSeriesMarks", {
     return _RadarSeriesMarks.RadarSeriesMarks;
   }
 });
-Object.defineProperty(exports, "radarSeriesPlotClasses", {
-  enumerable: true,
-  get: function () {
-    return _radarSeriesPlotClasses.radarSeriesPlotClasses;
-  }
-});
 var _RadarSeriesPlot = require("./RadarSeriesPlot");
 Object.keys(_RadarSeriesPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -39,5 +32,4 @@ Object.keys(_RadarSeriesPlot).forEach(function (key) {
   });
 });
 var _RadarSeriesArea = require("./RadarSeriesArea");
-var _RadarSeriesMarks = require("./RadarSeriesMarks");
-var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
+var _RadarSeriesMarks = require("./RadarSeriesMarks");

package/RadarChart/RadarSeriesPlot/index.mjs

@@ -1,4 +1,3 @@
 export * from "./RadarSeriesPlot.mjs";
 export { RadarSeriesArea } from "./RadarSeriesArea.mjs";
-export { RadarSeriesMarks } from "./RadarSeriesMarks.mjs";
-export { radarSeriesPlotClasses } from "./radarSeriesPlotClasses.mjs";
+export { RadarSeriesMarks } from "./RadarSeriesMarks.mjs";

package/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useInteractionAllItemProps = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../../context/ChartsProvider/useChartsContext");
 var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
 const useInteractionAllItemProps = (data, skip) => {
   const {
     instance
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const results = React.useMemo(() => {
     return data.map(item => {
       return skip ? {} : (0, _useInteractionItemProps.getInteractionItemProps)(instance, {

package/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.mjs

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { useChartContext } from "../../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../../context/ChartsProvider/useChartsContext.mjs";
 import { getInteractionItemProps } from "../../hooks/useInteractionItemProps.mjs";
 export const useInteractionAllItemProps = (data, skip) => {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const results = React.useMemo(() => {
     return data.map(item => {
       return skip ? {} : getInteractionItemProps(instance, {

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.js

@@ -10,7 +10,7 @@ var _useScale = require("../../hooks/useScale");
 var _useRadarSeries = require("../../hooks/useRadarSeries");
 var _useAxis = require("../../hooks/useAxis");
 var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
-var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../../context/ChartsProvider/useChartsContext");
 var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
 /**
  * This hook provides all the data needed to display radar series.
@@ -20,7 +20,7 @@ var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
 function useRadarSeriesData(querySeriesId) {
   const {
     instance
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const rotationScale = (0, _useScale.useRotationScale)();
   const {
     radiusAxis

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.mjs

@@ -3,7 +3,7 @@ import { useRotationScale } from "../../hooks/useScale.mjs";
 import { useRadarSeries } from "../../hooks/useRadarSeries.mjs";
 import { useRadiusAxes } from "../../hooks/useAxis.mjs";
 import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
-import { useChartContext } from "../../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../../context/ChartsProvider/useChartsContext.mjs";
 import { getSeriesColorFn } from "../../internals/getSeriesColorFn.mjs";
 
 /**
@@ -14,7 +14,7 @@ import { getSeriesColorFn } from "../../internals/getSeriesColorFn.mjs";
 export function useRadarSeriesData(querySeriesId) {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const rotationScale = useRotationScale();
   const {
     radiusAxis

package/RadarChart/index.d.mts

@@ -17,4 +17,6 @@ export * from "./RadarAxis/index.mjs";
 export * from "./RadarAxisHighlight/index.mjs";
 export * from "./RadarMetricLabels/index.mjs";
 export * from "./RadarSeriesPlot/index.mjs";
-export * from "./RadarChart.plugins.mjs";
+export * from "./RadarChart.plugins.mjs";
+export { radarClasses } from "./radarClasses.mjs";
+export type { RadarClassKey, RadarClasses } from "./radarClasses.mjs";

package/RadarChart/index.d.ts

@@ -17,4 +17,6 @@ export * from "./RadarAxis/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";
 export * from "./RadarSeriesPlot/index.js";
-export * from "./RadarChart.plugins.js";
+export * from "./RadarChart.plugins.js";
+export { radarClasses } from "./radarClasses.js";
+export type { RadarClassKey, RadarClasses } from "./radarClasses.js";

package/RadarChart/index.js

@@ -7,7 +7,8 @@ var _exportNames = {
   Unstable_RadarChart: true,
   Unstable_RadarDataProvider: true,
   RadarChart: true,
-  RadarDataProvider: true
+  RadarDataProvider: true,
+  radarClasses: true
 };
 Object.defineProperty(exports, "RadarChart", {
   enumerable: true,
@@ -22,6 +23,12 @@ Object.defineProperty(exports, "RadarDataProvider", {
   }
 });
 exports.Unstable_RadarDataProvider = exports.Unstable_RadarChart = void 0;
+Object.defineProperty(exports, "radarClasses", {
+  enumerable: true,
+  get: function () {
+    return _radarClasses.radarClasses;
+  }
+});
 var _RadarChart = require("./RadarChart");
 var _RadarDataProvider = require("./RadarDataProvider");
 var _FocusedRadarMark = require("./FocusedRadarMark");
@@ -108,6 +115,7 @@ Object.keys(_RadarChart2).forEach(function (key) {
     }
   });
 });
+var _radarClasses = require("./radarClasses");
 /**
  * @deprecated radar chart is now stable, import `RadarChart` instead
  */

package/RadarChart/index.mjs

@@ -18,4 +18,5 @@ export * from "./RadarAxis/index.mjs";
 export * from "./RadarAxisHighlight/index.mjs";
 export * from "./RadarMetricLabels/index.mjs";
 export * from "./RadarSeriesPlot/index.mjs";
-export * from "./RadarChart.plugins.mjs";
+export * from "./RadarChart.plugins.mjs";
+export { radarClasses } from "./radarClasses.mjs";

package/RadarChart/radarClasses.d.mts

@@ -0,0 +1,30 @@
+export interface RadarClasses {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+}
+export type RadarClassKey = keyof RadarClasses;
+export declare function getRadarUtilityClass(slot: string): string;
+export declare const radarClasses: RadarClasses;
+export declare const useUtilityClasses: (classes?: Partial<RadarClasses>) => Record<"axisLine" | "axisLabel" | "axisRoot" | "gridRadial" | "gridDivider" | "gridStripe" | "seriesRoot" | "seriesArea" | "seriesMark" | "axisHighlightRoot" | "axisHighlightLine" | "axisHighlightDot", string>;

package/RadarChart/radarClasses.d.ts

@@ -0,0 +1,30 @@
+export interface RadarClasses {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+}
+export type RadarClassKey = keyof RadarClasses;
+export declare function getRadarUtilityClass(slot: string): string;
+export declare const radarClasses: RadarClasses;
+export declare const useUtilityClasses: (classes?: Partial<RadarClasses>) => Record<"axisLine" | "axisLabel" | "axisRoot" | "gridRadial" | "gridDivider" | "gridStripe" | "seriesRoot" | "seriesArea" | "seriesMark" | "axisHighlightRoot" | "axisHighlightLine" | "axisHighlightDot", string>;

package/RadarChart/radarClasses.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRadarUtilityClass = getRadarUtilityClass;
+exports.useUtilityClasses = exports.radarClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getRadarUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiRadarChart', slot);
+}
+const radarClasses = exports.radarClasses = (0, _generateUtilityClasses.default)('MuiRadarChart', ['axisRoot', 'axisLine', 'axisLabel', 'gridRadial', 'gridDivider', 'gridStripe', 'seriesRoot', 'seriesArea', 'seriesMark', 'axisHighlightRoot', 'axisHighlightLine', 'axisHighlightDot']);
+const useUtilityClasses = classes => {
+  const slots = {
+    axisRoot: ['axisRoot'],
+    axisLine: ['axisLine'],
+    axisLabel: ['axisLabel'],
+    gridRadial: ['gridRadial'],
+    gridDivider: ['gridDivider'],
+    gridStripe: ['gridStripe'],
+    seriesRoot: ['seriesRoot'],
+    seriesArea: ['seriesArea'],
+    seriesMark: ['seriesMark'],
+    axisHighlightRoot: ['axisHighlightRoot'],
+    axisHighlightLine: ['axisHighlightLine'],
+    axisHighlightDot: ['axisHighlightDot']
+  };
+  return (0, _composeClasses.default)(slots, getRadarUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/RadarChart/radarClasses.mjs

@@ -0,0 +1,24 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getRadarUtilityClass(slot) {
+  return generateUtilityClass('MuiRadarChart', slot);
+}
+export const radarClasses = generateUtilityClasses('MuiRadarChart', ['axisRoot', 'axisLine', 'axisLabel', 'gridRadial', 'gridDivider', 'gridStripe', 'seriesRoot', 'seriesArea', 'seriesMark', 'axisHighlightRoot', 'axisHighlightLine', 'axisHighlightDot']);
+export const useUtilityClasses = classes => {
+  const slots = {
+    axisRoot: ['axisRoot'],
+    axisLine: ['axisLine'],
+    axisLabel: ['axisLabel'],
+    gridRadial: ['gridRadial'],
+    gridDivider: ['gridDivider'],
+    gridStripe: ['gridStripe'],
+    seriesRoot: ['seriesRoot'],
+    seriesArea: ['seriesArea'],
+    seriesMark: ['seriesMark'],
+    axisHighlightRoot: ['axisHighlightRoot'],
+    axisHighlightLine: ['axisHighlightLine'],
+    axisHighlightDot: ['axisHighlightDot']
+  };
+  return composeClasses(slots, getRadarUtilityClass, classes);
+};

package/RadarChart/seriesConfig/descriptionGetter.d.mts

@@ -0,0 +1,3 @@
+import type { DescriptionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+declare const descriptionGetter: DescriptionGetter<'radar'>;
+export default descriptionGetter;

package/RadarChart/seriesConfig/descriptionGetter.d.ts

@@ -0,0 +1,3 @@
+import type { DescriptionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
+declare const descriptionGetter: DescriptionGetter<'radar'>;
+export default descriptionGetter;

package/RadarChart/seriesConfig/descriptionGetter.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _getLabel = require("../../internals/getLabel");
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    rotationAxis,
+    localeText
+  } = params;
+  const label = (0, _getLabel.getLabel)(series.label, 'tooltip');
+  const dataIndex = identifier.dataIndex;
+  if (dataIndex === undefined) {
+    return '';
+  }
+  const value = series.data[dataIndex] ?? null;
+  const categoryValue = rotationAxis.data?.[dataIndex] ?? null;
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex
+  });
+  const formattedCategory = rotationAxis.valueFormatter?.(categoryValue, {
+    location: 'tooltip',
+    scale: rotationAxis.scale
+  });
+  return localeText.radarDescription({
+    value,
+    formattedValue: formattedValue ?? '',
+    categoryValue,
+    formattedCategoryValue: formattedCategory ?? '',
+    seriesLabel: label
+  });
+};
+var _default = exports.default = descriptionGetter;

package/RadarChart/seriesConfig/descriptionGetter.mjs

@@ -0,0 +1,31 @@
+import { getLabel } from "../../internals/getLabel.mjs";
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    rotationAxis,
+    localeText
+  } = params;
+  const label = getLabel(series.label, 'tooltip');
+  const dataIndex = identifier.dataIndex;
+  if (dataIndex === undefined) {
+    return '';
+  }
+  const value = series.data[dataIndex] ?? null;
+  const categoryValue = rotationAxis.data?.[dataIndex] ?? null;
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex
+  });
+  const formattedCategory = rotationAxis.valueFormatter?.(categoryValue, {
+    location: 'tooltip',
+    scale: rotationAxis.scale
+  });
+  return localeText.radarDescription({
+    value,
+    formattedValue: formattedValue ?? '',
+    categoryValue,
+    formattedCategoryValue: formattedCategory ?? '',
+    seriesLabel: label
+  });
+};
+export default descriptionGetter;

package/RadarChart/seriesConfig/index.js

@@ -17,6 +17,7 @@ var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandl
 var _identifierSerializer = require("../../internals/identifierSerializer");
 var _identifierCleaner = require("../../internals/identifierCleaner");
 var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight");
+var _descriptionGetter = _interopRequireDefault(require("./descriptionGetter"));
 const radarSeriesConfig = exports.radarSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
@@ -30,6 +31,7 @@ const radarSeriesConfig = exports.radarSeriesConfig = {
   keyboardFocusHandler: _keyboardFocusHandler.default,
   identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex,
   identifierCleaner: _identifierCleaner.identifierCleanerSeriesIdDataIndex,
+  descriptionGetter: _descriptionGetter.default,
   isHighlightedCreator: _useChartHighlight.createIsHighlighted,
   isFadedCreator: _useChartHighlight.createIsFaded
 };

package/RadarChart/seriesConfig/index.mjs

@@ -9,6 +9,7 @@ import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
 import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.mjs";
 import { identifierCleanerSeriesIdDataIndex } from "../../internals/identifierCleaner.mjs";
 import { createIsHighlighted, createIsFaded } from "../../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
+import descriptionGetter from "./descriptionGetter.mjs";
 export const radarSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
@@ -22,6 +23,7 @@ export const radarSeriesConfig = {
   keyboardFocusHandler,
   identifierSerializer: identifierSerializerSeriesIdDataIndex,
   identifierCleaner: identifierCleanerSeriesIdDataIndex,
+  descriptionGetter,
   isHighlightedCreator: createIsHighlighted,
   isFadedCreator: createIsFaded
 };

package/RadarChart/seriesConfig/legend.js

@@ -4,25 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _getLabel = require("../../internals/getLabel");
-const legendGetter = params => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  return seriesOrder.reduce((acc, seriesId) => {
-    const formattedLabel = (0, _getLabel.getLabel)(series[seriesId].label, 'legend');
-    if (formattedLabel === undefined) {
-      return acc;
-    }
-    acc.push({
-      type: 'radar',
-      seriesId,
-      color: series[seriesId].color,
-      label: formattedLabel,
-      markType: series[seriesId].labelMarkType ?? 'square'
-    });
-    return acc;
-  }, []);
-};
+var _legendUtils = require("../../internals/legendUtils");
+const legendGetter = series => (0, _legendUtils.getSeriesLegendItems)('radar', series, 'square');
 var _default = exports.default = legendGetter;