@mui/x-charts/esm/BarChart/BatchBarPlot/BarGroup.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 = ["skipAnimation", "layout", "xOrigin", "yOrigin"],
  _excluded2 = ["children", "layout", "xOrigin", "yOrigin"];
import { styled } from '@mui/material/styles';
import * as React from 'react';
import useId from '@mui/utils/useId';
import { useStore } from "../../internals/store/useStore.js";
import { selectorChartDrawingArea } from "../../internals/plugins/corePlugins/useChartDimensions/index.js";
import { ANIMATION_DURATION_MS } from "../../internals/animation/animation.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const PathGroup = styled('g')({
  '&[data-faded="true"]': {
    opacity: 0.3
  },
  '& path': {
    /* The browser must do hit testing to know which element a pointer is interacting with.
     * With many data points, we create many paths causing significant time to be spent in the hit test phase.
     * To fix this issue, we disable pointer events for the descendant paths.
     *
     * Ideally, users should be able to override this in case they need pointer events to be enabled,
     * but it can affect performance negatively, especially with many data points. */
    pointerEvents: 'none'
  }
});
export function BarGroup(_ref) {
  let {
      skipAnimation,
      layout,
      xOrigin,
      yOrigin
    } = _ref,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  if (skipAnimation) {
    return /*#__PURE__*/_jsx(PathGroup, _extends({}, props));
  }
  return /*#__PURE__*/_jsx(AnimatedGroup, _extends({}, props, {
    layout: layout,
    xOrigin: xOrigin,
    yOrigin: yOrigin
  }));
}
const AnimatedRect = styled('rect')({
  '@keyframes scaleInX': {
    from: {
      transform: 'scaleX(0)'
    },
    to: {
      transform: 'scaleX(1)'
    }
  },
  '@keyframes scaleInY': {
    from: {
      transform: 'scaleY(0)'
    },
    to: {
      transform: 'scaleY(1)'
    }
  },
  animationDuration: `${ANIMATION_DURATION_MS}ms`,
  animationFillMode: 'forwards',
  '&[data-orientation="horizontal"]': {
    animationName: 'scaleInX'
  },
  '&[data-orientation="vertical"]': {
    animationName: 'scaleInY'
  }
});
function AnimatedGroup(_ref2) {
  let {
      children,
      layout,
      xOrigin,
      yOrigin
    } = _ref2,
    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
  const store = useStore();
  const drawingArea = store.use(selectorChartDrawingArea);
  const clipPathId = useId();
  const animateChildren = [];
  if (layout === 'horizontal') {
    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
      "data-orientation": "horizontal",
      x: drawingArea.left,
      width: xOrigin - drawingArea.left,
      y: drawingArea.top,
      height: drawingArea.height,
      style: {
        transformOrigin: `${xOrigin}px ${drawingArea.top + drawingArea.height / 2}px`
      }
    }, "left"));
    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
      "data-orientation": "horizontal",
      x: xOrigin,
      width: drawingArea.left + drawingArea.width - xOrigin,
      y: drawingArea.top,
      height: drawingArea.height,
      style: {
        transformOrigin: `${xOrigin}px ${drawingArea.top + drawingArea.height / 2}px`
      }
    }, "right"));
  } else {
    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
      "data-orientation": "vertical",
      x: drawingArea.left,
      width: drawingArea.width,
      y: drawingArea.top,
      height: yOrigin - drawingArea.top,
      style: {
        transformOrigin: `${drawingArea.left + drawingArea.width / 2}px ${yOrigin}px`
      }
    }, "top"));
    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
      "data-orientation": "vertical",
      x: drawingArea.left,
      width: drawingArea.width,
      y: yOrigin,
      height: drawingArea.top + drawingArea.height - yOrigin,
      style: {
        transformOrigin: `${drawingArea.left + drawingArea.width / 2}px ${yOrigin}px`
      }
    }, "bottom"));
  }
  return /*#__PURE__*/_jsxs(React.Fragment, {
    children: [/*#__PURE__*/_jsx("clipPath", {
      id: clipPathId,
      children: animateChildren
    }), /*#__PURE__*/_jsx(PathGroup, _extends({
      clipPath: `url(#${clipPathId})`
    }, props, {
      children: children
    }))]
  });
}