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

package/esm/RadarChart/RadarGrid/RadarGrid.js

@@ -1,15 +1,22 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
 import { useRadarGridData } from "./useRadarGridData.js";
 import { SharpRadarGrid } from "./SharpRadarGrid.js";
 import { CircularRadarGrid } from "./CircularRadarGrid.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { SharpRadarStripes } from "./SharpRadarStripes.js";
+import { CircularRadarStripes } from "./CircularRadarStripes.js";
+import { useUtilityClasses } from "./radarGridClasses.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function RadarGrid(props) {
+  const theme = useTheme();
   const {
     divisions = 5,
-    shape = 'sharp'
+    shape = 'sharp',
+    stripeColor = index => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
   } = props;
   const gridData = useRadarGridData();
+  const classes = useUtilityClasses(props.classes);
   if (gridData === null) {
     return null;
   }
@@ -18,16 +25,38 @@ function RadarGrid(props) {
     corners,
     radius
   } = gridData;
-  return shape === 'sharp' ? /*#__PURE__*/_jsx(SharpRadarGrid, {
-    divisions: divisions,
-    corners: corners,
-    center: center,
-    radius: radius
-  }) : /*#__PURE__*/_jsx(CircularRadarGrid, {
-    divisions: divisions,
-    corners: corners,
-    center: center,
-    radius: radius
+  return shape === 'sharp' ? /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [stripeColor && /*#__PURE__*/_jsx(SharpRadarStripes, {
+      divisions: divisions,
+      corners: corners,
+      center: center,
+      radius: radius,
+      stripeColor: stripeColor,
+      classes: classes
+    }), /*#__PURE__*/_jsx(SharpRadarGrid, {
+      divisions: divisions,
+      corners: corners,
+      center: center,
+      radius: radius,
+      strokeColor: (theme.vars || theme).palette.text.primary,
+      classes: classes
+    })]
+  }) : /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [stripeColor && /*#__PURE__*/_jsx(CircularRadarStripes, {
+      divisions: divisions,
+      corners: corners,
+      center: center,
+      radius: radius,
+      stripeColor: stripeColor,
+      classes: classes
+    }), /*#__PURE__*/_jsx(CircularRadarGrid, {
+      divisions: divisions,
+      corners: corners,
+      center: center,
+      radius: radius,
+      strokeColor: (theme.vars || theme).palette.text.primary,
+      classes: classes
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? RadarGrid.propTypes = {
@@ -35,6 +64,10 @@ process.env.NODE_ENV !== "production" ? RadarGrid.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
   /**
    * The number of divisions in the radar grid.
    * @default 5
@@ -44,6 +77,13 @@ process.env.NODE_ENV !== "production" ? RadarGrid.propTypes = {
    * The grid shape.
    * @default 'sharp'
    */
-  shape: PropTypes.oneOf(['circular', 'sharp'])
+  shape: PropTypes.oneOf(['circular', 'sharp']),
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @param {number} index The index of the stripe band.
+   * @returns {string} The color to fill the stripe.
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   */
+  stripeColor: PropTypes.func
 } : void 0;
 export { RadarGrid };

package/esm/RadarChart/RadarGrid/RadarGrid.types.d.ts

@@ -1,3 +1,4 @@
+import { RadarGridClasses } from "./radarGridClasses.js";
 export interface RadarGridProps {
   /**
    * The number of divisions in the radar grid.
@@ -9,8 +10,32 @@ export interface RadarGridProps {
    * @default 'sharp'
    */
   shape?: 'sharp' | 'circular';
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @param {number} index The index of the stripe band.
+   * @returns {string} The color to fill the stripe.
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   */
+  stripeColor?: ((index: number) => string) | null;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<RadarGridClasses>;
+}
+export interface RadarGridRenderProps extends Pick<RadarGridProps, 'classes'> {
+  center: {
+    x: number;
+    y: number;
+  };
+  corners: {
+    x: number;
+    y: number;
+  }[];
+  divisions: number;
+  radius: number;
+  strokeColor: string;
 }
-export interface RadarGridRenderProps {
+export interface RadarGridStripeRenderProps extends Pick<RadarGridProps, 'stripeColor' | 'classes'> {
   center: {
     x: number;
     y: number;

package/esm/RadarChart/RadarGrid/SharpRadarGrid.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -8,9 +7,10 @@ export function SharpRadarGrid(props) {
   const {
     center,
     corners,
-    divisions
+    divisions,
+    strokeColor,
+    classes
   } = props;
-  const theme = useTheme();
   const divisionRatio = Array.from({
     length: divisions
   }, (_, index) => (index + 1) / divisions);
@@ -20,17 +20,21 @@ export function SharpRadarGrid(props) {
       y
     }, i) => /*#__PURE__*/_jsx("path", {
       d: `M ${center.x} ${center.y} L ${x} ${y}`,
-      stroke: (theme.vars || theme).palette.text.primary,
+      stroke: strokeColor,
       strokeWidth: 1,
-      fill: "none"
+      strokeOpacity: 0.3,
+      fill: "none",
+      className: classes?.radial
     }, i)), divisionRatio.map(ratio => /*#__PURE__*/_jsx("path", {
       d: `M ${corners.map(({
         x,
         y
       }) => `${center.x * (1 - ratio) + ratio * x} ${center.y * (1 - ratio) + ratio * y}`).join(' L ')} Z`,
-      stroke: (theme.vars || theme).palette.text.primary,
+      stroke: strokeColor,
       strokeWidth: 1,
-      fill: "none"
+      strokeOpacity: 0.3,
+      fill: "none",
+      className: classes?.divider
     }, ratio))]
   });
 }

package/esm/RadarChart/RadarGrid/SharpRadarStripes.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { RadarGridStripeRenderProps } from "./RadarGrid.types.js";
+/**
+ * @ignore - internal component.
+ */
+export declare function SharpRadarStripes(props: RadarGridStripeRenderProps): React.JSX.Element;

package/esm/RadarChart/RadarGrid/SharpRadarStripes.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const getPath = (corners, center, outerRatio, innerRatio) => ['M', [...corners, corners[0]].map(({
+  x,
+  y
+}) => `${center.x * (1 - outerRatio) + outerRatio * x} ${center.y * (1 - outerRatio) + outerRatio * y}`).join(' L '), 'L', [...corners, corners[0]].reverse().map(({
+  x,
+  y
+}) => `${center.x * (1 - innerRatio) + innerRatio * x} ${center.y * (1 - innerRatio) + innerRatio * y}`).join(' L '), 'Z'].join(' ');
+
+/**
+ * @ignore - internal component.
+ */
+export function SharpRadarStripes(props) {
+  const {
+    center,
+    corners,
+    divisions,
+    stripeColor,
+    classes
+  } = props;
+  const divisionRatio = Array.from({
+    length: divisions
+  }, (_, index) => (index + 1) / divisions);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: divisionRatio.map((ratio, index) => {
+      const smallerRatio = divisionRatio[index - 1] ?? 0;
+      return /*#__PURE__*/_jsx("path", {
+        d: getPath(corners, center, ratio, smallerRatio),
+        stroke: "none",
+        fill: stripeColor?.(index) ?? 'none',
+        fillOpacity: 0.1,
+        className: classes?.stripe
+      }, ratio);
+    })
+  });
+}

package/esm/RadarChart/RadarGrid/radarGridClasses.d.ts

@@ -0,0 +1,12 @@
+export interface RadarGridClasses {
+  /** Styles applied to every radial line element. */
+  radial: string;
+  /** Styles applied to every divider element. */
+  divider: string;
+  /** Styles applied to every stripe element. */
+  stripe: string;
+}
+export type RadarGridClassKey = keyof RadarGridClasses;
+export declare function getRadarGridUtilityClass(slot: string): string;
+export declare const chartsGridClasses: RadarGridClasses;
+export declare const useUtilityClasses: (classes?: Partial<RadarGridClasses>) => Record<"divider" | "radial" | "stripe", string>;

package/esm/RadarChart/RadarGrid/radarGridClasses.js

@@ -0,0 +1,15 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getRadarGridUtilityClass(slot) {
+  return generateUtilityClass('MuiRadarGrid', slot);
+}
+export const chartsGridClasses = generateUtilityClasses('MuiRadarGrid', ['radial', 'divider', 'stripe']);
+export const useUtilityClasses = classes => {
+  const slots = {
+    radial: ['radial'],
+    divider: ['divider'],
+    stripe: ['stripe']
+  };
+  return composeClasses(slots, getRadarGridUtilityClass, classes);
+};

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesArea.d.ts

@@ -1,5 +1,21 @@
 import * as React from 'react';
 import { RadarSeriesAreaProps } from "./RadarSeriesPlot.types.js";
+import { RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
+import { SeriesId } from "../../models/seriesType/common.js";
+import { HighlightItemData } from "../../internals/plugins/featurePlugins/useChartHighlight/index.js";
+interface GetPathPropsParams {
+  seriesId: SeriesId;
+  classes: RadarSeriesPlotClasses;
+  isFaded: (item: HighlightItemData | null) => boolean;
+  isHighlighted: (item: HighlightItemData | null) => boolean;
+  points: {
+    x: number;
+    y: number;
+  }[];
+  fillArea?: boolean;
+  color: string;
+}
+export declare function getPathProps(params: GetPathPropsParams): React.SVGProps<SVGPathElement>;
 declare function RadarSeriesArea(props: RadarSeriesAreaProps): React.JSX.Element;
 declare namespace RadarSeriesArea {
   var propTypes: any;

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -3,26 +3,68 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["seriesId"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { useRadarSeriesData } from "./useRadarSeriesData.js";
 import { getAreaPath } from "./getAreaPath.js";
+import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
+import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
+import { useInteractionAllItemProps } from "../../hooks/useInteractionItemProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+export function getPathProps(params) {
+  const {
+    isHighlighted,
+    isFaded,
+    seriesId,
+    classes,
+    points,
+    fillArea,
+    color
+  } = params;
+  const isItemHighlighted = isHighlighted({
+    seriesId
+  });
+  const isItemFaded = !isItemHighlighted && isFaded({
+    seriesId
+  });
+  return {
+    d: getAreaPath(points),
+    fill: fillArea ? color : 'transparent',
+    stroke: color,
+    className: clsx(classes.area, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded),
+    strokeOpacity: isItemFaded ? 0.5 : 1,
+    fillOpacity: isItemHighlighted && 0.4 || isItemFaded && 0.1 || 0.2,
+    strokeWidth: !fillArea && isItemHighlighted ? 2 : 1
+  };
+}
 function RadarSeriesArea(props) {
   const {
       seriesId
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesCoordinates = useRadarSeriesData(seriesId);
+  const interactionProps = useInteractionAllItemProps(seriesCoordinates);
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlightedGetter();
+  const classes = useUtilityClasses(props.classes);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
       points,
-      color
-    }) => /*#__PURE__*/_jsx("path", _extends({
-      d: getAreaPath(points),
-      fill: color,
-      stroke: color,
-      fillOpacity: 0.4
-    }, other), id))
+      color,
+      fillArea
+    }, seriesIndex) => {
+      return /*#__PURE__*/_jsx("path", _extends({}, getPathProps({
+        seriesId: id,
+        points,
+        color,
+        fillArea,
+        isFaded,
+        isHighlighted,
+        classes
+      }), interactionProps[seriesIndex], other), id);
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? RadarSeriesArea.propTypes = {
@@ -30,6 +72,10 @@ process.env.NODE_ENV !== "production" ? RadarSeriesArea.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
   /**
    * The id of the series to display.
    * If undefined all series are displayed.

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesMarks.d.ts

@@ -1,5 +1,21 @@
 import * as React from 'react';
 import { RadarSeriesMarksProps } from "./RadarSeriesPlot.types.js";
+import { RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
+import { SeriesId } from "../../models/seriesType/common.js";
+import { HighlightItemData } from "../../internals/plugins/featurePlugins/useChartHighlight/index.js";
+interface GetCirclePropsParams {
+  seriesId: SeriesId;
+  classes: RadarSeriesPlotClasses;
+  isFaded: (item: HighlightItemData | null) => boolean;
+  isHighlighted: (item: HighlightItemData | null) => boolean;
+  point: {
+    x: number;
+    y: number;
+  };
+  fillArea?: boolean;
+  color: string;
+}
+export declare function getCircleProps(params: GetCirclePropsParams): React.SVGProps<SVGCircleElement>;
 declare function RadarSeriesMarks(props: RadarSeriesMarksProps): React.JSX.Element;
 declare namespace RadarSeriesMarks {
   var propTypes: any;

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -2,26 +2,70 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["seriesId"];
 import * as React from 'react';
+import { clsx } from 'clsx';
 import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.js";
+import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
+import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+export function getCircleProps(params) {
+  const {
+    isHighlighted,
+    isFaded,
+    seriesId,
+    classes,
+    point,
+    fillArea,
+    color
+  } = params;
+  const isItemHighlighted = isHighlighted({
+    seriesId
+  });
+  const isItemFaded = !isItemHighlighted && isFaded({
+    seriesId
+  });
+  return {
+    cx: point.x,
+    cy: point.y,
+    r: 3,
+    fill: color,
+    stroke: color,
+    opacity: fillArea && isItemFaded ? 0.5 : 1,
+    pointerEvents: 'none',
+    className: clsx(classes.mark, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded)
+  };
+}
 function RadarSeriesMarks(props) {
   const other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
+  const classes = useUtilityClasses(props.classes);
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlightedGetter();
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
       points,
-      color
-    }) => /*#__PURE__*/_jsx("g", {
-      children: points.map((point, index) => /*#__PURE__*/_jsx("circle", _extends({
-        cx: point.x,
-        cy: point.y,
-        r: 5,
-        fill: color,
-        stroke: color
-      }, other), index))
-    }, id))
+      color,
+      hideMark,
+      fillArea
+    }) => {
+      if (hideMark) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx("g", {
+        children: points.map((point, index) => /*#__PURE__*/_jsx("circle", _extends({}, getCircleProps({
+          seriesId: id,
+          point,
+          color,
+          fillArea,
+          isFaded,
+          isHighlighted,
+          classes
+        }), other), index))
+      }, id);
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? RadarSeriesMarks.propTypes = {
@@ -29,6 +73,10 @@ process.env.NODE_ENV !== "production" ? RadarSeriesMarks.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
   /**
    * The id of the series to display.
    * If undefined all series are displayed.

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.js";
-import { getAreaPath } from "./getAreaPath.js";
 import { useInteractionAllItemProps } from "../../hooks/useInteractionItemProps.js";
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
 import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
+import { getPathProps } from "./RadarSeriesArea.js";
+import { getCircleProps } from "./RadarSeriesMarks.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function RadarSeriesPlot(props) {
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
@@ -21,31 +22,27 @@ function RadarSeriesPlot(props) {
       seriesId,
       points,
       color,
-      showMark
+      hideMark,
+      fillArea
     }, seriesIndex) => {
-      const isItemHighlighted = isHighlighted({
-        seriesId
-      });
-      const isItemFaded = !isItemHighlighted && isFaded({
-        seriesId
-      });
       return /*#__PURE__*/_jsxs("g", {
-        children: [/*#__PURE__*/_jsx("path", _extends({
-          d: getAreaPath(points)
-        }, interactionProps[seriesIndex], {
-          className: isItemHighlighted && classes.highlighted || isItemFaded && classes.faded || undefined,
-          fill: color,
-          stroke: color,
-          filter: isItemHighlighted ? 'brightness(120%)' : undefined,
-          strokeOpacity: isItemFaded ? 0.5 : 1,
-          fillOpacity: isItemFaded ? 0.1 : 0.4
-        }), seriesId), showMark && points.map((point, index) => /*#__PURE__*/_jsx("circle", {
-          cx: point.x,
-          cy: point.y,
-          r: 5,
-          fill: color,
-          stroke: color
-        }, index))]
+        children: [/*#__PURE__*/_jsx("path", _extends({}, getPathProps({
+          seriesId,
+          points,
+          color,
+          fillArea,
+          isFaded,
+          isHighlighted,
+          classes
+        }), interactionProps[seriesIndex]), seriesId), !hideMark && points.map((point, index) => /*#__PURE__*/_jsx("circle", _extends({}, getCircleProps({
+          seriesId,
+          point,
+          color,
+          fillArea,
+          isFaded,
+          isHighlighted,
+          classes
+        })), index))]
       }, seriesId);
     })
   });

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

@@ -6,13 +6,12 @@ interface CommonRadarSeriesPlotProps {
    * If undefined all series are displayed.
    */
   seriesId?: string;
-}
-export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<RadarSeriesPlotClasses>;
 }
+export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {}
 export interface RadarSeriesMarksProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGCircleElement> {}
 export interface RadarSeriesAreaProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGPathElement> {}
 export {};

package/esm/RadarChart/RadarSeriesPlot/index.d.ts

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

package/esm/RadarChart/RadarSeriesPlot/index.js

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

package/esm/RadarChart/RadarSeriesPlot/radarSeriesPlotClasses.d.ts

@@ -5,8 +5,12 @@ export interface RadarSeriesPlotClasses {
   highlighted: string;
   /** Styles applied to the series element if it is faded. */
   faded: string;
+  /** Styles applied to the series area element. */
+  area: string;
+  /** Styles applied to the series mark element. */
+  mark: string;
 }
 export type RadarSeriesPlotClassKey = keyof RadarSeriesPlotClasses;
 export declare function getRadarSeriesPlotUtilityClass(slot: string): string;
-export declare const radarSeriesPlotClasses: Record<"root" | "highlighted" | "faded", string>;
-export declare const useUtilityClasses: (classes?: Partial<RadarSeriesPlotClasses>) => Record<"root" | "highlighted" | "faded", string>;
+export declare const radarSeriesPlotClasses: Record<"root" | "area" | "mark" | "highlighted" | "faded", string>;
+export declare const useUtilityClasses: (classes?: Partial<RadarSeriesPlotClasses>) => Record<"root" | "area" | "mark" | "highlighted" | "faded", string>;

package/esm/RadarChart/RadarSeriesPlot/radarSeriesPlotClasses.js

@@ -4,10 +4,12 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getRadarSeriesPlotUtilityClass(slot) {
   return generateUtilityClass('MuiRadarSeriesPlot', slot);
 }
-export const radarSeriesPlotClasses = generateUtilityClasses('MuiRadarSeriesPlot', ['root', 'highlighted', 'faded']);
+export const radarSeriesPlotClasses = generateUtilityClasses('MuiRadarSeriesPlot', ['root', 'area', 'mark', 'highlighted', 'faded']);
 export const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
+    area: ['area'],
+    mark: ['mark'],
     highlighted: ['highlighted'],
     faded: ['faded']
   };

package/esm/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.ts

@@ -19,7 +19,8 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
   label?: string | ((location: "tooltip" | "legend") => string) | undefined;
   highlightScope?: Partial<import("../..").HighlightScope> | undefined;
   labelMarkType?: "line" | "square" | "circle" | import("react").ComponentType<import("../..").ChartsLabelCustomMarkProps> | undefined;
-  showMark?: boolean | undefined;
+  hideMark?: boolean | undefined;
+  fillArea?: boolean | undefined;
   data: number[];
   color: string;
   id: SeriesId;

package/esm/RadarChart/seriesConfig/index.js

@@ -2,13 +2,14 @@ import formatter from "./formatter.js";
 import getColor from "./getColor.js";
 import { radiusExtremumGetter, rotationExtremumGetter } from "./extremums.js";
 import legendGetter from "./legend.js";
-import tooltipGetter from "./tooltip.js";
+import tooltipGetter, { axisTooltipGetter } from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 export const radarSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor: formatter,
   legendGetter,
   tooltipGetter,
+  axisTooltipGetter,
   getSeriesWithDefaultValues,
   radiusExtremumGetter,
   rotationExtremumGetter

package/esm/RadarChart/seriesConfig/tooltip.d.ts

@@ -1,3 +1,4 @@
-import type { TooltipGetter } from '../../internals/plugins/models';
+import type { AxisTooltipGetter, TooltipGetter } from '../../internals/plugins/models';
 declare const tooltipGetter: TooltipGetter<'radar'>;
+export declare const axisTooltipGetter: AxisTooltipGetter<'radar', 'rotation'>;
 export default tooltipGetter;