@mui/x-charts 6.0.0-alpha.5 → 6.0.0-alpha.7

package/legacy/LineChart/LineChart.js

@@ -23,6 +23,7 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     height = props.height,
     margin = props.margin,
     colors = props.colors,
+    dataset = props.dataset,
     sx = props.sx,
     tooltip = props.tooltip,
     _props$axisHighlight = props.axisHighlight,
@@ -34,7 +35,9 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     leftAxis = props.leftAxis,
     rightAxis = props.rightAxis,
     bottomAxis = props.bottomAxis,
-    children = props.children;
+    children = props.children,
+    slots = props.slots,
+    slotProps = props.slotProps;
   var id = useId();
   var clipPathId = "".concat(id, "-clip-path");
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
@@ -52,7 +55,8 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
       scaleType: 'point',
       data: Array.from({
         length: Math.max.apply(Math, _toConsumableArray(series.map(function (s) {
-          return s.data.length;
+          var _ref, _s$data;
+          return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
         })))
       }, function (_, index) {
         return index;
@@ -60,17 +64,32 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     }],
     yAxis: yAxis,
     colors: colors,
+    dataset: dataset,
     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__*/_jsxs("g", {
       clipPath: "url(#".concat(clipPathId, ")"),
-      children: [/*#__PURE__*/_jsx(AreaPlot, {}), /*#__PURE__*/_jsx(LinePlot, {})]
+      children: [/*#__PURE__*/_jsx(AreaPlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/_jsx(LinePlot, {
+        slots: slots,
+        slotProps: slotProps
+      })]
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/_jsx(MarkPlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(MarkPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -98,8 +117,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   children: PropTypes.node,
@@ -108,6 +132,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
@@ -125,8 +150,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   legend: PropTypes.shape({
@@ -143,6 +173,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     spacing: PropTypes.number
   }),
   margin: PropTypes.shape({
@@ -165,15 +197,21 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   series: PropTypes.arrayOf(PropTypes.shape({
     area: PropTypes.bool,
     color: PropTypes.string,
     curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
-    data: PropTypes.arrayOf(PropTypes.number).isRequired,
+    data: PropTypes.arrayOf(PropTypes.number),
+    dataKey: PropTypes.string,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
@@ -188,6 +226,16 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     xAxisKey: PropTypes.string,
     yAxisKey: PropTypes.string
   })).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   tooltip: PropTypes.shape({
@@ -210,8 +258,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   viewBox: PropTypes.shape({
@@ -225,44 +278,52 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     axisId: PropTypes.string,
     classes: PropTypes.object,
     data: PropTypes.array,
+    dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
-    maxTicks: PropTypes.number,
-    min: PropTypes.number,
-    minTicks: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: 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,
+    dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
-    maxTicks: PropTypes.number,
-    min: PropTypes.number,
-    minTicks: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }))
 } : void 0;

package/legacy/LineChart/LineElement.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "classes", "color", "highlightScope"];
+var _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { color as d3Color } from 'd3-color';
 import composeClasses from '@mui/utils/composeClasses';
+import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
@@ -25,7 +26,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getLineElementUtilityClass, classes);
 };
-var LineElementPath = styled('path', {
+export var LineElementPath = styled('path', {
   name: 'MuiLineElement',
   slot: 'Root',
   overridesResolver: function overridesResolver(_, styles) {
@@ -58,10 +59,13 @@ LineElementPath.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
 function LineElement(props) {
+  var _slots$line;
   var id = props.id,
     innerClasses = props.classes,
     color = props.color,
     highlightScope = props.highlightScope,
+    slots = props.slots,
+    slotProps = props.slotProps,
     other = _objectWithoutProperties(props, _excluded);
   var getInteractionItemProps = useInteractionItemProps(highlightScope);
   var _React$useContext = React.useContext(InteractionContext),
@@ -82,13 +86,19 @@ function LineElement(props) {
     isHighlighted: isHighlighted
   };
   var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(LineElementPath, _extends({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'line',
-    seriesId: id
-  })));
+  var Line = (_slots$line = slots == null ? void 0 : slots.line) != null ? _slots$line : LineElementPath;
+  var lineProps = useSlotProps({
+    elementType: Line,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.line,
+    additionalProps: _extends({}, other, getInteractionItemProps({
+      type: 'line',
+      seriesId: id
+    }), {
+      className: classes.root
+    }),
+    ownerState: ownerState
+  });
+  return /*#__PURE__*/_jsx(Line, _extends({}, lineProps));
 }
 process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -99,6 +109,16 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   highlightScope: PropTypes.shape({
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  })
+  }),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
 } : void 0;
 export { LineElement };

package/legacy/LineChart/LinePlot.js

@@ -1,4 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["slots", "slotProps"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { line as d3Line } from 'd3-shape';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
@@ -6,7 +10,10 @@ import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function LinePlot() {
+function LinePlot(props) {
+  var slots = props.slots,
+    slotProps = props.slotProps,
+    other = _objectWithoutProperties(props, _excluded);
   var seriesData = React.useContext(SeriesContext).line;
   var axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -20,7 +27,7 @@ export function LinePlot() {
     yAxisIds = axisData.yAxisIds;
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
     children: stackingGroups.flatMap(function (_ref) {
       var groupIds = _ref.ids;
       return groupIds.flatMap(function (seriesId) {
@@ -41,20 +48,45 @@ export function LinePlot() {
         }).y(function (d) {
           return yScale(d.y[1]);
         });
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData.length !== stackedData.length) {
+            throw new Error("MUI: data length of the x axis (".concat(xData.length, " items) does not match length of series (").concat(stackedData.length, " items)"));
+          }
+        }
         var curve = getCurveFactory(series[seriesId].curve);
         var d3Data = xData == null ? void 0 : xData.map(function (x, index) {
+          var _stackedData$index;
           return {
             x: x,
-            y: stackedData[index]
+            y: (_stackedData$index = stackedData[index]) != null ? _stackedData$index : [0, 0]
           };
         });
         return /*#__PURE__*/_jsx(LineElement, {
           id: seriesId,
           d: linePath.curve(curve)(d3Data) || undefined,
           color: series[seriesId].color,
-          highlightScope: series[seriesId].highlightScope
+          highlightScope: series[seriesId].highlightScope,
+          slots: slots,
+          slotProps: slotProps
         }, seriesId);
       });
     })
-  });
-}
+  }));
+}
+process.env.NODE_ENV !== "production" ? LinePlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { LinePlot };

package/legacy/LineChart/MarkElement.js

@@ -38,7 +38,7 @@ var MarkElementPath = styled('path', {
   return {
     transform: "translate(".concat(ownerState.x, "px, ").concat(ownerState.y, "px)"),
     transformOrigin: "".concat(ownerState.x, "px ").concat(ownerState.y, "px"),
-    fill: (theme.vars || theme).palette.background.paper,
+    fill: theme.palette.background.paper,
     stroke: ownerState.color,
     strokeWidth: 2,
     '&.MuiMarkElement-highlighted': {

package/legacy/LineChart/MarkPlot.js

@@ -1,13 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function MarkPlot() {
+function MarkPlot(props) {
+  var _slots$mark;
+  var slots = props.slots,
+    slotProps = props.slotProps;
   var seriesData = React.useContext(SeriesContext).line;
   var axisData = React.useContext(CartesianContext);
+  var Mark = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : MarkElement;
   if (seriesData === undefined) {
     return null;
   }
@@ -19,7 +25,7 @@ export function MarkPlot() {
     yAxisIds = axisData.yAxisIds;
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsx("g", _extends({}, props, {
     children: stackingGroups.flatMap(function (_ref) {
       var groupIds = _ref.ids;
       return groupIds.flatMap(function (seriesId) {
@@ -59,7 +65,7 @@ export function MarkPlot() {
           var x = _ref3.x,
             y = _ref3.y,
             index = _ref3.index;
-          return /*#__PURE__*/_jsx(MarkElement, {
+          return /*#__PURE__*/_jsx(Mark, _extends({
             id: seriesId,
             dataIndex: index,
             shape: "circle",
@@ -67,9 +73,26 @@ export function MarkPlot() {
             x: x,
             y: y,
             highlightScope: series[seriesId].highlightScope
-          }, "".concat(seriesId, "-").concat(index));
+          }, slotProps == null ? void 0 : slotProps.mark), "".concat(seriesId, "-").concat(index));
         });
       });
     })
-  });
-}
+  }));
+}
+process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { MarkPlot };

package/legacy/LineChart/formatter.js

@@ -4,23 +4,27 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
-
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
-var formatter = function formatter(params) {
+var formatter = function formatter(params, dataset) {
   var seriesOrder = params.seriesOrder,
     series = params.series;
   var stackingGroups = getStackingGroups(params);
 
   // Create a data set with format adapted to d3
-  var d3Dataset = [];
+  var d3Dataset = dataset != null ? dataset : [];
   seriesOrder.forEach(function (id) {
-    series[id].data.forEach(function (value, index) {
-      if (d3Dataset.length <= index) {
-        d3Dataset.push(_defineProperty({}, id, value));
-      } else {
-        d3Dataset[index][id] = value;
-      }
-    });
+    var data = series[id].data;
+    if (data !== undefined) {
+      data.forEach(function (value, index) {
+        if (d3Dataset.length <= index) {
+          d3Dataset.push(_defineProperty({}, id, value));
+        } else {
+          d3Dataset[index][id] = value;
+        }
+      });
+    } else if (dataset === undefined) {
+      throw new Error(["MUI: line series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+    }
   });
   var completedSeries = {};
   stackingGroups.forEach(function (stackingGroup) {
@@ -28,9 +32,17 @@ var formatter = function formatter(params) {
     var ids = stackingGroup.ids,
       stackingOrder = stackingGroup.stackingOrder,
       stackingOffset = stackingGroup.stackingOffset;
-    var stackedSeries = d3Stack().keys(ids).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    var stackedSeries = d3Stack().keys(ids.map(function (id) {
+      // Use dataKey if needed and available
+      var dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach(function (id, index) {
+      var dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
+        data: dataKey ? dataset.map(function (d) {
+          return d[dataKey];
+        }) : series[id].data,
         stackedData: stackedSeries[index].map(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
             a = _ref2[0],

package/legacy/PieChart/PieArcLabel.js

@@ -35,7 +35,6 @@ var PieArcLabelRoot = styled('text', {
   var theme = _ref.theme;
   return {
     fill: theme.palette.text.primary,
-    alignmentBaseline: 'baseline',
     textAnchor: 'middle'
   };
 });