@mui/x-charts/PieChart/FocusedPieArc.mjs

The community edition of MUI X Charts components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["arcLabelRadius"];
import { useTheme } from '@mui/material/styles';
import { useFocusedItem } from "../hooks/useFocusedItem.mjs";
import { usePieSeriesContext, usePieSeriesLayout } from "../hooks/usePieSeries.mjs";
import { PieArc } from "./PieArc.mjs";
import { useUtilityClasses } from "./pieClasses.mjs";
import { useItemHighlightState } from "../hooks/useItemHighlightState.mjs";
import { getModifiedArcProperties } from "./dataTransform/getModifiedArcProperties.mjs";
import { jsx as _jsx } from "react/jsx-runtime";
export function FocusedPieArc(props) {
  const theme = useTheme();
  const focusedItem = useFocusedItem();
  const pieSeriesLayout = usePieSeriesLayout();
  const highlightState = useItemHighlightState(focusedItem);
  const isHighlighted = highlightState === 'highlighted';
  const isFaded = highlightState === 'faded';
  const pieSeries = usePieSeriesContext();
  const classes = useUtilityClasses();
  if (focusedItem === null || focusedItem.type !== 'pie' || !pieSeries) {
    return null;
  }
  const series = pieSeries?.series[focusedItem.seriesId];
  const {
    center,
    radius
  } = pieSeriesLayout[focusedItem.seriesId];
  if (!series || !center || !radius) {
    return null;
  }
  const item = series.data[focusedItem.dataIndex];
  const _getModifiedArcProper = getModifiedArcProperties(series, pieSeriesLayout[focusedItem.seriesId], isHighlighted, isFaded),
    arcSizes = _objectWithoutPropertiesLoose(_getModifiedArcProper, _excluded);
  return /*#__PURE__*/_jsx(PieArc, _extends({
    transform: `translate(${pieSeriesLayout[series.id].center.x}, ${pieSeriesLayout[series.id].center.y})`,
    startAngle: item.startAngle,
    endAngle: item.endAngle,
    color: "transparent",
    pointerEvents: "none",
    skipInteraction: true,
    skipAnimation: true,
    stroke: (theme.vars ?? theme).palette.text.primary,
    seriesId: series.id,
    className: classes.focusIndicator,
    dataIndex: focusedItem.dataIndex,
    isFaded: false,
    isHighlighted: false,
    isFocused: false,
    strokeWidth: 3
  }, arcSizes, props));
}