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

package/PieChart/PiePlot.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PiePlot = PiePlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _SeriesContextProvider = require("../context/SeriesContextProvider");
+var _PieArc = _interopRequireDefault(require("./PieArc"));
+var _PieArcLabel = _interopRequireDefault(require("./PieArcLabel"));
+var _DrawingProvider = require("../context/DrawingProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const RATIO = 180 / Math.PI;
+function getItemLabel(arcLabel, arcLabelMinAngle, item) {
+  if (!arcLabel) {
+    return null;
+  }
+  const angle = (item.endAngle - item.startAngle) * RATIO;
+  if (angle < arcLabelMinAngle) {
+    return null;
+  }
+  if (typeof arcLabel === 'string') {
+    return item[arcLabel]?.toString();
+  }
+  return arcLabel(item);
+}
+function PiePlot() {
+  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).pie;
+  const {
+    left,
+    top,
+    width,
+    height
+  } = React.useContext(_DrawingProvider.DrawingContext);
+  if (seriesData === undefined) {
+    return null;
+  }
+  const availableRadius = Math.min(width, height) / 2;
+  const center = {
+    x: left + width / 2,
+    y: top + height / 2
+  };
+  const {
+    series,
+    seriesOrder
+  } = seriesData;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    children: seriesOrder.map(seriesId => {
+      const {
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        arcLabel,
+        arcLabelMinAngle = 0,
+        data,
+        cx,
+        cy,
+        highlighted,
+        faded
+      } = series[seriesId];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+          children: [data.map((item, index) => {
+            return /*#__PURE__*/(0, React.createElement)(_PieArc.default, (0, _extends2.default)({}, item, {
+              key: item.id,
+              innerRadius: innerRadius,
+              outerRadius: outerRadius ?? availableRadius,
+              cornerRadius: cornerRadius,
+              id: seriesId,
+              color: item.color,
+              dataIndex: index,
+              highlightScope: series[seriesId].highlightScope,
+              highlighted: highlighted,
+              faded: faded
+            }));
+          }), data.map((item, index) => {
+            return /*#__PURE__*/(0, React.createElement)(_PieArcLabel.default, (0, _extends2.default)({}, item, {
+              key: item.id,
+              innerRadius: innerRadius,
+              outerRadius: outerRadius ?? availableRadius,
+              cornerRadius: cornerRadius,
+              id: seriesId,
+              color: item.color,
+              dataIndex: index,
+              highlightScope: series[seriesId].highlightScope,
+              formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
+            }));
+          })]
+        })
+      }, seriesId);
+    })
+  });
+}

package/PieChart/formatter.d.ts

@@ -0,0 +1,3 @@
+import { Formatter } from '../models/seriesType/config';
+declare const formatter: Formatter<'pie'>;
+export default formatter;

package/PieChart/formatter.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _d3Shape = require("d3-shape");
+const getSortingComparator = (comparator = 'none') => {
+  if (typeof comparator === 'function') {
+    return comparator;
+  }
+  switch (comparator) {
+    case 'none':
+      return null;
+    case 'desc':
+      return (a, b) => b - a;
+    case 'asc':
+      return (a, b) => a - b;
+    default:
+      return null;
+  }
+};
+const formatter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const defaultizedSeries = {};
+  seriesOrder.forEach(seriesId => {
+    const arcs = (0, _d3Shape.pie)().startAngle(2 * Math.PI * (series[seriesId].startAngle ?? 0) / 360).endAngle(2 * Math.PI * (series[seriesId].endAngle ?? 360) / 360).padAngle(2 * Math.PI * (series[seriesId].paddingAngle ?? 0) / 360).sortValues(getSortingComparator(series[seriesId].sortingValues ?? 'none'))(series[seriesId].data.map(piePoint => piePoint.value));
+    defaultizedSeries[seriesId] = (0, _extends2.default)({
+      valueFormatter: item => item.value.toLocaleString()
+    }, series[seriesId], {
+      data: series[seriesId].data.map((item, index) => (0, _extends2.default)({}, item, {
+        id: item.id ?? `auto-generated-pie-id-${seriesId}-${index}`
+      }, arcs[index])).map(item => (0, _extends2.default)({}, item, {
+        formattedValue: series[seriesId].valueFormatter?.(item) ?? item.value.toLocaleString()
+      }))
+    });
+  });
+  return {
+    seriesOrder,
+    series: defaultizedSeries
+  };
+};
+var _default = formatter;
+exports.default = _default;

package/PieChart/index.d.ts

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

package/PieChart/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  PiePlot: true,
+  PieChart: true
+};
+Object.defineProperty(exports, "PieChart", {
+  enumerable: true,
+  get: function () {
+    return _PieChart.PieChart;
+  }
+});
+Object.defineProperty(exports, "PiePlot", {
+  enumerable: true,
+  get: function () {
+    return _PiePlot.PiePlot;
+  }
+});
+var _PiePlot = require("./PiePlot");
+var _PieChart = require("./PieChart");
+var _PieArc = require("./PieArc");
+Object.keys(_PieArc).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PieArc[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PieArc[key];
+    }
+  });
+});
+var _PieArcLabel = require("./PieArcLabel");
+Object.keys(_PieArcLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PieArcLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PieArcLabel[key];
+    }
+  });
+});

package/PieChart/legend.d.ts

@@ -0,0 +1,3 @@
+import { LegendGetter } from '../models/seriesType/config';
+declare const legendGetter: LegendGetter<'pie'>;
+export default legendGetter;

package/PieChart/legend.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const legendGetter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  return seriesOrder.flatMap(seriesId => series[seriesId].data.map(item => ({
+    color: item.color,
+    label: item.label,
+    id: item.id
+  })).filter(item => item.label !== undefined));
+};
+var _default = legendGetter;
+exports.default = _default;

package/PieChart/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/PieChart/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/README.md

@@ -1,5 +1,33 @@
 # @mui/x-charts
 
-Package under development.
+This package is the community edition of the charts components.
+It's part of MUI X, an open-core extension of MUI, with advanced components.
 
-The alpha phase will start in the coming months, stay tuned!
+## Installation
+
+Install the package in your project directory with:
+
+```bash
+npm install @mui/x-charts
+```
+
+or
+
+```bash
+yarn add @mui/x-charts
+```
+
+This component has the following peer dependencies that you will need to install as well.
+
+```json
+"peerDependencies": {
+    "@mui/material": "^5.4.1",
+    "@mui/system": "^5.4.1",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+},
+```
+
+## Documentation
+
+[The documentation](https://mui.com/x/react-charts/)

package/ResponsiveChartContainer/index.js

@@ -6,47 +6,113 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ResponsiveChartContainer = ResponsiveChartContainer;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _resizeObserver = require("@juggle/resize-observer");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
+var _styles = require("@mui/material/styles");
 var _ChartContainer = require("../ChartContainer");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["width", "height"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useChartDimensions = (inWidth, inHeight) => {
-  const ref = React.useRef(null);
+  const rootRef = React.useRef(null);
+  const displayError = React.useRef(false);
   const [width, setWidth] = React.useState(0);
   const [height, setHeight] = React.useState(0);
+
+  // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
+  const computeSize = React.useCallback(() => {
+    const mainEl = rootRef?.current;
+    if (!mainEl) {
+      return;
+    }
+    const win = (0, _ownerWindow.default)(mainEl);
+    const computedStyle = win.getComputedStyle(mainEl);
+    const newHeight = parseFloat(computedStyle.height) || 0;
+    const newWidth = parseFloat(computedStyle.width) || 0;
+    setWidth(newWidth);
+    setHeight(newHeight);
+  }, []);
   React.useEffect(() => {
-    const element = ref.current;
-    if (element === null || inHeight !== undefined && inWidth !== undefined) {
+    // Ensure the error detection occurs after the first rendering.
+    displayError.current = true;
+  }, []);
+  (0, _useEnhancedEffect.default)(() => {
+    if (inWidth !== undefined && inHeight !== undefined) {
       return () => {};
     }
-    const resizeObserver = new _resizeObserver.ResizeObserver(entries => {
-      if (Array.isArray(entries) && entries.length) {
-        const entry = entries[0];
-        if (inWidth === undefined) {
-          setWidth(entry.contentRect.width);
-        }
-        if (inHeight === undefined) {
-          setHeight(entry.contentRect.height);
-        }
-      }
+    computeSize();
+    const elementToObserve = rootRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+    let animationFrame;
+    const observer = new ResizeObserver(() => {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = window.requestAnimationFrame(() => {
+        computeSize();
+      });
     });
-    resizeObserver.observe(element);
-    return () => resizeObserver.disconnect();
-  }, [height, inHeight, inWidth, width]);
-  return [ref, inWidth ?? width, inHeight ?? height];
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return () => {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [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 ?? width, inHeight ?? height];
 };
+const ResizableContainer = (0, _styles.styled)('div', {
+  name: 'MuiResponsiveChart',
+  slot: 'Container'
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexGrow: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  '&>svg': {
+    width: '100%',
+    height: '100%'
+  }
+}));
 function ResponsiveChartContainer(props) {
-  const [containerRef, width, height] = useChartDimensions(props.width, props.height);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const {
+      width: propsWidth,
+      height: propsHeight
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const [containerRef, width, height] = useChartDimensions(propsWidth, propsHeight);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, {
     ref: containerRef,
-    style: {
-      width: props.width ?? '100%',
-      height: props.height ?? '100%',
-      padding: 0
+    ownerState: {
+      width: props.width,
+      height: props.height
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, props, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, other, {
       width: width,
       height: height
     }))

package/ScatterChart/Scatter.js

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

package/ScatterChart/ScatterChart.js

@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     y: _propTypes.default.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
    */
@@ -97,7 +97,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   disableAxisListener: _propTypes.default.bool,
   height: _propTypes.default.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
    */
@@ -117,6 +117,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   legend: _propTypes.default.shape({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
+    hidden: _propTypes.default.bool,
     itemWidth: _propTypes.default.number,
     markSize: _propTypes.default.number,
     offset: _propTypes.default.shape({
@@ -136,7 +137,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     top: _propTypes.default.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
    */
@@ -181,7 +182,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     trigger: _propTypes.default.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/ScatterChart/legend.d.ts

@@ -0,0 +1,3 @@
+import { LegendGetter } from '../models/seriesType/config';
+declare const legendGetter: LegendGetter<'scatter'>;
+export default legendGetter;

package/ScatterChart/legend.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const legendGetter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const data = seriesOrder.map(seriesId => ({
+    color: series[seriesId].color,
+    label: series[seriesId].label,
+    id: seriesId
+  }));
+  return data.filter(item => item.label !== undefined);
+};
+var _default = legendGetter;
+exports.default = _default;

package/context/SeriesContextProvider.js

@@ -12,6 +12,7 @@ var _styles = require("@mui/material/styles");
 var _formatter = _interopRequireDefault(require("../BarChart/formatter"));
 var _formatter2 = _interopRequireDefault(require("../ScatterChart/formatter"));
 var _formatter3 = _interopRequireDefault(require("../LineChart/formatter"));
+var _formatter4 = _interopRequireDefault(require("../PieChart/formatter"));
 var _defaultizeColor = require("../internals/defaultizeColor");
 var _colorPalettes = require("../colorPalettes");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -22,8 +23,17 @@ exports.SeriesContext = SeriesContext;
 const seriesTypeFormatter = {
   bar: _formatter.default,
   scatter: _formatter2.default,
-  line: _formatter3.default
+  line: _formatter3.default,
+  pie: _formatter4.default
 };
+/**
+ * This methods is the interface between what the developper is providing and what compoenents receives
+ * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if soe line data are modified
+ * It also add defaultized values such as the ids, colors
+ * @param series The array of series provided by devs
+ * @param colors The color palette used to defaultize series colors
+ * @returns An object structuring all the series by type.
+ */
 const formatSeries = (series, colors) => {
   // Group series by type
   const seriesGroups = {};

package/esm/BarChart/BarChart.js

@@ -43,7 +43,9 @@ function BarChart(props) {
     xAxis: xAxis != null ? xAxis : [{
       id: DEFAULT_X_AXIS_KEY,
       scaleType: 'band',
-      data: [...new Array(Math.max(...series.map(s => s.data.length)))].map((_, index) => index)
+      data: Array.from({
+        length: Math.max(...series.map(s => s.data.length))
+      }, (_, index) => index)
     }],
     yAxis: yAxis,
     colors: colors,
@@ -74,7 +76,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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
    */
@@ -101,7 +103,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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
    */
@@ -121,6 +123,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
     itemWidth: PropTypes.number,
     markSize: PropTypes.number,
     offset: PropTypes.shape({
@@ -140,7 +143,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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
    */
@@ -183,7 +186,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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/esm/BarChart/legend.js

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

package/esm/ChartsAxis/ChartsAxis.js

@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * 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
    */
@@ -88,7 +88,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
-   * 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
    */
@@ -106,7 +106,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
-   * 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
    */
@@ -124,7 +124,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
-   * 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/esm/ChartsLegend/ChartsLegend.js

@@ -146,7 +146,8 @@ export function ChartsLegend(inProps) {
   const {
     position,
     direction,
-    offset
+    offset,
+    hidden
   } = props;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, props, {
@@ -154,6 +155,9 @@ export function ChartsLegend(inProps) {
   }));
   const drawingArea = React.useContext(DrawingContext);
   const series = React.useContext(SeriesContext);
+  if (hidden) {
+    return null;
+  }
   const seriesToDisplay = getSeriesToDisplay(series);
   return /*#__PURE__*/_jsx(ChartsLegendRoot, {
     ownerState: {

package/esm/ChartsLegend/utils.js

@@ -1,3 +1,13 @@
+import getBarLegend from '../BarChart/legend';
+import getScatterLegend from '../ScatterChart/legend';
+import getLineLegend from '../LineChart/legend';
+import getPieLegend from '../PieChart/legend';
+const legendGetter = {
+  bar: getBarLegend,
+  scatter: getScatterLegend,
+  line: getLineLegend,
+  pie: getPieLegend
+};
 export function getSeriesToDisplay(series) {
-  return Object.values(series).flatMap(s => s.seriesOrder.map(seriesId => s.series[seriesId])).filter(s => s.label !== undefined);
+  return Object.keys(series).flatMap(seriesType => legendGetter[seriesType](series[seriesType]));
 }