@mui/x-charts/ScatterChart/FocusedScatterMark.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FocusedScatterMark = FocusedScatterMark;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _styles = require("@mui/material/styles");
var _useFocusedItem = require("../hooks/useFocusedItem");
var _hooks = require("../hooks");
var _scatterClasses = require("./scatterClasses");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["className"];
function FocusedScatterMark(_ref) {
  let {
      className
    } = _ref,
    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
  const theme = (0, _styles.useTheme)();
  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
  const scatterSeries = (0, _hooks.useScatterSeriesContext)();
  const {
    xAxis,
    xAxisIds
  } = (0, _hooks.useXAxes)();
  const {
    yAxis,
    yAxisIds
  } = (0, _hooks.useYAxes)();
  const classes = (0, _scatterClasses.useUtilityClasses)();
  if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
    return null;
  }
  const series = scatterSeries?.series[focusedItem.seriesId];
  const xAxisId = series.xAxisId ?? xAxisIds[0];
  const yAxisId = series.yAxisId ?? yAxisIds[0];
  const getXPosition = (0, _hooks.getValueToPositionMapper)(xAxis[xAxisId].scale);
  const getYPosition = (0, _hooks.getValueToPositionMapper)(yAxis[yAxisId].scale);
  const scatterPoint = series.data[focusedItem.dataIndex];
  const x = getXPosition(scatterPoint.x);
  const y = getYPosition(scatterPoint.y);
  const size = series.markerSize + 3;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
    className: (0, _clsx.default)(classes.focusedMark, className),
    fill: "none",
    stroke: (theme.vars ?? theme).palette.text.primary,
    strokeWidth: 2,
    x: x - size,
    y: y - size,
    width: 2 * size,
    height: 2 * size,
    rx: 3,
    ry: 3
  }, props));
}