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

The community edition of MUI X Charts components.

'use client';

import * as React from 'react';
import { useSvgRef } from "../../hooks/index.js";
import { useUtilityClasses } from "../barClasses.js";
import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesHighlightedItem, selectorChartSeriesUnfadedItem } from "../../internals/plugins/featurePlugins/useChartHighlight/index.js";
import { useRegisterItemClickHandlers } from "../useRegisterItemClickHandlers.js";
import { createPath, useCreateBarPaths } from "./useCreateBarPaths.js";
import { BarGroup } from "./BarGroup.js";
import { useRegisterPointerInteractions } from "../../internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js";
import { selectorBarItemAtPosition } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function BatchBarPlot({
  completedData,
  borderRadius = 0,
  onItemClick,
  skipAnimation = false
}) {
  const prevCursorRef = React.useRef(null);
  const svgRef = 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;
  useRegisterPointerInteractions(selectorBarItemAtPosition, onItemEnter, onItemLeave);
  useRegisterItemClickHandlers(onItemClick);
  return /*#__PURE__*/_jsx(React.Fragment, {
    children: completedData.map(series => /*#__PURE__*/_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 = useUtilityClasses();
  const {
    store
  } = useChartContext();
  const isSeriesHighlighted = store.use(selectorChartIsSeriesHighlighted, series.seriesId);
  const isSeriesFaded = store.use(selectorChartIsSeriesFaded, series.seriesId);
  return /*#__PURE__*/_jsxs(React.Fragment, {
    children: [/*#__PURE__*/_jsx(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__*/_jsx(BatchBarSeriesPlot, {
        processedSeries: series,
        borderRadius: borderRadius
      })
    }), /*#__PURE__*/_jsx(MemoFadedHighlightedBars, {
      processedSeries: series,
      borderRadius: borderRadius
    })]
  });
}
function BatchBarSeriesPlot({
  processedSeries,
  borderRadius
}) {
  const paths = useCreateBarPaths(processedSeries, borderRadius);
  const children = [];
  let i = 0;
  for (const [fill, dArray] of paths.entries()) {
    for (const d of dArray) {
      children.push(/*#__PURE__*/_jsx("path", {
        fill: fill,
        d: d
      }, i));
      i += 1;
    }
  }
  return /*#__PURE__*/_jsx(React.Fragment, {
    children: children
  });
}
function FadedHighlightedBars({
  processedSeries,
  borderRadius
}) {
  const {
    store
  } = useChartContext();
  const seriesHighlightedDataIndex = store.use(selectorChartSeriesHighlightedItem, processedSeries.seriesId);
  const seriesUnfadedDataIndex = store.use(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__*/_jsx("path", {
      fill: seriesHighlightedItem.color,
      filter: "brightness(120%)",
      "data-highlighted": true,
      d: createPath(seriesHighlightedItem, borderRadius)
    }, `highlighted-${processedSeries.seriesId}`));
  }
  if (seriesUnfadedItem != null) {
    siblings.push(/*#__PURE__*/_jsx("path", {
      fill: seriesUnfadedItem.color,
      d: createPath(seriesUnfadedItem, borderRadius)
    }, `unfaded-${seriesUnfadedItem.seriesId}`));
  }
  return /*#__PURE__*/_jsx(React.Fragment, {
    children: siblings
  });
}