@mui/x-charts/esm/RadarChart/FocusedRadarMark.js

The community edition of MUI X Charts components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { useTheme } from '@mui/material/styles';
import { useFocusedItem } from "../hooks/useFocusedItem.js";
import { useRadarSeriesData } from "./RadarSeriesPlot/useRadarSeriesData.js";
import { jsx as _jsx } from "react/jsx-runtime";
export function FocusedRadarMark(props) {
  const theme = useTheme();
  const focusedItem = useFocusedItem();
  const seriesCoordinates = useRadarSeriesData(focusedItem?.seriesId);
  if (!focusedItem || focusedItem.type !== 'radar' || seriesCoordinates.length === 0) {
    return null;
  }
  const point = seriesCoordinates[0].points[focusedItem.dataIndex];
  return /*#__PURE__*/_jsx("rect", _extends({
    fill: "none",
    stroke: (theme.vars ?? theme).palette.text.primary,
    strokeWidth: 2,
    x: point.x - 6,
    y: point.y - 6,
    width: 2 * 6,
    height: 2 * 6,
    rx: 3,
    ry: 3
  }, props));
}