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

The community edition of MUI X Charts components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel", "renderer"];
import * as React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import { barElementClasses } from "./barElementClasses.js";
import { useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
import { useBarPlotData } from "./useBarPlotData.js";
import { useUtilityClasses } from "./barClasses.js";
import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
import { IndividualBarPlot } from "./IndividualBarPlot.js";
import { BatchBarPlot } from "./BatchBarPlot/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const BarPlotRoot = styled('g', {
  name: 'MuiBarPlot',
  slot: 'Root'
})({
  [`& .${barElementClasses.root}`]: {
    transitionProperty: 'opacity, fill',
    transitionDuration: `${ANIMATION_DURATION_MS}ms`,
    transitionTimingFunction: 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 = _objectWithoutPropertiesLoose(props, _excluded);
  const isZoomInteracting = useInternalIsZoomInteracting();
  const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
  const batchSkipAnimation = useSkipAnimation(inSkipAnimation);
  const {
    xAxis: xAxes
  } = useXAxes();
  const {
    yAxis: yAxes
  } = useYAxes();
  const {
    completedData,
    masksData
  } = useBarPlotData(useDrawingArea(), xAxes, yAxes);
  const classes = useUtilityClasses();
  const BarElementPlot = renderer === 'svg-batch' ? BatchBarPlot : IndividualBarPlot;
  return /*#__PURE__*/_jsxs(BarPlotRoot, {
    className: classes.root,
    children: [/*#__PURE__*/_jsx(BarElementPlot, _extends({
      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__*/_jsx(BarLabelPlot, _extends({
      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.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
  /**
   * Defines the border radius of the bar element.
   */
  borderRadius: PropTypes.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.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.oneOf(['svg-batch', 'svg-single']),
  /**
   * If `true`, animations are skipped.
   * @default undefined
   */
  skipAnimation: PropTypes.bool,
  /**
   * The props used for each component slot.
   * @default {}
   */
  slotProps: PropTypes.object,
  /**
   * Overridable component slots.
   * @default {}
   */
  slots: PropTypes.object
} : void 0;
export { BarPlot };