@mui/x-charts 6.0.0-alpha.0 → 6.0.0-alpha.2

package/legacy/PieChart/PieChart.js

@@ -0,0 +1,297 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
+import { ChartsAxis } from '../ChartsAxis/ChartsAxis';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { ChartsTooltip } from '../ChartsTooltip';
+import { ChartsLegend } from '../ChartsLegend';
+import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
+import { PiePlot } from './PiePlot';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var defaultMargin = {
+  top: 5,
+  bottom: 5,
+  left: 5,
+  right: 100
+};
+function PieChart(props) {
+  var xAxis = props.xAxis,
+    yAxis = props.yAxis,
+    series = props.series,
+    width = props.width,
+    height = props.height,
+    marginProps = props.margin,
+    colors = props.colors,
+    sx = props.sx,
+    _props$tooltip = props.tooltip,
+    tooltip = _props$tooltip === void 0 ? {
+      trigger: 'item'
+    } : _props$tooltip,
+    _props$axisHighlight = props.axisHighlight,
+    axisHighlight = _props$axisHighlight === void 0 ? {
+      x: 'none',
+      y: 'none'
+    } : _props$axisHighlight,
+    _props$legend = props.legend,
+    legend = _props$legend === void 0 ? {
+      direction: 'column',
+      position: {
+        vertical: 'middle',
+        horizontal: 'right'
+      }
+    } : _props$legend,
+    _props$topAxis = props.topAxis,
+    topAxis = _props$topAxis === void 0 ? null : _props$topAxis,
+    _props$leftAxis = props.leftAxis,
+    leftAxis = _props$leftAxis === void 0 ? null : _props$leftAxis,
+    _props$rightAxis = props.rightAxis,
+    rightAxis = _props$rightAxis === void 0 ? null : _props$rightAxis,
+    _props$bottomAxis = props.bottomAxis,
+    bottomAxis = _props$bottomAxis === void 0 ? null : _props$bottomAxis,
+    children = props.children;
+  var margin = _extends({}, defaultMargin, marginProps);
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    series: series.map(function (s) {
+      return _extends({
+        type: 'pie'
+      }, s);
+    }),
+    width: width,
+    height: height,
+    margin: margin,
+    xAxis: xAxis != null ? xAxis : [{
+      id: DEFAULT_X_AXIS_KEY,
+      scaleType: 'point',
+      data: _toConsumableArray(new Array(Math.max.apply(Math, _toConsumableArray(series.map(function (s) {
+        return s.data.length;
+      }))))).map(function (_, index) {
+        return index;
+      })
+    }],
+    yAxis: yAxis,
+    colors: colors,
+    sx: sx,
+    disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
+    children: [/*#__PURE__*/_jsx(ChartsAxis, {
+      topAxis: topAxis,
+      leftAxis: leftAxis,
+      rightAxis: rightAxis,
+      bottomAxis: bottomAxis
+    }), /*#__PURE__*/_jsx(PiePlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+  });
+}
+process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  axisHighlight: PropTypes.shape({
+    x: PropTypes.oneOf(['band', 'line', 'none']),
+    y: PropTypes.oneOf(['line', 'none'])
+  }),
+  /**
+   * Indicate which axis to display the bottom of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * @default xAxisIds[0] The id of the first provided axis
+   */
+  bottomAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'top']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * Color palette used to colorize multiple series.
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  desc: PropTypes.string,
+  disableAxisListener: PropTypes.bool,
+  height: PropTypes.number,
+  /**
+   * Indicate which axis to display the left of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * @default yAxisIds[0] The id of the first provided axis
+   */
+  leftAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'right']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  legend: PropTypes.shape({
+    classes: PropTypes.object,
+    direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
+    itemWidth: PropTypes.number,
+    markSize: PropTypes.number,
+    offset: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number
+    }),
+    position: PropTypes.shape({
+      horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
+      vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
+    }),
+    spacing: PropTypes.number
+  }),
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * Indicate which axis to display the right of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * @default null
+   */
+  rightAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'right']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  series: PropTypes.arrayOf(PropTypes.shape({
+    arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
+    arcLabelMinAngle: PropTypes.number,
+    color: PropTypes.string,
+    cornerRadius: PropTypes.number,
+    cx: PropTypes.number,
+    cy: PropTypes.number,
+    data: PropTypes.arrayOf(PropTypes.shape({
+      color: PropTypes.string,
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      label: PropTypes.string,
+      value: PropTypes.number.isRequired
+    })).isRequired,
+    endAngle: PropTypes.number,
+    faded: PropTypes.shape({
+      additionalRadius: PropTypes.number,
+      cornerRadius: PropTypes.number,
+      innerRadius: PropTypes.number,
+      outerRadius: PropTypes.number
+    }),
+    highlighted: PropTypes.shape({
+      additionalRadius: PropTypes.number,
+      cornerRadius: PropTypes.number,
+      innerRadius: PropTypes.number,
+      outerRadius: PropTypes.number
+    }),
+    highlightScope: PropTypes.shape({
+      faded: PropTypes.oneOf(['global', 'none', 'series']),
+      highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+    }),
+    id: PropTypes.string,
+    innerRadius: PropTypes.number,
+    outerRadius: PropTypes.number,
+    paddingAngle: PropTypes.number,
+    sortingValues: PropTypes.oneOfType([PropTypes.oneOf(['asc', 'desc', 'none']), PropTypes.func]),
+    startAngle: PropTypes.number,
+    type: PropTypes.oneOf(['pie']),
+    valueFormatter: PropTypes.func
+  })).isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  title: PropTypes.string,
+  tooltip: PropTypes.shape({
+    axisContent: PropTypes.elementType,
+    classes: PropTypes.object,
+    itemContent: PropTypes.elementType,
+    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
+  }),
+  /**
+   * Indicate which axis to display the top of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * @default null
+   */
+  topAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'top']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  width: PropTypes.number,
+  xAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  })),
+  yAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  }))
+} : void 0;
+export { PieChart };

package/legacy/PieChart/PiePlot.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import PieArc from './PieArc';
+import PieArcLabel from './PieArcLabel';
+import { DrawingContext } from '../context/DrawingProvider';
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+var RATIO = 180 / Math.PI;
+function getItemLabel(arcLabel, arcLabelMinAngle, item) {
+  if (!arcLabel) {
+    return null;
+  }
+  var angle = (item.endAngle - item.startAngle) * RATIO;
+  if (angle < arcLabelMinAngle) {
+    return null;
+  }
+  if (typeof arcLabel === 'string') {
+    var _item$arcLabel;
+    return (_item$arcLabel = item[arcLabel]) == null ? void 0 : _item$arcLabel.toString();
+  }
+  return arcLabel(item);
+}
+export function PiePlot() {
+  var seriesData = React.useContext(SeriesContext).pie;
+  var _React$useContext = React.useContext(DrawingContext),
+    left = _React$useContext.left,
+    top = _React$useContext.top,
+    width = _React$useContext.width,
+    height = _React$useContext.height;
+  if (seriesData === undefined) {
+    return null;
+  }
+  var availableRadius = Math.min(width, height) / 2;
+  var center = {
+    x: left + width / 2,
+    y: top + height / 2
+  };
+  var series = seriesData.series,
+    seriesOrder = seriesData.seriesOrder;
+  return /*#__PURE__*/_jsx("g", {
+    children: seriesOrder.map(function (seriesId) {
+      var _series$seriesId = series[seriesId],
+        innerRadius = _series$seriesId.innerRadius,
+        outerRadius = _series$seriesId.outerRadius,
+        cornerRadius = _series$seriesId.cornerRadius,
+        arcLabel = _series$seriesId.arcLabel,
+        _series$seriesId$arcL = _series$seriesId.arcLabelMinAngle,
+        arcLabelMinAngle = _series$seriesId$arcL === void 0 ? 0 : _series$seriesId$arcL,
+        data = _series$seriesId.data,
+        cx = _series$seriesId.cx,
+        cy = _series$seriesId.cy,
+        highlighted = _series$seriesId.highlighted,
+        faded = _series$seriesId.faded;
+      return /*#__PURE__*/_jsx("g", {
+        transform: "translate(".concat(cx === undefined ? center.x : left + cx, ", ").concat(cy === undefined ? center.y : top + cy, ")"),
+        children: /*#__PURE__*/_jsxs("g", {
+          children: [data.map(function (item, index) {
+            return /*#__PURE__*/_createElement(PieArc, _extends({}, item, {
+              key: item.id,
+              innerRadius: innerRadius,
+              outerRadius: outerRadius != null ? outerRadius : availableRadius,
+              cornerRadius: cornerRadius,
+              id: seriesId,
+              color: item.color,
+              dataIndex: index,
+              highlightScope: series[seriesId].highlightScope,
+              highlighted: highlighted,
+              faded: faded
+            }));
+          }), data.map(function (item, index) {
+            return /*#__PURE__*/_createElement(PieArcLabel, _extends({}, item, {
+              key: item.id,
+              innerRadius: innerRadius,
+              outerRadius: outerRadius != null ? outerRadius : availableRadius,
+              cornerRadius: cornerRadius,
+              id: seriesId,
+              color: item.color,
+              dataIndex: index,
+              highlightScope: series[seriesId].highlightScope,
+              formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
+            }));
+          })]
+        })
+      }, seriesId);
+    })
+  });
+}

package/legacy/PieChart/formatter.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { pie as d3Pie } from 'd3-shape';
+var getSortingComparator = function getSortingComparator() {
+  var comparator = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'none';
+  if (typeof comparator === 'function') {
+    return comparator;
+  }
+  switch (comparator) {
+    case 'none':
+      return null;
+    case 'desc':
+      return function (a, b) {
+        return b - a;
+      };
+    case 'asc':
+      return function (a, b) {
+        return a - b;
+      };
+    default:
+      return null;
+  }
+};
+var formatter = function formatter(params) {
+  var seriesOrder = params.seriesOrder,
+    series = params.series;
+  var defaultizedSeries = {};
+  seriesOrder.forEach(function (seriesId) {
+    var _series$seriesId$star, _series$seriesId$endA, _series$seriesId$padd, _series$seriesId$sort;
+    var arcs = d3Pie().startAngle(2 * Math.PI * ((_series$seriesId$star = series[seriesId].startAngle) != null ? _series$seriesId$star : 0) / 360).endAngle(2 * Math.PI * ((_series$seriesId$endA = series[seriesId].endAngle) != null ? _series$seriesId$endA : 360) / 360).padAngle(2 * Math.PI * ((_series$seriesId$padd = series[seriesId].paddingAngle) != null ? _series$seriesId$padd : 0) / 360).sortValues(getSortingComparator((_series$seriesId$sort = series[seriesId].sortingValues) != null ? _series$seriesId$sort : 'none'))(series[seriesId].data.map(function (piePoint) {
+      return piePoint.value;
+    }));
+    defaultizedSeries[seriesId] = _extends({
+      valueFormatter: function valueFormatter(item) {
+        return item.value.toLocaleString();
+      }
+    }, series[seriesId], {
+      data: series[seriesId].data.map(function (item, index) {
+        var _item$id;
+        return _extends({}, item, {
+          id: (_item$id = item.id) != null ? _item$id : "auto-generated-pie-id-".concat(seriesId, "-").concat(index)
+        }, arcs[index]);
+      }).map(function (item) {
+        var _series$seriesId$valu, _series$seriesId$valu2, _series$seriesId;
+        return _extends({}, item, {
+          formattedValue: (_series$seriesId$valu = (_series$seriesId$valu2 = (_series$seriesId = series[seriesId]).valueFormatter) == null ? void 0 : _series$seriesId$valu2.call(_series$seriesId, item)) != null ? _series$seriesId$valu : item.value.toLocaleString()
+        });
+      })
+    });
+  });
+  return {
+    seriesOrder: seriesOrder,
+    series: defaultizedSeries
+  };
+};
+export default formatter;

package/legacy/PieChart/index.js

@@ -0,0 +1,4 @@
+export { PiePlot } from './PiePlot';
+export { PieChart } from './PieChart';
+export * from './PieArc';
+export * from './PieArcLabel';

package/legacy/PieChart/legend.js

@@ -0,0 +1,16 @@
+var legendGetter = function legendGetter(params) {
+  var seriesOrder = params.seriesOrder,
+    series = params.series;
+  return seriesOrder.flatMap(function (seriesId) {
+    return series[seriesId].data.map(function (item) {
+      return {
+        color: item.color,
+        label: item.label,
+        id: item.id
+      };
+    }).filter(function (item) {
+      return item.label !== undefined;
+    });
+  });
+};
+export default legendGetter;

package/legacy/ResponsiveChartContainer/index.js

@@ -1,11 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["width", "height"];
 import * as React from 'react';
-import { ResizeObserver } from '@juggle/resize-observer';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import ownerWindow from '@mui/utils/ownerWindow';
+import { styled } from '@mui/material/styles';
 import { ChartContainer } from '../ChartContainer';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useChartDimensions = function useChartDimensions(inWidth, inHeight) {
-  var ref = React.useRef(null);
+  var rootRef = React.useRef(null);
+  var displayError = React.useRef(false);
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     width = _React$useState2[0],
@@ -14,44 +19,102 @@ var useChartDimensions = function useChartDimensions(inWidth, inHeight) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     height = _React$useState4[0],
     setHeight = _React$useState4[1];
+
+  // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
+  var computeSize = React.useCallback(function () {
+    var mainEl = rootRef == null ? void 0 : rootRef.current;
+    if (!mainEl) {
+      return;
+    }
+    var win = ownerWindow(mainEl);
+    var computedStyle = win.getComputedStyle(mainEl);
+    var newHeight = parseFloat(computedStyle.height) || 0;
+    var newWidth = parseFloat(computedStyle.width) || 0;
+    setWidth(newWidth);
+    setHeight(newHeight);
+  }, []);
   React.useEffect(function () {
-    var element = ref.current;
-    if (element === null || inHeight !== undefined && inWidth !== undefined) {
+    // Ensure the error detection occurs after the first rendering.
+    displayError.current = true;
+  }, []);
+  useEnhancedEffect(function () {
+    if (inWidth !== undefined && inHeight !== undefined) {
       return function () {};
     }
-    var resizeObserver = new ResizeObserver(function (entries) {
-      if (Array.isArray(entries) && entries.length) {
-        var entry = entries[0];
-        if (inWidth === undefined) {
-          setWidth(entry.contentRect.width);
-        }
-        if (inHeight === undefined) {
-          setHeight(entry.contentRect.height);
-        }
-      }
+    computeSize();
+    var elementToObserve = rootRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return function () {};
+    }
+    var animationFrame;
+    var observer = new ResizeObserver(function () {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = window.requestAnimationFrame(function () {
+        computeSize();
+      });
     });
-    resizeObserver.observe(element);
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
     return function () {
-      return resizeObserver.disconnect();
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
     };
-  }, [height, inHeight, inWidth, width]);
-  return [ref, inWidth != null ? inWidth : width, inHeight != null ? inHeight : height];
+  }, [computeSize, inHeight, inWidth]);
+  if (process.env.NODE_ENV !== 'production') {
+    if (displayError.current && inWidth === undefined && width === 0) {
+      console.error("MUI: Charts does not have `width` prop, and its container has no `width` defined.");
+      displayError.current = false;
+    }
+    if (displayError.current && inHeight === undefined && height === 0) {
+      console.error("MUI: Charts does not have `height` prop, and its container has no `height` defined.");
+      displayError.current = false;
+    }
+  }
+  return [rootRef, inWidth != null ? inWidth : width, inHeight != null ? inHeight : height];
 };
+var ResizableContainer = styled('div', {
+  name: 'MuiResponsiveChart',
+  slot: 'Container'
+})(function (_ref) {
+  var _ownerState$width, _ownerState$height;
+  var ownerState = _ref.ownerState;
+  return {
+    width: (_ownerState$width = ownerState.width) != null ? _ownerState$width : '100%',
+    height: (_ownerState$height = ownerState.height) != null ? _ownerState$height : '100%',
+    display: 'flex',
+    position: 'relative',
+    flexGrow: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    '&>svg': {
+      width: '100%',
+      height: '100%'
+    }
+  };
+});
 export function ResponsiveChartContainer(props) {
-  var _props$width, _props$height;
-  var _useChartDimensions = useChartDimensions(props.width, props.height),
+  var propsWidth = props.width,
+    propsHeight = props.height,
+    other = _objectWithoutProperties(props, _excluded);
+  var _useChartDimensions = useChartDimensions(propsWidth, propsHeight),
     _useChartDimensions2 = _slicedToArray(_useChartDimensions, 3),
     containerRef = _useChartDimensions2[0],
     width = _useChartDimensions2[1],
     height = _useChartDimensions2[2];
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(ResizableContainer, {
     ref: containerRef,
-    style: {
-      width: (_props$width = props.width) != null ? _props$width : '100%',
-      height: (_props$height = props.height) != null ? _props$height : '100%',
-      padding: 0
+    ownerState: {
+      width: props.width,
+      height: props.height
     },
-    children: /*#__PURE__*/_jsx(ChartContainer, _extends({}, props, {
+    children: /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
       width: width,
       height: height
     }))

package/legacy/ScatterChart/Scatter.js

@@ -79,7 +79,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   color: PropTypes.string.isRequired,
   markerSize: PropTypes.number.isRequired,
   series: PropTypes.shape({
-    color: PropTypes.string.isRequired,
+    color: PropTypes.string,
     data: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
       x: PropTypes.number.isRequired,

package/legacy/ScatterChart/ScatterChart.js

@@ -62,7 +62,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     y: PropTypes.oneOf(['line', 'none'])
   }),
   /**
-   * Indicate which axis to display the the bottom of the charts.
+   * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default xAxisIds[0] The id of the first provided axis
    */
@@ -89,7 +89,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
   /**
-   * Indicate which axis to display the the left of the charts.
+   * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default yAxisIds[0] The id of the first provided axis
    */
@@ -109,6 +109,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
     itemWidth: PropTypes.number,
     markSize: PropTypes.number,
     offset: PropTypes.shape({
@@ -128,7 +129,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     top: PropTypes.number
   }),
   /**
-   * Indicate which axis to display the the right of the charts.
+   * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default null
    */
@@ -173,7 +174,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
-   * Indicate which axis to display the the top of the charts.
+   * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default null
    */

package/legacy/ScatterChart/legend.js

@@ -0,0 +1,15 @@
+var legendGetter = function legendGetter(params) {
+  var seriesOrder = params.seriesOrder,
+    series = params.series;
+  var data = seriesOrder.map(function (seriesId) {
+    return {
+      color: series[seriesId].color,
+      label: series[seriesId].label,
+      id: seriesId
+    };
+  });
+  return data.filter(function (item) {
+    return item.label !== undefined;
+  });
+};
+export default legendGetter;