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

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

package/RadarChart/RadarSeriesPlot/index.js

@@ -4,8 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  RadarSeriesArea: true,
+  RadarSeriesMarks: true,
   radarSeriesPlotClasses: true
 };
+Object.defineProperty(exports, "RadarSeriesArea", {
+  enumerable: true,
+  get: function () {
+    return _RadarSeriesArea.RadarSeriesArea;
+  }
+});
+Object.defineProperty(exports, "RadarSeriesMarks", {
+  enumerable: true,
+  get: function () {
+    return _RadarSeriesMarks.RadarSeriesMarks;
+  }
+});
 Object.defineProperty(exports, "radarSeriesPlotClasses", {
   enumerable: true,
   get: function () {
@@ -25,27 +39,5 @@ Object.keys(_RadarSeriesPlot).forEach(function (key) {
   });
 });
 var _RadarSeriesArea = require("./RadarSeriesArea");
-Object.keys(_RadarSeriesArea).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _RadarSeriesArea[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _RadarSeriesArea[key];
-    }
-  });
-});
 var _RadarSeriesMarks = require("./RadarSeriesMarks");
-Object.keys(_RadarSeriesMarks).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _RadarSeriesMarks[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _RadarSeriesMarks[key];
-    }
-  });
-});
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");

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

@@ -12,10 +12,12 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getRadarSeriesPlotUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiRadarSeriesPlot', slot);
 }
-const radarSeriesPlotClasses = exports.radarSeriesPlotClasses = (0, _generateUtilityClasses.default)('MuiRadarSeriesPlot', ['root', 'highlighted', 'faded']);
+const radarSeriesPlotClasses = exports.radarSeriesPlotClasses = (0, _generateUtilityClasses.default)('MuiRadarSeriesPlot', ['root', 'area', 'mark', 'highlighted', 'faded']);
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
+    area: ['area'],
+    mark: ['mark'],
     highlighted: ['highlighted'],
     faded: ['faded']
   };

package/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/RadarChart/seriesConfig/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,13 +10,14 @@ var _formatter = _interopRequireDefault(require("./formatter"));
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _extremums = require("./extremums");
 var _legend = _interopRequireDefault(require("./legend"));
-var _tooltip = _interopRequireDefault(require("./tooltip"));
+var _tooltip = _interopRequireWildcard(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 const radarSeriesConfig = exports.radarSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _formatter.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
+  axisTooltipGetter: _tooltip.axisTooltipGetter,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   radiusExtremumGetter: _extremums.radiusExtremumGetter,
   rotationExtremumGetter: _extremums.rotationExtremumGetter

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

package/RadarChart/seriesConfig/tooltip.js

@@ -3,29 +3,44 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.axisTooltipGetter = void 0;
 var _getLabel = require("../../internals/getLabel");
 const tooltipGetter = params => {
   const {
     series,
+    axesConfig,
     getColor,
     identifier
   } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
+  const rotationAxis = axesConfig.rotation;
+  if (!identifier || !rotationAxis) {
     return null;
   }
   const label = (0, _getLabel.getLabel)(series.label, 'tooltip');
-  const value = series.data[identifier.dataIndex];
-  const formattedValue = series.valueFormatter(value, {
-    dataIndex: identifier.dataIndex
-  });
+  const formatter = v => rotationAxis.valueFormatter?.(v, {
+    location: 'tooltip',
+    scale: rotationAxis.scale
+  }) ?? (v == null ? '' : v.toLocaleString());
   return {
     identifier,
-    color: getColor(identifier.dataIndex),
+    color: getColor(),
     label,
-    value,
-    formattedValue,
-    markType: series.labelMarkType
+    markType: series.labelMarkType,
+    values: series.data.map((value, dataIndex) => ({
+      value,
+      formattedValue: series.valueFormatter(value, {
+        dataIndex
+      }),
+      markType: series.labelMarkType,
+      label: formatter(rotationAxis?.data?.[dataIndex])
+    }))
   };
 };
+const axisTooltipGetter = series => {
+  return Object.values(series).map(() => ({
+    direction: 'rotation',
+    axisId: undefined
+  }));
+};
+exports.axisTooltipGetter = axisTooltipGetter;
 var _default = exports.default = tooltipGetter;

package/RadarChart/useRadarChartProps.d.ts

@@ -5,7 +5,6 @@ import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
-import { RadarAxisHighlightProps } from "./RadarAxisHighlight/index.js";
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -19,7 +18,6 @@ export declare const useRadarChartProps: (props: RadarChartProps) => {
   chartsSurfaceProps: ChartsSurfaceProps;
   radarDataProviderProps: RadarDataProviderProps;
   radarGrid: RadarGridProps;
-  radarAxisHighlight: RadarAxisHighlightProps;
   overlayProps: ChartsOverlayProps;
   legendProps: ChartsLegendSlotExtension;
   children: import("react").ReactNode;