@mui/x-charts/ChartsRotationAxis/ChartsRotationAxis.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.ChartsRotationAxis = ChartsRotationAxis;
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 _chartsRotationAxisClasses = require("./chartsRotationAxisClasses");
var _createGetLabelTextAnchors = require("../ChartsRadiusAxis/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);
function ChartsRotationAxis(props) {
  const rotationAxis = (0, _useAxis.useRotationAxis)(props.axisId);
  const settings = (0, _extends2.default)({}, rotationAxis, props);
  const {
    disableLine,
    disableTicks,
    position = 'outside',
    tickLabelPosition = position === 'outside' ? 'after' : 'before',
    tickPosition = position === 'outside' ? 'after' : 'before',
    tickSize = 6,
    className,
    classes: classesProp
  } = settings;
  const classes = (0, _chartsRotationAxisClasses.useUtilityClasses)({
    classes: classesProp
  });
  const theme = (0, _styles.useTheme)();
  const {
    store
  } = (0, _ChartsProvider.useChartsContext)();
  const {
    cx,
    cy
  } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
  const radiusAxis = (0, _useAxis.useRadiusAxis)();
  const ticks = (0, _useTicks.useTicks)({
    scale: rotationAxis.scale,
    tickNumber: rotationAxis?.tickNumber ?? 5,
    tickInterval: rotationAxis?.tickInterval,
    tickSpacing: rotationAxis?.tickSpacing,
    valueFormatter: rotationAxis?.valueFormatter,
    direction: 'rotation'
  });
  if (!rotationAxis || !radiusAxis || settings.position === 'none') {
    return null;
  }
  const radius = radiusAxis.scale.range()[position === 'inside' ? 0 : 1];
  const [startAngle, endAngle] = rotationAxis.scale.range();
  const stroke = (theme.vars ?? theme).palette.text.primary;

  // Convert "0 = up" convention to SVG coordinates (y-down).
  const angleToPoint = (angle, r) => ({
    x: cx + Math.sin(angle) * r,
    y: cy - Math.cos(angle) * r
  });
  const sweepFlag = endAngle - startAngle >= 0 ? 1 : 0;
  const start = angleToPoint(startAngle, radius);
  const end = angleToPoint(endAngle, radius);
  const largeArcFlag = Math.abs(endAngle - startAngle) > Math.PI ? 1 : 0;
  const arcPath = `M ${start.x} ${start.y} ` + `A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.x} ${end.y}`;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
    className: (0, _clsx.default)(classes.root, className),
    children: [!disableLine && (rotationAxis.isFullCircle ?
    /*#__PURE__*/
    // Use a circle to avoid degenerated arcs when start and end angles are the same or very close.
    (0, _jsxRuntime.jsx)("circle", {
      cx: cx,
      cy: cy,
      r: radius,
      stroke: stroke,
      fill: "none",
      className: classes.line
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
      d: arcPath,
      stroke: stroke,
      fill: "none",
      className: classes.line
    })), ticks.map(({
      offset: angle,
      labelOffset,
      formattedValue
    }, index) => {
      if (!formattedValue) {
        return null;
      }

      // Convert "0 = up" convention to SVG math angle (0 = right, clockwise y-down).
      const dx = Math.sin(angle);
      const dy = -Math.cos(angle);
      const labelDx = labelOffset === 0 ? dx : Math.sin(angle + labelOffset);
      const labelDy = labelOffset === 0 ? dy : -Math.cos(angle + labelOffset);
      const tx = cx + dx * radius;
      const ty = cy + dy * radius;
      const tickDx = (tickPosition === 'after' ? 1 : -1) * dx * tickSize;
      const tickDy = (tickPosition === 'after' ? 1 : -1) * dy * tickSize;
      let tickLabelRadius = radius + (tickLabelPosition === 'after' ? 1 : -1) * TICK_LABEL_GAP;
      if (tickLabelPosition === tickPosition && !disableTicks) {
        // Add the size of the tick if they are in the same direction.
        tickLabelRadius += tickSize;
      }

      // Compute the label position.
      const labelX = cx + labelDx * tickLabelRadius;
      const labelY = cy + labelDy * tickLabelRadius;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
        className: classes.tickContainer,
        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
          x1: tx,
          y1: ty,
          x2: tx + tickDx,
          y2: ty + 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(labelDx, labelDy, tickLabelPosition), {
          children: formattedValue
        }))]
      }, index);
    })]
  });
}