@mui/x-charts/esm/PieChart/FocusedPieArc.js

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 * as React from 'react';
import clsx from 'clsx';
import { useTheme } from '@mui/material/styles';
import { useFocusedItem } from "../hooks/useFocusedItem.js";
import { usePieSeriesContext, usePieSeriesLayout } from "../hooks/usePieSeries.js";
import { PieArc, pieArcClasses } from "./PieArc.js";
import { useUtilityClasses } from "./pieClasses.js";
import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
import { getModifiedArcProperties } from "./dataTransform/getModifiedArcProperties.js";
import { jsx as _jsx } from "react/jsx-runtime";
export function FocusedPieArc(props) {
  const theme = useTheme();
  const focusedItem = useFocusedItem();
  const pieSeriesLayout = usePieSeriesLayout();
  const {
    isHighlighted,
    isFaded
  } = useItemHighlighted(focusedItem);
  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,
    id: series.id,
    className: clsx(classes.focusIndicator, pieArcClasses.focusIndicator),
    dataIndex: focusedItem.dataIndex,
    isFaded: false,
    isHighlighted: false,
    isFocused: false,
    strokeWidth: 3
  }, arcSizes, props));
}