@mui/x-charts/ChartsRadialGrid/ChartsRotationGrid.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.ChartsRotationGrid = ChartsRotationGrid;
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 _jsxRuntime = require("react/jsx-runtime");
/**
 * @ignore - internal component.
 */
function ChartsRotationGrid(props) {
  const {
    store
  } = (0, _ChartsProvider.useChartsContext)();
  const {
    axis,
    innerRadius,
    outerRadius,
    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: 'rotation'
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
    children: ticks.map(({
      value,
      offset
    }) => {
      const angle = offset - Math.PI / 2;
      const dx = Math.cos(angle);
      const dy = Math.sin(angle);
      const x1 = cx + innerRadius * dx;
      const y1 = cy + innerRadius * dy;
      const x2 = cx + outerRadius * dx;
      const y2 = cy + outerRadius * dy;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
        x1: x1,
        y1: y1,
        x2: x2,
        y2: y2,
        className: classes.rotationLine
      }, `rotation-${value?.getTime?.() ?? value}`);
    })
  });
}