@mui/x-charts/ChartsRadialAxisHighlight/ChartsRotationAxisHighlight.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 = ChartsRotationAxisHighlight;
var React = _interopRequireWildcard(require("react"));
var _scaleGuards = require("../internals/scaleGuards");
var _useStore = require("../internals/store/useStore");
var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
var _ChartsRadialAxisHighlightPath = require("./ChartsRadialAxisHighlightPath");
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 ChartsRotationAxisHighlight(props) {
  const {
    type,
    classes
  } = props;
  const store = (0, _useStore.useStore)();
  const {
    cx,
    cy
  } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
  const {
    axis: rotationAxes,
    axisIds: rotationAxisIds
  } = store.use(_useChartPolarAxis.selectorChartRotationAxis);
  const {
    axis: radiusAxes,
    axisIds: radiusAxisIds
  } = store.use(_useChartPolarAxis.selectorChartRadiusAxis);
  const rotationIndex = store.use(_useChartPolarInteraction.selectorChartsInteractionRotationAxisIndex);
  const rotationValue = store.use(_useChartPolarInteraction.selectorChartsInteractionRotationAxisValue);
  if (rotationIndex === null || rotationIndex === -1) {
    return null;
  }
  const rotationAxisId = rotationAxisIds[0];
  const radiusAxisId = radiusAxisIds[0];
  if (rotationAxisId === undefined || radiusAxisId === undefined) {
    return null;
  }
  const rotationAxis = rotationAxes[rotationAxisId];
  const radiusAxis = radiusAxes[radiusAxisId];
  const rotationScale = rotationAxis.scale;
  const radiusScale = radiusAxis.scale;
  const innerRadius = radiusScale.range()[0];
  const outerRadius = radiusScale.range()[1];
  const angle = rotationScale(rotationValue);
  if (angle === undefined) {
    return null;
  }
  if (type === 'band') {
    if (!(0, _scaleGuards.isOrdinalScale)(rotationScale)) {
      return null;
    }
    const step = rotationScale.step();
    const bandwidth = rotationScale.bandwidth();
    // For point scale: bandwidth = 0, the band is centered on the value.
    // For band scale: scale(value) returns the band start, the band size is bandwidth.
    const startAngle = angle - (step - bandwidth) / 2;
    const endAngle = startAngle + step;
    const [x1Outer, y1Outer] = polarToSvg(cx, cy, outerRadius, startAngle);
    const [x2Outer, y2Outer] = polarToSvg(cx, cy, outerRadius, endAngle);
    const [x1Inner, y1Inner] = polarToSvg(cx, cy, innerRadius, startAngle);
    const [x2Inner, y2Inner] = polarToSvg(cx, cy, innerRadius, endAngle);
    const isLargeArc = Math.abs(endAngle - startAngle) >= Math.PI;
    const innerArc = innerRadius > 0 ? `L ${x2Inner} ${y2Inner} A ${innerRadius} ${innerRadius} 0 ${isLargeArc ? 1 : 0} 0 ${x1Inner} ${y1Inner}` : `L ${cx} ${cy}`;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlightPath.ChartsRadialAxisHighlightPath, {
      d: `M ${x1Outer} ${y1Outer} A ${outerRadius} ${outerRadius} 0 ${isLargeArc ? 1 : 0} 1 ${x2Outer} ${y2Outer} ${innerArc} Z`,
      className: classes.root,
      ownerState: {
        axisHighlight: 'band'
      }
    });
  }
  if (type === 'line') {
    const lineAngle = (0, _scaleGuards.isOrdinalScale)(rotationScale) ? angle + rotationScale.bandwidth() / 2 : angle;
    const [x1, y1] = polarToSvg(cx, cy, innerRadius, lineAngle);
    const [x2, y2] = polarToSvg(cx, cy, outerRadius, lineAngle);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlightPath.ChartsRadialAxisHighlightPath, {
      d: `M ${x1} ${y1} L ${x2} ${y2}`,
      className: classes.root,
      ownerState: {
        axisHighlight: 'line'
      }
    });
  }
  return null;
}