@mui/x-charts/LineChart/FocusedLineMark.js

The community edition of MUI X Charts components.

"use strict";
'use client';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FocusedLineMark = FocusedLineMark;
var _styles = require("@mui/material/styles");
var _useFocusedItem = require("../hooks/useFocusedItem");
var _hooks = require("../hooks");
var _jsxRuntime = require("react/jsx-runtime");
const RADIUS = 6;
function FocusedLineMark() {
  const theme = (0, _styles.useTheme)();
  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
  const lineSeries = (0, _hooks.useLineSeriesContext)();
  const {
    xAxis,
    xAxisIds
  } = (0, _hooks.useXAxes)();
  const {
    yAxis,
    yAxisIds
  } = (0, _hooks.useYAxes)();
  if (focusedItem === null || focusedItem.type !== 'line' || !lineSeries) {
    return null;
  }
  const series = lineSeries.series[focusedItem.seriesId];
  if (series.data[focusedItem.dataIndex] == null) {
    // Handle missing data
    return null;
  }
  const xAxisId = series.xAxisId ?? xAxisIds[0];
  const yAxisId = series.yAxisId ?? yAxisIds[0];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
    fill: "none",
    stroke: (theme.vars ?? theme).palette.text.primary,
    strokeWidth: 2,
    x: xAxis[xAxisId].scale(xAxis[xAxisId].data[focusedItem.dataIndex]) - RADIUS,
    y: yAxis[yAxisId].scale(series.visibleStackedData[focusedItem.dataIndex][1]) - RADIUS,
    width: 2 * RADIUS,
    height: 2 * RADIUS,
    rx: 3,
    ry: 3
  });
}