@mui/x-charts/ChartsRadialGrid/ChartsRadiusGrid.js

The community edition of MUI X Charts components.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ChartsRadiusGrid = ChartsRadiusGrid;
var React = _interopRequireWildcard(require("react"));
var _useTicks = require("../hooks/useTicks");
var _styledComponents = require("./styledComponents");
var _ChartsProvider = require("../context/ChartsProvider");
var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
var _epsilon = require("../utils/epsilon");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * @ignore - internal component.
 */
function ChartsRadiusGrid(props) {
  const {
    store
  } = (0, _ChartsProvider.useChartsContext)();
  const {
    axis,
    startAngle,
    endAngle,
    classes
  } = props;
  const {
    cx,
    cy
  } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
  const {
    scale,
    tickNumber,
    tickInterval,
    tickSpacing
  } = axis;
  const ticks = (0, _useTicks.useTicks)({
    scale,
    tickNumber,
    tickInterval,
    tickSpacing,
    direction: 'radius'
  });
  const isFullCircle = Math.abs(endAngle - startAngle) >= 2 * Math.PI - _epsilon.EPSILON;
  if (isFullCircle) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
      children: ticks.map(({
        offset: radius
      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridCircle, {
        cx: cx,
        cy: cy,
        r: radius,
        className: classes.radiusLine
      }, `radius-${radius}`))
    });
  }
  const startDx = Math.cos(startAngle - Math.PI / 2);
  const startDy = Math.sin(startAngle - Math.PI / 2);
  const endDx = Math.cos(endAngle - Math.PI / 2);
  const endDy = Math.sin(endAngle - Math.PI / 2);
  const isLargeArc = Math.abs(endAngle - startAngle) >= Math.PI;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
    children: ticks.map(({
      offset: radius
    }) => {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridPath, {
        d: `M${cx + startDx * radius},${cy + startDy * radius} A ${radius} ${radius} 0 ${isLargeArc ? 1 : 0} 1 ${cx + endDx * radius},${cy + endDy * radius}`,
        className: classes.radiusLine
      }, `radius-${radius}`);
    })
  });
}