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

The community edition of MUI X Charts components.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BarGroup = BarGroup;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _styles = require("@mui/material/styles");
var React = _interopRequireWildcard(require("react"));
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
var _useStore = require("../../internals/store/useStore");
var _useChartDimensions = require("../../internals/plugins/corePlugins/useChartDimensions");
var _animation = require("../../internals/animation/animation");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["skipAnimation", "layout", "xOrigin", "yOrigin"],
  _excluded2 = ["children", "layout", "xOrigin", "yOrigin"];
const PathGroup = (0, _styles.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'
  }
});
function BarGroup(_ref) {
  let {
      skipAnimation,
      layout,
      xOrigin,
      yOrigin
    } = _ref,
    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
  if (skipAnimation) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PathGroup, (0, _extends2.default)({}, props));
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedGroup, (0, _extends2.default)({}, props, {
    layout: layout,
    xOrigin: xOrigin,
    yOrigin: yOrigin
  }));
}
const AnimatedRect = (0, _styles.styled)('rect')({
  '@keyframes scaleInX': {
    from: {
      transform: 'scaleX(0)'
    },
    to: {
      transform: 'scaleX(1)'
    }
  },
  '@keyframes scaleInY': {
    from: {
      transform: 'scaleY(0)'
    },
    to: {
      transform: 'scaleY(1)'
    }
  },
  animationDuration: `${_animation.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 = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
  const store = (0, _useStore.useStore)();
  const drawingArea = store.use(_useChartDimensions.selectorChartDrawingArea);
  const clipPathId = (0, _useId.default)();
  const animateChildren = [];
  if (layout === 'horizontal') {
    animateChildren.push(/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
      id: clipPathId,
      children: animateChildren
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PathGroup, (0, _extends2.default)({
      clipPath: `url(#${clipPathId})`
    }, props, {
      children: children
    }))]
  });
}