@mui/x-charts 7.4.0 → 7.5.1

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.4.0
+ * @mui/x-charts v7.5.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/defaultizeColor.d.ts

@@ -2,7 +2,7 @@ import { AllSeriesType } from '../models/seriesType';
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors?: string[]): {
     data: {
         color: string;
-        label?: string | undefined;
+        label?: string | ((location: "tooltip" | "legend" | "arc") => string) | undefined;
         value: number;
         id?: import("../models/seriesType").PieItemId | undefined;
     }[];
@@ -15,7 +15,9 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     endAngle?: number | undefined;
     paddingAngle?: number | undefined;
     sortingValues?: import("../models/seriesType").ChartsPieSorting | undefined;
-    arcLabel?: "label" | "value" | "formattedValue" | ((item: import("../models/seriesType").DefaultizedPieValueType) => string) | undefined;
+    arcLabel?: "label" | "value" | "formattedValue" | ((item: Omit<import("../models/seriesType").DefaultizedPieValueType, "label"> & {
+        label?: string | undefined;
+    }) => string) | undefined;
     arcLabelMinAngle?: number | undefined;
     cx?: string | number | undefined;
     cy?: string | number | undefined;
@@ -45,7 +47,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     type: "bar";
     data?: (number | null)[] | undefined;
     dataKey?: string | undefined;
-    label?: string | undefined;
+    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
     layout?: "horizontal" | "vertical" | undefined;
     stackOffset?: import("..").StackOffsetType | undefined;
     id?: import("../models/seriesType/common").SeriesId | undefined;
@@ -60,7 +62,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     type: "scatter";
     data: import("../models/seriesType").ScatterValueType[];
     markerSize?: number | undefined;
-    label?: string | undefined;
+    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
     disableHover?: boolean | undefined;
     zAxisKey?: string | undefined;
     id?: import("../models/seriesType/common").SeriesId | undefined;
@@ -75,7 +77,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     dataKey?: string | undefined;
     stack?: string | undefined;
     area?: boolean | undefined;
-    label?: string | undefined;
+    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
     curve?: import("../models/seriesType").CurveType | undefined;
     showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams<number | Date>) => boolean) | undefined;
     disableHighlight?: boolean | undefined;

package/internals/getLabel.d.ts

@@ -0,0 +1 @@
+export declare function getLabel<Location extends string>(value: string | ((location: Location) => string) | undefined, location: Location): string | undefined;

package/internals/getLabel.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabel = getLabel;
+function getLabel(value, location) {
+  return typeof value === 'function' ? value(location) : value;
+}

package/internals/utils.d.ts

@@ -9,7 +9,7 @@ export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U,
  * @param svg The SVG element
  * @param event The mouseEvent to transform
  */
-export declare function getSVGPoint(svg: SVGSVGElement, event: MouseEvent): DOMPoint;
+export declare function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.

package/models/seriesType/bar.d.ts

@@ -11,7 +11,10 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
      * The key used to retrieve data from the dataset.
      */
     dataKey?: string;
-    label?: string;
+    /**
+     * The label to display on the tooltip or the legend. It can be a string or a function.
+     */
+    label?: string | ((location: 'tooltip' | 'legend') => string);
     /**
      * Layout of the bars. All bar should have the same layout.
      * @default 'vertical'

package/models/seriesType/line.d.ts

@@ -36,7 +36,10 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
     dataKey?: string;
     stack?: string;
     area?: boolean;
-    label?: string;
+    /**
+     * The label to display on the tooltip or the legend. It can be a string or a function.
+     */
+    label?: string | ((location: 'tooltip' | 'legend') => string);
     curve?: CurveType;
     /**
      * Define which items of the series should display a mark.

package/models/seriesType/pie.d.ts

@@ -8,7 +8,10 @@ export type PieValueType = {
      */
     id: PieItemId;
     value: number;
-    label?: string;
+    /**
+     * The label to display on the tooltip, arc, or the legend. It can be a string or a function.
+     */
+    label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
     color?: string;
 };
 export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'data'> & {
@@ -16,9 +19,9 @@ export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'd
     formattedValue: string;
 };
 export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
-export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Tdata> {
+export interface PieSeriesType<TData = PieValueType> extends CommonSeriesType<TData> {
     type: 'pie';
-    data: Tdata[];
+    data: TData[];
     /**
      * The radius between circle center and the beginning of the arc.
      * Can be a number (in px) or a string with a percentage such as '50%'.
@@ -69,7 +72,9 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
     /**
      * The label displayed into the arc.
      */
-    arcLabel?: 'formattedValue' | 'label' | 'value' | ((item: DefaultizedPieValueType) => string);
+    arcLabel?: 'formattedValue' | 'label' | 'value' | ((item: Omit<DefaultizedPieValueType, 'label'> & {
+        label?: string;
+    }) => string);
     /**
      * The minimal angle required to display the arc label.
      * @default 0

package/models/seriesType/scatter.d.ts

@@ -13,7 +13,10 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, C
     type: 'scatter';
     data: ScatterValueType[];
     markerSize?: number;
-    label?: string;
+    /**
+     * The label to display on the tooltip or the legend. It can be a string or a function.
+     */
+    label?: string | ((location: 'tooltip' | 'legend') => string);
     /**
      * If true, the interaction will not use element hover for this series.
      * @default false

package/modern/BarChart/BarChart.js

@@ -52,7 +52,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     children,
     slots,
     slotProps,
-    loading
+    loading,
+    barLabel
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -100,7 +101,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
         slotProps: slotProps,
         skipAnimation: skipAnimation,
         onItemClick: onItemClick,
-        borderRadius: borderRadius
+        borderRadius: borderRadius,
+        barLabel: barLabel
       }), /*#__PURE__*/_jsx(ChartsOverlay, {
         loading: loading,
         slots: slots,
@@ -127,7 +129,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
@@ -139,6 +141,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * 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.
    */
@@ -205,6 +215,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }),
   /**
    * If `true`, a loading overlay is displayed.
+   * @default false
    */
   loading: PropTypes.bool,
   /**
@@ -297,6 +308,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -305,11 +321,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -350,6 +361,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -358,11 +374,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,

package/modern/BarChart/BarElement.js

@@ -79,16 +79,17 @@ function BarElement(props) {
   const barProps = useSlotProps({
     elementType: Bar,
     externalSlotProps: slotProps?.bar,
-    additionalProps: _extends({}, other, getInteractionItemProps({
+    externalForwardedProps: other,
+    additionalProps: _extends({}, getInteractionItemProps({
       type: 'bar',
       seriesId: id,
       dataIndex
     }), {
       style,
-      className: classes.root,
       onClick,
       cursor: onClick ? 'pointer' : 'unset'
     }),
+    className: classes.root,
     ownerState
   });
   return /*#__PURE__*/_jsx(Bar, _extends({}, barProps));
@@ -96,7 +97,7 @@ function BarElement(props) {
 process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   dataIndex: PropTypes.number.isRequired,

package/modern/BarChart/BarLabel/BarLabel.js

@@ -0,0 +1,51 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes"];
+import * as React from 'react';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { animated } from '@react-spring/web';
+import PropTypes from 'prop-types';
+import { barLabelClasses } from './barLabelClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BarLabelComponent = styled(animated.text, {
+  name: 'MuiBarLabel',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [{
+    [`&.${barLabelClasses.faded}`]: styles.faded
+  }, {
+    [`&.${barLabelClasses.highlighted}`]: styles.highlighted
+  }, styles.root]
+})(({
+  theme
+}) => _extends({}, theme?.typography?.body2, {
+  stroke: 'none',
+  fill: (theme.vars || theme)?.palette?.text?.primary,
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
+  textAnchor: 'middle',
+  dominantBaseline: 'central',
+  pointerEvents: 'none',
+  opacity: 1,
+  [`&.${barLabelClasses.faded}`]: {
+    opacity: 0.3
+  }
+}));
+function BarLabel(props) {
+  const themeProps = useThemeProps({
+    props,
+    name: 'MuiBarLabel'
+  });
+  const otherProps = _objectWithoutPropertiesLoose(themeProps, _excluded);
+  return /*#__PURE__*/_jsx(BarLabelComponent, _extends({}, otherProps));
+}
+process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  dataIndex: PropTypes.number.isRequired,
+  isFaded: PropTypes.bool.isRequired,
+  isHighlighted: PropTypes.bool.isRequired,
+  seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+} : void 0;
+export { BarLabel };

package/modern/BarChart/BarLabel/BarLabel.types.js

@@ -0,0 +1 @@
+export {};

package/modern/BarChart/BarLabel/BarLabelItem.js

@@ -0,0 +1,130 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["seriesId", "classes", "color", "style", "dataIndex", "barLabel", "slots", "slotProps", "height", "width", "value"],
+  _excluded2 = ["ownerState"];
+import * as React from 'react';
+import { useSlotProps } from '@mui/base/utils';
+import PropTypes from 'prop-types';
+import { InteractionContext } from '../../context/InteractionProvider';
+import { getIsFaded, getIsHighlighted } from '../../hooks/useInteractionItemProps';
+import { useUtilityClasses } from './barLabelClasses';
+import { HighlighContext } from '../../context/HighlightProvider';
+import { getBarLabel } from './getBarLabel';
+import { BarLabel } from './BarLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+function BarLabelItem(props) {
+  const {
+      seriesId,
+      classes: innerClasses,
+      color,
+      style,
+      dataIndex,
+      barLabel,
+      slots,
+      slotProps,
+      height,
+      width,
+      value
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    item
+  } = React.useContext(InteractionContext);
+  const {
+    scope
+  } = React.useContext(HighlighContext);
+  const isHighlighted = getIsHighlighted(item, {
+    type: 'bar',
+    seriesId,
+    dataIndex
+  }, scope);
+  const isFaded = !isHighlighted && getIsFaded(item, {
+    type: 'bar',
+    seriesId,
+    dataIndex
+  }, scope);
+  const ownerState = {
+    seriesId,
+    classes: innerClasses,
+    color,
+    isFaded,
+    isHighlighted,
+    dataIndex
+  };
+  const classes = useUtilityClasses(ownerState);
+  const Component = slots?.barLabel ?? BarLabel;
+  const _useSlotProps = useSlotProps({
+      elementType: Component,
+      externalSlotProps: slotProps?.barLabel,
+      additionalProps: _extends({}, other, {
+        style,
+        className: classes.root
+      }),
+      ownerState
+    }),
+    {
+      ownerState: barLabelOwnerState
+    } = _useSlotProps,
+    barLabelProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  if (!barLabel) {
+    return null;
+  }
+  const formattedLabelText = getBarLabel({
+    barLabel,
+    value,
+    dataIndex,
+    seriesId,
+    height,
+    width
+  });
+  if (!formattedLabelText) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Component, _extends({}, barLabelProps, barLabelOwnerState, {
+    children: formattedLabelText
+  }));
+}
+process.env.NODE_ENV !== "production" ? BarLabelItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * 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]),
+  classes: PropTypes.object,
+  color: PropTypes.string.isRequired,
+  dataIndex: PropTypes.number.isRequired,
+  /**
+   * The height of the bar.
+   */
+  height: PropTypes.number.isRequired,
+  seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  /**
+   * The value of the data point.
+   */
+  value: PropTypes.number,
+  /**
+   * The width of the bar.
+   */
+  width: PropTypes.number.isRequired
+} : void 0;
+export { BarLabelItem };

package/modern/BarChart/BarLabel/BarLabelPlot.js

@@ -0,0 +1,102 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["bars", "skipAnimation"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTransition } from '@react-spring/web';
+import { BarLabelItem } from './BarLabelItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+const leaveStyle = ({
+  layout,
+  yOrigin,
+  x,
+  width,
+  y,
+  xOrigin,
+  height
+}) => _extends({}, layout === 'vertical' ? {
+  y: yOrigin,
+  x: x + width / 2,
+  height: 0,
+  width
+} : {
+  y: y + height / 2,
+  x: xOrigin,
+  height,
+  width: 0
+});
+const enterStyle = ({
+  x,
+  width,
+  y,
+  height
+}) => ({
+  x: x + width / 2,
+  y: y + height / 2,
+  height,
+  width
+});
+/**
+ * @ignore - internal component.
+ */
+function BarLabelPlot(props) {
+  const {
+      bars,
+      skipAnimation
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const barLabelTransition = useTransition(bars, {
+    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
+    from: leaveStyle,
+    leave: null,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: barLabelTransition((style, {
+      seriesId,
+      dataIndex,
+      color,
+      value,
+      width,
+      height
+    }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
+      seriesId: seriesId,
+      dataIndex: dataIndex,
+      value: value,
+      color: color,
+      width: width,
+      height: height
+    }, other, {
+      style: style
+    })))
+  });
+}
+process.env.NODE_ENV !== "production" ? BarLabelPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
+  bars: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string.isRequired,
+    dataIndex: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    highlightScope: PropTypes.shape({
+      faded: PropTypes.oneOf(['global', 'none', 'series']),
+      highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+    }),
+    layout: PropTypes.oneOf(['horizontal', 'vertical']),
+    maskId: PropTypes.string.isRequired,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    value: PropTypes.number,
+    width: PropTypes.number.isRequired,
+    x: PropTypes.number.isRequired,
+    xOrigin: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    yOrigin: PropTypes.number.isRequired
+  })).isRequired,
+  skipAnimation: PropTypes.bool
+} : void 0;
+export { BarLabelPlot };

package/modern/BarChart/BarLabel/barLabelClasses.js

@@ -0,0 +1,19 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+export function getBarLabelUtilityClass(slot) {
+  return generateUtilityClass('MuiBarLabel', slot);
+}
+export const barLabelClasses = generateUtilityClasses('MuiBarLabel', ['root', 'highlighted', 'faded']);
+export const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    seriesId,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getBarLabelUtilityClass, classes);
+};

package/modern/BarChart/BarLabel/getBarLabel.js

@@ -0,0 +1,24 @@
+export const getBarLabel = options => {
+  const {
+    barLabel,
+    value,
+    dataIndex,
+    seriesId,
+    height,
+    width
+  } = options;
+  if (barLabel === 'value') {
+    // We don't want to show the label if the value is 0
+    return value ? value?.toString() : null;
+  }
+  return barLabel({
+    seriesId,
+    dataIndex,
+    value
+  }, {
+    bar: {
+      height,
+      width
+    }
+  });
+};

package/modern/BarChart/BarLabel/index.js

@@ -0,0 +1,2 @@
+export { BarLabel } from './BarLabel';
+export { barLabelClasses, getBarLabelUtilityClass } from './barLabelClasses';

package/modern/BarChart/BarPlot.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -12,6 +12,7 @@ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import getColor from './getColor';
 import { useChartId } from '../hooks';
 import { BarClipPath } from './BarClipPath';
+import { BarLabelPlot } from './BarLabel/BarLabelPlot';
 
 /**
  * Solution of the equations
@@ -211,7 +212,8 @@ function BarPlot(props) {
   const {
       skipAnimation,
       onItemClick,
-      borderRadius
+      borderRadius,
+      barLabel
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const transition = useTransition(completedData, {
@@ -274,14 +276,26 @@ function BarPlot(props) {
         clipPath: `url(#${maskId})`,
         children: barElement
       });
-    })]
+    }), barLabel && /*#__PURE__*/_jsx(BarLabelPlot, _extends({
+      bars: completedData,
+      skipAnimation: skipAnimation,
+      barLabel: barLabel
+    }, other))]
   });
 }
 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 "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * 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.
    */