@mui/x-charts 6.0.0-alpha.6 → 6.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/BarChart/BarChart.d.ts +19 -2
  2. package/BarChart/BarChart.js +84 -22
  3. package/BarChart/BarElement.d.ts +22 -0
  4. package/BarChart/BarElement.js +21 -10
  5. package/BarChart/BarPlot.d.ts +14 -1
  6. package/BarChart/BarPlot.js +48 -19
  7. package/BarChart/extremums.js +19 -3
  8. package/BarChart/formatter.js +3 -1
  9. package/CHANGELOG.md +213 -28
  10. package/ChartsAxis/ChartsAxis.d.ts +11 -1
  11. package/ChartsAxis/ChartsAxis.js +51 -6
  12. package/ChartsAxisHighlight/ChartsAxisHighlight.d.ts +3 -2
  13. package/ChartsAxisHighlight/ChartsAxisHighlight.js +11 -3
  14. package/ChartsLegend/ChartsLegend.d.ts +25 -2
  15. package/ChartsLegend/ChartsLegend.js +49 -17
  16. package/ChartsTooltip/ChartsAxisTooltipContent.js +13 -9
  17. package/ChartsTooltip/ChartsTooltipTable.d.ts +2 -9
  18. package/ChartsXAxis/ChartsXAxis.js +44 -9
  19. package/ChartsYAxis/ChartsYAxis.js +44 -9
  20. package/LineChart/AreaElement.d.ts +22 -0
  21. package/LineChart/AreaElement.js +31 -11
  22. package/LineChart/AreaPlot.d.ts +14 -1
  23. package/LineChart/AreaPlot.js +29 -3
  24. package/LineChart/LineChart.d.ts +20 -2
  25. package/LineChart/LineChart.js +63 -11
  26. package/LineChart/LineElement.d.ts +22 -0
  27. package/LineChart/LineElement.js +31 -10
  28. package/LineChart/LinePlot.d.ts +14 -1
  29. package/LineChart/LinePlot.js +35 -4
  30. package/LineChart/MarkPlot.d.ts +24 -1
  31. package/LineChart/MarkPlot.js +29 -4
  32. package/PieChart/PieArcLabel.js +0 -1
  33. package/PieChart/PieChart.d.ts +14 -2
  34. package/PieChart/PieChart.js +52 -10
  35. package/PieChart/PiePlot.d.ts +27 -1
  36. package/PieChart/PiePlot.js +29 -6
  37. package/ScatterChart/ScatterChart.d.ts +18 -2
  38. package/ScatterChart/ScatterChart.js +56 -10
  39. package/ScatterChart/ScatterPlot.d.ts +24 -1
  40. package/ScatterChart/ScatterPlot.js +28 -4
  41. package/SparkLineChart/SparkLineChart.d.ts +18 -0
  42. package/SparkLineChart/SparkLineChart.js +29 -6
  43. package/colorPalettes/colorPalettes.js +2 -2
  44. package/context/CartesianContextProvider.js +18 -12
  45. package/esm/BarChart/BarChart.js +88 -26
  46. package/esm/BarChart/BarElement.js +21 -11
  47. package/esm/BarChart/BarPlot.js +49 -20
  48. package/esm/BarChart/extremums.js +18 -2
  49. package/esm/BarChart/formatter.js +3 -1
  50. package/esm/ChartsAxis/ChartsAxis.js +51 -6
  51. package/esm/ChartsAxisHighlight/ChartsAxisHighlight.js +11 -3
  52. package/esm/ChartsLegend/ChartsLegend.js +47 -14
  53. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +13 -9
  54. package/esm/ChartsXAxis/ChartsXAxis.js +45 -9
  55. package/esm/ChartsYAxis/ChartsYAxis.js +45 -9
  56. package/esm/LineChart/AreaElement.js +31 -11
  57. package/esm/LineChart/AreaPlot.js +31 -4
  58. package/esm/LineChart/LineChart.js +63 -11
  59. package/esm/LineChart/LineElement.js +31 -11
  60. package/esm/LineChart/LinePlot.js +43 -8
  61. package/esm/LineChart/MarkPlot.js +32 -5
  62. package/esm/PieChart/PieArcLabel.js +0 -1
  63. package/esm/PieChart/PieChart.js +52 -10
  64. package/esm/PieChart/PiePlot.js +31 -6
  65. package/esm/ScatterChart/ScatterChart.js +56 -10
  66. package/esm/ScatterChart/ScatterPlot.js +29 -4
  67. package/esm/SparkLineChart/SparkLineChart.js +29 -6
  68. package/esm/colorPalettes/colorPalettes.js +2 -2
  69. package/esm/context/CartesianContextProvider.js +18 -12
  70. package/esm/hooks/useAxisEvents.js +21 -38
  71. package/esm/hooks/useTicks.js +11 -8
  72. package/esm/internals/components/AxisSharedComponents.js +10 -10
  73. package/hooks/useAxisEvents.js +21 -38
  74. package/hooks/useTicks.d.ts +20 -5
  75. package/hooks/useTicks.js +11 -8
  76. package/index.js +1 -1
  77. package/internals/components/AxisSharedComponents.d.ts +4 -4
  78. package/internals/components/AxisSharedComponents.js +15 -15
  79. package/internals/defaultizeColor.d.ts +1 -0
  80. package/legacy/BarChart/BarChart.js +93 -29
  81. package/legacy/BarChart/BarElement.js +20 -10
  82. package/legacy/BarChart/BarPlot.js +49 -20
  83. package/legacy/BarChart/extremums.js +22 -2
  84. package/legacy/BarChart/formatter.js +3 -1
  85. package/legacy/ChartsAxis/ChartsAxis.js +51 -6
  86. package/legacy/ChartsAxisHighlight/ChartsAxisHighlight.js +11 -3
  87. package/legacy/ChartsLegend/ChartsLegend.js +46 -15
  88. package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +13 -9
  89. package/legacy/ChartsXAxis/ChartsXAxis.js +45 -9
  90. package/legacy/ChartsYAxis/ChartsYAxis.js +45 -9
  91. package/legacy/LineChart/AreaElement.js +30 -10
  92. package/legacy/LineChart/AreaPlot.js +29 -4
  93. package/legacy/LineChart/LineChart.js +63 -11
  94. package/legacy/LineChart/LineElement.js +30 -10
  95. package/legacy/LineChart/LinePlot.js +36 -5
  96. package/legacy/LineChart/MarkPlot.js +30 -5
  97. package/legacy/PieChart/PieArcLabel.js +0 -1
  98. package/legacy/PieChart/PieChart.js +52 -10
  99. package/legacy/PieChart/PiePlot.js +29 -6
  100. package/legacy/ScatterChart/ScatterChart.js +56 -10
  101. package/legacy/ScatterChart/ScatterPlot.js +27 -4
  102. package/legacy/SparkLineChart/SparkLineChart.js +29 -6
  103. package/legacy/colorPalettes/colorPalettes.js +2 -2
  104. package/legacy/context/CartesianContextProvider.js +18 -12
  105. package/legacy/hooks/useAxisEvents.js +21 -37
  106. package/legacy/hooks/useTicks.js +11 -11
  107. package/legacy/index.js +1 -1
  108. package/legacy/internals/components/AxisSharedComponents.js +10 -10
  109. package/models/axis.d.ts +24 -1
  110. package/models/seriesType/bar.d.ts +6 -1
  111. package/modern/BarChart/BarChart.js +85 -23
  112. package/modern/BarChart/BarElement.js +20 -11
  113. package/modern/BarChart/BarPlot.js +48 -19
  114. package/modern/BarChart/extremums.js +18 -2
  115. package/modern/BarChart/formatter.js +3 -1
  116. package/modern/ChartsAxis/ChartsAxis.js +51 -6
  117. package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js +11 -3
  118. package/modern/ChartsLegend/ChartsLegend.js +46 -14
  119. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +13 -9
  120. package/modern/ChartsXAxis/ChartsXAxis.js +44 -9
  121. package/modern/ChartsYAxis/ChartsYAxis.js +44 -9
  122. package/modern/LineChart/AreaElement.js +30 -11
  123. package/modern/LineChart/AreaPlot.js +31 -4
  124. package/modern/LineChart/LineChart.js +63 -11
  125. package/modern/LineChart/LineElement.js +30 -11
  126. package/modern/LineChart/LinePlot.js +37 -5
  127. package/modern/LineChart/MarkPlot.js +31 -5
  128. package/modern/PieChart/PieArcLabel.js +0 -1
  129. package/modern/PieChart/PieChart.js +52 -10
  130. package/modern/PieChart/PiePlot.js +30 -6
  131. package/modern/ScatterChart/ScatterChart.js +56 -10
  132. package/modern/ScatterChart/ScatterPlot.js +28 -4
  133. package/modern/SparkLineChart/SparkLineChart.js +29 -6
  134. package/modern/colorPalettes/colorPalettes.js +2 -2
  135. package/modern/context/CartesianContextProvider.js +18 -12
  136. package/modern/hooks/useAxisEvents.js +21 -38
  137. package/modern/hooks/useTicks.js +11 -8
  138. package/modern/index.js +1 -1
  139. package/modern/internals/components/AxisSharedComponents.js +10 -10
  140. package/package.json +5 -5
  141. package/themeAugmentation/components.d.ts +0 -10
  142. package/themeAugmentation/overrides.d.ts +0 -2
@@ -1,5 +1,8 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
+ const _excluded = ["slots", "slotProps"];
2
4
  import * as React from 'react';
5
+ import PropTypes from 'prop-types';
3
6
  import { area as d3Area } from 'd3-shape';
4
7
  import { SeriesContext } from '../context/SeriesContextProvider';
5
8
  import { CartesianContext } from '../context/CartesianContextProvider';
@@ -7,7 +10,12 @@ import { AreaElement } from './AreaElement';
7
10
  import { getValueToPositionMapper } from '../hooks/useScale';
8
11
  import getCurveFactory from '../internals/getCurve';
9
12
  import { jsx as _jsx } from "react/jsx-runtime";
10
- export function AreaPlot(props) {
13
+ function AreaPlot(props) {
14
+ const {
15
+ slots,
16
+ slotProps
17
+ } = props,
18
+ other = _objectWithoutPropertiesLoose(props, _excluded);
11
19
  const seriesData = React.useContext(SeriesContext).line;
12
20
  const axisData = React.useContext(CartesianContext);
13
21
  if (seriesData === undefined) {
@@ -25,7 +33,7 @@ export function AreaPlot(props) {
25
33
  } = axisData;
26
34
  const defaultXAxisId = xAxisIds[0];
27
35
  const defaultYAxisId = yAxisIds[0];
28
- return /*#__PURE__*/_jsx("g", _extends({}, props, {
36
+ return /*#__PURE__*/_jsx("g", _extends({}, other, {
29
37
  children: stackingGroups.flatMap(({
30
38
  ids: groupIds
31
39
  }) => {
@@ -51,9 +59,28 @@ export function AreaPlot(props) {
51
59
  id: seriesId,
52
60
  d: areaPath.curve(curve)(d3Data) || undefined,
53
61
  color: series[seriesId].color,
54
- highlightScope: series[seriesId].highlightScope
62
+ highlightScope: series[seriesId].highlightScope,
63
+ slots: slots,
64
+ slotProps: slotProps
55
65
  }, seriesId);
56
66
  });
57
67
  })
58
68
  }));
59
- }
69
+ }
70
+ process.env.NODE_ENV !== "production" ? AreaPlot.propTypes = {
71
+ // ----------------------------- Warning --------------------------------
72
+ // | These PropTypes are generated from the TypeScript type definitions |
73
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
74
+ // ----------------------------------------------------------------------
75
+ /**
76
+ * The props used for each component slot.
77
+ * @default {}
78
+ */
79
+ slotProps: PropTypes.object,
80
+ /**
81
+ * Overridable component slots.
82
+ * @default {}
83
+ */
84
+ slots: PropTypes.object
85
+ } : void 0;
86
+ export { AreaPlot };
@@ -34,7 +34,9 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
34
34
  leftAxis,
35
35
  rightAxis,
36
36
  bottomAxis,
37
- children
37
+ children,
38
+ slots,
39
+ slotProps
38
40
  } = props;
39
41
  const id = useId();
40
42
  const clipPathId = `${id}-clip-path`;
@@ -63,13 +65,27 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
63
65
  disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
64
66
  children: [/*#__PURE__*/_jsxs("g", {
65
67
  clipPath: `url(#${clipPathId})`,
66
- children: [/*#__PURE__*/_jsx(AreaPlot, {}), /*#__PURE__*/_jsx(LinePlot, {})]
68
+ children: [/*#__PURE__*/_jsx(AreaPlot, {
69
+ slots: slots,
70
+ slotProps: slotProps
71
+ }), /*#__PURE__*/_jsx(LinePlot, {
72
+ slots: slots,
73
+ slotProps: slotProps
74
+ })]
67
75
  }), /*#__PURE__*/_jsx(ChartsAxis, {
68
76
  topAxis: topAxis,
69
77
  leftAxis: leftAxis,
70
78
  rightAxis: rightAxis,
71
- bottomAxis: bottomAxis
72
- }), /*#__PURE__*/_jsx(MarkPlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
79
+ bottomAxis: bottomAxis,
80
+ slots: slots,
81
+ slotProps: slotProps
82
+ }), /*#__PURE__*/_jsx(MarkPlot, {
83
+ slots: slots,
84
+ slotProps: slotProps
85
+ }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
86
+ slots: slots,
87
+ slotProps: slotProps
88
+ })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
73
89
  id: clipPathId
74
90
  }), children]
75
91
  });
@@ -81,7 +97,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
81
97
  // ----------------------------------------------------------------------
82
98
  axisHighlight: PropTypes.shape({
83
99
  x: PropTypes.oneOf(['band', 'line', 'none']),
84
- y: PropTypes.oneOf(['line', 'none'])
100
+ y: PropTypes.oneOf(['band', 'line', 'none'])
85
101
  }),
86
102
  /**
87
103
  * Indicate which axis to display the bottom of the charts.
@@ -97,8 +113,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
97
113
  label: PropTypes.string,
98
114
  labelFontSize: PropTypes.number,
99
115
  position: PropTypes.oneOf(['bottom', 'top']),
116
+ slotProps: PropTypes.object,
117
+ slots: PropTypes.object,
100
118
  stroke: PropTypes.string,
101
119
  tickFontSize: PropTypes.number,
120
+ tickMaxStep: PropTypes.number,
121
+ tickMinStep: PropTypes.number,
122
+ tickNumber: PropTypes.number,
102
123
  tickSize: PropTypes.number
103
124
  }), PropTypes.string]),
104
125
  children: PropTypes.node,
@@ -125,8 +146,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
125
146
  label: PropTypes.string,
126
147
  labelFontSize: PropTypes.number,
127
148
  position: PropTypes.oneOf(['left', 'right']),
149
+ slotProps: PropTypes.object,
150
+ slots: PropTypes.object,
128
151
  stroke: PropTypes.string,
129
152
  tickFontSize: PropTypes.number,
153
+ tickMaxStep: PropTypes.number,
154
+ tickMinStep: PropTypes.number,
155
+ tickNumber: PropTypes.number,
130
156
  tickSize: PropTypes.number
131
157
  }), PropTypes.string]),
132
158
  legend: PropTypes.shape({
@@ -143,6 +169,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
143
169
  horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
144
170
  vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
145
171
  }),
172
+ slotProps: PropTypes.object,
173
+ slots: PropTypes.object,
146
174
  spacing: PropTypes.number
147
175
  }),
148
176
  margin: PropTypes.shape({
@@ -165,8 +193,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
165
193
  label: PropTypes.string,
166
194
  labelFontSize: PropTypes.number,
167
195
  position: PropTypes.oneOf(['left', 'right']),
196
+ slotProps: PropTypes.object,
197
+ slots: PropTypes.object,
168
198
  stroke: PropTypes.string,
169
199
  tickFontSize: PropTypes.number,
200
+ tickMaxStep: PropTypes.number,
201
+ tickMinStep: PropTypes.number,
202
+ tickNumber: PropTypes.number,
170
203
  tickSize: PropTypes.number
171
204
  }), PropTypes.string]),
172
205
  series: PropTypes.arrayOf(PropTypes.shape({
@@ -189,6 +222,16 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
189
222
  xAxisKey: PropTypes.string,
190
223
  yAxisKey: PropTypes.string
191
224
  })).isRequired,
225
+ /**
226
+ * The props used for each component slot.
227
+ * @default {}
228
+ */
229
+ slotProps: PropTypes.object,
230
+ /**
231
+ * Overridable component slots.
232
+ * @default {}
233
+ */
234
+ slots: PropTypes.object,
192
235
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
193
236
  title: PropTypes.string,
194
237
  tooltip: PropTypes.shape({
@@ -211,8 +254,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
211
254
  label: PropTypes.string,
212
255
  labelFontSize: PropTypes.number,
213
256
  position: PropTypes.oneOf(['bottom', 'top']),
257
+ slotProps: PropTypes.object,
258
+ slots: PropTypes.object,
214
259
  stroke: PropTypes.string,
215
260
  tickFontSize: PropTypes.number,
261
+ tickMaxStep: PropTypes.number,
262
+ tickMinStep: PropTypes.number,
263
+ tickNumber: PropTypes.number,
216
264
  tickSize: PropTypes.number
217
265
  }), PropTypes.string]),
218
266
  viewBox: PropTypes.shape({
@@ -235,15 +283,17 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
235
283
  label: PropTypes.string,
236
284
  labelFontSize: PropTypes.number,
237
285
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
238
- maxTicks: PropTypes.number,
239
286
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
240
- minTicks: PropTypes.number,
241
287
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
242
288
  scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
289
+ slotProps: PropTypes.object,
290
+ slots: PropTypes.object,
243
291
  stroke: PropTypes.string,
244
292
  tickFontSize: PropTypes.number,
293
+ tickMaxStep: PropTypes.number,
294
+ tickMinStep: PropTypes.number,
295
+ tickNumber: PropTypes.number,
245
296
  tickSize: PropTypes.number,
246
- tickSpacing: PropTypes.number,
247
297
  valueFormatter: PropTypes.func
248
298
  })),
249
299
  yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -259,15 +309,17 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
259
309
  label: PropTypes.string,
260
310
  labelFontSize: PropTypes.number,
261
311
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
262
- maxTicks: PropTypes.number,
263
312
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
264
- minTicks: PropTypes.number,
265
313
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
266
314
  scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
315
+ slotProps: PropTypes.object,
316
+ slots: PropTypes.object,
267
317
  stroke: PropTypes.string,
268
318
  tickFontSize: PropTypes.number,
319
+ tickMaxStep: PropTypes.number,
320
+ tickMinStep: PropTypes.number,
321
+ tickNumber: PropTypes.number,
269
322
  tickSize: PropTypes.number,
270
- tickSpacing: PropTypes.number,
271
323
  valueFormatter: PropTypes.func
272
324
  }))
273
325
  } : void 0;
@@ -1,10 +1,11 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- const _excluded = ["id", "classes", "color", "highlightScope"];
3
+ const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import { color as d3Color } from 'd3-color';
7
7
  import composeClasses from '@mui/utils/composeClasses';
8
+ import { useSlotProps } from '@mui/base/utils';
8
9
  import generateUtilityClass from '@mui/utils/generateUtilityClass';
9
10
  import { styled } from '@mui/material/styles';
10
11
  import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
@@ -27,7 +28,7 @@ const useUtilityClasses = ownerState => {
27
28
  };
28
29
  return composeClasses(slots, getLineElementUtilityClass, classes);
29
30
  };
30
- const LineElementPath = styled('path', {
31
+ export const LineElementPath = styled('path', {
31
32
  name: 'MuiLineElement',
32
33
  slot: 'Root',
33
34
  overridesResolver: (_, styles) => styles.root
@@ -57,11 +58,14 @@ LineElementPath.propTypes = {
57
58
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
58
59
  };
59
60
  function LineElement(props) {
61
+ var _slots$line;
60
62
  const {
61
63
  id,
62
64
  classes: innerClasses,
63
65
  color,
64
- highlightScope
66
+ highlightScope,
67
+ slots,
68
+ slotProps
65
69
  } = props,
66
70
  other = _objectWithoutPropertiesLoose(props, _excluded);
67
71
  const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -84,13 +88,19 @@ function LineElement(props) {
84
88
  isHighlighted
85
89
  };
86
90
  const classes = useUtilityClasses(ownerState);
87
- return /*#__PURE__*/_jsx(LineElementPath, _extends({}, other, {
88
- ownerState: ownerState,
89
- className: classes.root
90
- }, getInteractionItemProps({
91
- type: 'line',
92
- seriesId: id
93
- })));
91
+ const Line = (_slots$line = slots == null ? void 0 : slots.line) != null ? _slots$line : LineElementPath;
92
+ const lineProps = useSlotProps({
93
+ elementType: Line,
94
+ externalSlotProps: slotProps == null ? void 0 : slotProps.line,
95
+ additionalProps: _extends({}, other, getInteractionItemProps({
96
+ type: 'line',
97
+ seriesId: id
98
+ }), {
99
+ className: classes.root
100
+ }),
101
+ ownerState
102
+ });
103
+ return /*#__PURE__*/_jsx(Line, _extends({}, lineProps));
94
104
  }
95
105
  process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
96
106
  // ----------------------------- Warning --------------------------------
@@ -101,6 +111,16 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
101
111
  highlightScope: PropTypes.shape({
102
112
  faded: PropTypes.oneOf(['global', 'none', 'series']),
103
113
  highlighted: PropTypes.oneOf(['item', 'none', 'series'])
104
- })
114
+ }),
115
+ /**
116
+ * The props used for each component slot.
117
+ * @default {}
118
+ */
119
+ slotProps: PropTypes.object,
120
+ /**
121
+ * Overridable component slots.
122
+ * @default {}
123
+ */
124
+ slots: PropTypes.object
105
125
  } : void 0;
106
126
  export { LineElement };
@@ -1,5 +1,8 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
+ const _excluded = ["slots", "slotProps"];
2
4
  import * as React from 'react';
5
+ import PropTypes from 'prop-types';
3
6
  import { line as d3Line } from 'd3-shape';
4
7
  import { SeriesContext } from '../context/SeriesContextProvider';
5
8
  import { CartesianContext } from '../context/CartesianContextProvider';
@@ -7,7 +10,12 @@ import { LineElement } from './LineElement';
7
10
  import { getValueToPositionMapper } from '../hooks/useScale';
8
11
  import getCurveFactory from '../internals/getCurve';
9
12
  import { jsx as _jsx } from "react/jsx-runtime";
10
- export function LinePlot(props) {
13
+ function LinePlot(props) {
14
+ const {
15
+ slots,
16
+ slotProps
17
+ } = props,
18
+ other = _objectWithoutPropertiesLoose(props, _excluded);
11
19
  const seriesData = React.useContext(SeriesContext).line;
12
20
  const axisData = React.useContext(CartesianContext);
13
21
  if (seriesData === undefined) {
@@ -25,7 +33,7 @@ export function LinePlot(props) {
25
33
  } = axisData;
26
34
  const defaultXAxisId = xAxisIds[0];
27
35
  const defaultYAxisId = yAxisIds[0];
28
- return /*#__PURE__*/_jsx("g", _extends({}, props, {
36
+ return /*#__PURE__*/_jsx("g", _extends({}, other, {
29
37
  children: stackingGroups.flatMap(({
30
38
  ids: groupIds
31
39
  }) => {
@@ -42,18 +50,45 @@ export function LinePlot(props) {
42
50
  throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
43
51
  }
44
52
  const linePath = d3Line().x(d => xScale(d.x)).y(d => yScale(d.y[1]));
53
+ if (process.env.NODE_ENV !== 'production') {
54
+ if (xData.length !== stackedData.length) {
55
+ throw new Error(`MUI: data length of the x axis (${xData.length} items) does not match length of series (${stackedData.length} items)`);
56
+ }
57
+ }
45
58
  const curve = getCurveFactory(series[seriesId].curve);
46
- const d3Data = xData == null ? void 0 : xData.map((x, index) => ({
47
- x,
48
- y: stackedData[index]
49
- }));
59
+ const d3Data = xData == null ? void 0 : xData.map((x, index) => {
60
+ var _stackedData$index;
61
+ return {
62
+ x,
63
+ y: (_stackedData$index = stackedData[index]) != null ? _stackedData$index : [0, 0]
64
+ };
65
+ });
50
66
  return /*#__PURE__*/_jsx(LineElement, {
51
67
  id: seriesId,
52
68
  d: linePath.curve(curve)(d3Data) || undefined,
53
69
  color: series[seriesId].color,
54
- highlightScope: series[seriesId].highlightScope
70
+ highlightScope: series[seriesId].highlightScope,
71
+ slots: slots,
72
+ slotProps: slotProps
55
73
  }, seriesId);
56
74
  });
57
75
  })
58
76
  }));
59
- }
77
+ }
78
+ process.env.NODE_ENV !== "production" ? LinePlot.propTypes = {
79
+ // ----------------------------- Warning --------------------------------
80
+ // | These PropTypes are generated from the TypeScript type definitions |
81
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
82
+ // ----------------------------------------------------------------------
83
+ /**
84
+ * The props used for each component slot.
85
+ * @default {}
86
+ */
87
+ slotProps: PropTypes.object,
88
+ /**
89
+ * Overridable component slots.
90
+ * @default {}
91
+ */
92
+ slots: PropTypes.object
93
+ } : void 0;
94
+ export { LinePlot };
@@ -1,13 +1,23 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
+ const _excluded = ["slots", "slotProps"];
2
4
  import * as React from 'react';
5
+ import PropTypes from 'prop-types';
3
6
  import { SeriesContext } from '../context/SeriesContextProvider';
4
7
  import { CartesianContext } from '../context/CartesianContextProvider';
5
8
  import { MarkElement } from './MarkElement';
6
9
  import { getValueToPositionMapper } from '../hooks/useScale';
7
10
  import { jsx as _jsx } from "react/jsx-runtime";
8
- export function MarkPlot(props) {
11
+ function MarkPlot(props) {
12
+ var _slots$mark;
13
+ const {
14
+ slots,
15
+ slotProps
16
+ } = props,
17
+ other = _objectWithoutPropertiesLoose(props, _excluded);
9
18
  const seriesData = React.useContext(SeriesContext).line;
10
19
  const axisData = React.useContext(CartesianContext);
20
+ const Mark = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : MarkElement;
11
21
  if (seriesData === undefined) {
12
22
  return null;
13
23
  }
@@ -23,7 +33,7 @@ export function MarkPlot(props) {
23
33
  } = axisData;
24
34
  const defaultXAxisId = xAxisIds[0];
25
35
  const defaultYAxisId = yAxisIds[0];
26
- return /*#__PURE__*/_jsx("g", _extends({}, props, {
36
+ return /*#__PURE__*/_jsx("g", _extends({}, other, {
27
37
  children: stackingGroups.flatMap(({
28
38
  ids: groupIds
29
39
  }) => {
@@ -64,7 +74,7 @@ export function MarkPlot(props) {
64
74
  x,
65
75
  y,
66
76
  index
67
- }) => /*#__PURE__*/_jsx(MarkElement, {
77
+ }) => /*#__PURE__*/_jsx(Mark, _extends({
68
78
  id: seriesId,
69
79
  dataIndex: index,
70
80
  shape: "circle",
@@ -72,8 +82,25 @@ export function MarkPlot(props) {
72
82
  x: x,
73
83
  y: y,
74
84
  highlightScope: series[seriesId].highlightScope
75
- }, `${seriesId}-${index}`));
85
+ }, slotProps == null ? void 0 : slotProps.mark), `${seriesId}-${index}`));
76
86
  });
77
87
  })
78
88
  }));
79
- }
89
+ }
90
+ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
91
+ // ----------------------------- Warning --------------------------------
92
+ // | These PropTypes are generated from the TypeScript type definitions |
93
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
94
+ // ----------------------------------------------------------------------
95
+ /**
96
+ * The props used for each component slot.
97
+ * @default {}
98
+ */
99
+ slotProps: PropTypes.object,
100
+ /**
101
+ * Overridable component slots.
102
+ * @default {}
103
+ */
104
+ slots: PropTypes.object
105
+ } : void 0;
106
+ export { MarkPlot };
@@ -35,7 +35,6 @@ const PieArcLabelRoot = styled('text', {
35
35
  theme
36
36
  }) => ({
37
37
  fill: theme.palette.text.primary,
38
- alignmentBaseline: 'baseline',
39
38
  textAnchor: 'middle'
40
39
  }));
41
40
  export default function PieArcLabel(props) {
@@ -44,7 +44,9 @@ function PieChart(props) {
44
44
  leftAxis = null,
45
45
  rightAxis = null,
46
46
  bottomAxis = null,
47
- children
47
+ children,
48
+ slots,
49
+ slotProps
48
50
  } = props;
49
51
  const margin = _extends({}, defaultMargin, marginProps);
50
52
  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
@@ -67,8 +69,16 @@ function PieChart(props) {
67
69
  topAxis: topAxis,
68
70
  leftAxis: leftAxis,
69
71
  rightAxis: rightAxis,
70
- bottomAxis: bottomAxis
71
- }), /*#__PURE__*/_jsx(PiePlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
72
+ bottomAxis: bottomAxis,
73
+ slots: slots,
74
+ slotProps: slotProps
75
+ }), /*#__PURE__*/_jsx(PiePlot, {
76
+ slots: slots,
77
+ slotProps: slotProps
78
+ }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
79
+ slots: slots,
80
+ slotProps: slotProps
81
+ })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
72
82
  });
73
83
  }
74
84
  process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -78,7 +88,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
78
88
  // ----------------------------------------------------------------------
79
89
  axisHighlight: PropTypes.shape({
80
90
  x: PropTypes.oneOf(['band', 'line', 'none']),
81
- y: PropTypes.oneOf(['line', 'none'])
91
+ y: PropTypes.oneOf(['band', 'line', 'none'])
82
92
  }),
83
93
  /**
84
94
  * Indicate which axis to display the bottom of the charts.
@@ -94,8 +104,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
94
104
  label: PropTypes.string,
95
105
  labelFontSize: PropTypes.number,
96
106
  position: PropTypes.oneOf(['bottom', 'top']),
107
+ slotProps: PropTypes.object,
108
+ slots: PropTypes.object,
97
109
  stroke: PropTypes.string,
98
110
  tickFontSize: PropTypes.number,
111
+ tickMaxStep: PropTypes.number,
112
+ tickMinStep: PropTypes.number,
113
+ tickNumber: PropTypes.number,
99
114
  tickSize: PropTypes.number
100
115
  }), PropTypes.string]),
101
116
  children: PropTypes.node,
@@ -122,8 +137,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
122
137
  label: PropTypes.string,
123
138
  labelFontSize: PropTypes.number,
124
139
  position: PropTypes.oneOf(['left', 'right']),
140
+ slotProps: PropTypes.object,
141
+ slots: PropTypes.object,
125
142
  stroke: PropTypes.string,
126
143
  tickFontSize: PropTypes.number,
144
+ tickMaxStep: PropTypes.number,
145
+ tickMinStep: PropTypes.number,
146
+ tickNumber: PropTypes.number,
127
147
  tickSize: PropTypes.number
128
148
  }), PropTypes.string]),
129
149
  legend: PropTypes.shape({
@@ -140,6 +160,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
140
160
  horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
141
161
  vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
142
162
  }),
163
+ slotProps: PropTypes.object,
164
+ slots: PropTypes.object,
143
165
  spacing: PropTypes.number
144
166
  }),
145
167
  margin: PropTypes.shape({
@@ -162,8 +184,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
162
184
  label: PropTypes.string,
163
185
  labelFontSize: PropTypes.number,
164
186
  position: PropTypes.oneOf(['left', 'right']),
187
+ slotProps: PropTypes.object,
188
+ slots: PropTypes.object,
165
189
  stroke: PropTypes.string,
166
190
  tickFontSize: PropTypes.number,
191
+ tickMaxStep: PropTypes.number,
192
+ tickMinStep: PropTypes.number,
193
+ tickNumber: PropTypes.number,
167
194
  tickSize: PropTypes.number
168
195
  }), PropTypes.string]),
169
196
  series: PropTypes.arrayOf(PropTypes.shape({
@@ -205,6 +232,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
205
232
  type: PropTypes.oneOf(['pie']),
206
233
  valueFormatter: PropTypes.func
207
234
  })).isRequired,
235
+ /**
236
+ * The props used for each component slot.
237
+ * @default {}
238
+ */
239
+ slotProps: PropTypes.object,
240
+ slots: PropTypes.object,
208
241
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
209
242
  title: PropTypes.string,
210
243
  tooltip: PropTypes.shape({
@@ -227,8 +260,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
227
260
  label: PropTypes.string,
228
261
  labelFontSize: PropTypes.number,
229
262
  position: PropTypes.oneOf(['bottom', 'top']),
263
+ slotProps: PropTypes.object,
264
+ slots: PropTypes.object,
230
265
  stroke: PropTypes.string,
231
266
  tickFontSize: PropTypes.number,
267
+ tickMaxStep: PropTypes.number,
268
+ tickMinStep: PropTypes.number,
269
+ tickNumber: PropTypes.number,
232
270
  tickSize: PropTypes.number
233
271
  }), PropTypes.string]),
234
272
  viewBox: PropTypes.shape({
@@ -251,15 +289,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
251
289
  label: PropTypes.string,
252
290
  labelFontSize: PropTypes.number,
253
291
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
254
- maxTicks: PropTypes.number,
255
292
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
256
- minTicks: PropTypes.number,
257
293
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
258
294
  scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
295
+ slotProps: PropTypes.object,
296
+ slots: PropTypes.object,
259
297
  stroke: PropTypes.string,
260
298
  tickFontSize: PropTypes.number,
299
+ tickMaxStep: PropTypes.number,
300
+ tickMinStep: PropTypes.number,
301
+ tickNumber: PropTypes.number,
261
302
  tickSize: PropTypes.number,
262
- tickSpacing: PropTypes.number,
263
303
  valueFormatter: PropTypes.func
264
304
  })),
265
305
  yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -275,15 +315,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
275
315
  label: PropTypes.string,
276
316
  labelFontSize: PropTypes.number,
277
317
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
278
- maxTicks: PropTypes.number,
279
318
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
280
- minTicks: PropTypes.number,
281
319
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
282
320
  scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
321
+ slotProps: PropTypes.object,
322
+ slots: PropTypes.object,
283
323
  stroke: PropTypes.string,
284
324
  tickFontSize: PropTypes.number,
325
+ tickMaxStep: PropTypes.number,
326
+ tickMinStep: PropTypes.number,
327
+ tickNumber: PropTypes.number,
285
328
  tickSize: PropTypes.number,
286
- tickSpacing: PropTypes.number,
287
329
  valueFormatter: PropTypes.func
288
330
  }))
289
331
  } : void 0;