@mui/x-charts 7.17.0 → 7.19.0

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 (180) hide show
  1. package/BarChart/BarChart.js +10 -0
  2. package/BarChart/BarElement.d.ts +1 -1
  3. package/BarChart/BarLabel/BarLabel.d.ts +1 -1
  4. package/BarChart/formatter.js +5 -4
  5. package/CHANGELOG.md +208 -5
  6. package/ChartContainer/useDefaultizeAxis.d.ts +4 -4
  7. package/ChartContainer/useDefaultizeAxis.js +1 -1
  8. package/ChartsAxis/ChartsAxis.js +4 -4
  9. package/ChartsAxisHighlight/ChartsAxisHighlight.d.ts +1 -1
  10. package/ChartsGrid/styledCommonents.d.ts +2 -2
  11. package/ChartsLegend/ChartsLegend.d.ts +2 -2
  12. package/ChartsLegend/DefaultChartsLegend.js +1 -1
  13. package/ChartsLegend/LegendPerItem.d.ts +1 -1
  14. package/ChartsLegend/LegendPerItem.js +1 -1
  15. package/ChartsLegend/PiecewiseColorLegend.js +1 -1
  16. package/ChartsReferenceLine/common.d.ts +1 -1
  17. package/ChartsTooltip/ChartsTooltipTable.d.ts +5 -5
  18. package/ChartsTooltip/index.d.ts +3 -0
  19. package/ChartsTooltip/index.js +4 -1
  20. package/ChartsTooltip/useAxisTooltip.d.ts +18 -0
  21. package/ChartsTooltip/useAxisTooltip.js +84 -0
  22. package/ChartsTooltip/useItemTooltip.d.ts +10 -0
  23. package/ChartsTooltip/useItemTooltip.js +64 -0
  24. package/ChartsTooltip/utils.d.ts +2 -1
  25. package/LineChart/AnimatedArea.d.ts +1 -1
  26. package/LineChart/AnimatedArea.js +9 -45
  27. package/LineChart/AnimatedLine.d.ts +1 -1
  28. package/LineChart/AnimatedLine.js +9 -46
  29. package/LineChart/AppearingMask.d.ts +12 -0
  30. package/LineChart/AppearingMask.js +42 -0
  31. package/LineChart/LineChart.js +10 -0
  32. package/LineChart/formatter.js +5 -5
  33. package/PieChart/PieChart.js +10 -0
  34. package/ResponsiveChartContainer/ResizableContainer.d.ts +1 -1
  35. package/ResponsiveChartContainer/ResponsiveChartContainer.d.ts +10 -0
  36. package/ResponsiveChartContainer/ResponsiveChartContainer.js +10 -0
  37. package/ResponsiveChartContainer/useChartContainerDimensions.d.ts +1 -1
  38. package/ResponsiveChartContainer/useChartContainerDimensions.js +32 -8
  39. package/ResponsiveChartContainer/useResponsiveChartContainerProps.d.ts +1 -1
  40. package/ResponsiveChartContainer/useResponsiveChartContainerProps.js +3 -2
  41. package/ScatterChart/ScatterChart.js +10 -0
  42. package/SparkLineChart/SparkLineChart.d.ts +1 -1
  43. package/SparkLineChart/SparkLineChart.js +10 -0
  44. package/context/CartesianProvider/CartesianProvider.js +3 -3
  45. package/context/CartesianProvider/defaultizeAxis.d.ts +4 -4
  46. package/context/CartesianProvider/getAxisExtremum.d.ts +1 -1
  47. package/context/CartesianProvider/getAxisExtremum.js +5 -4
  48. package/context/CartesianProvider/index.d.ts +0 -5
  49. package/context/CartesianProvider/index.js +1 -6
  50. package/context/PluginProvider/ExtremumGetter.types.d.ts +1 -0
  51. package/context/PluginProvider/Plugin.types.d.ts +4 -0
  52. package/context/PluginProvider/PluginContext.js +3 -1
  53. package/context/PluginProvider/index.d.ts +2 -0
  54. package/context/PluginProvider/index.js +3 -1
  55. package/context/PluginProvider/mergePlugins.d.ts +14 -4
  56. package/context/PluginProvider/mergePlugins.js +11 -1
  57. package/context/PluginProvider/useRadiusExtremumGetter.d.ts +4 -0
  58. package/context/PluginProvider/useRadiusExtremumGetter.js +17 -0
  59. package/context/PluginProvider/useRotationExtremumGetter.d.ts +4 -0
  60. package/context/PluginProvider/useRotationExtremumGetter.js +17 -0
  61. package/context/PolarProvider/Polar.types.d.ts +42 -0
  62. package/context/PolarProvider/Polar.types.js +1 -0
  63. package/context/PolarProvider/PolarContext.d.ts +4 -0
  64. package/context/PolarProvider/PolarContext.js +13 -0
  65. package/context/PolarProvider/PolarProvider.d.ts +4 -0
  66. package/context/PolarProvider/PolarProvider.js +49 -0
  67. package/context/PolarProvider/getAxisExtremum.d.ts +4 -0
  68. package/context/PolarProvider/getAxisExtremum.js +20 -0
  69. package/context/PolarProvider/index.d.ts +0 -0
  70. package/context/PolarProvider/index.js +0 -0
  71. package/context/PolarProvider/usePolarContext.d.ts +2 -0
  72. package/context/PolarProvider/usePolarContext.js +10 -0
  73. package/context/ZAxisContextProvider.js +1 -1
  74. package/hooks/useReducedMotion.js +2 -2
  75. package/hooks/useSeries.d.ts +4 -4
  76. package/hooks/useSeries.js +4 -4
  77. package/index.js +1 -1
  78. package/internals/components/AxisSharedComponents.d.ts +1 -1
  79. package/internals/computeAxisValue.d.ts +38 -0
  80. package/{context/CartesianProvider/computeValue.js → internals/computeAxisValue.js} +28 -15
  81. package/internals/configInit.d.ts +1 -1
  82. package/internals/defaultizeColor.d.ts +8 -8
  83. package/internals/domUtils.js +1 -1
  84. package/internals/geometry.js +3 -5
  85. package/internals/getPercentageValue.js +1 -1
  86. package/internals/index.d.ts +1 -0
  87. package/internals/index.js +1 -0
  88. package/models/axis.d.ts +20 -0
  89. package/models/seriesType/config.d.ts +6 -2
  90. package/models/seriesType/line.d.ts +5 -0
  91. package/modern/BarChart/BarChart.js +10 -0
  92. package/modern/BarChart/formatter.js +5 -4
  93. package/modern/ChartContainer/useDefaultizeAxis.js +1 -1
  94. package/modern/ChartsAxis/ChartsAxis.js +4 -4
  95. package/modern/ChartsLegend/DefaultChartsLegend.js +1 -1
  96. package/modern/ChartsLegend/LegendPerItem.js +1 -1
  97. package/modern/ChartsLegend/PiecewiseColorLegend.js +1 -1
  98. package/modern/ChartsTooltip/index.js +4 -1
  99. package/modern/ChartsTooltip/useAxisTooltip.js +84 -0
  100. package/modern/ChartsTooltip/useItemTooltip.js +64 -0
  101. package/modern/LineChart/AnimatedArea.js +9 -45
  102. package/modern/LineChart/AnimatedLine.js +9 -46
  103. package/modern/LineChart/AppearingMask.js +42 -0
  104. package/modern/LineChart/LineChart.js +10 -0
  105. package/modern/LineChart/formatter.js +5 -5
  106. package/modern/PieChart/PieChart.js +10 -0
  107. package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js +10 -0
  108. package/modern/ResponsiveChartContainer/useChartContainerDimensions.js +32 -8
  109. package/modern/ResponsiveChartContainer/useResponsiveChartContainerProps.js +3 -2
  110. package/modern/ScatterChart/ScatterChart.js +10 -0
  111. package/modern/SparkLineChart/SparkLineChart.js +10 -0
  112. package/modern/context/CartesianProvider/CartesianProvider.js +3 -3
  113. package/modern/context/CartesianProvider/getAxisExtremum.js +5 -4
  114. package/modern/context/CartesianProvider/index.js +1 -6
  115. package/modern/context/PluginProvider/PluginContext.js +3 -1
  116. package/modern/context/PluginProvider/index.js +3 -1
  117. package/modern/context/PluginProvider/mergePlugins.js +11 -1
  118. package/modern/context/PluginProvider/useRadiusExtremumGetter.js +17 -0
  119. package/modern/context/PluginProvider/useRotationExtremumGetter.js +17 -0
  120. package/modern/context/PolarProvider/Polar.types.js +1 -0
  121. package/modern/context/PolarProvider/PolarContext.js +13 -0
  122. package/modern/context/PolarProvider/PolarProvider.js +49 -0
  123. package/modern/context/PolarProvider/getAxisExtremum.js +20 -0
  124. package/modern/context/PolarProvider/index.js +0 -0
  125. package/modern/context/PolarProvider/usePolarContext.js +10 -0
  126. package/modern/context/ZAxisContextProvider.js +1 -1
  127. package/modern/hooks/useReducedMotion.js +2 -2
  128. package/modern/hooks/useSeries.js +4 -4
  129. package/modern/index.js +1 -1
  130. package/modern/{context/CartesianProvider/computeValue.js → internals/computeAxisValue.js} +28 -15
  131. package/modern/internals/domUtils.js +1 -1
  132. package/modern/internals/geometry.js +3 -5
  133. package/modern/internals/getPercentageValue.js +1 -1
  134. package/modern/internals/index.js +1 -0
  135. package/node/BarChart/BarChart.js +10 -0
  136. package/node/BarChart/formatter.js +5 -4
  137. package/node/ChartContainer/useDefaultizeAxis.js +1 -1
  138. package/node/ChartsAxis/ChartsAxis.js +4 -4
  139. package/node/ChartsLegend/DefaultChartsLegend.js +1 -1
  140. package/node/ChartsLegend/LegendPerItem.js +1 -1
  141. package/node/ChartsLegend/PiecewiseColorLegend.js +1 -1
  142. package/node/ChartsTooltip/index.js +42 -1
  143. package/node/ChartsTooltip/useAxisTooltip.js +90 -0
  144. package/node/ChartsTooltip/useItemTooltip.js +71 -0
  145. package/node/LineChart/AnimatedArea.js +8 -44
  146. package/node/LineChart/AnimatedLine.js +8 -45
  147. package/node/LineChart/AppearingMask.js +48 -0
  148. package/node/LineChart/LineChart.js +10 -0
  149. package/node/LineChart/formatter.js +5 -5
  150. package/node/PieChart/PieChart.js +10 -0
  151. package/node/ResponsiveChartContainer/ResponsiveChartContainer.js +10 -0
  152. package/node/ResponsiveChartContainer/useChartContainerDimensions.js +32 -8
  153. package/node/ResponsiveChartContainer/useResponsiveChartContainerProps.js +3 -2
  154. package/node/ScatterChart/ScatterChart.js +10 -0
  155. package/node/SparkLineChart/SparkLineChart.js +10 -0
  156. package/node/context/CartesianProvider/CartesianProvider.js +3 -3
  157. package/node/context/CartesianProvider/getAxisExtremum.js +5 -4
  158. package/node/context/CartesianProvider/index.js +1 -13
  159. package/node/context/PluginProvider/PluginContext.js +3 -1
  160. package/node/context/PluginProvider/index.js +22 -0
  161. package/node/context/PluginProvider/mergePlugins.js +11 -1
  162. package/node/context/PluginProvider/useRadiusExtremumGetter.js +23 -0
  163. package/node/context/PluginProvider/useRotationExtremumGetter.js +23 -0
  164. package/node/context/PolarProvider/Polar.types.js +5 -0
  165. package/node/context/PolarProvider/PolarContext.js +20 -0
  166. package/node/context/PolarProvider/PolarProvider.js +54 -0
  167. package/node/context/PolarProvider/getAxisExtremum.js +27 -0
  168. package/node/context/PolarProvider/index.js +1 -0
  169. package/node/context/PolarProvider/usePolarContext.js +17 -0
  170. package/node/context/ZAxisContextProvider.js +1 -1
  171. package/node/hooks/useReducedMotion.js +2 -2
  172. package/node/hooks/useSeries.js +4 -4
  173. package/node/index.js +1 -1
  174. package/node/{context/CartesianProvider/computeValue.js → internals/computeAxisValue.js} +29 -16
  175. package/node/internals/domUtils.js +1 -1
  176. package/node/internals/geometry.js +3 -5
  177. package/node/internals/getPercentageValue.js +1 -1
  178. package/node/internals/index.js +12 -0
  179. package/package.json +4 -4
  180. package/context/CartesianProvider/computeValue.d.ts +0 -30
@@ -15,9 +15,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
15
15
  var _styles = require("@mui/material/styles");
16
16
  var _web = require("@react-spring/web");
17
17
  var _d3Color = require("@mui/x-charts-vendor/d3-color");
18
- var _cleanId = require("../internals/cleanId");
19
- var _hooks = require("../hooks");
20
18
  var _useStringInterpolator = require("../internals/useStringInterpolator");
19
+ var _AppearingMask = require("./AppearingMask");
21
20
  var _jsxRuntime = require("react/jsx-runtime");
22
21
  const _excluded = ["d", "skipAnimation", "ownerState"];
23
22
  const AreaElementPath = exports.AreaElementPath = (0, _styles.styled)(_web.animated.path, {
@@ -49,32 +48,7 @@ function AnimatedArea(props) {
49
48
  ownerState
50
49
  } = props,
51
50
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
52
- const {
53
- left,
54
- top,
55
- right,
56
- bottom,
57
- width,
58
- height
59
- } = (0, _hooks.useDrawingArea)();
60
- const chartId = (0, _hooks.useChartId)();
61
51
  const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
62
- const transitionAppear = (0, _web.useTransition)([1], {
63
- from: {
64
- animatedWidth: left
65
- },
66
- to: {
67
- animatedWidth: width + left + right
68
- },
69
- enter: {
70
- animatedWidth: width + left + right
71
- },
72
- leave: {
73
- animatedWidth: left
74
- },
75
- reset: false,
76
- immediate: skipAnimation
77
- });
78
52
  const transitionChange = (0, _web.useTransition)([stringInterpolator], {
79
53
  from: {
80
54
  value: 0
@@ -88,23 +62,13 @@ function AnimatedArea(props) {
88
62
  reset: false,
89
63
  immediate: skipAnimation
90
64
  });
91
- const clipId = (0, _cleanId.cleanId)(`${chartId}-${ownerState.id}-area-clip`);
92
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
93
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
94
- id: clipId,
95
- children: transitionAppear(style => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
96
- x: 0,
97
- y: 0,
98
- width: style.animatedWidth,
99
- height: top + height + bottom
100
- }))
101
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
102
- clipPath: `url(#${clipId})`,
103
- children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaElementPath, (0, _extends2.default)({}, other, {
104
- ownerState: ownerState,
105
- d: style.value.to(interpolator)
106
- })))
107
- })]
65
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppearingMask.AppearingMask, {
66
+ skipAnimation: skipAnimation,
67
+ id: `${ownerState.id}-area-clip`,
68
+ children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaElementPath, (0, _extends2.default)({}, other, {
69
+ ownerState: ownerState,
70
+ d: style.value.to(interpolator)
71
+ })))
108
72
  });
109
73
  }
110
74
  process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {
@@ -15,10 +15,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
15
15
  var _web = require("@react-spring/web");
16
16
  var _d3Color = require("@mui/x-charts-vendor/d3-color");
17
17
  var _styles = require("@mui/material/styles");
18
- var _cleanId = require("../internals/cleanId");
19
- var _useChartId = require("../hooks/useChartId");
20
- var _useDrawingArea = require("../hooks/useDrawingArea");
21
18
  var _useStringInterpolator = require("../internals/useStringInterpolator");
19
+ var _AppearingMask = require("./AppearingMask");
22
20
  var _jsxRuntime = require("react/jsx-runtime");
23
21
  const _excluded = ["d", "skipAnimation", "ownerState"];
24
22
  const LineElementPath = exports.LineElementPath = (0, _styles.styled)(_web.animated.path, {
@@ -52,32 +50,7 @@ function AnimatedLine(props) {
52
50
  ownerState
53
51
  } = props,
54
52
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
55
- const {
56
- left,
57
- top,
58
- bottom,
59
- width,
60
- height,
61
- right
62
- } = (0, _useDrawingArea.useDrawingArea)();
63
- const chartId = (0, _useChartId.useChartId)();
64
53
  const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
65
- const transitionAppear = (0, _web.useTransition)([1], {
66
- from: {
67
- animatedWidth: left
68
- },
69
- to: {
70
- animatedWidth: width + left + right
71
- },
72
- enter: {
73
- animatedWidth: width + left + right
74
- },
75
- leave: {
76
- animatedWidth: left
77
- },
78
- reset: false,
79
- immediate: skipAnimation
80
- });
81
54
  const transitionChange = (0, _web.useTransition)([stringInterpolator], {
82
55
  from: {
83
56
  value: 0
@@ -91,23 +64,13 @@ function AnimatedLine(props) {
91
64
  reset: false,
92
65
  immediate: skipAnimation
93
66
  });
94
- const clipId = (0, _cleanId.cleanId)(`${chartId}-${ownerState.id}-line-clip`);
95
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
96
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
97
- id: clipId,
98
- children: transitionAppear(style => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
99
- x: 0,
100
- y: 0,
101
- width: style.animatedWidth,
102
- height: top + height + bottom
103
- }))
104
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
105
- clipPath: `url(#${clipId})`,
106
- children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(LineElementPath, (0, _extends2.default)({}, other, {
107
- ownerState: ownerState,
108
- d: style.value.to(interpolator)
109
- })))
110
- })]
67
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppearingMask.AppearingMask, {
68
+ skipAnimation: skipAnimation,
69
+ id: `${ownerState.id}-line-clip`,
70
+ children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(LineElementPath, (0, _extends2.default)({}, other, {
71
+ ownerState: ownerState,
72
+ d: style.value.to(interpolator)
73
+ })))
111
74
  });
112
75
  }
113
76
  process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+ 'use client';
3
+
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.AppearingMask = AppearingMask;
9
+ var React = _interopRequireWildcard(require("react"));
10
+ var _web = require("@react-spring/web");
11
+ var _cleanId = require("../internals/cleanId");
12
+ var _hooks = require("../hooks");
13
+ var _jsxRuntime = require("react/jsx-runtime");
14
+ /**
15
+ * @ignore - internal component.
16
+ */
17
+ function AppearingMask(props) {
18
+ const drawingArea = (0, _hooks.useDrawingArea)();
19
+ const chartId = (0, _hooks.useChartId)();
20
+ const transitionAppear = (0, _web.useTransition)([drawingArea], {
21
+ from: v => ({
22
+ animatedWidth: v.left
23
+ }),
24
+ enter: v => ({
25
+ animatedWidth: v.width + v.left + v.right
26
+ }),
27
+ leave: v => ({
28
+ animatedWidth: v.width + v.left + v.right
29
+ }),
30
+ reset: false,
31
+ immediate: props.skipAnimation
32
+ });
33
+ const clipId = (0, _cleanId.cleanId)(`${chartId}-${props.id}`);
34
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
35
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
36
+ id: clipId,
37
+ children: transitionAppear(style => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
38
+ x: 0,
39
+ y: 0,
40
+ width: style.animatedWidth,
41
+ height: drawingArea.top + drawingArea.height + drawingArea.bottom
42
+ }))
43
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
44
+ clipPath: `url(#${clipId})`,
45
+ children: props.children
46
+ })]
47
+ });
48
+ }
@@ -207,6 +207,16 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
207
207
  * Callback fired when a mark element is clicked.
208
208
  */
209
209
  onMarkClick: _propTypes.default.func,
210
+ /**
211
+ * The chart will try to wait for the parent container to resolve its size
212
+ * before it renders for the first time.
213
+ *
214
+ * This can be useful in some scenarios where the chart appear to grow after
215
+ * the first render, like when used inside a grid.
216
+ *
217
+ * @default false
218
+ */
219
+ resolveSizeBeforeRender: _propTypes.default.bool,
210
220
  /**
211
221
  * Indicate which axis to display the right of the charts.
212
222
  * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
10
+ var _warning = require("@mui/x-internals/warning");
10
11
  var _stackSeries = require("../internals/stackSeries");
11
12
  var _defaultizeValueFormatter = require("../internals/defaultizeValueFormatter");
12
- let warnedOnce = false;
13
-
14
13
  // For now it's a copy past of bar charts formatter, but maybe will diverge later
15
14
  const formatter = (params, dataset) => {
16
15
  const {
@@ -61,9 +60,10 @@ const formatter = (params, dataset) => {
61
60
  data: dataKey ? dataset.map(data => {
62
61
  const value = data[dataKey];
63
62
  if (typeof value !== 'number') {
64
- if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
65
- warnedOnce = true;
66
- console.error([`MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
63
+ if (process.env.NODE_ENV !== 'production') {
64
+ if (value !== null) {
65
+ (0, _warning.warnOnce)([`MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
66
+ }
67
67
  }
68
68
  return null;
69
69
  }
@@ -247,6 +247,16 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
247
247
  * Callback fired when a pie arc is clicked.
248
248
  */
249
249
  onItemClick: _propTypes.default.func,
250
+ /**
251
+ * The chart will try to wait for the parent container to resolve its size
252
+ * before it renders for the first time.
253
+ *
254
+ * This can be useful in some scenarios where the chart appear to grow after
255
+ * the first render, like when used inside a grid.
256
+ *
257
+ * @default false
258
+ */
259
+ resolveSizeBeforeRender: _propTypes.default.bool,
250
260
  /**
251
261
  * Indicate which axis to display the right of the charts.
252
262
  * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -81,6 +81,16 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
81
81
  * If not provided, the container supports line, bar, scatter and pie charts.
82
82
  */
83
83
  plugins: _propTypes.default.arrayOf(_propTypes.default.object),
84
+ /**
85
+ * The chart will try to wait for the parent container to resolve its size
86
+ * before it renders for the first time.
87
+ *
88
+ * This can be useful in some scenarios where the chart appear to grow after
89
+ * the first render, like when used inside a grid.
90
+ *
91
+ * @default false
92
+ */
93
+ resolveSizeBeforeRender: _propTypes.default.bool,
84
94
  /**
85
95
  * The array of series to display.
86
96
  * Each type of series has its own specificity.
@@ -10,8 +10,12 @@ exports.useChartContainerDimensions = void 0;
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
  var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
12
12
  var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
13
- const useChartContainerDimensions = (inWidth, inHeight) => {
14
- const displayError = React.useRef(false);
13
+ const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender) => {
14
+ const stateRef = React.useRef({
15
+ displayError: false,
16
+ initialCompute: true,
17
+ computeRun: 0
18
+ });
15
19
  const rootRef = React.useRef(null);
16
20
  const [width, setWidth] = React.useState(0);
17
21
  const [height, setHeight] = React.useState(0);
@@ -20,7 +24,7 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
20
24
  const computeSize = React.useCallback(() => {
21
25
  const mainEl = rootRef?.current;
22
26
  if (!mainEl) {
23
- return;
27
+ return {};
24
28
  }
25
29
  const win = (0, _ownerWindow.default)(mainEl);
26
30
  const computedStyle = win.getComputedStyle(mainEl);
@@ -28,11 +32,31 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
28
32
  const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
29
33
  setWidth(newWidth);
30
34
  setHeight(newHeight);
35
+ return {
36
+ width: newWidth,
37
+ height: newHeight
38
+ };
31
39
  }, []);
32
40
  React.useEffect(() => {
33
41
  // Ensure the error detection occurs after the first rendering.
34
- displayError.current = true;
42
+ stateRef.current.displayError = true;
35
43
  }, []);
44
+
45
+ // This effect is used to compute the size of the container on the initial render.
46
+ // It is not bound to the raf loop to avoid an unwanted "resize" event.
47
+ // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
48
+ (0, _useEnhancedEffect.default)(() => {
49
+ // computeRun is used to avoid infinite loops.
50
+ if (!resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
51
+ return;
52
+ }
53
+ const computedSize = computeSize();
54
+ if (computedSize.width !== width || computedSize.height !== height) {
55
+ stateRef.current.computeRun += 1;
56
+ } else if (stateRef.current.initialCompute) {
57
+ stateRef.current.initialCompute = false;
58
+ }
59
+ }, [width, height, computeSize, resolveSizeBeforeRender]);
36
60
  (0, _useEnhancedEffect.default)(() => {
37
61
  if (inWidth !== undefined && inHeight !== undefined) {
38
62
  return () => {};
@@ -62,13 +86,13 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
62
86
  };
63
87
  }, [computeSize, inHeight, inWidth]);
64
88
  if (process.env.NODE_ENV !== 'production') {
65
- if (displayError.current && inWidth === undefined && width === 0) {
89
+ if (stateRef.current.displayError && inWidth === undefined && width === 0) {
66
90
  console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
67
- displayError.current = false;
91
+ stateRef.current.displayError = false;
68
92
  }
69
- if (displayError.current && inHeight === undefined && height === 0) {
93
+ if (stateRef.current.displayError && inHeight === undefined && height === 0) {
70
94
  console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
71
- displayError.current = false;
95
+ stateRef.current.displayError = false;
72
96
  }
73
97
  }
74
98
  return {
@@ -9,11 +9,12 @@ exports.useResponsiveChartContainerProps = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
11
  var _useChartContainerDimensions = require("./useChartContainerDimensions");
12
- const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
12
+ const _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
13
13
  const useResponsiveChartContainerProps = (props, ref) => {
14
14
  const {
15
15
  width,
16
16
  height,
17
+ resolveSizeBeforeRender,
17
18
  margin,
18
19
  children,
19
20
  series,
@@ -36,7 +37,7 @@ const useResponsiveChartContainerProps = (props, ref) => {
36
37
  containerRef,
37
38
  width: dWidth,
38
39
  height: dHeight
39
- } = (0, _useChartContainerDimensions.useChartContainerDimensions)(width, height);
40
+ } = (0, _useChartContainerDimensions.useChartContainerDimensions)(width, height, resolveSizeBeforeRender);
40
41
  const resizableChartContainerProps = (0, _extends2.default)({}, other, {
41
42
  ownerState: {
42
43
  width,
@@ -184,6 +184,16 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
184
184
  * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
185
185
  */
186
186
  onItemClick: _propTypes.default.func,
187
+ /**
188
+ * The chart will try to wait for the parent container to resolve its size
189
+ * before it renders for the first time.
190
+ *
191
+ * This can be useful in some scenarios where the chart appear to grow after
192
+ * the first render, like when used inside a grid.
193
+ *
194
+ * @default false
195
+ */
196
+ resolveSizeBeforeRender: _propTypes.default.bool,
187
197
  /**
188
198
  * Indicate which axis to display the right of the charts.
189
199
  * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -200,6 +200,16 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
200
200
  * @default 'line'
201
201
  */
202
202
  plotType: _propTypes.default.oneOf(['bar', 'line']),
203
+ /**
204
+ * The chart will try to wait for the parent container to resolve its size
205
+ * before it renders for the first time.
206
+ *
207
+ * This can be useful in some scenarios where the chart appear to grow after
208
+ * the first render, like when used inside a grid.
209
+ *
210
+ * @default false
211
+ */
212
+ resolveSizeBeforeRender: _propTypes.default.bool,
203
213
  /**
204
214
  * Set to `true` to highlight the value.
205
215
  * With line, it shows a point.
@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.CartesianProvider = CartesianProvider;
9
9
  var React = _interopRequireWildcard(require("react"));
10
+ var _computeAxisValue = require("../../internals/computeAxisValue");
10
11
  var _useDrawingArea = require("../../hooks/useDrawingArea");
11
12
  var _useSeries = require("../../hooks/useSeries");
12
13
  var _CartesianContext = require("./CartesianContext");
13
- var _computeValue = require("./computeValue");
14
14
  var _useXExtremumGetter = require("../PluginProvider/useXExtremumGetter");
15
15
  var _PluginProvider = require("../PluginProvider");
16
16
  var _jsxRuntime = require("react/jsx-runtime");
@@ -24,14 +24,14 @@ function CartesianProvider(props) {
24
24
  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
25
25
  const xExtremumGetters = (0, _useXExtremumGetter.useXExtremumGetter)();
26
26
  const yExtremumGetters = (0, _PluginProvider.useYExtremumGetter)();
27
- const xValues = React.useMemo(() => (0, _computeValue.computeValue)({
27
+ const xValues = React.useMemo(() => (0, _computeAxisValue.computeAxisValue)({
28
28
  drawingArea,
29
29
  formattedSeries,
30
30
  axis: xAxis,
31
31
  extremumGetters: xExtremumGetters,
32
32
  axisDirection: 'x'
33
33
  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
34
- const yValues = React.useMemo(() => (0, _computeValue.computeValue)({
34
+ const yValues = React.useMemo(() => (0, _computeAxisValue.computeAxisValue)({
35
35
  drawingArea,
36
36
  formattedSeries,
37
37
  axis: yAxis,
@@ -4,21 +4,22 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.getAxisExtremum = void 0;
7
- const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
7
+ const axisExtremumCallback = (acc, chartType, axis, getters, axisIndex, formattedSeries, getFilters) => {
8
8
  const getter = getters[chartType];
9
9
  const series = formattedSeries[chartType]?.series ?? {};
10
10
  const [minChartTypeData, maxChartTypeData] = getter?.({
11
11
  series,
12
12
  axis,
13
- isDefaultAxis,
13
+ axisIndex,
14
+ isDefaultAxis: axisIndex === 0,
14
15
  getFilters
15
16
  }) ?? [Infinity, -Infinity];
16
17
  const [minData, maxData] = acc;
17
18
  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
18
19
  };
19
- const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
20
+ const getAxisExtremum = (axis, getters, axisIndex, formattedSeries, getFilters) => {
20
21
  const charTypes = Object.keys(getters);
21
- const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries, getFilters), [Infinity, -Infinity]);
22
+ const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries, getFilters), [Infinity, -Infinity]);
22
23
  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
23
24
  return [Infinity, -Infinity];
24
25
  }
@@ -3,15 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- var _exportNames = {
7
- cartesianProviderUtils: true
8
- };
9
- exports.cartesianProviderUtils = void 0;
10
- var _computeValue = require("./computeValue");
11
6
  var _CartesianProvider = require("./CartesianProvider");
12
7
  Object.keys(_CartesianProvider).forEach(function (key) {
13
8
  if (key === "default" || key === "__esModule") return;
14
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
15
9
  if (key in exports && exports[key] === _CartesianProvider[key]) return;
16
10
  Object.defineProperty(exports, key, {
17
11
  enumerable: true,
@@ -23,7 +17,6 @@ Object.keys(_CartesianProvider).forEach(function (key) {
23
17
  var _CartesianContext = require("./CartesianContext");
24
18
  Object.keys(_CartesianContext).forEach(function (key) {
25
19
  if (key === "default" || key === "__esModule") return;
26
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
27
20
  if (key in exports && exports[key] === _CartesianContext[key]) return;
28
21
  Object.defineProperty(exports, key, {
29
22
  enumerable: true,
@@ -35,7 +28,6 @@ Object.keys(_CartesianContext).forEach(function (key) {
35
28
  var _useCartesianContext = require("./useCartesianContext");
36
29
  Object.keys(_useCartesianContext).forEach(function (key) {
37
30
  if (key === "default" || key === "__esModule") return;
38
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
39
31
  if (key in exports && exports[key] === _useCartesianContext[key]) return;
40
32
  Object.defineProperty(exports, key, {
41
33
  enumerable: true,
@@ -47,7 +39,6 @@ Object.keys(_useCartesianContext).forEach(function (key) {
47
39
  var _Cartesian = require("./Cartesian.types");
48
40
  Object.keys(_Cartesian).forEach(function (key) {
49
41
  if (key === "default" || key === "__esModule") return;
50
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
51
42
  if (key in exports && exports[key] === _Cartesian[key]) return;
52
43
  Object.defineProperty(exports, key, {
53
44
  enumerable: true,
@@ -55,7 +46,4 @@ Object.keys(_Cartesian).forEach(function (key) {
55
46
  return _Cartesian[key];
56
47
  }
57
48
  });
58
- });
59
- const cartesianProviderUtils = exports.cartesianProviderUtils = {
60
- computeValue: _computeValue.computeValue
61
- };
49
+ });
@@ -12,7 +12,9 @@ const PluginContext = exports.PluginContext = /*#__PURE__*/React.createContext({
12
12
  colorProcessors: {},
13
13
  seriesFormatters: {},
14
14
  xExtremumGetters: {},
15
- yExtremumGetters: {}
15
+ yExtremumGetters: {},
16
+ rotationExtremumGetters: {},
17
+ radiusExtremumGetters: {}
16
18
  }
17
19
  });
18
20
  if (process.env.NODE_ENV !== 'production') {
@@ -112,4 +112,26 @@ Object.keys(_useYExtremumGetter).forEach(function (key) {
112
112
  return _useYExtremumGetter[key];
113
113
  }
114
114
  });
115
+ });
116
+ var _useRadiusExtremumGetter = require("./useRadiusExtremumGetter");
117
+ Object.keys(_useRadiusExtremumGetter).forEach(function (key) {
118
+ if (key === "default" || key === "__esModule") return;
119
+ if (key in exports && exports[key] === _useRadiusExtremumGetter[key]) return;
120
+ Object.defineProperty(exports, key, {
121
+ enumerable: true,
122
+ get: function () {
123
+ return _useRadiusExtremumGetter[key];
124
+ }
125
+ });
126
+ });
127
+ var _useRotationExtremumGetter = require("./useRotationExtremumGetter");
128
+ Object.keys(_useRotationExtremumGetter).forEach(function (key) {
129
+ if (key === "default" || key === "__esModule") return;
130
+ if (key in exports && exports[key] === _useRotationExtremumGetter[key]) return;
131
+ Object.defineProperty(exports, key, {
132
+ enumerable: true,
133
+ get: function () {
134
+ return _useRotationExtremumGetter[key];
135
+ }
136
+ });
115
137
  });
@@ -16,6 +16,8 @@ function mergePlugins(plugins) {
16
16
  const colorProcessors = {};
17
17
  const xExtremumGetters = {};
18
18
  const yExtremumGetters = {};
19
+ const rotationExtremumGetters = {};
20
+ const radiusExtremumGetters = {};
19
21
  for (let i = 0; i < defaultizedPlugins.length; i += 1) {
20
22
  const plugin = defaultizedPlugins[i];
21
23
  const seriesType = plugin.seriesType;
@@ -27,11 +29,19 @@ function mergePlugins(plugins) {
27
29
  if (plugin.yExtremumGetter) {
28
30
  yExtremumGetters[seriesType] = plugin.yExtremumGetter;
29
31
  }
32
+ if (plugin.rotationExtremumGetter) {
33
+ rotationExtremumGetters[seriesType] = plugin.rotationExtremumGetter;
34
+ }
35
+ if (plugin.radiusExtremumGetter) {
36
+ radiusExtremumGetters[seriesType] = plugin.radiusExtremumGetter;
37
+ }
30
38
  }
31
39
  return {
32
40
  seriesFormatters,
33
41
  colorProcessors,
34
42
  xExtremumGetters,
35
- yExtremumGetters
43
+ yExtremumGetters,
44
+ rotationExtremumGetters,
45
+ radiusExtremumGetters
36
46
  };
37
47
  }
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ 'use client';
3
+
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.useRadiusExtremumGetter = useRadiusExtremumGetter;
9
+ var React = _interopRequireWildcard(require("react"));
10
+ var _PluginContext = require("./PluginContext");
11
+ function useRadiusExtremumGetter(seriesType) {
12
+ const {
13
+ isInitialized,
14
+ data
15
+ } = React.useContext(_PluginContext.PluginContext);
16
+ if (!isInitialized) {
17
+ throw new Error(['MUI X: Could not find the plugin context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
18
+ }
19
+ if (!seriesType) {
20
+ return data.radiusExtremumGetters;
21
+ }
22
+ return data.radiusExtremumGetters[seriesType];
23
+ }
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ 'use client';
3
+
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.useRotationExtremumGetter = useRotationExtremumGetter;
9
+ var React = _interopRequireWildcard(require("react"));
10
+ var _PluginContext = require("./PluginContext");
11
+ function useRotationExtremumGetter(seriesType) {
12
+ const {
13
+ isInitialized,
14
+ data
15
+ } = React.useContext(_PluginContext.PluginContext);
16
+ if (!isInitialized) {
17
+ throw new Error(['MUI X: Could not find the plugin context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
18
+ }
19
+ if (!seriesType) {
20
+ return data.rotationExtremumGetters;
21
+ }
22
+ return data.rotationExtremumGetters[seriesType];
23
+ }
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });