@mui/x-charts 6.0.0-alpha.1 → 6.0.0-alpha.3

package/PieChart/PieChart.js

@@ -0,0 +1,292 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PieChart = PieChart;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
+var _ChartsAxis = require("../ChartsAxis/ChartsAxis");
+var _constants = require("../constants");
+var _ChartsTooltip = require("../ChartsTooltip");
+var _ChartsLegend = require("../ChartsLegend");
+var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
+var _PiePlot = require("./PiePlot");
+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 defaultMargin = {
+  top: 5,
+  bottom: 5,
+  left: 5,
+  right: 100
+};
+function PieChart(props) {
+  const {
+    xAxis,
+    yAxis,
+    series,
+    width,
+    height,
+    margin: marginProps,
+    colors,
+    sx,
+    tooltip = {
+      trigger: 'item'
+    },
+    axisHighlight = {
+      x: 'none',
+      y: 'none'
+    },
+    legend = {
+      direction: 'column',
+      position: {
+        vertical: 'middle',
+        horizontal: 'right'
+      }
+    },
+    topAxis = null,
+    leftAxis = null,
+    rightAxis = null,
+    bottomAxis = null,
+    children
+  } = props;
+  const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
+    series: series.map(s => (0, _extends2.default)({
+      type: 'pie'
+    }, s)),
+    width: width,
+    height: height,
+    margin: margin,
+    xAxis: xAxis ?? [{
+      id: _constants.DEFAULT_X_AXIS_KEY,
+      scaleType: 'point',
+      data: [...new Array(Math.max(...series.map(s => s.data.length)))].map((_, index) => index)
+    }],
+    yAxis: yAxis,
+    colors: colors,
+    sx: sx,
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
+      topAxis: topAxis,
+      leftAxis: leftAxis,
+      rightAxis: rightAxis,
+      bottomAxis: bottomAxis
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, 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.default.shape({
+    x: _propTypes.default.oneOf(['band', 'line', 'none']),
+    y: _propTypes.default.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.default.oneOfType([_propTypes.default.shape({
+    axisId: _propTypes.default.string.isRequired,
+    classes: _propTypes.default.object,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'top']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number
+  }), _propTypes.default.string]),
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  /**
+   * Color palette used to colorize multiple series.
+   */
+  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  desc: _propTypes.default.string,
+  disableAxisListener: _propTypes.default.bool,
+  height: _propTypes.default.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.default.oneOfType([_propTypes.default.shape({
+    axisId: _propTypes.default.string.isRequired,
+    classes: _propTypes.default.object,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['left', 'right']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number
+  }), _propTypes.default.string]),
+  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({
+      x: _propTypes.default.number,
+      y: _propTypes.default.number
+    }),
+    position: _propTypes.default.shape({
+      horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
+      vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
+    }),
+    spacing: _propTypes.default.number
+  }),
+  margin: _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.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.default.oneOfType([_propTypes.default.shape({
+    axisId: _propTypes.default.string.isRequired,
+    classes: _propTypes.default.object,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['left', 'right']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number
+  }), _propTypes.default.string]),
+  series: _propTypes.default.arrayOf(_propTypes.default.shape({
+    arcLabel: _propTypes.default.oneOfType([_propTypes.default.oneOf(['formattedValue', 'label', 'value']), _propTypes.default.func]),
+    arcLabelMinAngle: _propTypes.default.number,
+    color: _propTypes.default.string,
+    cornerRadius: _propTypes.default.number,
+    cx: _propTypes.default.number,
+    cy: _propTypes.default.number,
+    data: _propTypes.default.arrayOf(_propTypes.default.shape({
+      color: _propTypes.default.string,
+      id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+      label: _propTypes.default.string,
+      value: _propTypes.default.number.isRequired
+    })).isRequired,
+    endAngle: _propTypes.default.number,
+    faded: _propTypes.default.shape({
+      additionalRadius: _propTypes.default.number,
+      cornerRadius: _propTypes.default.number,
+      innerRadius: _propTypes.default.number,
+      outerRadius: _propTypes.default.number
+    }),
+    highlighted: _propTypes.default.shape({
+      additionalRadius: _propTypes.default.number,
+      cornerRadius: _propTypes.default.number,
+      innerRadius: _propTypes.default.number,
+      outerRadius: _propTypes.default.number
+    }),
+    highlightScope: _propTypes.default.shape({
+      faded: _propTypes.default.oneOf(['global', 'none', 'series']),
+      highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
+    }),
+    id: _propTypes.default.string,
+    innerRadius: _propTypes.default.number,
+    outerRadius: _propTypes.default.number,
+    paddingAngle: _propTypes.default.number,
+    sortingValues: _propTypes.default.oneOfType([_propTypes.default.oneOf(['asc', 'desc', 'none']), _propTypes.default.func]),
+    startAngle: _propTypes.default.number,
+    type: _propTypes.default.oneOf(['pie']),
+    valueFormatter: _propTypes.default.func
+  })).isRequired,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  title: _propTypes.default.string,
+  tooltip: _propTypes.default.shape({
+    axisContent: _propTypes.default.elementType,
+    classes: _propTypes.default.object,
+    itemContent: _propTypes.default.elementType,
+    trigger: _propTypes.default.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.default.oneOfType([_propTypes.default.shape({
+    axisId: _propTypes.default.string.isRequired,
+    classes: _propTypes.default.object,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'top']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number
+  }), _propTypes.default.string]),
+  viewBox: _propTypes.default.shape({
+    height: _propTypes.default.number,
+    width: _propTypes.default.number,
+    x: _propTypes.default.number,
+    y: _propTypes.default.number
+  }),
+  width: _propTypes.default.number,
+  xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.string,
+    classes: _propTypes.default.object,
+    data: _propTypes.default.array,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    id: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    max: _propTypes.default.number,
+    maxTicks: _propTypes.default.number,
+    min: _propTypes.default.number,
+    minTicks: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func
+  })),
+  yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.string,
+    classes: _propTypes.default.object,
+    data: _propTypes.default.array,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    id: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    max: _propTypes.default.number,
+    maxTicks: _propTypes.default.number,
+    min: _propTypes.default.number,
+    minTicks: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func
+  }))
+} : void 0;

package/PieChart/PiePlot.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function PiePlot(): React.JSX.Element | null;

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

@@ -7,13 +7,13 @@ It's part of MUI X, an open-core extension of MUI, with advanced components.
 
 Install the package in your project directory with:
 
-```sh
+```bash
 npm install @mui/x-charts
 ```
 
 or
 
-```sh
+```bash
 yarn add @mui/x-charts
 ```
 

package/ResponsiveChartContainer/index.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 import { ChartContainerProps } from '../ChartContainer';
 import { MakeOptional } from '../models/helpers';
 export type ResponsiveChartContainerProps = MakeOptional<ChartContainerProps, 'width' | 'height'>;
-export declare function ResponsiveChartContainer(props: ResponsiveChartContainerProps): React.JSX.Element;
+export declare const ResponsiveChartContainer: React.ForwardRefExoticComponent<Omit<ChartContainerProps, "height" | "width"> & Partial<Pick<ChartContainerProps, "height" | "width">> & React.RefAttributes<unknown>>;

package/ResponsiveChartContainer/index.js

@@ -4,14 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ResponsiveChartContainer = ResponsiveChartContainer;
+exports.ResponsiveChartContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 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) => {
@@ -91,19 +93,30 @@ const ResizableContainer = (0, _styles.styled)('div', {
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
-  overflow: 'hidden'
+  overflow: 'hidden',
+  '&>svg': {
+    width: '100%',
+    height: '100%'
+  }
 }));
-function ResponsiveChartContainer(props) {
-  const [containerRef, width, height] = useChartDimensions(props.width, props.height);
+const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
+  const {
+      width: inWidth,
+      height: inHeight
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const [containerRef, width, height] = useChartDimensions(inWidth, inHeight);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, {
     ref: containerRef,
     ownerState: {
-      width: props.width,
-      height: props.height
+      width: inWidth,
+      height: inHeight
     },
-    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
+      height: height,
+      ref: ref
     }))
   });
-}
+});
+exports.ResponsiveChartContainer = ResponsiveChartContainer;

package/ScatterChart/Scatter.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DefaultizedScatterSeriesType } from '../models/seriesType/scatter';
-import { D3Scale } from '../hooks/useScale';
+import { D3Scale } from '../models/axis';
 export interface ScatterProps {
     series: DefaultizedScatterSeriesType;
     xScale: D3Scale;

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.d.ts

@@ -12,8 +12,5 @@ export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, '
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
 }
-declare function ScatterChart(props: ScatterChartProps): React.JSX.Element;
-declare namespace ScatterChart {
-    var propTypes: any;
-}
+declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<unknown>>;
 export { ScatterChart };