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

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BarPlot = BarPlot;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@mui/material/styles");
var _barElementClasses = require("./barElementClasses");
var _hooks = require("../hooks");
var _BarLabelPlot = require("./BarLabel/BarLabelPlot");
var _useSkipAnimation = require("../hooks/useSkipAnimation");
var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
var _useBarPlotData = require("./useBarPlotData");
var _barClasses = require("./barClasses");
var _animation = require("../internals/animation/animation");
var _IndividualBarPlot = require("./IndividualBarPlot");
var _BatchBarPlot = require("./BatchBarPlot");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel", "renderer"];
const BarPlotRoot = (0, _styles.styled)('g', {
  name: 'MuiBarPlot',
  slot: 'Root'
})({
  [`& .${_barElementClasses.barElementClasses.root}`]: {
    transitionProperty: 'opacity, fill',
    transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
    transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
  }
});

/**
 * Demos:
 *
 * - [Bars](https://mui.com/x/react-charts/bars/)
 * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
 * - [Stacking](https://mui.com/x/react-charts/stacking/)
 *
 * API:
 *
 * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
 */
function BarPlot(props) {
  const {
      skipAnimation: inSkipAnimation,
      onItemClick,
      borderRadius,
      barLabel,
      renderer
    } = props,
    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
  const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
  const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
  const batchSkipAnimation = (0, _useSkipAnimation.useSkipAnimation)(inSkipAnimation);
  const {
    xAxis: xAxes
  } = (0, _hooks.useXAxes)();
  const {
    yAxis: yAxes
  } = (0, _hooks.useYAxes)();
  const {
    completedData,
    masksData
  } = (0, _useBarPlotData.useBarPlotData)((0, _hooks.useDrawingArea)(), xAxes, yAxes);
  const classes = (0, _barClasses.useUtilityClasses)();
  const BarElementPlot = renderer === 'svg-batch' ? _BatchBarPlot.BatchBarPlot : _IndividualBarPlot.IndividualBarPlot;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BarPlotRoot, {
    className: classes.root,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BarElementPlot, (0, _extends2.default)({
      completedData: completedData,
      masksData: masksData
      /* The batch renderer doesn't animate bars after the initial mount. Providing skipAnimation was causing an issue
       * where bars would animate again after a zoom interaction because skipAnimation would change from true to false. */,
      skipAnimation: renderer === 'svg-batch' ? batchSkipAnimation : skipAnimation,
      onItemClick:
      /* `onItemClick` accepts a `MouseEvent` when the renderer is "svg-batch" and a `React.MouseEvent` otherwise,
       * so we need this cast to prevent TypeScript from complaining. */
      onItemClick,
      borderRadius: borderRadius
    }, other)), completedData.map(processedSeries => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelPlot.BarLabelPlot, (0, _extends2.default)({
      className: classes.seriesLabels,
      processedSeries: processedSeries,
      skipAnimation: skipAnimation,
      barLabel: barLabel
    }, other), processedSeries.seriesId))]
  });
}
process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  /**
   * @deprecated Use `barLabel` in the chart series instead.
   * If provided, the function will be used to format the label of the bar.
   * It can be set to 'value' to display the current value.
   * @param {BarItem} item The item to format.
   * @param {BarLabelContext} context data about the bar.
   * @returns {string} The formatted label.
   */
  barLabel: _propTypes.default.oneOfType([_propTypes.default.oneOf(['value']), _propTypes.default.func]),
  /**
   * Defines the border radius of the bar element.
   */
  borderRadius: _propTypes.default.number,
  /**
   * Callback fired when a bar item is clicked.
   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
   * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
   */
  onItemClick: _propTypes.default.func,
  /**
   * The type of renderer to use for the bar plot.
   * - `svg-single`: Renders every bar in a `<rect />` element.
   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
   *                Read more: https://mui.com/x/react-charts/bars/#performance
   *
   * @default 'svg-single'
   */
  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single']),
  /**
   * If `true`, animations are skipped.
   * @default undefined
   */
  skipAnimation: _propTypes.default.bool,
  /**
   * The props used for each component slot.
   * @default {}
   */
  slotProps: _propTypes.default.object,
  /**
   * Overridable component slots.
   * @default {}
   */
  slots: _propTypes.default.object
} : void 0;