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

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BatchBarPlot = BatchBarPlot;
var React = _interopRequireWildcard(require("react"));
var _hooks = require("../../hooks");
var _barClasses = require("../barClasses");
var _useChartContext = require("../../context/ChartProvider/useChartContext");
var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight");
var _useRegisterItemClickHandlers = require("../useRegisterItemClickHandlers");
var _useCreateBarPaths = require("./useCreateBarPaths");
var _BarGroup = require("./BarGroup");
var _useRegisterPointerInteractions = require("../../internals/plugins/featurePlugins/shared/useRegisterPointerInteractions");
var _useChartCartesianAxisPosition = require("../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors");
var _jsxRuntime = require("react/jsx-runtime");
function BatchBarPlot({
  completedData,
  borderRadius = 0,
  onItemClick,
  skipAnimation = false
}) {
  const prevCursorRef = React.useRef(null);
  const svgRef = (0, _hooks.useSvgRef)();
  const onItemEnter = onItemClick ? () => {
    const svg = svgRef.current;
    if (!svg) {
      return;
    }
    if (prevCursorRef.current == null) {
      prevCursorRef.current = svg.style.cursor;
      // eslint-disable-next-line react-compiler/react-compiler
      svg.style.cursor = 'pointer';
    }
  } : undefined;
  const onItemLeave = onItemClick ? () => {
    const svg = svgRef.current;
    if (!svg) {
      return;
    }
    if (prevCursorRef.current != null) {
      svg.style.cursor = prevCursorRef.current;
      prevCursorRef.current = null;
    }
  } : undefined;
  (0, _useRegisterPointerInteractions.useRegisterPointerInteractions)(_useChartCartesianAxisPosition.selectorBarItemAtPosition, onItemEnter, onItemLeave);
  (0, _useRegisterItemClickHandlers.useRegisterItemClickHandlers)(onItemClick);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
    children: completedData.map(series => /*#__PURE__*/(0, _jsxRuntime.jsx)(SeriesBatchPlot, {
      series: series,
      borderRadius: borderRadius,
      skipAnimation: skipAnimation
    }, series.seriesId))
  });
}
const MemoFadedHighlightedBars = /*#__PURE__*/React.memo(FadedHighlightedBars);
if (process.env.NODE_ENV !== "production") MemoFadedHighlightedBars.displayName = "MemoFadedHighlightedBars";
function SeriesBatchPlot({
  series,
  borderRadius,
  skipAnimation
}) {
  const classes = (0, _barClasses.useUtilityClasses)();
  const {
    store
  } = (0, _useChartContext.useChartContext)();
  const isSeriesHighlighted = store.use(_useChartHighlight.selectorChartIsSeriesHighlighted, series.seriesId);
  const isSeriesFaded = store.use(_useChartHighlight.selectorChartIsSeriesFaded, series.seriesId);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarGroup.BarGroup, {
      className: classes.series,
      "data-series": series.seriesId,
      layout: series.layout,
      xOrigin: series.xOrigin,
      yOrigin: series.yOrigin,
      skipAnimation: skipAnimation,
      "data-faded": isSeriesFaded || undefined,
      "data-highlighted": isSeriesHighlighted || undefined,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BatchBarSeriesPlot, {
        processedSeries: series,
        borderRadius: borderRadius
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MemoFadedHighlightedBars, {
      processedSeries: series,
      borderRadius: borderRadius
    })]
  });
}
function BatchBarSeriesPlot({
  processedSeries,
  borderRadius
}) {
  const paths = (0, _useCreateBarPaths.useCreateBarPaths)(processedSeries, borderRadius);
  const children = [];
  let i = 0;
  for (const [fill, dArray] of paths.entries()) {
    for (const d of dArray) {
      children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
        fill: fill,
        d: d
      }, i));
      i += 1;
    }
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
    children: children
  });
}
function FadedHighlightedBars({
  processedSeries,
  borderRadius
}) {
  const {
    store
  } = (0, _useChartContext.useChartContext)();
  const seriesHighlightedDataIndex = store.use(_useChartHighlight.selectorChartSeriesHighlightedItem, processedSeries.seriesId);
  const seriesUnfadedDataIndex = store.use(_useChartHighlight.selectorChartSeriesUnfadedItem, processedSeries.seriesId);
  const seriesHighlightedItem = seriesHighlightedDataIndex != null ? processedSeries.data.find(v => v.dataIndex === seriesHighlightedDataIndex) || null : null;
  const seriesUnfadedItem = seriesUnfadedDataIndex != null ? processedSeries.data.find(v => v.dataIndex === seriesUnfadedDataIndex) || null : null;
  const siblings = [];
  if (seriesHighlightedItem != null) {
    siblings.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
      fill: seriesHighlightedItem.color,
      filter: "brightness(120%)",
      "data-highlighted": true,
      d: (0, _useCreateBarPaths.createPath)(seriesHighlightedItem, borderRadius)
    }, `highlighted-${processedSeries.seriesId}`));
  }
  if (seriesUnfadedItem != null) {
    siblings.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
      fill: seriesUnfadedItem.color,
      d: (0, _useCreateBarPaths.createPath)(seriesUnfadedItem, borderRadius)
    }, `unfaded-${seriesUnfadedItem.seriesId}`));
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
    children: siblings
  });
}