@mui/x-charts/esm/BarChart/FocusedBar.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 { useBarSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
import { getBarDimensions } from "../internals/getBarDimensions.js";
import { jsx as _jsx } from "react/jsx-runtime";
export function FocusedBar(props) {
  const theme = useTheme();
  const focusedItem = useFocusedItem();
  const barSeries = useBarSeriesContext();
  const {
    xAxis,
    xAxisIds
  } = useXAxes();
  const {
    yAxis,
    yAxisIds
  } = useYAxes();
  if (focusedItem === null || focusedItem.type !== 'bar' || !barSeries) {
    return null;
  }
  const series = barSeries.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];
  const xAxisConfig = xAxis[xAxisId];
  const yAxisConfig = yAxis[yAxisId];
  const verticalLayout = barSeries.series[focusedItem.seriesId].layout === 'vertical';
  const groupIndex = barSeries.stackingGroups.findIndex(group => group.ids.includes(focusedItem.seriesId));
  const barDimensions = getBarDimensions({
    verticalLayout,
    xAxisConfig,
    yAxisConfig,
    series,
    dataIndex: focusedItem.dataIndex,
    numberOfGroups: barSeries.stackingGroups.length,
    groupIndex
  });
  if (barDimensions === null) {
    return null;
  }
  const {
    x,
    y,
    height,
    width
  } = barDimensions;
  return /*#__PURE__*/_jsx("rect", _extends({
    fill: "none",
    stroke: (theme.vars ?? theme).palette.text.primary,
    strokeWidth: 2,
    x: x - 3,
    y: y - 3,
    width: width + 6,
    height: height + 6,
    rx: 3,
    ry: 3
  }, props));
}