@mui/x-charts/ScatterChart/FocusedScatterMark.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 = ["className"];
import * as React from 'react';
import clsx from 'clsx';
import { useTheme } from '@mui/material/styles';
import { useFocusedItem } from "../hooks/useFocusedItem.mjs";
import { useUtilityClasses } from "./scatterClasses.mjs";
import { useScatterItemPosition } from "./useScatterItemPosition.mjs";
import { jsx as _jsx } from "react/jsx-runtime";
export function FocusedScatterMark(_ref) {
  let {
      className
    } = _ref,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  const theme = useTheme();
  const focusedItem = useFocusedItem();
  const classes = useUtilityClasses();
  const resolved = useScatterItemPosition(focusedItem?.type === 'scatter' ? focusedItem : null);
  if (!resolved) {
    return null;
  }
  const {
    cx,
    cy,
    series
  } = resolved;
  const size = series.markerSize + 3;
  return /*#__PURE__*/_jsx("rect", _extends({
    className: clsx(classes.focusedMark, className),
    fill: "none",
    stroke: (theme.vars ?? theme).palette.text.primary,
    strokeWidth: 2,
    x: cx - size,
    y: cy - size,
    width: 2 * size,
    height: 2 * size,
    rx: 3,
    ry: 3
  }, props));
}