@mui/x-charts 8.0.0-alpha.3 → 8.0.0-alpha.5

package/modern/ChartsTooltip/chartsTooltipClasses.js

@@ -4,7 +4,7 @@ import composeClasses from '@mui/utils/composeClasses';
 export function getChartsTooltipUtilityClass(slot) {
   return generateUtilityClass('MuiChartsTooltip', slot);
 }
-export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);
+export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell', 'axisValueCell']);
 export const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -15,7 +15,8 @@ export const useUtilityClasses = classes => {
     mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
-    valueCell: ['valueCell']
+    valueCell: ['valueCell'],
+    axisValueCell: ['axisValueCell']
   };
   return composeClasses(slots, getChartsTooltipUtilityClass, classes);
 };

package/modern/ChartsTooltip/useAxisTooltip.js

@@ -1,9 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import { useSeries } from "../hooks/useSeries.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useSelector } from "../internals/store/useSelector.js";
@@ -11,6 +9,7 @@ import { getLabel } from "../internals/getLabel.js";
 import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
 import { useXAxis, useYAxis } from "../hooks/useAxis.js";
+import { useZAxis } from "../hooks/useZAxis.js";
 import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 export function useAxisTooltip() {
   const defaultXAxis = useXAxis();
@@ -26,7 +25,7 @@ export function useAxisTooltip() {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxis();
   const colorProcessors = useColorProcessor();
   if (axisData === null) {
     return null;

package/modern/ChartsTooltip/useItemTooltip.js

@@ -1,15 +1,14 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import { useSeries } from "../hooks/useSeries.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
 import { getLabel } from "../internals/getLabel.js";
 import { selectorChartsInteractionItem } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
+import { useZAxis } from "../hooks/useZAxis.js";
 export function useItemTooltip() {
   const store = useStore();
   const item = useSelector(store, selectorChartsInteractionItem);
@@ -23,7 +22,7 @@ export function useItemTooltip() {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxis();
   const colorProcessors = useColorProcessor();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];

package/modern/PieChart/PiePlot.js

@@ -2,13 +2,13 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
 import { PieArcPlot } from "./PieArcPlot.js";
 import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
 import { getPercentageValue } from "../internals/getPercentageValue.js";
 import { getPieCoordinates } from "./getPieCoordinates.js";
 import { usePieSeries } from "../hooks/useSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
+import { useDrawingArea } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -33,7 +33,7 @@ function PiePlot(props) {
     top,
     width,
     height
-  } = React.useContext(DrawingAreaContext);
+  } = useDrawingArea();
   const skipAnimation = useSkipAnimation(inSkipAnimation);
   if (seriesData === undefined) {
     return null;

package/modern/ScatterChart/ScatterPlot.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import { Scatter } from "./Scatter.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import getColor from "./getColor.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useScatterSeries } from "../hooks/useSeries.js";
+import { useZAxis } from "../hooks/useZAxis.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -30,7 +30,7 @@ function ScatterPlot(props) {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxis();
   if (seriesData === undefined) {
     return null;
   }

package/modern/ScatterChart/extremums.js

@@ -1,6 +1,4 @@
-const mergeMinMax = (acc, val) => {
-  return [Math.min(acc[0], val[0]), Math.max(acc[1], val[1])];
-};
+const mergeMinMax = (acc, val) => [val[0] === null ? acc[0] : Math.min(acc[0], val[0]), val[1] === null ? acc[1] : Math.max(acc[1], val[1])];
 export const getExtremumX = params => {
   const {
     series,

package/modern/ScatterChart/formatter.js

@@ -11,15 +11,15 @@ const formatter = ({
     }
     const data = !datasetKeys ? seriesData.data ?? [] : dataset?.map(d => {
       return {
-        x: d[datasetKeys.x],
-        y: d[datasetKeys.y],
+        x: d[datasetKeys.x] ?? null,
+        y: d[datasetKeys.y] ?? null,
         z: datasetKeys.z && d[datasetKeys.z],
         id: d[datasetKeys.id]
       };
     }) ?? [];
     return [seriesId, _extends({}, seriesData, {
       data,
-      valueFormatter: seriesData.valueFormatter ?? (v => `(${v.x}, ${v.y})`)
+      valueFormatter: seriesData.valueFormatter ?? (v => v && `(${v.x}, ${v.y})`)
     })];
   }));
   return {

package/modern/hooks/useColorScale.js

@@ -1,8 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useZAxis } from "./useZAxis.js";
 export function useXColorScale(identifier) {
   const {
     xAxis,
@@ -23,7 +22,7 @@ export function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxis();
   const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
   return zAxis[id]?.colorScale;
 }

package/modern/hooks/useZAxis.js

@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+export const useZAxis = () => {
+  const data = React.useContext(ZAxisContext);
+  return data;
+};

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.3
+ * @mui/x-charts v8.0.0-alpha.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/consumeThemeProps.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useTheme, useThemeProps } from '@mui/material/styles';
+import resolveProps from '@mui/utils/resolveProps';
+import * as React from 'react';
+import * as ReactIs from 'react-is';
+
+/**
+ * A higher order component that consumes and merges the theme `defaultProps` and handles the `classes` and renders the component.
+ *
+ * This HOC will wrap a single component.
+ * If you need to render multiple components, you can manually consume the theme and render them in your component instead of using this HOC.
+ *
+ * In the example below, `MyComponent` will render the `DefaultComponent` with the `direction` prop set to `'row'` and the className set to `'my-custom-root'`.
+ *
+ * @example
+ * ```tsx
+ * createTheme({
+ *   components: {
+ *     MuiMyComponent: {
+ *       defaultProps: {
+ *         direction: 'row',
+ *       },
+ *     },
+ *   },
+ * })
+ *
+ * type MyComponentProps = {
+ *   direction: 'row' | 'column';
+ *   classes?: Record<'root', string>;
+ * };
+ *
+ * const MyComponent = consumeThemeProps(
+ *   'MuiMyComponent',
+ *   function DefaultComponent(props: MyComponentProps) {
+ *     return (
+ *       <div className={props.classes.root}>
+ *         {props.direction}
+ *       </div>
+ *     );
+ *   }
+ * );
+ *
+ * render(<MyComponent classes={{ root: 'my-custom-root' }} />);
+ * ```
+ *
+ * @param {string} name The mui component name.
+ * @param {object} options Options for the HOC.
+ * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
+ * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
+ * @param InComponent The component to render if the slot is not provided.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const consumeThemeProps = (name, options, InComponent) => {
+  function InternalComponent(props, ref) {
+    const themedProps = useThemeProps({
+      props,
+      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      name
+    });
+    const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
+    const outProps = resolveProps(defaultProps, themedProps);
+    const theme = useTheme();
+    const classes = options.classesResolver?.(outProps, theme);
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line react-compiler/react-compiler
+      InComponent.displayName = name;
+    }
+    const OutComponent = ReactIs.isForwardRef(InComponent) ? InComponent :
+    /*#__PURE__*/
+    // InComponent needs to be a function that accepts `(props, ref)`
+    // @ts-expect-error
+    React.forwardRef(InComponent);
+    return /*#__PURE__*/_jsx(OutComponent, _extends({}, outProps, {
+      classes: classes,
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React.forwardRef(InternalComponent);
+};

package/modern/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -26,7 +26,7 @@ useChartId.getInitialState = ({
   id
 }) => ({
   id: {
-    chartId: createChartDefaultId(),
+    chartId: id,
     providedChartId: id
   }
 });

package/modern/internals/store/useCharts.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useId from '@mui/utils/useId';
 import { ChartStore } from "../plugins/utils/ChartStore.js";
 import { CHART_CORE_PLUGINS } from "../plugins/corePlugins/index.js";
 export function useChartApiInitialization(inputApiRef) {
@@ -15,7 +16,10 @@ export function useChartApiInitialization(inputApiRef) {
 let globalId = 0;
 export function useCharts(inPlugins, props) {
   const plugins = React.useMemo(() => [...CHART_CORE_PLUGINS, ...inPlugins], [inPlugins]);
-  const pluginParams = {}; // To generate when plugins use params.
+  const defaultChartId = useId();
+  const pluginParams = {
+    id: defaultChartId
+  }; // To generate when plugins use params.
   const instanceRef = React.useRef({});
   const instance = instanceRef.current;
   const publicAPI = useChartApiInitialization(props.apiRef);
@@ -39,7 +43,9 @@ export function useCharts(inPlugins, props) {
     };
     plugins.forEach(plugin => {
       if (plugin.getInitialState) {
-        Object.assign(initialState, plugin.getInitialState({}));
+        Object.assign(initialState, plugin.getInitialState({
+          id: defaultChartId
+        }));
       }
     });
     storeRef.current = new ChartStore(initialState);

package/node/ChartsAxis/ChartsAxis.js

@@ -57,10 +57,6 @@ function ChartsAxis(props) {
     yAxis,
     yAxisIds
   } = (0, _CartesianProvider.useCartesianContext)();
-
-  // TODO: use for plotting line without ticks or any thing
-  // const drawingArea = React.useContext(DrawingContext);
-
   const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis, yAxisIds[0]);
   const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis, xAxisIds[0]);
   const topId = getAxisId(topAxis, xAxisIds[0]);

package/node/ChartsLabel/ChartsLabel.js

@@ -0,0 +1,64 @@
+"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.ChartsLabel = void 0;
+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 _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _labelClasses = require("./labelClasses");
+var _consumeThemeProps = require("../internals/consumeThemeProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "className", "classes"];
+const Root = (0, _styles.styled)('span', {
+  name: 'MuiChartsLabel',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => (0, _extends2.default)({}, theme.typography.caption, {
+  color: (theme.vars || theme).palette.text.primary,
+  lineHeight: undefined,
+  display: 'flex'
+}));
+
+/**
+ * @ignore - internal component.
+ *
+ * Generates the label mark for the tooltip and legend.
+ */
+const ChartsLabel = exports.ChartsLabel = (0, _consumeThemeProps.consumeThemeProps)('MuiChartsLabel', {
+  classesResolver: _labelClasses.useUtilityClasses
+}, function ChartsLabel(props, ref) {
+  const {
+      children,
+      className,
+      classes
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes?.root, className),
+    ownerState: props,
+    ref: ref
+  }, other, {
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object
+} : void 0;

package/node/ChartsLabel/ChartsLabelGradient.js

@@ -0,0 +1,139 @@
+"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.ChartsLabelGradient = void 0;
+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 _clsx = _interopRequireDefault(require("clsx"));
+var _labelGradientClasses = require("./labelGradientClasses");
+var _consumeThemeProps = require("../internals/consumeThemeProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["gradientId", "direction", "classes", "className"];
+const getRotation = (direction, reverse, rotate) => {
+  if (!rotate && reverse) {
+    return direction === 'column' ? 90 : 180;
+  }
+  if (rotate && !reverse) {
+    return direction === 'column' ? 0 : 90;
+  }
+  if (rotate && reverse) {
+    return direction === 'column' ? 180 : -90;
+  }
+  return direction === 'column' ? -90 : 0;
+};
+const Root = (0, _styles.styled)('div', {
+  name: 'MuiChartsLabelGradient',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  ownerState
+}) => {
+  const rotation = getRotation(ownerState.direction, ownerState.reverse, ownerState.rotate);
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    [`.${_labelGradientClasses.labelGradientClasses.mask}`]: {
+      borderRadius: 2,
+      overflow: 'hidden'
+    },
+    [`&.${_labelGradientClasses.labelGradientClasses.row}`]: {
+      width: '100%',
+      [`.${_labelGradientClasses.labelGradientClasses.mask}`]: {
+        height: 12,
+        width: '100%'
+      }
+    },
+    [`&.${_labelGradientClasses.labelGradientClasses.column}`]: {
+      height: '100%',
+      [`.${_labelGradientClasses.labelGradientClasses.mask}`]: {
+        width: 12,
+        height: '100%',
+        '> svg': {
+          height: '100%'
+        }
+      }
+    },
+    svg: {
+      transform: `rotate(${rotation}deg)`,
+      display: 'block'
+    }
+  };
+});
+
+/**
+ * @ignore - internal component.
+ *
+ * Generates the label Gradient for the tooltip and legend.
+ */
+const ChartsLabelGradient = exports.ChartsLabelGradient = (0, _consumeThemeProps.consumeThemeProps)('MuiChartsLabelGradient', {
+  defaultProps: {
+    direction: 'row'
+  },
+  classesResolver: _labelGradientClasses.useUtilityClasses
+}, function ChartsLabelGradient(props, ref) {
+  const {
+      gradientId,
+      classes,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes?.root, className),
+    ownerState: props,
+    "aria-hidden": "true",
+    ref: ref
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes?.mask,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          width: "24",
+          height: "24",
+          fill: `url(#${gradientId})`
+        })
+      })
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabelGradient.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * The direction of the gradient.
+   *
+   * @default 'row'
+   */
+  direction: _propTypes.default.oneOf(['column', 'row']),
+  /**
+   * A unique identifier for the gradient.
+   *
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   */
+  gradientId: _propTypes.default.string.isRequired,
+  /**
+   * If `true`, the gradient will be reversed.
+   */
+  reverse: _propTypes.default.bool,
+  /**
+   * If provided, the gradient will be rotated by 90deg.
+   *
+   * Useful for linear gradients that are not in the correct orientation.
+   */
+  rotate: _propTypes.default.bool
+} : void 0;

package/node/ChartsLabel/ChartsLabelMark.js

@@ -0,0 +1,114 @@
+"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.ChartsLabelMark = void 0;
+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 _clsx = _interopRequireDefault(require("clsx"));
+var _labelMarkClasses = require("./labelMarkClasses");
+var _consumeThemeProps = require("../internals/consumeThemeProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["type", "color", "className", "classes"];
+const Root = (0, _styles.styled)('div', {
+  name: 'MuiChartsLabelMark',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(() => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    [`&.${_labelMarkClasses.labelMarkClasses.line}`]: {
+      width: 16,
+      display: 'flex',
+      alignItems: 'center',
+      [`.${_labelMarkClasses.labelMarkClasses.mask}`]: {
+        height: 4,
+        width: '100%',
+        borderRadius: 1,
+        overflow: 'hidden'
+      }
+    },
+    [`&.${_labelMarkClasses.labelMarkClasses.square}`]: {
+      height: 13,
+      width: 13,
+      borderRadius: 2,
+      overflow: 'hidden'
+    },
+    [`&.${_labelMarkClasses.labelMarkClasses.circle}`]: {
+      height: 15,
+      width: 15,
+      borderRadius: '50%',
+      overflow: 'hidden'
+    },
+    svg: {
+      display: 'block',
+      height: '100%',
+      width: '100%'
+    }
+  };
+});
+
+/**
+ * @ignore - internal component.
+ *
+ * Generates the label mark for the tooltip and legend.
+ */
+const ChartsLabelMark = exports.ChartsLabelMark = (0, _consumeThemeProps.consumeThemeProps)('MuiChartsLabelMark', {
+  classesResolver: _labelMarkClasses.useUtilityClasses
+}, function ChartsLabelMark(props, ref) {
+  const {
+      type,
+      color,
+      className,
+      classes
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes?.root, className),
+    ownerState: props,
+    "aria-hidden": "true",
+    ref: ref
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes?.mask,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+        viewBox: "0 0 24 24",
+        preserveAspectRatio: type === 'line' ? 'none' : undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          width: "24",
+          height: "24",
+          fill: color
+        })
+      })
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabelMark.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * The color of the mark.
+   */
+  color: _propTypes.default.string,
+  /**
+   * The type of the mark.
+   * @default 'square'
+   */
+  type: _propTypes.default.oneOf(['circle', 'line', 'square'])
+} : void 0;

package/node/ChartsLabel/labelClasses.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelUtilityClass = getLabelUtilityClass;
+exports.useUtilityClasses = exports.labelClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getLabelUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsLabel', slot);
+}
+const labelClasses = exports.labelClasses = (0, _generateUtilityClasses.default)('MuiChartsLabel', ['root']);
+const useUtilityClasses = props => {
+  const slots = {
+    root: ['root']
+  };
+  return (0, _composeClasses.default)(slots, getLabelUtilityClass, props.classes);
+};
+exports.useUtilityClasses = useUtilityClasses;