@mui/x-charts/ChartsRadialAxisHighlight/ChartsRadiusAxisHighlight.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ChartsRadiusAxisHighlight;
var React = _interopRequireWildcard(require("react"));
var _useStore = require("../internals/store/useStore");
var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
var _ChartsRadialAxisHighlightPath = require("./ChartsRadialAxisHighlightPath");
var _getRingPath = require("../internals/getRingPath");
var _scaleGuards = require("../internals/scaleGuards");
var _jsxRuntime = require("react/jsx-runtime");
function polarToSvg(cx, cy, radius, angle) {
  return [cx + radius * Math.sin(angle), cy - radius * Math.cos(angle)];
}

/**
 * @ignore - internal component.
 */
function ChartsRadiusAxisHighlight(props) {
  const {
    type,
    classes
  } = props;
  const store = (0, _useStore.useStore)();
  const {
    cx,
    cy
  } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
  const {
    axis: radiusAxes,
    axisIds: radiusAxisIds
  } = store.use(_useChartPolarAxis.selectorChartRadiusAxis);
  const {
    axis: rotationAxes,
    axisIds: rotationAxisIds
  } = store.use(_useChartPolarAxis.selectorChartRotationAxis);
  const pointerRadius = store.use(_useChartPolarAxis.selectorChartsInteractionRadius);
  const radiusValue = store.use(_useChartPolarAxis.selectorChartsInteractionRadiusAxisValue);
  const radiusAxisId = radiusAxisIds[0];
  if (type === 'none' || radiusAxisId === undefined || pointerRadius === null) {
    return null;
  }
  const radiusAxis = radiusAxes[radiusAxisId];
  const radiusScale = radiusAxis.scale;
  const innerRadius = radiusScale.range()[0];
  const outerRadius = radiusScale.range()[1];
  if (pointerRadius < innerRadius || pointerRadius > outerRadius) {
    return null;
  }
  const rotationAxisId = rotationAxisIds[0];
  const rotationAxis = rotationAxisId !== undefined ? rotationAxes[rotationAxisId] : undefined;
  const startAngle = rotationAxis?.scale.range()[0] ?? 0;
  const endAngle = rotationAxis?.scale.range()[1] ?? 2 * Math.PI;
  const isFullCircle = rotationAxis?.isFullCircle ?? Math.abs(endAngle - startAngle) >= 2 * Math.PI;
  if (type === 'line') {
    if (isFullCircle) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlightPath.ChartsRadialAxisHighlightCircle, {
        cx: cx,
        cy: cy,
        r: pointerRadius,
        className: classes.root,
        ownerState: {
          axisHighlight: 'line'
        }
      });
    }
    const [startX, startY] = polarToSvg(cx, cy, pointerRadius, startAngle);
    const [endX, endY] = polarToSvg(cx, cy, pointerRadius, endAngle);
    const isLargeArc = Math.abs(endAngle - startAngle) >= Math.PI;
    const isDirectArc = endAngle > startAngle;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlightPath.ChartsRadialAxisHighlightPath, {
      d: `M ${startX} ${startY} A ${pointerRadius} ${pointerRadius} 0 ${isLargeArc ? 1 : 0} ${isDirectArc ? 1 : 0} ${endX} ${endY}`,
      className: classes.root,
      ownerState: {
        axisHighlight: 'line'
      }
    });
  }
  if (!(0, _scaleGuards.isOrdinalScale)(radiusAxis.scale)) {
    return null;
  }
  const radius = radiusAxis.scale(radiusValue);
  const step = radiusAxis.scale.step();
  const bandwidth = radiusAxis.scale.bandwidth();
  const bandInnerRadius = radius - (step - bandwidth) / 2;
  const bandOuterRadius = bandInnerRadius + step;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlightPath.ChartsRadialAxisHighlightPath, {
    d: (0, _getRingPath.getRingPath)({
      x: cx,
      y: cy
    }, bandInnerRadius, bandOuterRadius, isFullCircle ? undefined : {
      start: startAngle,
      end: endAngle
    }),
    className: classes.root,
    ownerState: {
      axisHighlight: 'band'
    }
  });
}