@mui/x-charts 7.5.0 → 7.6.0

package/BarChart/BarChart.js

@@ -61,7 +61,10 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     children,
     slots,
     slotProps,
-    loading
+    loading,
+    barLabel,
+    highlightedItem,
+    onHighlightChange
   } = props;
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
@@ -97,6 +100,8 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     dataset: dataset,
     sx: sx,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
     children: [onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
     }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
@@ -109,7 +114,8 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
         slotProps: slotProps,
         skipAnimation: skipAnimation,
         onItemClick: onItemClick,
-        borderRadius: borderRadius
+        borderRadius: borderRadius,
+        barLabel: barLabel
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
         loading: loading,
         slots: slots,
@@ -136,7 +142,7 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
 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.
@@ -148,6 +154,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.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.default.oneOfType([_propTypes.default.oneOf(['value']), _propTypes.default.func]),
   /**
    * Defines the border radius of the bar element.
    */
@@ -187,6 +201,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  }),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -236,6 +257,12 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {null | AxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/BarChart/BarElement.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="@react-spring/shared" />
 import * as React from 'react';
 import { AnimatedProps } from '@react-spring/web';
-import { HighlightScope } from '../context/HighlightProvider';
 import { SeriesId } from '../models/seriesType/common';
 export interface BarElementClasses {
     /** Styles applied to the root element. */
@@ -1359,7 +1358,6 @@ interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' |
     height?: string | number | undefined;
     width?: string | number | undefined;
 }> {
-    highlightScope?: Partial<HighlightScope>;
     ownerState: BarElementOwnerState;
 }
 export interface BarElementSlots {
@@ -1373,7 +1371,6 @@ export interface BarElementSlotProps {
     bar?: Partial<BarProps>;
 }
 export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGRectElement>, 'ref' | 'id'> & {
-    highlightScope?: Partial<HighlightScope>;
     /**
      * The props used for each component slot.
      * @default {}

package/BarChart/BarElement.js

@@ -19,9 +19,9 @@ var _d3Color = require("d3-color");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _web = require("@react-spring/web");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _InteractionProvider = require("../context/InteractionProvider");
+var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style", "onClick"];
+const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getBarElementUtilityClass(slot) {
@@ -56,27 +56,20 @@ function BarElement(props) {
       dataIndex,
       classes: innerClasses,
       color,
-      highlightScope,
       slots,
       slotProps,
       style,
       onClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
   const {
-    item
-  } = React.useContext(_InteractionProvider.InteractionContext);
-  const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
-    type: 'bar',
-    seriesId: id,
-    dataIndex
-  }, highlightScope);
-  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
-    type: 'bar',
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
     seriesId: id,
     dataIndex
-  }, highlightScope);
+  });
   const ownerState = {
     id,
     dataIndex,
@@ -108,14 +101,10 @@ 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.default.object,
   dataIndex: _propTypes.default.number.isRequired,
-  highlightScope: _propTypes.default.shape({
-    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  }),
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * The props used for each component slot.