@mui/x-charts/ChartsRadiusAxis/ChartsRadiusAxis.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ChartsRadiusAxis = ChartsRadiusAxis;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _clsx = _interopRequireDefault(require("clsx"));
var _styles = require("@mui/material/styles");
var _useTicks = require("../hooks/useTicks");
var _useAxis = require("../hooks/useAxis");
var _ChartsProvider = require("../context/ChartsProvider");
var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
var _chartsRadiusAxisClasses = require("./chartsRadiusAxisClasses");
var _createGetLabelTextAnchors = require("./createGetLabelTextAnchors");
var _getLabelTransform = require("./getLabelTransform");
var _jsxRuntime = require("react/jsx-runtime");
/* Gap between a tick and its label. */const TICK_LABEL_GAP = 3;
const getLabelTextAnchors = (0, _createGetLabelTextAnchors.createGetLabelTextAnchors)(_getLabelTransform.getLabelTransform);

/**
 * Get the angle to use to display the radius axis.
 * @param position The position props
 * @param rotationAxis The default rotation axis
 * @returns the angle in radians to use.
 */
function getAxisAngleInRadians(position, rotationAxis) {
  if (position === 'start') {
    return rotationAxis?.scale.range()[0] ?? 0;
  }
  if (position === 'end') {
    return rotationAxis?.scale.range()[1] ?? 0;
  }
  if (typeof position === 'number') {
    return position * Math.PI / 180;
  }
  return 0;
}
function ChartsRadiusAxis(props) {
  const radiusAxis = (0, _useAxis.useRadiusAxis)(props.axisId);
  const settings = (0, _extends2.default)({}, radiusAxis, props);
  const {
    position = 'start',
    disableLine,
    disableTicks,
    tickLabelPosition: tickLabelPositionProp = 'auto',
    tickPosition = position === 'start' ? 'before' : 'after',
    tickSize = 6,
    className,
    classes: classesProp
  } = settings;
  let tickLabelPosition = tickLabelPositionProp;
  if (tickLabelPosition === 'auto') {
    tickLabelPosition = position === 'start' ? 'before' : 'after';
  }
  const isCentered = tickLabelPosition === 'center';
  const classes = (0, _chartsRadiusAxisClasses.useUtilityClasses)({
    classes: classesProp,
    isCentered
  });
  const theme = (0, _styles.useTheme)();
  const {
    store
  } = (0, _ChartsProvider.useChartsContext)();
  const {
    cx,
    cy
  } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
  const rotationAxis = (0, _useAxis.useRotationAxis)();
  const ticks = (0, _useTicks.useTicks)({
    scale: radiusAxis.scale,
    tickNumber: radiusAxis?.tickNumber ?? 5,
    tickInterval: radiusAxis?.tickInterval,
    tickSpacing: radiusAxis?.tickSpacing,
    valueFormatter: radiusAxis?.valueFormatter,
    direction: 'radius'
  });
  if (!radiusAxis || settings.position === 'none') {
    return null;
  }
  const angle = getAxisAngleInRadians(position, rotationAxis);
  // Convert "0 = up" convention to SVG math angle (0 = right, clockwise y-down).
  const dx = Math.sin(angle);
  const dy = -Math.cos(angle);
  // Perpendicular offset for tick marks (rotated 90° clockwise).
  const px = -dy;
  const py = dx;
  const [innerRadius, outerRadius] = radiusAxis.scale.range();
  const stroke = (theme.vars ?? theme).palette.text.primary;
  const tickDx = (tickPosition === 'after' ? 1 : -1) * px * tickSize;
  const tickDy = (tickPosition === 'after' ? 1 : -1) * py * tickSize;
  const tickLabelGap = isCentered ? 0 : TICK_LABEL_GAP;
  const tickLabelGapDx = (tickLabelPosition === 'after' ? 1 : -1) * px * tickLabelGap;
  const tickLabelGapDy = (tickLabelPosition === 'after' ? 1 : -1) * py * tickLabelGap;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
    className: (0, _clsx.default)(classes.root, className),
    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
      x1: cx + dx * innerRadius,
      y1: cy + dy * innerRadius,
      x2: cx + dx * outerRadius,
      y2: cy + dy * outerRadius,
      stroke: stroke,
      className: classes.line
    }), ticks.map(({
      offset: radius,
      labelOffset,
      formattedValue
    }, index) => {
      if (!formattedValue) {
        return null;
      }
      const tickX = cx + dx * radius;
      const tickY = cy + dy * radius;

      // Compute the label position.
      let labelX = cx + dx * (radius + labelOffset);
      let labelY = cy + dy * (radius + labelOffset);
      if (tickLabelGap !== 0) {
        labelX += tickLabelGapDx;
        labelY += tickLabelGapDy;
      }
      if (!isCentered && tickLabelPosition === tickPosition && !disableTicks) {
        // Add the size of the tick if they are in the same direction.
        labelX += tickDx;
        labelY += tickDy;
      }
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
        className: classes.tickContainer,
        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
          x1: tickX,
          y1: tickY,
          x2: tickX + tickDx,
          y2: tickY + tickDy,
          stroke: stroke,
          className: classes.tick
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({
          x: labelX,
          y: labelY,
          fill: stroke,
          fontSize: 12,
          className: classes.tickLabel,
          pointerEvents: "none"
        }, getLabelTextAnchors(dx, dy, tickLabelPosition), {
          children: formattedValue
        }))]
      }, index);
    })]
  });
}