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

The community edition of MUI X Charts components.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
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 React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@mui/material/styles");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _useRadarAxisHighlight = require("./useRadarAxisHighlight");
var _radarAxisHighlightClasses = require("./radarAxisHighlightClasses");
var _jsxRuntime = require("react/jsx-runtime");
const useUtilityClasses = classes => {
  const slots = {
    root: ['root'],
    line: ['line'],
    dot: ['dot']
  };
  return (0, _composeClasses.default)(slots, _radarAxisHighlightClasses.getRadarAxisHighlightUtilityClass, classes);
};
/**
 * 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 classes = useUtilityClasses(props.classes);
  const theme = (0, _styles.useTheme)();
  const data = (0, _useRadarAxisHighlight.useRadarAxisHighlight)();
  if (data === null) {
    return null;
  }
  const {
    center,
    series,
    points,
    radius,
    highlightedAngle,
    instance
  } = data;
  const [x, y] = instance.polar2svg(radius, highlightedAngle);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
    className: classes.root,
    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.line,
      pointerEvents: "none",
      strokeDasharray: "4 4"
    }), points.map(({
      highlighted
    }, seriesIndex) => {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
        fill: series[seriesIndex].color,
        cx: highlighted.x,
        cy: highlighted.y,
        className: classes.dot,
        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;