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

The community edition of MUI X Charts components.

import _extends from "@babel/runtime/helpers/esm/extends";
import PropTypes from 'prop-types';
import { useTheme } from '@mui/material/styles';
import { useRadarAxisHighlight } from "./useRadarAxisHighlight.js";
import { useUtilityClasses as useDeprecatedUtilityClasses } from "./radarAxisHighlightClasses.js";
import { useUtilityClasses } from "../radarClasses.js";
import { getSeriesColorFn } from "../../internals/getSeriesColorFn.js";
import { jsx as _jsx, jsxs as _jsxs } from "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 classes = useUtilityClasses();
  const deprecatedClasses = useDeprecatedUtilityClasses(props.classes);
  const theme = useTheme();
  const data = useRadarAxisHighlight();
  if (data === null) {
    return null;
  }
  const {
    center,
    series,
    points,
    radius,
    highlightedAngle,
    highlightedIndex,
    instance
  } = data;
  const [x, y] = instance.polar2svg(radius, highlightedAngle);
  return /*#__PURE__*/_jsxs("g", {
    className: `${classes.axisHighlightRoot} ${deprecatedClasses.root}`,
    children: [/*#__PURE__*/_jsx("path", {
      d: `M ${center.cx} ${center.cy} L ${x} ${y}`,
      stroke: (theme.vars || theme).palette.text.primary,
      strokeWidth: 1,
      className: `${classes.axisHighlightLine} ${deprecatedClasses.line}`,
      pointerEvents: "none",
      strokeDasharray: "4 4"
    }), points.map((point, seriesIndex) => {
      const colorGetter = getSeriesColorFn(series[seriesIndex]);
      return /*#__PURE__*/_jsx("circle", _extends({
        fill: colorGetter({
          value: point.value,
          dataIndex: highlightedIndex
        }),
        cx: point.x,
        cy: point.y,
        className: `${classes.axisHighlightDot} ${deprecatedClasses.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.object
} : void 0;
export { RadarAxisHighlight };