@mui/x-charts 7.0.0-beta.1 → 7.0.0-beta.2

package/legacy/ChartsLegend/ChartsLegend.js

@@ -1,22 +1,15 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["rotate", "dominantBaseline"],
-  _excluded2 = ["label"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
-import { NoSsr } from '@mui/base/NoSsr';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { useThemeProps, useTheme, styled } from '@mui/material/styles';
+import { useThemeProps, useTheme } from '@mui/material/styles';
 import { DrawingContext } from '../context/DrawingProvider';
 import { getSeriesToDisplay } from './utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { getLegendUtilityClass } from './chartsLegendClasses';
-import { ChartsText } from '../ChartsText';
-import { getWordsByLines } from '../internals/getWordsByLines';
+import { DefaultChartsLegend } from './DefaultChartsLegend';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     direction = ownerState.direction;
@@ -28,13 +21,6 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
-export var ChartsLegendRoot = styled('g', {
-  name: 'MuiChartsLegend',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.root;
-  }
-})({});
 var defaultProps = {
   position: {
     horizontal: 'middle',
@@ -42,313 +28,6 @@ var defaultProps = {
   },
   direction: 'row'
 };
-/**
- * Transforms number or partial padding object to a defaultized padding object.
- */
-var getStandardizedPadding = function getStandardizedPadding(padding) {
-  if (typeof padding === 'number') {
-    return {
-      left: padding,
-      right: padding,
-      top: padding,
-      bottom: padding
-    };
-  }
-  return _extends({
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0
-  }, padding);
-};
-function DefaultChartsLegend(props) {
-  var hidden = props.hidden,
-    position = props.position,
-    direction = props.direction,
-    seriesToDisplay = props.seriesToDisplay,
-    drawingArea = props.drawingArea,
-    classes = props.classes,
-    _props$itemMarkWidth = props.itemMarkWidth,
-    itemMarkWidth = _props$itemMarkWidth === void 0 ? 20 : _props$itemMarkWidth,
-    _props$itemMarkHeight = props.itemMarkHeight,
-    itemMarkHeight = _props$itemMarkHeight === void 0 ? 20 : _props$itemMarkHeight,
-    _props$markGap = props.markGap,
-    markGap = _props$markGap === void 0 ? 5 : _props$markGap,
-    _props$itemGap = props.itemGap,
-    itemGap = _props$itemGap === void 0 ? 10 : _props$itemGap,
-    _props$padding = props.padding,
-    paddingProps = _props$padding === void 0 ? 10 : _props$padding,
-    inLabelStyle = props.labelStyle;
-  var theme = useTheme();
-  var labelStyle = React.useMemo(function () {
-    return _extends({}, theme.typography.subtitle1, {
-      color: 'inherit',
-      dominantBaseline: 'central',
-      textAnchor: 'start',
-      fill: (theme.vars || theme).palette.text.primary,
-      lineHeight: 1
-    }, inLabelStyle);
-  },
-  // To say to TS that the dominantBaseline and textAnchor are correct
-  [inLabelStyle, theme]);
-  var padding = React.useMemo(function () {
-    return getStandardizedPadding(paddingProps);
-  }, [paddingProps]);
-  var getItemSpace = React.useCallback(function (label) {
-    var inStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var rotate = inStyle.rotate,
-      dominantBaseline = inStyle.dominantBaseline,
-      style = _objectWithoutProperties(inStyle, _excluded);
-    var linesSize = getWordsByLines({
-      style: style,
-      needsComputation: true,
-      text: label
-    });
-    var innerSize = {
-      innerWidth: itemMarkWidth + markGap + Math.max.apply(Math, _toConsumableArray(linesSize.map(function (size) {
-        return size.width;
-      }))),
-      innerHeight: Math.max(itemMarkHeight, linesSize.length * linesSize[0].height)
-    };
-    return _extends({}, innerSize, {
-      outerWidth: innerSize.innerWidth + itemGap,
-      outerHeight: innerSize.innerHeight + itemGap
-    });
-  }, [itemGap, itemMarkHeight, itemMarkWidth, markGap]);
-  var totalWidth = drawingArea.left + drawingArea.width + drawingArea.right;
-  var totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
-  var availableWidth = totalWidth - padding.left - padding.right;
-  var availableHeight = totalHeight - padding.top - padding.bottom;
-  var seriesWithPosition = React.useMemo(function () {
-    // Start at 0, 0. Will be modified later by padding and position.
-    var x = 0;
-    var y = 0;
-
-    // total values used to align legend later.
-    var totalWidthUsed = 0;
-    var totalHeightUsed = 0;
-    var rowIndex = 0;
-    var rowMaxHeight = [0];
-    var seriesWithRawPosition = seriesToDisplay.map(function (_ref) {
-      var label = _ref.label,
-        other = _objectWithoutProperties(_ref, _excluded2);
-      var itemSpace = getItemSpace(label, labelStyle);
-      var rep = _extends({}, other, {
-        label: label,
-        positionX: x,
-        positionY: y,
-        innerHeight: itemSpace.innerHeight,
-        innerWidth: itemSpace.innerWidth,
-        outerHeight: itemSpace.outerHeight,
-        outerWidth: itemSpace.outerWidth,
-        rowIndex: rowIndex
-      });
-      if (direction === 'row') {
-        if (x + itemSpace.innerWidth > availableWidth) {
-          // This legend item would create overflow along the x-axis, so we start a new row.
-          x = 0;
-          y += rowMaxHeight[rowIndex];
-          rowIndex += 1;
-          if (rowMaxHeight.length <= rowIndex) {
-            rowMaxHeight.push(0);
-          }
-          rep.positionX = x;
-          rep.positionY = y;
-          rep.rowIndex = rowIndex;
-        }
-        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
-        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
-        rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight);
-        x += itemSpace.outerWidth;
-      }
-      if (direction === 'column') {
-        if (y + itemSpace.innerHeight > availableHeight) {
-          // This legend item would create overflow along the y-axis, so we start a new column.
-          x = totalWidthUsed + itemGap;
-          y = 0;
-          rowIndex = 0;
-          rep.positionX = x;
-          rep.positionY = y;
-          rep.rowIndex = rowIndex;
-        }
-        if (rowMaxHeight.length <= rowIndex) {
-          rowMaxHeight.push(0);
-        }
-        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
-        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
-        rowIndex += 1;
-        y += itemSpace.outerHeight;
-      }
-      return rep;
-    });
-
-    // Move the legend according to padding and position
-    var gapX = 0;
-    var gapY = 0;
-    switch (position.horizontal) {
-      case 'left':
-        gapX = padding.left;
-        break;
-      case 'right':
-        gapX = totalWidth - padding.right - totalWidthUsed;
-        break;
-      default:
-        gapX = (totalWidth - totalWidthUsed) / 2;
-        break;
-    }
-    switch (position.vertical) {
-      case 'top':
-        gapY = padding.top;
-        break;
-      case 'bottom':
-        gapY = totalHeight - padding.bottom - totalHeightUsed;
-        break;
-      default:
-        gapY = (totalHeight - totalHeightUsed) / 2;
-        break;
-    }
-    return seriesWithRawPosition.map(function (item) {
-      return _extends({}, item, {
-        // Add the gap due to the position
-        positionX: item.positionX + gapX,
-        // Add the gap due to the position
-        positionY: item.positionY + gapY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
-        : item.outerHeight / 2) // Get the center of the item
-      });
-    });
-  }, [seriesToDisplay, position.horizontal, position.vertical, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap, padding.left, padding.right, padding.top, padding.bottom, totalWidth, totalHeight]);
-  if (hidden) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
-      className: classes.root,
-      children: seriesWithPosition.map(function (_ref2) {
-        var id = _ref2.id,
-          label = _ref2.label,
-          color = _ref2.color,
-          positionX = _ref2.positionX,
-          positionY = _ref2.positionY;
-        return /*#__PURE__*/_jsxs("g", {
-          className: classes.series,
-          transform: "translate(".concat(positionX, " ").concat(positionY, ")"),
-          children: [/*#__PURE__*/_jsx("rect", {
-            className: classes.mark,
-            y: -itemMarkHeight / 2,
-            width: itemMarkWidth,
-            height: itemMarkHeight,
-            fill: color
-          }), /*#__PURE__*/_jsx(ChartsText, {
-            style: labelStyle,
-            text: label,
-            x: itemMarkWidth + markGap,
-            y: 0
-          })]
-        }, id);
-      })
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object.isRequired,
-  /**
-   * The direction of the legend layout.
-   * The default depends on the chart.
-   */
-  direction: PropTypes.oneOf(['column', 'row']).isRequired,
-  drawingArea: PropTypes.shape({
-    bottom: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    left: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired
-  }).isRequired,
-  /**
-   * Set to true to hide the legend.
-   */
-  hidden: PropTypes.bool,
-  /**
-   * Space between two legend items (in px).
-   * @default 10
-   */
-  itemGap: PropTypes.number,
-  /**
-   * Height of the item mark (in px).
-   * @default 20
-   */
-  itemMarkHeight: PropTypes.number,
-  /**
-   * Width of the item mark (in px).
-   * @default 20
-   */
-  itemMarkWidth: PropTypes.number,
-  /**
-   * Style applied to legend labels.
-   * @default theme.typography.subtitle1
-   */
-  labelStyle: PropTypes.object,
-  /**
-   * Space between the mark and the label (in px).
-   * @default 5
-   */
-  markGap: PropTypes.number,
-  /**
-   * Legend padding (in px).
-   * Can either be a single number, or an object with top, left, bottom, right properties.
-   * @default 0
-   */
-  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })]),
-  position: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-  }).isRequired,
-  series: PropTypes.shape({
-    bar: PropTypes.shape({
-      series: PropTypes.object.isRequired,
-      seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
-      stackingGroups: PropTypes.arrayOf(PropTypes.shape({
-        ids: PropTypes.arrayOf(PropTypes.string).isRequired,
-        stackingOffset: PropTypes.func.isRequired,
-        stackingOrder: PropTypes.func.isRequired
-      })).isRequired
-    }),
-    line: PropTypes.shape({
-      series: PropTypes.object.isRequired,
-      seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
-      stackingGroups: PropTypes.arrayOf(PropTypes.shape({
-        ids: PropTypes.arrayOf(PropTypes.string).isRequired,
-        stackingOffset: PropTypes.func.isRequired,
-        stackingOrder: PropTypes.func.isRequired
-      })).isRequired
-    }),
-    pie: PropTypes.shape({
-      series: PropTypes.object.isRequired,
-      seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired
-    }),
-    scatter: PropTypes.shape({
-      series: PropTypes.object.isRequired,
-      seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired
-    })
-  }).isRequired,
-  seriesToDisplay: PropTypes.arrayOf(PropTypes.shape({
-    color: PropTypes.string.isRequired,
-    id: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired
-  })).isRequired
-} : void 0;
 function ChartsLegend(inProps) {
   var _slots$legend;
   var props = useThemeProps({

package/legacy/ChartsLegend/DefaultChartsLegend.js

@@ -0,0 +1,302 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["rotate", "dominantBaseline"],
+  _excluded2 = ["label"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { NoSsr } from '@mui/base/NoSsr';
+import { useTheme, styled } from '@mui/material/styles';
+import { ChartsText } from '../ChartsText';
+import { getWordsByLines } from '../internals/getWordsByLines';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var ChartsLegendRoot = styled('g', {
+  name: 'MuiChartsLegend',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  }
+})({});
+/**
+ * Transforms number or partial padding object to a defaultized padding object.
+ */
+var getStandardizedPadding = function getStandardizedPadding(padding) {
+  if (typeof padding === 'number') {
+    return {
+      left: padding,
+      right: padding,
+      top: padding,
+      bottom: padding
+    };
+  }
+  return _extends({
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  }, padding);
+};
+function DefaultChartsLegend(props) {
+  var hidden = props.hidden,
+    position = props.position,
+    direction = props.direction,
+    seriesToDisplay = props.seriesToDisplay,
+    drawingArea = props.drawingArea,
+    classes = props.classes,
+    _props$itemMarkWidth = props.itemMarkWidth,
+    itemMarkWidth = _props$itemMarkWidth === void 0 ? 20 : _props$itemMarkWidth,
+    _props$itemMarkHeight = props.itemMarkHeight,
+    itemMarkHeight = _props$itemMarkHeight === void 0 ? 20 : _props$itemMarkHeight,
+    _props$markGap = props.markGap,
+    markGap = _props$markGap === void 0 ? 5 : _props$markGap,
+    _props$itemGap = props.itemGap,
+    itemGap = _props$itemGap === void 0 ? 10 : _props$itemGap,
+    _props$padding = props.padding,
+    paddingProps = _props$padding === void 0 ? 10 : _props$padding,
+    inLabelStyle = props.labelStyle;
+  var theme = useTheme();
+  var labelStyle = React.useMemo(function () {
+    return _extends({}, theme.typography.subtitle1, {
+      color: 'inherit',
+      dominantBaseline: 'central',
+      textAnchor: 'start',
+      fill: (theme.vars || theme).palette.text.primary,
+      lineHeight: 1
+    }, inLabelStyle);
+  },
+  // To say to TS that the dominantBaseline and textAnchor are correct
+  [inLabelStyle, theme]);
+  var padding = React.useMemo(function () {
+    return getStandardizedPadding(paddingProps);
+  }, [paddingProps]);
+  var getItemSpace = React.useCallback(function (label) {
+    var inStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var rotate = inStyle.rotate,
+      dominantBaseline = inStyle.dominantBaseline,
+      style = _objectWithoutProperties(inStyle, _excluded);
+    var linesSize = getWordsByLines({
+      style: style,
+      needsComputation: true,
+      text: label
+    });
+    var innerSize = {
+      innerWidth: itemMarkWidth + markGap + Math.max.apply(Math, _toConsumableArray(linesSize.map(function (size) {
+        return size.width;
+      }))),
+      innerHeight: Math.max(itemMarkHeight, linesSize.length * linesSize[0].height)
+    };
+    return _extends({}, innerSize, {
+      outerWidth: innerSize.innerWidth + itemGap,
+      outerHeight: innerSize.innerHeight + itemGap
+    });
+  }, [itemGap, itemMarkHeight, itemMarkWidth, markGap]);
+  var totalWidth = drawingArea.left + drawingArea.width + drawingArea.right;
+  var totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
+  var availableWidth = totalWidth - padding.left - padding.right;
+  var availableHeight = totalHeight - padding.top - padding.bottom;
+  var seriesWithPosition = React.useMemo(function () {
+    // Start at 0, 0. Will be modified later by padding and position.
+    var x = 0;
+    var y = 0;
+
+    // total values used to align legend later.
+    var totalWidthUsed = 0;
+    var totalHeightUsed = 0;
+    var rowIndex = 0;
+    var rowMaxHeight = [0];
+    var seriesWithRawPosition = seriesToDisplay.map(function (_ref) {
+      var label = _ref.label,
+        other = _objectWithoutProperties(_ref, _excluded2);
+      var itemSpace = getItemSpace(label, labelStyle);
+      var rep = _extends({}, other, {
+        label: label,
+        positionX: x,
+        positionY: y,
+        innerHeight: itemSpace.innerHeight,
+        innerWidth: itemSpace.innerWidth,
+        outerHeight: itemSpace.outerHeight,
+        outerWidth: itemSpace.outerWidth,
+        rowIndex: rowIndex
+      });
+      if (direction === 'row') {
+        if (x + itemSpace.innerWidth > availableWidth) {
+          // This legend item would create overflow along the x-axis, so we start a new row.
+          x = 0;
+          y += rowMaxHeight[rowIndex];
+          rowIndex += 1;
+          if (rowMaxHeight.length <= rowIndex) {
+            rowMaxHeight.push(0);
+          }
+          rep.positionX = x;
+          rep.positionY = y;
+          rep.rowIndex = rowIndex;
+        }
+        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
+        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
+        rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight);
+        x += itemSpace.outerWidth;
+      }
+      if (direction === 'column') {
+        if (y + itemSpace.innerHeight > availableHeight) {
+          // This legend item would create overflow along the y-axis, so we start a new column.
+          x = totalWidthUsed + itemGap;
+          y = 0;
+          rowIndex = 0;
+          rep.positionX = x;
+          rep.positionY = y;
+          rep.rowIndex = rowIndex;
+        }
+        if (rowMaxHeight.length <= rowIndex) {
+          rowMaxHeight.push(0);
+        }
+        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
+        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
+        rowIndex += 1;
+        y += itemSpace.outerHeight;
+      }
+      return rep;
+    });
+
+    // Move the legend according to padding and position
+    var gapX = 0;
+    var gapY = 0;
+    switch (position.horizontal) {
+      case 'left':
+        gapX = padding.left;
+        break;
+      case 'right':
+        gapX = totalWidth - padding.right - totalWidthUsed;
+        break;
+      default:
+        gapX = (totalWidth - totalWidthUsed) / 2;
+        break;
+    }
+    switch (position.vertical) {
+      case 'top':
+        gapY = padding.top;
+        break;
+      case 'bottom':
+        gapY = totalHeight - padding.bottom - totalHeightUsed;
+        break;
+      default:
+        gapY = (totalHeight - totalHeightUsed) / 2;
+        break;
+    }
+    return seriesWithRawPosition.map(function (item) {
+      return _extends({}, item, {
+        // Add the gap due to the position
+        positionX: item.positionX + gapX,
+        // Add the gap due to the position
+        positionY: item.positionY + gapY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
+        : item.outerHeight / 2) // Get the center of the item
+      });
+    });
+  }, [seriesToDisplay, position.horizontal, position.vertical, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap, padding.left, padding.right, padding.top, padding.bottom, totalWidth, totalHeight]);
+  if (hidden) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(NoSsr, {
+    children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
+      className: classes.root,
+      children: seriesWithPosition.map(function (_ref2) {
+        var id = _ref2.id,
+          label = _ref2.label,
+          color = _ref2.color,
+          positionX = _ref2.positionX,
+          positionY = _ref2.positionY;
+        return /*#__PURE__*/_jsxs("g", {
+          className: classes.series,
+          transform: "translate(".concat(positionX, " ").concat(positionY, ")"),
+          children: [/*#__PURE__*/_jsx("rect", {
+            className: classes.mark,
+            y: -itemMarkHeight / 2,
+            width: itemMarkWidth,
+            height: itemMarkHeight,
+            fill: color
+          }), /*#__PURE__*/_jsx(ChartsText, {
+            style: labelStyle,
+            text: label,
+            x: itemMarkWidth + markGap,
+            y: 0
+          })]
+        }, id);
+      })
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction: PropTypes.oneOf(['column', 'row']).isRequired,
+  drawingArea: PropTypes.shape({
+    bottom: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    left: PropTypes.number.isRequired,
+    right: PropTypes.number.isRequired,
+    top: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired
+  }).isRequired,
+  /**
+   * Set to true to hide the legend.
+   * @default false
+   */
+  hidden: PropTypes.bool,
+  /**
+   * Space between two legend items (in px).
+   * @default 10
+   */
+  itemGap: PropTypes.number,
+  /**
+   * Height of the item mark (in px).
+   * @default 20
+   */
+  itemMarkHeight: PropTypes.number,
+  /**
+   * Width of the item mark (in px).
+   * @default 20
+   */
+  itemMarkWidth: PropTypes.number,
+  /**
+   * Style applied to legend labels.
+   * @default theme.typography.subtitle1
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * Space between the mark and the label (in px).
+   * @default 5
+   */
+  markGap: PropTypes.number,
+  /**
+   * Legend padding (in px).
+   * Can either be a single number, or an object with top, left, bottom, right properties.
+   * @default 10
+   */
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  })]),
+  position: PropTypes.shape({
+    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
+    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
+  }).isRequired,
+  series: PropTypes.object.isRequired,
+  seriesToDisplay: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    label: PropTypes.string.isRequired
+  })).isRequired
+} : void 0;
+export { DefaultChartsLegend };

package/legacy/ChartsLegend/index.js

@@ -1,3 +1,4 @@
 export * from './ChartsLegend';
+export * from './DefaultChartsLegend';
 export * from './chartsLegendClasses';
 export * from './utils';

package/legacy/ChartsReferenceLine/ChartsReferenceLine.js

@@ -8,7 +8,7 @@ function ChartsReferenceLine(props) {
   var x = props.x,
     y = props.y;
   if (x !== undefined && y !== undefined) {
-    throw new Error('MUI X Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
+    throw new Error('MUI X Charts: The ChartsReferenceLine cannot have both `x` and `y` props set.');
   }
   if (x === undefined && y === undefined) {
     throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
@@ -27,7 +27,7 @@ process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
    * The id of the axis used for the reference value.
    * @default The `id` of the first defined axis.
    */
-  axisId: PropTypes.string,
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * Override or extend the styles applied to the component.
    */

package/legacy/ChartsTooltip/ChartsItemTooltipContent.js

@@ -37,7 +37,7 @@ process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
     classes: PropTypes.object,
     itemData: PropTypes.shape({
       dataIndex: PropTypes.number,
-      seriesId: PropTypes.string.isRequired,
+      seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
       type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
     }),
     series: PropTypes.object,
@@ -45,7 +45,7 @@ process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
   }),
   itemData: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])