@mui/x-charts/RadarChart/RadarAxisHighlight/RadarAxisHighlight.js

The community edition of MUI X Charts components.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RadarAxisHighlight = RadarAxisHighlight;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _styles = require("@mui/material/styles");
var _useRadarAxisHighlight = require("./useRadarAxisHighlight");
var _radarClasses = require("../radarClasses");
var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * Attributes to display a shadow around a mark.
 */
const highlightMarkShadow = {
  r: 7,
  opacity: 0.3
};

/**
 * Attributes to display a mark.
 */
const highlightMark = {
  r: 3,
  opacity: 1
};
function RadarAxisHighlight(props) {
  const {
    className
  } = props;
  const classes = (0, _radarClasses.useUtilityClasses)(props.classes);
  const theme = (0, _styles.useTheme)();
  const data = (0, _useRadarAxisHighlight.useRadarAxisHighlight)();
  if (data === null) {
    return null;
  }
  const {
    center,
    series,
    points,
    radius,
    highlightedAngle,
    highlightedIndex,
    instance
  } = data;
  const [x, y] = instance.polar2svg(radius, highlightedAngle);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
    className: (0, _clsx.default)(classes.axisHighlightRoot, className),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
      d: `M ${center.cx} ${center.cy} L ${x} ${y}`,
      stroke: (theme.vars || theme).palette.text.primary,
      strokeWidth: 1,
      className: classes.axisHighlightLine,
      pointerEvents: "none",
      strokeDasharray: "4 4"
    }), points.map((point, seriesIndex) => {
      const colorGetter = (0, _getSeriesColorFn.getSeriesColorFn)(series[seriesIndex]);
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
        fill: colorGetter({
          value: point.value,
          dataIndex: highlightedIndex
        }),
        cx: point.x,
        cy: point.y,
        className: classes.axisHighlightDot,
        pointerEvents: "none"
      }, series[seriesIndex].hideMark ? highlightMark : highlightMarkShadow), series[seriesIndex].id);
    })]
  });
}
process.env.NODE_ENV !== "production" ? RadarAxisHighlight.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | 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
} : void 0;