@mui/x-charts 7.5.0 → 7.6.0

package/BarChart/BarLabel/BarLabel.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarLabel = BarLabel;
+exports.BarLabelComponent = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _web = require("@react-spring/web");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _barLabelClasses = require("./barLabelClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes"];
+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; }
+const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)(_web.animated.text, {
+  name: 'MuiBarLabel',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [{
+    [`&.${_barLabelClasses.barLabelClasses.faded}`]: styles.faded
+  }, {
+    [`&.${_barLabelClasses.barLabelClasses.highlighted}`]: styles.highlighted
+  }, styles.root]
+})(({
+  theme
+}) => (0, _extends2.default)({}, 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.barLabelClasses.faded}`]: {
+    opacity: 0.3
+  }
+}));
+function BarLabel(props) {
+  const themeProps = (0, _styles.useThemeProps)({
+    props,
+    name: 'MuiBarLabel'
+  });
+  const otherProps = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarLabelComponent, (0, _extends2.default)({}, 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.default.object,
+  dataIndex: _propTypes.default.number.isRequired,
+  isFaded: _propTypes.default.bool.isRequired,
+  isHighlighted: _propTypes.default.bool.isRequired,
+  seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+} : void 0;

package/BarChart/BarLabel/BarLabel.types.d.ts

@@ -0,0 +1,39 @@
+import { SeriesId } from '../../models/seriesType/common';
+import type { BarLabelClasses } from './barLabelClasses';
+export interface BarLabelOwnerState {
+    seriesId: SeriesId;
+    dataIndex: number;
+    color: string;
+    isFaded: boolean;
+    isHighlighted: boolean;
+    classes?: Partial<BarLabelClasses>;
+}
+export type BarItem = {
+    /**
+     * The series id of the bar.
+     */
+    seriesId: SeriesId;
+    /**
+     * The index of the data point in the series.
+     */
+    dataIndex: number;
+    /**
+     * The value of the data point.
+     */
+    value: number | null;
+};
+export type BarLabelContext = {
+    bar: {
+        /**
+         * The height of the bar.
+         * It could be used to control the label based on the bar size.
+         */
+        height: number;
+        /**
+         * The width of the bar.
+         * It could be used to control the label based on the bar size.
+         */
+        width: number;
+    };
+};
+export type BarLabelFunction = (item: BarItem, context: BarLabelContext) => string | null | undefined;

package/BarChart/BarLabel/BarLabel.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/BarChart/BarLabel/BarLabelItem.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { BarLabelOwnerState, BarItem, BarLabelContext } from './BarLabel.types';
+import { BarLabelProps } from './BarLabel';
+export interface BarLabelSlots {
+    /**
+     * The component that renders the bar label.
+     * @default BarLabel
+     */
+    barLabel?: React.JSXElementConstructor<BarLabelProps>;
+}
+export interface BarLabelSlotProps {
+    barLabel?: Partial<BarLabelProps>;
+}
+export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighlighted'> & Pick<BarLabelProps, 'style'> & {
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: BarLabelSlotProps;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: BarLabelSlots;
+    /**
+     * The height of the bar.
+     */
+    height: number;
+    /**
+     * The width of the bar.
+     */
+    width: number;
+    /**
+     * The value of the data point.
+     */
+    value: number | null;
+    /**
+     * 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?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+};
+/**
+ * @ignore - internal component.
+ */
+declare function BarLabelItem(props: BarLabelItemProps): React.JSX.Element | null;
+declare namespace BarLabelItem {
+    var propTypes: any;
+}
+export { BarLabelItem };

package/BarChart/BarLabel/BarLabelItem.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarLabelItem = BarLabelItem;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/base/utils");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _barLabelClasses = require("./barLabelClasses");
+var _getBarLabel = require("./getBarLabel");
+var _BarLabel = require("./BarLabel");
+var _context = require("../../context");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["seriesId", "classes", "color", "style", "dataIndex", "barLabel", "slots", "slotProps", "height", "width", "value"],
+  _excluded2 = ["ownerState"];
+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; }
+/**
+ * @ignore - internal component.
+ */
+function BarLabelItem(props) {
+  const {
+      seriesId,
+      classes: innerClasses,
+      color,
+      style,
+      dataIndex,
+      barLabel,
+      slots,
+      slotProps,
+      height,
+      width,
+      value
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
+    seriesId,
+    dataIndex
+  });
+  const ownerState = {
+    seriesId,
+    classes: innerClasses,
+    color,
+    isFaded,
+    isHighlighted,
+    dataIndex
+  };
+  const classes = (0, _barLabelClasses.useUtilityClasses)(ownerState);
+  const Component = slots?.barLabel ?? _BarLabel.BarLabel;
+  const _useSlotProps = (0, _utils.useSlotProps)({
+      elementType: Component,
+      externalSlotProps: slotProps?.barLabel,
+      additionalProps: (0, _extends2.default)({}, other, {
+        style,
+        className: classes.root
+      }),
+      ownerState
+    }),
+    {
+      ownerState: barLabelOwnerState
+    } = _useSlotProps,
+    barLabelProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
+  if (!barLabel) {
+    return null;
+  }
+  const formattedLabelText = (0, _getBarLabel.getBarLabel)({
+    barLabel,
+    value,
+    dataIndex,
+    seriesId,
+    height,
+    width
+  });
+  if (!formattedLabelText) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, 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.default.oneOfType([_propTypes.default.oneOf(['value']), _propTypes.default.func]),
+  classes: _propTypes.default.object,
+  color: _propTypes.default.string.isRequired,
+  dataIndex: _propTypes.default.number.isRequired,
+  /**
+   * The height of the bar.
+   */
+  height: _propTypes.default.number.isRequired,
+  seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
+  /**
+   * The value of the data point.
+   */
+  value: _propTypes.default.number,
+  /**
+   * The width of the bar.
+   */
+  width: _propTypes.default.number.isRequired
+} : void 0;

package/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { CompletedBarData } from '../types';
+import { BarLabelItemProps } from './BarLabelItem';
+type BarLabelPlotProps = {
+    bars: CompletedBarData[];
+    skipAnimation?: boolean;
+    barLabel?: BarLabelItemProps['barLabel'];
+};
+/**
+ * @ignore - internal component.
+ */
+declare function BarLabelPlot(props: BarLabelPlotProps): React.JSX.Element;
+declare namespace BarLabelPlot {
+    var propTypes: any;
+}
+export { BarLabelPlot };

package/BarChart/BarLabel/BarLabelPlot.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarLabelPlot = BarLabelPlot;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _web = require("@react-spring/web");
+var _BarLabelItem = require("./BarLabelItem");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["bars", "skipAnimation"];
+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; }
+const leaveStyle = ({
+  layout,
+  yOrigin,
+  x,
+  width,
+  y,
+  xOrigin,
+  height
+}) => (0, _extends2.default)({}, 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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const barLabelTransition = (0, _web.useTransition)(bars, {
+    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
+    from: leaveStyle,
+    leave: null,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: barLabelTransition((style, {
+      seriesId,
+      dataIndex,
+      color,
+      value,
+      width,
+      height
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelItem.BarLabelItem, (0, _extends2.default)({
+      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.default.oneOfType([_propTypes.default.oneOf(['value']), _propTypes.default.func]),
+  bars: _propTypes.default.arrayOf(_propTypes.default.shape({
+    color: _propTypes.default.string.isRequired,
+    dataIndex: _propTypes.default.number.isRequired,
+    height: _propTypes.default.number.isRequired,
+    layout: _propTypes.default.oneOf(['horizontal', 'vertical']),
+    maskId: _propTypes.default.string.isRequired,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    value: _propTypes.default.number,
+    width: _propTypes.default.number.isRequired,
+    x: _propTypes.default.number.isRequired,
+    xOrigin: _propTypes.default.number.isRequired,
+    y: _propTypes.default.number.isRequired,
+    yOrigin: _propTypes.default.number.isRequired
+  })).isRequired,
+  skipAnimation: _propTypes.default.bool
+} : void 0;

package/BarChart/BarLabel/barLabelClasses.d.ts

@@ -0,0 +1,13 @@
+import type { BarLabelOwnerState } from './BarLabel.types';
+export interface BarLabelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if it is highlighted. */
+    highlighted: string;
+    /** Styles applied to the root element if it is faded. */
+    faded: string;
+}
+export type BarLabelClassKey = keyof BarLabelClasses;
+export declare function getBarLabelUtilityClass(slot: string): string;
+export declare const barLabelClasses: Record<"root" | "highlighted" | "faded", string>;
+export declare const useUtilityClasses: (ownerState: BarLabelOwnerState) => Record<"root", string>;

package/BarChart/BarLabel/barLabelClasses.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.barLabelClasses = void 0;
+exports.getBarLabelUtilityClass = getBarLabelUtilityClass;
+exports.useUtilityClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+function getBarLabelUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiBarLabel', slot);
+}
+const barLabelClasses = exports.barLabelClasses = (0, _generateUtilityClasses.default)('MuiBarLabel', ['root', 'highlighted', 'faded']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    seriesId,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return (0, _composeClasses.default)(slots, getBarLabelUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/BarChart/BarLabel/getBarLabel.d.ts

@@ -0,0 +1,10 @@
+import { SeriesId } from '../../models/seriesType/common';
+import { BarLabelFunction } from './BarLabel.types';
+export declare const getBarLabel: (options: {
+    barLabel: 'value' | BarLabelFunction;
+    value: number | null;
+    dataIndex: number;
+    seriesId: SeriesId;
+    height: number;
+    width: number;
+}) => string | null | undefined;

package/BarChart/BarLabel/getBarLabel.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBarLabel = void 0;
+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
+    }
+  });
+};
+exports.getBarLabel = getBarLabel;

package/BarChart/BarLabel/index.d.ts

@@ -0,0 +1,6 @@
+export { BarLabel } from './BarLabel';
+export type { BarLabelProps } from './BarLabel';
+export { barLabelClasses, getBarLabelUtilityClass } from './barLabelClasses';
+export type { BarLabelSlotProps, BarLabelSlots } from './BarLabelItem';
+export type { BarLabelOwnerState, BarItem, BarLabelContext } from './BarLabel.types';
+export type { BarLabelClasses, BarLabelClassKey } from './barLabelClasses';

package/BarChart/BarLabel/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BarLabel", {
+  enumerable: true,
+  get: function () {
+    return _BarLabel.BarLabel;
+  }
+});
+Object.defineProperty(exports, "barLabelClasses", {
+  enumerable: true,
+  get: function () {
+    return _barLabelClasses.barLabelClasses;
+  }
+});
+Object.defineProperty(exports, "getBarLabelUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _barLabelClasses.getBarLabelUtilityClass;
+  }
+});
+var _BarLabel = require("./BarLabel");
+var _barLabelClasses = require("./barLabelClasses");

package/BarChart/BarPlot.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { BarElementProps, BarElementSlotProps, BarElementSlots } from './BarElement';
+import { BarElementSlotProps, BarElementSlots } from './BarElement';
 import { BarItemIdentifier } from '../models';
-export interface BarPlotSlots extends BarElementSlots {
+import { BarLabelItemProps, BarLabelSlotProps, BarLabelSlots } from './BarLabel/BarLabelItem';
+export interface BarPlotSlots extends BarElementSlots, BarLabelSlots {
 }
-export interface BarPlotSlotProps extends BarElementSlotProps {
+export interface BarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {
 }
-export interface BarPlotProps extends Pick<BarElementProps, 'slots' | 'slotProps'> {
+export interface BarPlotProps extends Pick<BarLabelItemProps, 'barLabel'> {
     /**
      * If `true`, animations are skipped.
      * @default false
@@ -21,6 +22,16 @@ export interface BarPlotProps extends Pick<BarElementProps, 'slots' | 'slotProps
      * Defines the border radius of the bar element.
      */
     borderRadius?: number;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: BarPlotSlotProps;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: BarPlotSlots;
 }
 /**
  * Demos: