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

package/RadarChart/RadarGrid/CircularRadarStripes.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CircularRadarStripes = CircularRadarStripes;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+const getPath = (center, outerRadius, innerRadius) => [`M ${center.x - outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x + outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x - outerRadius} ${center.y} Z`, `M ${center.x - innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x + innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x - innerRadius} ${center.y} Z`].join('');
+
+/**
+ * @ignore - internal component.
+ */
+function CircularRadarStripes(props) {
+  const {
+    center,
+    divisions,
+    radius,
+    stripeColor,
+    classes
+  } = props;
+  const divisionRadius = Array.from({
+    length: divisions
+  }, (_, index) => radius * (index + 1) / divisions);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: divisionRadius.map((r, index) => {
+      const smallerRadius = divisionRadius[index - 1] ?? 0;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: getPath(center, r, smallerRadius),
+        fillRule: "evenodd",
+        fill: stripeColor?.(index) ?? 'none',
+        fillOpacity: 0.1,
+        className: classes?.stripe
+      }, r);
+    })
+  });
+}

package/RadarChart/RadarGrid/RadarGrid.js

@@ -8,16 +8,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadarGrid = RadarGrid;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 var _useRadarGridData = require("./useRadarGridData");
 var _SharpRadarGrid = require("./SharpRadarGrid");
 var _CircularRadarGrid = require("./CircularRadarGrid");
+var _SharpRadarStripes = require("./SharpRadarStripes");
+var _CircularRadarStripes = require("./CircularRadarStripes");
+var _radarGridClasses = require("./radarGridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function RadarGrid(props) {
+  const theme = (0, _styles.useTheme)();
   const {
     divisions = 5,
-    shape = 'sharp'
+    shape = 'sharp',
+    stripeColor = index => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
   } = props;
   const gridData = (0, _useRadarGridData.useRadarGridData)();
+  const classes = (0, _radarGridClasses.useUtilityClasses)(props.classes);
   if (gridData === null) {
     return null;
   }
@@ -26,16 +33,38 @@ function RadarGrid(props) {
     corners,
     radius
   } = gridData;
-  return shape === 'sharp' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharpRadarGrid.SharpRadarGrid, {
-    divisions: divisions,
-    corners: corners,
-    center: center,
-    radius: radius
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularRadarGrid.CircularRadarGrid, {
-    divisions: divisions,
-    corners: corners,
-    center: center,
-    radius: radius
+  return shape === 'sharp' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [stripeColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharpRadarStripes.SharpRadarStripes, {
+      divisions: divisions,
+      corners: corners,
+      center: center,
+      radius: radius,
+      stripeColor: stripeColor,
+      classes: classes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharpRadarGrid.SharpRadarGrid, {
+      divisions: divisions,
+      corners: corners,
+      center: center,
+      radius: radius,
+      strokeColor: (theme.vars || theme).palette.text.primary,
+      classes: classes
+    })]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [stripeColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularRadarStripes.CircularRadarStripes, {
+      divisions: divisions,
+      corners: corners,
+      center: center,
+      radius: radius,
+      stripeColor: stripeColor,
+      classes: classes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularRadarGrid.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 = {
@@ -43,6 +72,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.default.object,
   /**
    * The number of divisions in the radar grid.
    * @default 5
@@ -52,5 +85,12 @@ process.env.NODE_ENV !== "production" ? RadarGrid.propTypes = {
    * The grid shape.
    * @default 'sharp'
    */
-  shape: _propTypes.default.oneOf(['circular', 'sharp'])
+  shape: _propTypes.default.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.default.func
 } : void 0;

package/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/RadarChart/RadarGrid/SharpRadarGrid.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SharpRadarGrid = SharpRadarGrid;
 var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -15,9 +14,10 @@ function SharpRadarGrid(props) {
   const {
     center,
     corners,
-    divisions
+    divisions,
+    strokeColor,
+    classes
   } = props;
-  const theme = (0, _styles.useTheme)();
   const divisionRatio = Array.from({
     length: divisions
   }, (_, index) => (index + 1) / divisions);
@@ -27,17 +27,21 @@ function SharpRadarGrid(props) {
       y
     }, i) => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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/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/RadarChart/RadarGrid/SharpRadarStripes.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SharpRadarStripes = SharpRadarStripes;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("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.
+ */
+function SharpRadarStripes(props) {
+  const {
+    center,
+    corners,
+    divisions,
+    stripeColor,
+    classes
+  } = props;
+  const divisionRatio = Array.from({
+    length: divisions
+  }, (_, index) => (index + 1) / divisions);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: divisionRatio.map((ratio, index) => {
+      const smallerRatio = divisionRatio[index - 1] ?? 0;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: getPath(corners, center, ratio, smallerRatio),
+        stroke: "none",
+        fill: stripeColor?.(index) ?? 'none',
+        fillOpacity: 0.1,
+        className: classes?.stripe
+      }, ratio);
+    })
+  });
+}

package/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/RadarChart/RadarGrid/radarGridClasses.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartsGridClasses = void 0;
+exports.getRadarGridUtilityClass = getRadarGridUtilityClass;
+exports.useUtilityClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getRadarGridUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiRadarGrid', slot);
+}
+const chartsGridClasses = exports.chartsGridClasses = (0, _generateUtilityClasses.default)('MuiRadarGrid', ['radial', 'divider', 'stripe']);
+const useUtilityClasses = classes => {
+  const slots = {
+    radial: ['radial'],
+    divider: ['divider'],
+    stripe: ['stripe']
+  };
+  return (0, _composeClasses.default)(slots, getRadarGridUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/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/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -6,31 +6,74 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RadarSeriesArea = RadarSeriesArea;
+exports.getPathProps = getPathProps;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
 var _getAreaPath = require("./getAreaPath");
+var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
+var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
+var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId"];
+function getPathProps(params) {
+  const {
+    isHighlighted,
+    isFaded,
+    seriesId,
+    classes,
+    points,
+    fillArea,
+    color
+  } = params;
+  const isItemHighlighted = isHighlighted({
+    seriesId
+  });
+  const isItemFaded = !isItemHighlighted && isFaded({
+    seriesId
+  });
+  return {
+    d: (0, _getAreaPath.getAreaPath)(points),
+    fill: fillArea ? color : 'transparent',
+    stroke: color,
+    className: (0, _clsx.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(seriesId);
+  const interactionProps = (0, _useInteractionItemProps.useInteractionAllItemProps)(seriesCoordinates);
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
+  const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(props.classes);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
       points,
-      color
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
-      d: (0, _getAreaPath.getAreaPath)(points),
-      fill: color,
-      stroke: color,
-      fillOpacity: 0.4
-    }, other), id))
+      color,
+      fillArea
+    }, seriesIndex) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({}, getPathProps({
+        seriesId: id,
+        points,
+        color,
+        fillArea,
+        isFaded,
+        isHighlighted,
+        classes
+      }), interactionProps[seriesIndex], other), id);
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? RadarSeriesArea.propTypes = {
@@ -38,6 +81,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.default.object,
   /**
    * The id of the series to display.
    * If undefined all series are displayed.

package/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/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -6,30 +6,75 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RadarSeriesMarks = RadarSeriesMarks;
+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 _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
+var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId"];
+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: (0, _clsx.clsx)(classes.mark, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded)
+  };
+}
 function RadarSeriesMarks(props) {
   const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(props.seriesId);
+  const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(props.classes);
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
       points,
-      color
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-      children: points.map((point, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
-        cx: point.x,
-        cy: point.y,
-        r: 5,
-        fill: color,
-        stroke: color
-      }, other), index))
-    }, id))
+      color,
+      hideMark,
+      fillArea
+    }) => {
+      if (hideMark) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        children: points.map((point, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({}, getCircleProps({
+          seriesId: id,
+          point,
+          color,
+          fillArea,
+          isFaded,
+          isHighlighted,
+          classes
+        }), other), index))
+      }, id);
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? RadarSeriesMarks.propTypes = {
@@ -37,6 +82,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.default.object,
   /**
    * The id of the series to display.
    * If undefined all series are displayed.

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -10,10 +10,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
-var _getAreaPath = require("./getAreaPath");
 var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
+var _RadarSeriesArea = require("./RadarSeriesArea");
+var _RadarSeriesMarks = require("./RadarSeriesMarks");
 var _jsxRuntime = require("react/jsx-runtime");
 function RadarSeriesPlot(props) {
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(props.seriesId);
@@ -29,31 +30,27 @@ function RadarSeriesPlot(props) {
       seriesId,
       points,
       color,
-      showMark
+      hideMark,
+      fillArea
     }, seriesIndex) => {
-      const isItemHighlighted = isHighlighted({
-        seriesId
-      });
-      const isItemFaded = !isItemHighlighted && isFaded({
-        seriesId
-      });
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
-          d: (0, _getAreaPath.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__*/(0, _jsxRuntime.jsx)("circle", {
-          cx: point.x,
-          cy: point.y,
-          r: 5,
-          fill: color,
-          stroke: color
-        }, index))]
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({}, (0, _RadarSeriesArea.getPathProps)({
+          seriesId,
+          points,
+          color,
+          fillArea,
+          isFaded,
+          isHighlighted,
+          classes
+        }), interactionProps[seriesIndex]), seriesId), !hideMark && points.map((point, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({}, (0, _RadarSeriesMarks.getCircleProps)({
+          seriesId,
+          point,
+          color,
+          fillArea,
+          isFaded,
+          isHighlighted,
+          classes
+        })), index))]
       }, seriesId);
     })
   });

package/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/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";