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

The community edition of MUI X Charts components.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["completedData", "masksData", "borderRadius", "onItemClick", "skipAnimation"];
import * as React from 'react';
import { BarElement } from "./BarElement.js";
import { useUtilityClasses } from "./barClasses.js";
import { BarClipPath } from "./BarClipPath.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function IndividualBarPlot(_ref) {
  let {
      completedData,
      masksData,
      borderRadius,
      onItemClick,
      skipAnimation
    } = _ref,
    other = _objectWithoutPropertiesLoose(_ref, _excluded);
  const classes = useUtilityClasses();
  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
  return /*#__PURE__*/_jsxs(React.Fragment, {
    children: [!withoutBorderRadius && masksData.map(({
      id,
      x,
      y,
      xOrigin,
      yOrigin,
      width,
      height,
      hasPositive,
      hasNegative,
      layout
    }) => {
      return /*#__PURE__*/_jsx(BarClipPath, {
        maskId: id,
        borderRadius: borderRadius,
        hasNegative: hasNegative,
        hasPositive: hasPositive,
        layout: layout,
        x: x,
        y: y,
        xOrigin: xOrigin,
        yOrigin: yOrigin,
        width: width,
        height: height,
        skipAnimation: skipAnimation ?? false
      }, id);
    }), completedData.map(({
      seriesId,
      layout,
      xOrigin,
      yOrigin,
      data
    }) => {
      return /*#__PURE__*/_jsx("g", {
        "data-series": seriesId,
        className: classes.series,
        children: data.map(({
          dataIndex,
          color,
          maskId,
          x,
          y,
          width,
          height
        }) => {
          const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
            id: seriesId,
            dataIndex: dataIndex,
            color: color,
            skipAnimation: skipAnimation ?? false,
            layout: layout ?? 'vertical',
            x: x,
            xOrigin: xOrigin,
            y: y,
            yOrigin: yOrigin,
            width: width,
            height: height
          }, other, {
            onClick: onItemClick && (event => {
              onItemClick(event, {
                type: 'bar',
                seriesId,
                dataIndex
              });
            })
          }), dataIndex);
          if (withoutBorderRadius) {
            return barElement;
          }
          return /*#__PURE__*/_jsx("g", {
            clipPath: `url(#${maskId})`,
            children: barElement
          }, dataIndex);
        })
      }, seriesId);
    })]
  });
}