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

The community edition of MUI X Charts components.

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import PropTypes from 'prop-types';
import { useTheme } from '@mui/material/styles';
import { useRadarAxis } from "./useRadarAxis.js";
import { getLabelAttributes } from "./RadarAxis.utils.js";
import { useUtilityClasses } from "./radarAxisClasses.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function RadarAxis(props) {
  const {
    labelOrientation = 'horizontal',
    textAnchor,
    dominantBaseline
  } = props;
  const classes = useUtilityClasses(props.classes);
  const theme = useTheme();
  const data = useRadarAxis(props);
  if (data === null) {
    return null;
  }
  const {
    center,
    angle,
    labels
  } = data;
  return /*#__PURE__*/_jsxs("g", {
    className: classes.root,
    children: [/*#__PURE__*/_jsx("path", {
      d: `M ${center.x} ${center.y} L ${labels[labels.length - 1].x} ${labels[labels.length - 1].y}`,
      stroke: (theme.vars ?? theme).palette.text.primary,
      strokeOpacity: 0.3,
      className: classes.line
    }), labels.map(({
      x,
      y,
      formattedValue
    }) => /*#__PURE__*/_jsx("text", _extends({
      fontSize: 12,
      fill: (theme.vars ?? theme).palette.text.primary,
      stroke: "none",
      className: classes.label
    }, getLabelAttributes({
      labelOrientation,
      x,
      y,
      angle,
      textAnchor,
      dominantBaseline
    }), {
      children: formattedValue
    }), formattedValue))]
  });
}
process.env.NODE_ENV !== "production" ? RadarAxis.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  /**
   * The absolute rotation angle of the metrics (in degree)
   * If not defined the metric angle will be used.
   */
  angle: PropTypes.number,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: PropTypes.object,
  /**
   * The number of divisions with label.
   * @default 1
   */
  divisions: PropTypes.number,
  /**
   * The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).
   */
  dominantBaseline: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  /**
   * Defines how label align with the axis.
   * - 'horizontal': labels stay horizontal and their placement change with the axis angle.
   * - 'rotated': labels are rotated 90deg relatively to their axis.
   * @default 'horizontal'
   */
  labelOrientation: PropTypes.oneOf(['horizontal', 'rotated']),
  /**
   * The metric to get.
   * If `undefined`, the hook returns `null`
   */
  metric: PropTypes.string,
  /**
   * The labels text anchor or a function returning the text anchor for a given axis angle (in degree).
   */
  textAnchor: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
} : void 0;
export { RadarAxis };