@mui/x-charts 6.0.0-alpha.14 → 6.0.0-alpha.16

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 (199) hide show
  1. package/BarChart/BarChart.d.ts +16 -2
  2. package/BarChart/BarChart.js +49 -11
  3. package/BarChart/BarElement.d.ts +1318 -3
  4. package/BarChart/BarElement.js +10 -8
  5. package/BarChart/BarPlot.d.ts +17 -1
  6. package/BarChart/BarPlot.js +152 -66
  7. package/CHANGELOG.md +169 -0
  8. package/ChartContainer/index.js +5 -2
  9. package/ChartsAxis/ChartsAxis.js +18 -2
  10. package/ChartsAxis/axisClasses.d.ts +1 -1
  11. package/ChartsAxisHighlight/ChartsAxisHighlight.js +2 -2
  12. package/ChartsClipPath/ChartsClipPath.js +2 -2
  13. package/ChartsLegend/ChartsLegend.d.ts +44 -24
  14. package/ChartsLegend/ChartsLegend.js +191 -145
  15. package/ChartsLegend/utils.d.ts +1 -6
  16. package/ChartsSurface.js +5 -13
  17. package/ChartsTooltip/ChartsAxisTooltipContent.js +2 -2
  18. package/ChartsTooltip/ChartsItemTooltipContent.js +2 -2
  19. package/ChartsTooltip/ChartsTooltip.js +2 -2
  20. package/ChartsTooltip/utils.js +2 -2
  21. package/ChartsXAxis/ChartsXAxis.js +151 -40
  22. package/ChartsYAxis/ChartsYAxis.js +76 -33
  23. package/LineChart/AreaElement.d.ts +10 -0
  24. package/LineChart/AreaElement.js +12 -2
  25. package/LineChart/AreaPlot.d.ts +11 -0
  26. package/LineChart/AreaPlot.js +13 -2
  27. package/LineChart/LineChart.d.ts +13 -0
  28. package/LineChart/LineChart.js +40 -10
  29. package/LineChart/LineElement.d.ts +10 -0
  30. package/LineChart/LineElement.js +12 -2
  31. package/LineChart/LineHighlightElement.d.ts +10 -0
  32. package/LineChart/LineHighlightElement.js +12 -2
  33. package/LineChart/LineHighlightPlot.d.ts +10 -0
  34. package/LineChart/LineHighlightPlot.js +12 -2
  35. package/LineChart/LinePlot.d.ts +10 -0
  36. package/LineChart/LinePlot.js +12 -2
  37. package/LineChart/MarkElement.d.ts +10 -0
  38. package/LineChart/MarkElement.js +12 -2
  39. package/LineChart/MarkPlot.d.ts +10 -0
  40. package/LineChart/MarkPlot.js +12 -2
  41. package/PieChart/PieArc.js +2 -2
  42. package/PieChart/PieArcLabel.js +2 -2
  43. package/PieChart/PieChart.d.ts +13 -0
  44. package/PieChart/PieChart.js +41 -10
  45. package/PieChart/PiePlot.d.ts +10 -0
  46. package/PieChart/PiePlot.js +12 -2
  47. package/ResponsiveChartContainer/index.js +4 -4
  48. package/ScatterChart/Scatter.d.ts +10 -0
  49. package/ScatterChart/Scatter.js +12 -2
  50. package/ScatterChart/ScatterChart.d.ts +13 -0
  51. package/ScatterChart/ScatterChart.js +40 -10
  52. package/ScatterChart/ScatterPlot.d.ts +10 -0
  53. package/ScatterChart/ScatterPlot.js +12 -2
  54. package/SparkLineChart/SparkLineChart.d.ts +9 -0
  55. package/SparkLineChart/SparkLineChart.js +16 -2
  56. package/constants.js +1 -1
  57. package/context/CartesianContextProvider.js +20 -12
  58. package/context/DrawingProvider.d.ts +2 -0
  59. package/context/DrawingProvider.js +4 -2
  60. package/context/HighlightProvider.js +2 -2
  61. package/context/InteractionProvider.js +2 -2
  62. package/context/SeriesContextProvider.js +2 -2
  63. package/esm/BarChart/BarChart.js +47 -9
  64. package/esm/BarChart/BarElement.js +7 -4
  65. package/esm/BarChart/BarPlot.js +152 -67
  66. package/esm/ChartContainer/index.js +3 -0
  67. package/esm/ChartsAxis/ChartsAxis.js +16 -0
  68. package/esm/ChartsLegend/ChartsLegend.js +188 -142
  69. package/esm/ChartsSurface.js +3 -11
  70. package/esm/ChartsXAxis/ChartsXAxis.js +148 -37
  71. package/esm/ChartsYAxis/ChartsYAxis.js +73 -30
  72. package/esm/LineChart/AreaElement.js +10 -0
  73. package/esm/LineChart/AreaPlot.js +11 -0
  74. package/esm/LineChart/LineChart.js +38 -8
  75. package/esm/LineChart/LineElement.js +10 -0
  76. package/esm/LineChart/LineHighlightElement.js +10 -0
  77. package/esm/LineChart/LineHighlightPlot.js +10 -0
  78. package/esm/LineChart/LinePlot.js +10 -0
  79. package/esm/LineChart/MarkElement.js +10 -0
  80. package/esm/LineChart/MarkPlot.js +10 -0
  81. package/esm/PieChart/PieChart.js +39 -8
  82. package/esm/PieChart/PiePlot.js +10 -0
  83. package/esm/ResponsiveChartContainer/index.js +2 -2
  84. package/esm/ScatterChart/Scatter.js +10 -0
  85. package/esm/ScatterChart/ScatterChart.js +38 -8
  86. package/esm/ScatterChart/ScatterPlot.js +10 -0
  87. package/esm/SparkLineChart/SparkLineChart.js +14 -0
  88. package/esm/constants.js +1 -1
  89. package/esm/context/CartesianContextProvider.js +19 -11
  90. package/esm/context/DrawingProvider.js +2 -0
  91. package/esm/hooks/useChartDimensions.js +2 -0
  92. package/esm/hooks/useMounted.js +16 -0
  93. package/esm/hooks/useReducedMotion.js +27 -0
  94. package/esm/hooks/useTicks.js +15 -9
  95. package/esm/internals/components/AxisSharedComponents.js +15 -70
  96. package/esm/internals/components/ChartsText.js +75 -0
  97. package/esm/internals/domUtils.js +113 -0
  98. package/esm/internals/geometry.js +36 -0
  99. package/hooks/useAxisEvents.js +2 -2
  100. package/hooks/useChartDimensions.d.ts +2 -0
  101. package/hooks/useChartDimensions.js +4 -2
  102. package/hooks/useDrawingArea.js +2 -2
  103. package/hooks/useInteractionItemProps.js +2 -2
  104. package/hooks/useMounted.d.ts +1 -0
  105. package/hooks/useMounted.js +25 -0
  106. package/hooks/useReducedMotion.d.ts +8 -0
  107. package/hooks/useReducedMotion.js +33 -0
  108. package/hooks/useScale.d.ts +2 -2
  109. package/hooks/useScale.js +2 -2
  110. package/hooks/useTicks.d.ts +19 -11
  111. package/hooks/useTicks.js +18 -12
  112. package/index.js +1 -1
  113. package/internals/components/AxisSharedComponents.d.ts +0 -4
  114. package/internals/components/AxisSharedComponents.js +16 -71
  115. package/internals/components/ChartsText.d.ts +35 -0
  116. package/internals/components/ChartsText.js +85 -0
  117. package/internals/defaultizeColor.d.ts +1 -1
  118. package/internals/domUtils.d.ts +13 -0
  119. package/internals/domUtils.js +122 -0
  120. package/internals/geometry.d.ts +9 -0
  121. package/internals/geometry.js +42 -0
  122. package/legacy/BarChart/BarChart.js +47 -9
  123. package/legacy/BarChart/BarElement.js +6 -3
  124. package/legacy/BarChart/BarPlot.js +151 -63
  125. package/legacy/ChartContainer/index.js +3 -0
  126. package/legacy/ChartsAxis/ChartsAxis.js +16 -0
  127. package/legacy/ChartsLegend/ChartsLegend.js +203 -140
  128. package/legacy/ChartsSurface.js +2 -11
  129. package/legacy/ChartsXAxis/ChartsXAxis.js +152 -39
  130. package/legacy/ChartsYAxis/ChartsYAxis.js +73 -30
  131. package/legacy/LineChart/AreaElement.js +10 -0
  132. package/legacy/LineChart/AreaPlot.js +11 -0
  133. package/legacy/LineChart/LineChart.js +38 -8
  134. package/legacy/LineChart/LineElement.js +10 -0
  135. package/legacy/LineChart/LineHighlightElement.js +10 -0
  136. package/legacy/LineChart/LineHighlightPlot.js +10 -0
  137. package/legacy/LineChart/LinePlot.js +10 -0
  138. package/legacy/LineChart/MarkElement.js +10 -0
  139. package/legacy/LineChart/MarkPlot.js +10 -0
  140. package/legacy/PieChart/PieChart.js +39 -8
  141. package/legacy/PieChart/PiePlot.js +10 -0
  142. package/legacy/ResponsiveChartContainer/index.js +2 -2
  143. package/legacy/ScatterChart/Scatter.js +10 -0
  144. package/legacy/ScatterChart/ScatterChart.js +38 -8
  145. package/legacy/ScatterChart/ScatterPlot.js +10 -0
  146. package/legacy/SparkLineChart/SparkLineChart.js +14 -0
  147. package/legacy/constants.js +1 -1
  148. package/legacy/context/CartesianContextProvider.js +19 -11
  149. package/legacy/context/DrawingProvider.js +2 -0
  150. package/legacy/hooks/useChartDimensions.js +2 -0
  151. package/legacy/hooks/useMounted.js +21 -0
  152. package/legacy/hooks/useReducedMotion.js +27 -0
  153. package/legacy/hooks/useTicks.js +16 -9
  154. package/legacy/index.js +1 -1
  155. package/legacy/internals/components/AxisSharedComponents.js +9 -63
  156. package/legacy/internals/components/ChartsText.js +77 -0
  157. package/legacy/internals/domUtils.js +121 -0
  158. package/legacy/internals/geometry.js +37 -0
  159. package/models/axis.d.ts +25 -7
  160. package/models/layout.d.ts +7 -6
  161. package/models/seriesType/line.d.ts +2 -2
  162. package/modern/BarChart/BarChart.js +47 -9
  163. package/modern/BarChart/BarElement.js +7 -4
  164. package/modern/BarChart/BarPlot.js +149 -65
  165. package/modern/ChartContainer/index.js +3 -0
  166. package/modern/ChartsAxis/ChartsAxis.js +16 -0
  167. package/modern/ChartsLegend/ChartsLegend.js +188 -142
  168. package/modern/ChartsSurface.js +3 -11
  169. package/modern/ChartsXAxis/ChartsXAxis.js +148 -37
  170. package/modern/ChartsYAxis/ChartsYAxis.js +73 -30
  171. package/modern/LineChart/AreaElement.js +10 -0
  172. package/modern/LineChart/AreaPlot.js +11 -0
  173. package/modern/LineChart/LineChart.js +38 -8
  174. package/modern/LineChart/LineElement.js +10 -0
  175. package/modern/LineChart/LineHighlightElement.js +10 -0
  176. package/modern/LineChart/LineHighlightPlot.js +10 -0
  177. package/modern/LineChart/LinePlot.js +10 -0
  178. package/modern/LineChart/MarkElement.js +10 -0
  179. package/modern/LineChart/MarkPlot.js +10 -0
  180. package/modern/PieChart/PieChart.js +39 -8
  181. package/modern/PieChart/PiePlot.js +10 -0
  182. package/modern/ResponsiveChartContainer/index.js +2 -2
  183. package/modern/ScatterChart/Scatter.js +10 -0
  184. package/modern/ScatterChart/ScatterChart.js +38 -8
  185. package/modern/ScatterChart/ScatterPlot.js +10 -0
  186. package/modern/SparkLineChart/SparkLineChart.js +14 -0
  187. package/modern/constants.js +1 -1
  188. package/modern/context/CartesianContextProvider.js +19 -11
  189. package/modern/context/DrawingProvider.js +2 -0
  190. package/modern/hooks/useChartDimensions.js +2 -0
  191. package/modern/hooks/useMounted.js +16 -0
  192. package/modern/hooks/useReducedMotion.js +27 -0
  193. package/modern/hooks/useTicks.js +15 -9
  194. package/modern/index.js +1 -1
  195. package/modern/internals/components/AxisSharedComponents.js +15 -70
  196. package/modern/internals/components/ChartsText.js +75 -0
  197. package/modern/internals/domUtils.js +113 -0
  198. package/modern/internals/geometry.js +36 -0
  199. package/package.json +5 -3
@@ -9,6 +9,16 @@ import { LineHighlightElement } from './LineHighlightElement';
9
9
  import { getValueToPositionMapper } from '../hooks/useScale';
10
10
  import { InteractionContext } from '../context/InteractionProvider';
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
+ /**
13
+ * Demos:
14
+ *
15
+ * - [Lines](https://mui.com/x/react-charts/lines/)
16
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
17
+ *
18
+ * API:
19
+ *
20
+ * - [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
21
+ */
12
22
  function LineHighlightPlot(props) {
13
23
  var _axis$x, _slots$lineHighlight;
14
24
  var slots = props.slots,
@@ -10,6 +10,16 @@ import { LineElement } from './LineElement';
10
10
  import { getValueToPositionMapper } from '../hooks/useScale';
11
11
  import getCurveFactory from '../internals/getCurve';
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
+ /**
14
+ * Demos:
15
+ *
16
+ * - [Lines](https://mui.com/x/react-charts/lines/)
17
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
18
+ *
19
+ * API:
20
+ *
21
+ * - [LinePlot API](https://mui.com/x/api/charts/line-plot/)
22
+ */
13
23
  function LinePlot(props) {
14
24
  var slots = props.slots,
15
25
  slotProps = props.slotProps,
@@ -60,6 +60,16 @@ MarkElementPath.propTypes = {
60
60
  }).isRequired,
61
61
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
62
62
  };
63
+ /**
64
+ * Demos:
65
+ *
66
+ * - [Lines](https://mui.com/x/react-charts/lines/)
67
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
68
+ *
69
+ * API:
70
+ *
71
+ * - [MarkElement API](https://mui.com/x/api/charts/mark-element/)
72
+ */
63
73
  function MarkElement(props) {
64
74
  var _axis$x;
65
75
  var x = props.x,
@@ -9,6 +9,16 @@ import { CartesianContext } from '../context/CartesianContextProvider';
9
9
  import { MarkElement } from './MarkElement';
10
10
  import { getValueToPositionMapper } from '../hooks/useScale';
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
+ /**
13
+ * Demos:
14
+ *
15
+ * - [Lines](https://mui.com/x/react-charts/lines/)
16
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
17
+ *
18
+ * API:
19
+ *
20
+ * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
21
+ */
12
22
  function MarkPlot(props) {
13
23
  var _slots$mark;
14
24
  var slots = props.slots,
@@ -17,6 +17,17 @@ var defaultMargin = {
17
17
  left: 5,
18
18
  right: 100
19
19
  };
20
+
21
+ /**
22
+ * Demos:
23
+ *
24
+ * - [Pie](https://mui.com/x/react-charts/pie/)
25
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
26
+ *
27
+ * API:
28
+ *
29
+ * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
30
+ */
20
31
  function PieChart(props) {
21
32
  var xAxis = props.xAxis,
22
33
  yAxis = props.yAxis,
@@ -117,11 +128,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
117
128
  fill: PropTypes.string,
118
129
  label: PropTypes.string,
119
130
  labelFontSize: PropTypes.number,
131
+ labelStyle: PropTypes.object,
120
132
  position: PropTypes.oneOf(['bottom', 'top']),
121
133
  slotProps: PropTypes.object,
122
134
  slots: PropTypes.object,
123
135
  stroke: PropTypes.string,
124
136
  tickFontSize: PropTypes.number,
137
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
138
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
139
+ tickLabelStyle: PropTypes.object,
125
140
  tickMaxStep: PropTypes.number,
126
141
  tickMinStep: PropTypes.number,
127
142
  tickNumber: PropTypes.number,
@@ -150,33 +165,33 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
150
165
  fill: PropTypes.string,
151
166
  label: PropTypes.string,
152
167
  labelFontSize: PropTypes.number,
168
+ labelStyle: PropTypes.object,
153
169
  position: PropTypes.oneOf(['left', 'right']),
154
170
  slotProps: PropTypes.object,
155
171
  slots: PropTypes.object,
156
172
  stroke: PropTypes.string,
157
173
  tickFontSize: PropTypes.number,
174
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
175
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
176
+ tickLabelStyle: PropTypes.object,
158
177
  tickMaxStep: PropTypes.number,
159
178
  tickMinStep: PropTypes.number,
160
179
  tickNumber: PropTypes.number,
161
180
  tickSize: PropTypes.number
162
181
  }), PropTypes.string]),
182
+ /**
183
+ * @deprecated Consider using `slotProps.legend` instead.
184
+ */
163
185
  legend: PropTypes.shape({
164
186
  classes: PropTypes.object,
165
187
  direction: PropTypes.oneOf(['column', 'row']),
166
188
  hidden: PropTypes.bool,
167
- itemWidth: PropTypes.number,
168
- markSize: PropTypes.number,
169
- offset: PropTypes.shape({
170
- x: PropTypes.number,
171
- y: PropTypes.number
172
- }),
173
189
  position: PropTypes.shape({
174
190
  horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
175
191
  vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
176
192
  }),
177
193
  slotProps: PropTypes.object,
178
- slots: PropTypes.object,
179
- spacing: PropTypes.number
194
+ slots: PropTypes.object
180
195
  }),
181
196
  margin: PropTypes.shape({
182
197
  bottom: PropTypes.number,
@@ -198,11 +213,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
198
213
  fill: PropTypes.string,
199
214
  label: PropTypes.string,
200
215
  labelFontSize: PropTypes.number,
216
+ labelStyle: PropTypes.object,
201
217
  position: PropTypes.oneOf(['left', 'right']),
202
218
  slotProps: PropTypes.object,
203
219
  slots: PropTypes.object,
204
220
  stroke: PropTypes.string,
205
221
  tickFontSize: PropTypes.number,
222
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
223
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
224
+ tickLabelStyle: PropTypes.object,
206
225
  tickMaxStep: PropTypes.number,
207
226
  tickMinStep: PropTypes.number,
208
227
  tickNumber: PropTypes.number,
@@ -276,11 +295,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
276
295
  fill: PropTypes.string,
277
296
  label: PropTypes.string,
278
297
  labelFontSize: PropTypes.number,
298
+ labelStyle: PropTypes.object,
279
299
  position: PropTypes.oneOf(['bottom', 'top']),
280
300
  slotProps: PropTypes.object,
281
301
  slots: PropTypes.object,
282
302
  stroke: PropTypes.string,
283
303
  tickFontSize: PropTypes.number,
304
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
305
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
306
+ tickLabelStyle: PropTypes.object,
284
307
  tickMaxStep: PropTypes.number,
285
308
  tickMinStep: PropTypes.number,
286
309
  tickNumber: PropTypes.number,
@@ -305,6 +328,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
305
328
  id: PropTypes.string,
306
329
  label: PropTypes.string,
307
330
  labelFontSize: PropTypes.number,
331
+ labelStyle: PropTypes.object,
308
332
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
309
333
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
310
334
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -313,6 +337,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
313
337
  slots: PropTypes.object,
314
338
  stroke: PropTypes.string,
315
339
  tickFontSize: PropTypes.number,
340
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
341
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
342
+ tickLabelStyle: PropTypes.object,
316
343
  tickMaxStep: PropTypes.number,
317
344
  tickMinStep: PropTypes.number,
318
345
  tickNumber: PropTypes.number,
@@ -331,6 +358,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
331
358
  id: PropTypes.string,
332
359
  label: PropTypes.string,
333
360
  labelFontSize: PropTypes.number,
361
+ labelStyle: PropTypes.object,
334
362
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
335
363
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
336
364
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -339,6 +367,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
339
367
  slots: PropTypes.object,
340
368
  stroke: PropTypes.string,
341
369
  tickFontSize: PropTypes.number,
370
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
371
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
372
+ tickLabelStyle: PropTypes.object,
342
373
  tickMaxStep: PropTypes.number,
343
374
  tickMinStep: PropTypes.number,
344
375
  tickNumber: PropTypes.number,
@@ -23,6 +23,16 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
23
23
  }
24
24
  return arcLabel(item);
25
25
  }
26
+ /**
27
+ * Demos:
28
+ *
29
+ * - [Pie](https://mui.com/x/react-charts/pie/)
30
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
31
+ *
32
+ * API:
33
+ *
34
+ * - [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
35
+ */
26
36
  function PiePlot(props) {
27
37
  var _slots$pieArc, _slots$pieArcLabel;
28
38
  var slots = props.slots,
@@ -114,10 +114,10 @@ export var ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function Res
114
114
  width: inWidth,
115
115
  height: inHeight
116
116
  },
117
- children: /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
117
+ children: width && height ? /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
118
118
  width: width,
119
119
  height: height,
120
120
  ref: ref
121
- }))
121
+ })) : null
122
122
  });
123
123
  });
@@ -6,6 +6,16 @@ import { getValueToPositionMapper } from '../hooks/useScale';
6
6
  import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
7
7
  import { InteractionContext } from '../context/InteractionProvider';
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
+ /**
10
+ * Demos:
11
+ *
12
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
13
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
14
+ *
15
+ * API:
16
+ *
17
+ * - [Scatter API](https://mui.com/x/api/charts/scatter/)
18
+ */
9
19
  function Scatter(props) {
10
20
  var series = props.series,
11
21
  xScale = props.xScale,
@@ -9,6 +9,16 @@ import { ChartsLegend } from '../ChartsLegend';
9
9
  import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
10
10
  import { jsx as _jsx } from "react/jsx-runtime";
11
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
+ /**
13
+ * Demos:
14
+ *
15
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
16
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
17
+ *
18
+ * API:
19
+ *
20
+ * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
21
+ */
12
22
  var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
13
23
  var xAxis = props.xAxis,
14
24
  yAxis = props.yAxis,
@@ -85,11 +95,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
85
95
  fill: PropTypes.string,
86
96
  label: PropTypes.string,
87
97
  labelFontSize: PropTypes.number,
98
+ labelStyle: PropTypes.object,
88
99
  position: PropTypes.oneOf(['bottom', 'top']),
89
100
  slotProps: PropTypes.object,
90
101
  slots: PropTypes.object,
91
102
  stroke: PropTypes.string,
92
103
  tickFontSize: PropTypes.number,
104
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
105
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
106
+ tickLabelStyle: PropTypes.object,
93
107
  tickMaxStep: PropTypes.number,
94
108
  tickMinStep: PropTypes.number,
95
109
  tickNumber: PropTypes.number,
@@ -118,33 +132,33 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
118
132
  fill: PropTypes.string,
119
133
  label: PropTypes.string,
120
134
  labelFontSize: PropTypes.number,
135
+ labelStyle: PropTypes.object,
121
136
  position: PropTypes.oneOf(['left', 'right']),
122
137
  slotProps: PropTypes.object,
123
138
  slots: PropTypes.object,
124
139
  stroke: PropTypes.string,
125
140
  tickFontSize: PropTypes.number,
141
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
142
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
143
+ tickLabelStyle: PropTypes.object,
126
144
  tickMaxStep: PropTypes.number,
127
145
  tickMinStep: PropTypes.number,
128
146
  tickNumber: PropTypes.number,
129
147
  tickSize: PropTypes.number
130
148
  }), PropTypes.string]),
149
+ /**
150
+ * @deprecated Consider using `slotProps.legend` instead.
151
+ */
131
152
  legend: PropTypes.shape({
132
153
  classes: PropTypes.object,
133
154
  direction: PropTypes.oneOf(['column', 'row']),
134
155
  hidden: PropTypes.bool,
135
- itemWidth: PropTypes.number,
136
- markSize: PropTypes.number,
137
- offset: PropTypes.shape({
138
- x: PropTypes.number,
139
- y: PropTypes.number
140
- }),
141
156
  position: PropTypes.shape({
142
157
  horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
143
158
  vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
144
159
  }),
145
160
  slotProps: PropTypes.object,
146
- slots: PropTypes.object,
147
- spacing: PropTypes.number
161
+ slots: PropTypes.object
148
162
  }),
149
163
  margin: PropTypes.shape({
150
164
  bottom: PropTypes.number,
@@ -165,11 +179,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
165
179
  fill: PropTypes.string,
166
180
  label: PropTypes.string,
167
181
  labelFontSize: PropTypes.number,
182
+ labelStyle: PropTypes.object,
168
183
  position: PropTypes.oneOf(['left', 'right']),
169
184
  slotProps: PropTypes.object,
170
185
  slots: PropTypes.object,
171
186
  stroke: PropTypes.string,
172
187
  tickFontSize: PropTypes.number,
188
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
189
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
190
+ tickLabelStyle: PropTypes.object,
173
191
  tickMaxStep: PropTypes.number,
174
192
  tickMinStep: PropTypes.number,
175
193
  tickNumber: PropTypes.number,
@@ -227,11 +245,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
227
245
  fill: PropTypes.string,
228
246
  label: PropTypes.string,
229
247
  labelFontSize: PropTypes.number,
248
+ labelStyle: PropTypes.object,
230
249
  position: PropTypes.oneOf(['bottom', 'top']),
231
250
  slotProps: PropTypes.object,
232
251
  slots: PropTypes.object,
233
252
  stroke: PropTypes.string,
234
253
  tickFontSize: PropTypes.number,
254
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
255
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
256
+ tickLabelStyle: PropTypes.object,
235
257
  tickMaxStep: PropTypes.number,
236
258
  tickMinStep: PropTypes.number,
237
259
  tickNumber: PropTypes.number,
@@ -256,6 +278,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
256
278
  id: PropTypes.string,
257
279
  label: PropTypes.string,
258
280
  labelFontSize: PropTypes.number,
281
+ labelStyle: PropTypes.object,
259
282
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
260
283
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
261
284
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -264,6 +287,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
264
287
  slots: PropTypes.object,
265
288
  stroke: PropTypes.string,
266
289
  tickFontSize: PropTypes.number,
290
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
291
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
292
+ tickLabelStyle: PropTypes.object,
267
293
  tickMaxStep: PropTypes.number,
268
294
  tickMinStep: PropTypes.number,
269
295
  tickNumber: PropTypes.number,
@@ -282,6 +308,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
282
308
  id: PropTypes.string,
283
309
  label: PropTypes.string,
284
310
  labelFontSize: PropTypes.number,
311
+ labelStyle: PropTypes.object,
285
312
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
286
313
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
287
314
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -290,6 +317,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
290
317
  slots: PropTypes.object,
291
318
  stroke: PropTypes.string,
292
319
  tickFontSize: PropTypes.number,
320
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
321
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
322
+ tickLabelStyle: PropTypes.object,
293
323
  tickMaxStep: PropTypes.number,
294
324
  tickMinStep: PropTypes.number,
295
325
  tickNumber: PropTypes.number,
@@ -5,6 +5,16 @@ import { Scatter } from './Scatter';
5
5
  import { SeriesContext } from '../context/SeriesContextProvider';
6
6
  import { CartesianContext } from '../context/CartesianContextProvider';
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
+ /**
9
+ * Demos:
10
+ *
11
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
12
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
13
+ *
14
+ * API:
15
+ *
16
+ * - [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
17
+ */
8
18
  function ScatterPlot(props) {
9
19
  var _slots$scatter;
10
20
  var slots = props.slots,
@@ -15,6 +15,16 @@ var SPARKLINE_DEFAULT_MARGIN = {
15
15
  left: 5,
16
16
  right: 5
17
17
  };
18
+
19
+ /**
20
+ * Demos:
21
+ *
22
+ * - [SparkLine](https://mui.com/x/react-charts/sparkline/)
23
+ *
24
+ * API:
25
+ *
26
+ * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
27
+ */
18
28
  var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
19
29
  var xAxis = props.xAxis,
20
30
  width = props.width,
@@ -201,6 +211,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
201
211
  id: PropTypes.string,
202
212
  label: PropTypes.string,
203
213
  labelFontSize: PropTypes.number,
214
+ labelStyle: PropTypes.object,
204
215
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
205
216
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
206
217
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -209,6 +220,9 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
209
220
  slots: PropTypes.object,
210
221
  stroke: PropTypes.string,
211
222
  tickFontSize: PropTypes.number,
223
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
224
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
225
+ tickLabelStyle: PropTypes.object,
212
226
  tickMaxStep: PropTypes.number,
213
227
  tickMinStep: PropTypes.number,
214
228
  tickNumber: PropTypes.number,
@@ -1,7 +1,7 @@
1
1
  export var DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
2
2
  export var DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
3
3
  export var DEFAULT_MARGINS = {
4
- top: 100,
4
+ top: 50,
5
5
  bottom: 50,
6
6
  left: 50,
7
7
  right: 50
@@ -12,7 +12,7 @@ import { getScale } from '../internals/getScale';
12
12
  import { DrawingContext } from './DrawingProvider';
13
13
  import { SeriesContext } from './SeriesContextProvider';
14
14
  import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
15
- import { getTicksNumber } from '../hooks/useTicks';
15
+ import { getTickNumber } from '../hooks/useTicks';
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
17
  var DEFAULT_CATEGORY_GAP_RATIO = 0.2;
18
18
  var DEFAULT_BAR_GAP_RATIO = 0.1;
@@ -133,13 +133,13 @@ function CartesianContextProvider(_ref) {
133
133
  barGapRatio: barGapRatio
134
134
  }, axis, {
135
135
  scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
136
- ticksNumber: axis.data.length
136
+ tickNumber: axis.data.length
137
137
  });
138
138
  }
139
139
  if (isPointScaleConfig(axis)) {
140
140
  completedXAxis[axis.id] = _extends({}, axis, {
141
141
  scale: scalePoint(axis.data, range),
142
- ticksNumber: axis.data.length
142
+ tickNumber: axis.data.length
143
143
  });
144
144
  }
145
145
  if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -148,17 +148,17 @@ function CartesianContextProvider(_ref) {
148
148
  }
149
149
  var scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
150
150
  var extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
151
- var ticksNumber = getTicksNumber(_extends({}, axis, {
151
+ var tickNumber = getTickNumber(_extends({}, axis, {
152
152
  range: range,
153
153
  domain: extremums
154
154
  }));
155
- var niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
155
+ var niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
156
156
  var niceDomain = niceScale.domain();
157
157
  var domain = [(_axis$min2 = axis.min) != null ? _axis$min2 : niceDomain[0], (_axis$max2 = axis.max) != null ? _axis$max2 : niceDomain[1]];
158
158
  completedXAxis[axis.id] = _extends({}, axis, {
159
159
  scaleType: scaleType,
160
160
  scale: niceScale.domain(domain),
161
- ticksNumber: ticksNumber
161
+ tickNumber: tickNumber
162
162
  });
163
163
  });
164
164
  var allYAxis = [].concat(_toConsumableArray((_yAxis$map = yAxis == null ? void 0 : yAxis.map(function (axis, index) {
@@ -189,13 +189,13 @@ function CartesianContextProvider(_ref) {
189
189
  barGapRatio: 0
190
190
  }, axis, {
191
191
  scale: scaleBand(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
192
- ticksNumber: axis.data.length
192
+ tickNumber: axis.data.length
193
193
  });
194
194
  }
195
195
  if (isPointScaleConfig(axis)) {
196
196
  completedYAxis[axis.id] = _extends({}, axis, {
197
197
  scale: scalePoint(axis.data, [range[1], range[0]]),
198
- ticksNumber: axis.data.length
198
+ tickNumber: axis.data.length
199
199
  });
200
200
  }
201
201
  if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -204,17 +204,17 @@ function CartesianContextProvider(_ref) {
204
204
  }
205
205
  var scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
206
206
  var extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
207
- var ticksNumber = getTicksNumber(_extends({}, axis, {
207
+ var tickNumber = getTickNumber(_extends({}, axis, {
208
208
  range: range,
209
209
  domain: extremums
210
210
  }));
211
- var niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
211
+ var niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
212
212
  var niceDomain = niceScale.domain();
213
213
  var domain = [(_axis$min4 = axis.min) != null ? _axis$min4 : niceDomain[0], (_axis$max4 = axis.max) != null ? _axis$max4 : niceDomain[1]];
214
214
  completedYAxis[axis.id] = _extends({}, axis, {
215
215
  scaleType: scaleType,
216
216
  scale: niceScale.domain(domain),
217
- ticksNumber: ticksNumber
217
+ tickNumber: tickNumber
218
218
  });
219
219
  });
220
220
  return {
@@ -256,6 +256,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
256
256
  id: PropTypes.string,
257
257
  label: PropTypes.string,
258
258
  labelFontSize: PropTypes.number,
259
+ labelStyle: PropTypes.object,
259
260
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
260
261
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
261
262
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -264,6 +265,9 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
264
265
  slots: PropTypes.object,
265
266
  stroke: PropTypes.string,
266
267
  tickFontSize: PropTypes.number,
268
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
269
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
270
+ tickLabelStyle: PropTypes.object,
267
271
  tickMaxStep: PropTypes.number,
268
272
  tickMinStep: PropTypes.number,
269
273
  tickNumber: PropTypes.number,
@@ -282,6 +286,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
282
286
  id: PropTypes.string,
283
287
  label: PropTypes.string,
284
288
  labelFontSize: PropTypes.number,
289
+ labelStyle: PropTypes.object,
285
290
  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
286
291
  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
287
292
  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -290,6 +295,9 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
290
295
  slots: PropTypes.object,
291
296
  stroke: PropTypes.string,
292
297
  tickFontSize: PropTypes.number,
298
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
299
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
300
+ tickLabelStyle: PropTypes.object,
293
301
  tickMaxStep: PropTypes.number,
294
302
  tickMinStep: PropTypes.number,
295
303
  tickNumber: PropTypes.number,
@@ -9,6 +9,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
9
9
  export var DrawingContext = /*#__PURE__*/React.createContext({
10
10
  top: 0,
11
11
  left: 0,
12
+ bottom: 0,
13
+ right: 0,
12
14
  height: 300,
13
15
  width: 400
14
16
  });
@@ -7,6 +7,8 @@ var useChartDimensions = function useChartDimensions(width, height, margin) {
7
7
  return {
8
8
  left: defaultizedMargin.left,
9
9
  top: defaultizedMargin.top,
10
+ right: defaultizedMargin.right,
11
+ bottom: defaultizedMargin.bottom,
10
12
  width: Math.max(0, width - defaultizedMargin.left - defaultizedMargin.right),
11
13
  height: Math.max(0, height - defaultizedMargin.top - defaultizedMargin.bottom)
12
14
  };
@@ -0,0 +1,21 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
+ import * as React from 'react';
3
+ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
4
+ export function useMounted() {
5
+ var defer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
6
+ var _React$useState = React.useState(false),
7
+ _React$useState2 = _slicedToArray(_React$useState, 2),
8
+ mountedState = _React$useState2[0],
9
+ setMountedState = _React$useState2[1];
10
+ useEnhancedEffect(function () {
11
+ if (!defer) {
12
+ setMountedState(true);
13
+ }
14
+ }, [defer]);
15
+ React.useEffect(function () {
16
+ if (defer) {
17
+ setMountedState(true);
18
+ }
19
+ }, [defer]);
20
+ return mountedState;
21
+ }
@@ -0,0 +1,27 @@
1
+ import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
2
+
3
+ /**
4
+ * Returns `boolean` or `null`, used to automatically
5
+ * set skipAnimations to the value of the user's
6
+ * `prefers-reduced-motion` query.
7
+ *
8
+ * The return value, post-effect, is the value of their prefered setting
9
+ */
10
+ export var useReducedMotion = function useReducedMotion() {
11
+ // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
12
+
13
+ useIsomorphicLayoutEffect(function () {
14
+ var mql = window.matchMedia('(prefers-reduced-motion)');
15
+ var handleMediaChange = function handleMediaChange(e) {
16
+ Globals.assign({
17
+ // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
18
+ skipAnimation: e.matches || undefined
19
+ });
20
+ };
21
+ handleMediaChange(mql);
22
+ mql.addEventListener('change', handleMediaChange);
23
+ return function () {
24
+ mql.removeEventListener('change', handleMediaChange);
25
+ };
26
+ }, []);
27
+ };