@mui/x-charts/BarChart/FocusedBar.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FocusedBar = FocusedBar;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _styles = require("@mui/material/styles");
var _useFocusedItem = require("../hooks/useFocusedItem");
var _hooks = require("../hooks");
var _getBarDimensions = require("../internals/getBarDimensions");
var _jsxRuntime = require("react/jsx-runtime");
function FocusedBar(props) {
  const theme = (0, _styles.useTheme)();
  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
  const barSeries = (0, _hooks.useBarSeriesContext)();
  const {
    xAxis,
    xAxisIds
  } = (0, _hooks.useXAxes)();
  const {
    yAxis,
    yAxisIds
  } = (0, _hooks.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 = (0, _getBarDimensions.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__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
    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));
}