@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
@@ -51,7 +51,9 @@ function PieChart(props) {
51
51
  rightAxis = _props$rightAxis === void 0 ? null : _props$rightAxis,
52
52
  _props$bottomAxis = props.bottomAxis,
53
53
  bottomAxis = _props$bottomAxis === void 0 ? null : _props$bottomAxis,
54
- children = props.children;
54
+ children = props.children,
55
+ slots = props.slots,
56
+ slotProps = props.slotProps;
55
57
  var margin = _extends({}, defaultMargin, marginProps);
56
58
  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
57
59
  series: series.map(function (s) {
@@ -79,8 +81,16 @@ function PieChart(props) {
79
81
  topAxis: topAxis,
80
82
  leftAxis: leftAxis,
81
83
  rightAxis: rightAxis,
82
- bottomAxis: bottomAxis
83
- }), /*#__PURE__*/_jsx(PiePlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
84
+ bottomAxis: bottomAxis,
85
+ slots: slots,
86
+ slotProps: slotProps
87
+ }), /*#__PURE__*/_jsx(PiePlot, {
88
+ slots: slots,
89
+ slotProps: slotProps
90
+ }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
91
+ slots: slots,
92
+ slotProps: slotProps
93
+ })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
84
94
  });
85
95
  }
86
96
  process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -90,7 +100,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
90
100
  // ----------------------------------------------------------------------
91
101
  axisHighlight: PropTypes.shape({
92
102
  x: PropTypes.oneOf(['band', 'line', 'none']),
93
- y: PropTypes.oneOf(['line', 'none'])
103
+ y: PropTypes.oneOf(['band', 'line', 'none'])
94
104
  }),
95
105
  /**
96
106
  * Indicate which axis to display the bottom of the charts.
@@ -106,8 +116,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
106
116
  label: PropTypes.string,
107
117
  labelFontSize: PropTypes.number,
108
118
  position: PropTypes.oneOf(['bottom', 'top']),
119
+ slotProps: PropTypes.object,
120
+ slots: PropTypes.object,
109
121
  stroke: PropTypes.string,
110
122
  tickFontSize: PropTypes.number,
123
+ tickMaxStep: PropTypes.number,
124
+ tickMinStep: PropTypes.number,
125
+ tickNumber: PropTypes.number,
111
126
  tickSize: PropTypes.number
112
127
  }), PropTypes.string]),
113
128
  children: PropTypes.node,
@@ -134,8 +149,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
134
149
  label: PropTypes.string,
135
150
  labelFontSize: PropTypes.number,
136
151
  position: PropTypes.oneOf(['left', 'right']),
152
+ slotProps: PropTypes.object,
153
+ slots: PropTypes.object,
137
154
  stroke: PropTypes.string,
138
155
  tickFontSize: PropTypes.number,
156
+ tickMaxStep: PropTypes.number,
157
+ tickMinStep: PropTypes.number,
158
+ tickNumber: PropTypes.number,
139
159
  tickSize: PropTypes.number
140
160
  }), PropTypes.string]),
141
161
  legend: PropTypes.shape({
@@ -152,6 +172,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
152
172
  horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
153
173
  vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
154
174
  }),
175
+ slotProps: PropTypes.object,
176
+ slots: PropTypes.object,
155
177
  spacing: PropTypes.number
156
178
  }),
157
179
  margin: PropTypes.shape({
@@ -174,8 +196,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
174
196
  label: PropTypes.string,
175
197
  labelFontSize: PropTypes.number,
176
198
  position: PropTypes.oneOf(['left', 'right']),
199
+ slotProps: PropTypes.object,
200
+ slots: PropTypes.object,
177
201
  stroke: PropTypes.string,
178
202
  tickFontSize: PropTypes.number,
203
+ tickMaxStep: PropTypes.number,
204
+ tickMinStep: PropTypes.number,
205
+ tickNumber: PropTypes.number,
179
206
  tickSize: PropTypes.number
180
207
  }), PropTypes.string]),
181
208
  series: PropTypes.arrayOf(PropTypes.shape({
@@ -217,6 +244,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
217
244
  type: PropTypes.oneOf(['pie']),
218
245
  valueFormatter: PropTypes.func
219
246
  })).isRequired,
247
+ /**
248
+ * The props used for each component slot.
249
+ * @default {}
250
+ */
251
+ slotProps: PropTypes.object,
252
+ slots: PropTypes.object,
220
253
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
221
254
  title: PropTypes.string,
222
255
  tooltip: PropTypes.shape({
@@ -239,8 +272,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
239
272
  label: PropTypes.string,
240
273
  labelFontSize: PropTypes.number,
241
274
  position: PropTypes.oneOf(['bottom', 'top']),
275
+ slotProps: PropTypes.object,
276
+ slots: PropTypes.object,
242
277
  stroke: PropTypes.string,
243
278
  tickFontSize: PropTypes.number,
279
+ tickMaxStep: PropTypes.number,
280
+ tickMinStep: PropTypes.number,
281
+ tickNumber: PropTypes.number,
244
282
  tickSize: PropTypes.number
245
283
  }), PropTypes.string]),
246
284
  viewBox: PropTypes.shape({
@@ -263,15 +301,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
263
301
  label: PropTypes.string,
264
302
  labelFontSize: PropTypes.number,
265
303
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
266
- maxTicks: PropTypes.number,
267
304
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
268
- minTicks: PropTypes.number,
269
305
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
270
306
  scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
307
+ slotProps: PropTypes.object,
308
+ slots: PropTypes.object,
271
309
  stroke: PropTypes.string,
272
310
  tickFontSize: PropTypes.number,
311
+ tickMaxStep: PropTypes.number,
312
+ tickMinStep: PropTypes.number,
313
+ tickNumber: PropTypes.number,
273
314
  tickSize: PropTypes.number,
274
- tickSpacing: PropTypes.number,
275
315
  valueFormatter: PropTypes.func
276
316
  })),
277
317
  yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -287,15 +327,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
287
327
  label: PropTypes.string,
288
328
  labelFontSize: PropTypes.number,
289
329
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
290
- maxTicks: PropTypes.number,
291
330
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
292
- minTicks: PropTypes.number,
293
331
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
294
332
  scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
333
+ slotProps: PropTypes.object,
334
+ slots: PropTypes.object,
295
335
  stroke: PropTypes.string,
296
336
  tickFontSize: PropTypes.number,
337
+ tickMaxStep: PropTypes.number,
338
+ tickMinStep: PropTypes.number,
339
+ tickNumber: PropTypes.number,
297
340
  tickSize: PropTypes.number,
298
- tickSpacing: PropTypes.number,
299
341
  valueFormatter: PropTypes.func
300
342
  }))
301
343
  } : void 0;
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import * as React from 'react';
3
+ import PropTypes from 'prop-types';
3
4
  import { SeriesContext } from '../context/SeriesContextProvider';
4
5
  import PieArc from './PieArc';
5
6
  import PieArcLabel from './PieArcLabel';
@@ -22,7 +23,10 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
22
23
  }
23
24
  return arcLabel(item);
24
25
  }
25
- export function PiePlot() {
26
+ function PiePlot(props) {
27
+ var _slots$pieArc, _slots$pieArcLabel;
28
+ var slots = props.slots,
29
+ slotProps = props.slotProps;
26
30
  var seriesData = React.useContext(SeriesContext).pie;
27
31
  var _React$useContext = React.useContext(DrawingContext),
28
32
  left = _React$useContext.left,
@@ -39,6 +43,8 @@ export function PiePlot() {
39
43
  };
40
44
  var series = seriesData.series,
41
45
  seriesOrder = seriesData.seriesOrder;
46
+ var Arc = (_slots$pieArc = slots == null ? void 0 : slots.pieArc) != null ? _slots$pieArc : PieArc;
47
+ var ArcLabel = (_slots$pieArcLabel = slots == null ? void 0 : slots.pieArcLabel) != null ? _slots$pieArcLabel : PieArcLabel;
42
48
  return /*#__PURE__*/_jsx("g", {
43
49
  children: seriesOrder.map(function (seriesId) {
44
50
  var _series$seriesId = series[seriesId],
@@ -57,7 +63,7 @@ export function PiePlot() {
57
63
  transform: "translate(".concat(cx === undefined ? center.x : left + cx, ", ").concat(cy === undefined ? center.y : top + cy, ")"),
58
64
  children: /*#__PURE__*/_jsxs("g", {
59
65
  children: [data.map(function (item, index) {
60
- return /*#__PURE__*/_createElement(PieArc, _extends({}, item, {
66
+ return /*#__PURE__*/_createElement(Arc, _extends({}, item, {
61
67
  key: item.id,
62
68
  innerRadius: innerRadius,
63
69
  outerRadius: outerRadius != null ? outerRadius : availableRadius,
@@ -68,9 +74,9 @@ export function PiePlot() {
68
74
  highlightScope: series[seriesId].highlightScope,
69
75
  highlighted: highlighted,
70
76
  faded: faded
71
- }));
77
+ }, slotProps == null ? void 0 : slotProps.pieArc));
72
78
  }), data.map(function (item, index) {
73
- return /*#__PURE__*/_createElement(PieArcLabel, _extends({}, item, {
79
+ return /*#__PURE__*/_createElement(ArcLabel, _extends({}, item, {
74
80
  key: item.id,
75
81
  innerRadius: innerRadius,
76
82
  outerRadius: outerRadius != null ? outerRadius : availableRadius,
@@ -80,10 +86,27 @@ export function PiePlot() {
80
86
  dataIndex: index,
81
87
  highlightScope: series[seriesId].highlightScope,
82
88
  formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
83
- }));
89
+ }, slotProps == null ? void 0 : slotProps.pieArcLabel));
84
90
  })]
85
91
  })
86
92
  }, seriesId);
87
93
  })
88
94
  });
89
- }
95
+ }
96
+ process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
97
+ // ----------------------------- Warning --------------------------------
98
+ // | These PropTypes are generated from the TypeScript type definitions |
99
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
100
+ // ----------------------------------------------------------------------
101
+ /**
102
+ * The props used for each component slot.
103
+ * @default {}
104
+ */
105
+ slotProps: PropTypes.object,
106
+ /**
107
+ * Overridable component slots.
108
+ * @default {}
109
+ */
110
+ slots: PropTypes.object
111
+ } : void 0;
112
+ export { PiePlot };
@@ -25,7 +25,9 @@ var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, re
25
25
  leftAxis = props.leftAxis,
26
26
  rightAxis = props.rightAxis,
27
27
  bottomAxis = props.bottomAxis,
28
- children = props.children;
28
+ children = props.children,
29
+ slots = props.slots,
30
+ slotProps = props.slotProps;
29
31
  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
30
32
  ref: ref,
31
33
  series: series.map(function (s) {
@@ -44,8 +46,16 @@ var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, re
44
46
  topAxis: topAxis,
45
47
  leftAxis: leftAxis,
46
48
  rightAxis: rightAxis,
47
- bottomAxis: bottomAxis
48
- }), /*#__PURE__*/_jsx(ScatterPlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
49
+ bottomAxis: bottomAxis,
50
+ slots: slots,
51
+ slotProps: slotProps
52
+ }), /*#__PURE__*/_jsx(ScatterPlot, {
53
+ slots: slots,
54
+ slotProps: slotProps
55
+ }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
56
+ slots: slots,
57
+ slotProps: slotProps
58
+ })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
49
59
  x: "none",
50
60
  y: "none"
51
61
  }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({
@@ -60,7 +70,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
60
70
  // ----------------------------------------------------------------------
61
71
  axisHighlight: PropTypes.shape({
62
72
  x: PropTypes.oneOf(['band', 'line', 'none']),
63
- y: PropTypes.oneOf(['line', 'none'])
73
+ y: PropTypes.oneOf(['band', 'line', 'none'])
64
74
  }),
65
75
  /**
66
76
  * Indicate which axis to display the bottom of the charts.
@@ -76,8 +86,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
76
86
  label: PropTypes.string,
77
87
  labelFontSize: PropTypes.number,
78
88
  position: PropTypes.oneOf(['bottom', 'top']),
89
+ slotProps: PropTypes.object,
90
+ slots: PropTypes.object,
79
91
  stroke: PropTypes.string,
80
92
  tickFontSize: PropTypes.number,
93
+ tickMaxStep: PropTypes.number,
94
+ tickMinStep: PropTypes.number,
95
+ tickNumber: PropTypes.number,
81
96
  tickSize: PropTypes.number
82
97
  }), PropTypes.string]),
83
98
  children: PropTypes.node,
@@ -104,8 +119,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
104
119
  label: PropTypes.string,
105
120
  labelFontSize: PropTypes.number,
106
121
  position: PropTypes.oneOf(['left', 'right']),
122
+ slotProps: PropTypes.object,
123
+ slots: PropTypes.object,
107
124
  stroke: PropTypes.string,
108
125
  tickFontSize: PropTypes.number,
126
+ tickMaxStep: PropTypes.number,
127
+ tickMinStep: PropTypes.number,
128
+ tickNumber: PropTypes.number,
109
129
  tickSize: PropTypes.number
110
130
  }), PropTypes.string]),
111
131
  legend: PropTypes.shape({
@@ -122,6 +142,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
122
142
  horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
123
143
  vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
124
144
  }),
145
+ slotProps: PropTypes.object,
146
+ slots: PropTypes.object,
125
147
  spacing: PropTypes.number
126
148
  }),
127
149
  margin: PropTypes.shape({
@@ -144,8 +166,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
144
166
  label: PropTypes.string,
145
167
  labelFontSize: PropTypes.number,
146
168
  position: PropTypes.oneOf(['left', 'right']),
169
+ slotProps: PropTypes.object,
170
+ slots: PropTypes.object,
147
171
  stroke: PropTypes.string,
148
172
  tickFontSize: PropTypes.number,
173
+ tickMaxStep: PropTypes.number,
174
+ tickMinStep: PropTypes.number,
175
+ tickNumber: PropTypes.number,
149
176
  tickSize: PropTypes.number
150
177
  }), PropTypes.string]),
151
178
  series: PropTypes.arrayOf(PropTypes.shape({
@@ -167,6 +194,16 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
167
194
  xAxisKey: PropTypes.string,
168
195
  yAxisKey: PropTypes.string
169
196
  })).isRequired,
197
+ /**
198
+ * The props used for each component slot.
199
+ * @default {}
200
+ */
201
+ slotProps: PropTypes.object,
202
+ /**
203
+ * Overridable component slots.
204
+ * @default {}
205
+ */
206
+ slots: PropTypes.object,
170
207
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
171
208
  title: PropTypes.string,
172
209
  tooltip: PropTypes.shape({
@@ -189,8 +226,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
189
226
  label: PropTypes.string,
190
227
  labelFontSize: PropTypes.number,
191
228
  position: PropTypes.oneOf(['bottom', 'top']),
229
+ slotProps: PropTypes.object,
230
+ slots: PropTypes.object,
192
231
  stroke: PropTypes.string,
193
232
  tickFontSize: PropTypes.number,
233
+ tickMaxStep: PropTypes.number,
234
+ tickMinStep: PropTypes.number,
235
+ tickNumber: PropTypes.number,
194
236
  tickSize: PropTypes.number
195
237
  }), PropTypes.string]),
196
238
  viewBox: PropTypes.shape({
@@ -213,15 +255,17 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
213
255
  label: PropTypes.string,
214
256
  labelFontSize: PropTypes.number,
215
257
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
216
- maxTicks: PropTypes.number,
217
258
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
218
- minTicks: PropTypes.number,
219
259
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
220
260
  scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
261
+ slotProps: PropTypes.object,
262
+ slots: PropTypes.object,
221
263
  stroke: PropTypes.string,
222
264
  tickFontSize: PropTypes.number,
265
+ tickMaxStep: PropTypes.number,
266
+ tickMinStep: PropTypes.number,
267
+ tickNumber: PropTypes.number,
223
268
  tickSize: PropTypes.number,
224
- tickSpacing: PropTypes.number,
225
269
  valueFormatter: PropTypes.func
226
270
  })),
227
271
  yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -237,15 +281,17 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
237
281
  label: PropTypes.string,
238
282
  labelFontSize: PropTypes.number,
239
283
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
240
- maxTicks: PropTypes.number,
241
284
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
242
- minTicks: PropTypes.number,
243
285
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
244
286
  scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
287
+ slotProps: PropTypes.object,
288
+ slots: PropTypes.object,
245
289
  stroke: PropTypes.string,
246
290
  tickFontSize: PropTypes.number,
291
+ tickMaxStep: PropTypes.number,
292
+ tickMinStep: PropTypes.number,
293
+ tickNumber: PropTypes.number,
247
294
  tickSize: PropTypes.number,
248
- tickSpacing: PropTypes.number,
249
295
  valueFormatter: PropTypes.func
250
296
  }))
251
297
  } : void 0;
@@ -1,9 +1,14 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
1
2
  import * as React from 'react';
3
+ import PropTypes from 'prop-types';
2
4
  import { Scatter } from './Scatter';
3
5
  import { SeriesContext } from '../context/SeriesContextProvider';
4
6
  import { CartesianContext } from '../context/CartesianContextProvider';
5
7
  import { jsx as _jsx } from "react/jsx-runtime";
6
- export function ScatterPlot() {
8
+ function ScatterPlot(props) {
9
+ var _slots$scatter;
10
+ var slots = props.slots,
11
+ slotProps = props.slotProps;
7
12
  var seriesData = React.useContext(SeriesContext).scatter;
8
13
  var axisData = React.useContext(CartesianContext);
9
14
  if (seriesData === undefined) {
@@ -17,6 +22,7 @@ export function ScatterPlot() {
17
22
  yAxisIds = axisData.yAxisIds;
18
23
  var defaultXAxisId = xAxisIds[0];
19
24
  var defaultYAxisId = yAxisIds[0];
25
+ var ScatterItems = (_slots$scatter = slots == null ? void 0 : slots.scatter) != null ? _slots$scatter : Scatter;
20
26
  return /*#__PURE__*/_jsx(React.Fragment, {
21
27
  children: seriesOrder.map(function (seriesId) {
22
28
  var _series$seriesId = series[seriesId],
@@ -27,13 +33,30 @@ export function ScatterPlot() {
27
33
  color = _series$seriesId.color;
28
34
  var xScale = xAxis[xAxisKey != null ? xAxisKey : defaultXAxisId].scale;
29
35
  var yScale = yAxis[yAxisKey != null ? yAxisKey : defaultYAxisId].scale;
30
- return /*#__PURE__*/_jsx(Scatter, {
36
+ return /*#__PURE__*/_jsx(ScatterItems, _extends({
31
37
  xScale: xScale,
32
38
  yScale: yScale,
33
39
  color: color,
34
40
  markerSize: markerSize != null ? markerSize : 4,
35
41
  series: series[seriesId]
36
- }, id);
42
+ }, slotProps == null ? void 0 : slotProps.scatter), id);
37
43
  })
38
44
  });
39
- }
45
+ }
46
+ process.env.NODE_ENV !== "production" ? ScatterPlot.propTypes = {
47
+ // ----------------------------- Warning --------------------------------
48
+ // | These PropTypes are generated from the TypeScript type definitions |
49
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
50
+ // ----------------------------------------------------------------------
51
+ /**
52
+ * The props used for each component slot.
53
+ * @default {}
54
+ */
55
+ slotProps: PropTypes.object,
56
+ /**
57
+ * Overridable component slots.
58
+ * @default {}
59
+ */
60
+ slots: PropTypes.object
61
+ } : void 0;
62
+ export { ScatterPlot };
@@ -35,6 +35,8 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
35
35
  showHighlight = props.showHighlight,
36
36
  inAxisHighlight = props.axisHighlight,
37
37
  children = props.children,
38
+ slots = props.slots,
39
+ slotProps = props.slotProps,
38
40
  data = props.data,
39
41
  _props$plotType = props.plotType,
40
42
  plotType = _props$plotType === void 0 ? 'line' : _props$plotType,
@@ -77,8 +79,17 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
77
79
  colors: colors,
78
80
  sx: sx,
79
81
  disableAxisListener: (!showTooltip || (tooltip == null ? void 0 : tooltip.trigger) !== 'axis') && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
80
- children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {}), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
81
- children: [/*#__PURE__*/_jsx(AreaPlot, {}), /*#__PURE__*/_jsx(LinePlot, {}), showHighlight && /*#__PURE__*/_jsx(SparkLineMarkPlot, {})]
82
+ children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
83
+ slots: slots,
84
+ slotProps: slotProps
85
+ }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
86
+ children: [/*#__PURE__*/_jsx(AreaPlot, {
87
+ slots: slots,
88
+ slotProps: slotProps
89
+ }), /*#__PURE__*/_jsx(LinePlot, {
90
+ slots: slots,
91
+ slotProps: slotProps
92
+ }), showHighlight && /*#__PURE__*/_jsx(SparkLineMarkPlot, {})]
82
93
  }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
83
94
  });
84
95
  });
@@ -95,7 +106,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
95
106
  area: PropTypes.bool,
96
107
  axisHighlight: PropTypes.shape({
97
108
  x: PropTypes.oneOf(['band', 'line', 'none']),
98
- y: PropTypes.oneOf(['line', 'none'])
109
+ y: PropTypes.oneOf(['band', 'line', 'none'])
99
110
  }),
100
111
  children: PropTypes.node,
101
112
  className: PropTypes.string,
@@ -138,6 +149,16 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
138
149
  * @default false
139
150
  */
140
151
  showTooltip: PropTypes.bool,
152
+ /**
153
+ * The props used for each component slot.
154
+ * @default {}
155
+ */
156
+ slotProps: PropTypes.object,
157
+ /**
158
+ * Overridable component slots.
159
+ * @default {}
160
+ */
161
+ slots: PropTypes.object,
141
162
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
142
163
  title: PropTypes.string,
143
164
  tooltip: PropTypes.shape({
@@ -176,15 +197,17 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
176
197
  label: PropTypes.string,
177
198
  labelFontSize: PropTypes.number,
178
199
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
179
- maxTicks: PropTypes.number,
180
200
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
181
- minTicks: PropTypes.number,
182
201
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
183
202
  scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
203
+ slotProps: PropTypes.object,
204
+ slots: PropTypes.object,
184
205
  stroke: PropTypes.string,
185
206
  tickFontSize: PropTypes.number,
207
+ tickMaxStep: PropTypes.number,
208
+ tickMinStep: PropTypes.number,
209
+ tickNumber: PropTypes.number,
186
210
  tickSize: PropTypes.number,
187
- tickSpacing: PropTypes.number,
188
211
  valueFormatter: PropTypes.func
189
212
  })
190
213
  } : void 0;
@@ -8,8 +8,8 @@ export var mangoFusionPaletteDark = ['#41698F', '#19D0CD', '#DE196B', '#FC5F5C',
8
8
  export var mangoFusionPalette = function mangoFusionPalette(mode) {
9
9
  return mode === 'dark' ? mangoFusionPaletteDark : mangoFusionPaletteLight;
10
10
  };
11
- export var cheerfulFiestaPaletteDark = ['#0072E6', '#66B2FF', '#FFB017', '#1F94AD', '#FF3143', '#FF6C63'];
12
- export var cheerfulFiestaPaletteLight = ['#0059B2', '#2E96FF', '#EA8C00', '#1F94AD', '#C82634', '#FF3143'];
11
+ export var cheerfulFiestaPaletteDark = ['#0059B2', '#2E96FF', '#FFC24C', '#FF9F0E', '#F38200', '#2ABFDE', '#1F94AD', '#BD2C38', '#FF3143', '#FF8282'];
12
+ export var cheerfulFiestaPaletteLight = ['#003A75', '#007FFF', '#FFC24C', '#FF9D09', '#CA6C00', '#127D94', '#1F94AD', '#C82634', '#FF3143', '#FF7E7E'];
13
13
  export var cheerfulFiestaPalette = function cheerfulFiestaPalette(mode) {
14
14
  return mode === 'dark' ? cheerfulFiestaPaletteDark : cheerfulFiestaPaletteLight;
15
15
  };
@@ -147,7 +147,8 @@ function CartesianContextProvider(_ref) {
147
147
  var scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
148
148
  var extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
149
149
  var ticksNumber = getTicksNumber(_extends({}, axis, {
150
- range: range
150
+ range: range,
151
+ domain: extremums
151
152
  }));
152
153
  var niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
153
154
  var niceDomain = niceScale.domain();
@@ -181,17 +182,17 @@ function CartesianContextProvider(_ref) {
181
182
  if (isBandScaleConfig(axis)) {
182
183
  var _axis$categoryGapRati2;
183
184
  var categoryGapRatio = (_axis$categoryGapRati2 = axis.categoryGapRatio) != null ? _axis$categoryGapRati2 : DEFAULT_CATEGORY_GAP_RATIO;
184
- completedXAxis[axis.id] = _extends({
185
+ completedYAxis[axis.id] = _extends({
185
186
  categoryGapRatio: categoryGapRatio,
186
187
  barGapRatio: 0
187
188
  }, axis, {
188
- scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
189
+ scale: scaleBand(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
189
190
  ticksNumber: axis.data.length
190
191
  });
191
192
  }
192
193
  if (isPointScaleConfig(axis)) {
193
- completedXAxis[axis.id] = _extends({}, axis, {
194
- scale: scalePoint(axis.data, range),
194
+ completedYAxis[axis.id] = _extends({}, axis, {
195
+ scale: scalePoint(axis.data, [range[1], range[0]]),
195
196
  ticksNumber: axis.data.length
196
197
  });
197
198
  }
@@ -202,7 +203,8 @@ function CartesianContextProvider(_ref) {
202
203
  var scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
203
204
  var extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
204
205
  var ticksNumber = getTicksNumber(_extends({}, axis, {
205
- range: range
206
+ range: range,
207
+ domain: extremums
206
208
  }));
207
209
  var niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
208
210
  var niceDomain = niceScale.domain();
@@ -253,15 +255,17 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
253
255
  label: PropTypes.string,
254
256
  labelFontSize: PropTypes.number,
255
257
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
256
- maxTicks: PropTypes.number,
257
258
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
258
- minTicks: PropTypes.number,
259
259
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
260
260
  scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
261
+ slotProps: PropTypes.object,
262
+ slots: PropTypes.object,
261
263
  stroke: PropTypes.string,
262
264
  tickFontSize: PropTypes.number,
265
+ tickMaxStep: PropTypes.number,
266
+ tickMinStep: PropTypes.number,
267
+ tickNumber: PropTypes.number,
263
268
  tickSize: PropTypes.number,
264
- tickSpacing: PropTypes.number,
265
269
  valueFormatter: PropTypes.func
266
270
  })),
267
271
  yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -277,15 +281,17 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
277
281
  label: PropTypes.string,
278
282
  labelFontSize: PropTypes.number,
279
283
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
280
- maxTicks: PropTypes.number,
281
284
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
282
- minTicks: PropTypes.number,
283
285
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
284
286
  scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
287
+ slotProps: PropTypes.object,
288
+ slots: PropTypes.object,
285
289
  stroke: PropTypes.string,
286
290
  tickFontSize: PropTypes.number,
291
+ tickMaxStep: PropTypes.number,
292
+ tickMinStep: PropTypes.number,
293
+ tickNumber: PropTypes.number,
287
294
  tickSize: PropTypes.number,
288
- tickSpacing: PropTypes.number,
289
295
  valueFormatter: PropTypes.func
290
296
  }))
291
297
  } : void 0;