@mui/x-charts 7.0.0-alpha.8 → 7.0.0-beta.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 (103) hide show
  1. package/BarChart/BarChart.js +1 -19
  2. package/BarChart/formatter.js +1 -1
  3. package/CHANGELOG.md +508 -30
  4. package/ChartContainer/ChartContainer.d.ts +12 -0
  5. package/ChartContainer/ChartContainer.js +197 -0
  6. package/ChartContainer/index.d.ts +1 -11
  7. package/ChartContainer/index.js +9 -63
  8. package/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
  9. package/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  10. package/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
  11. package/ChartsTooltip/DefaultChartsItemTooltipContent.js +3 -15
  12. package/LineChart/LineChart.js +1 -23
  13. package/LineChart/formatter.js +6 -2
  14. package/PieChart/PieArcLabel.js +1 -1
  15. package/PieChart/PieChart.js +1 -46
  16. package/README.md +3 -3
  17. package/ResponsiveChartContainer/ResponsiveChartContainer.d.ts +16 -0
  18. package/ResponsiveChartContainer/ResponsiveChartContainer.js +250 -0
  19. package/ResponsiveChartContainer/index.d.ts +1 -15
  20. package/ResponsiveChartContainer/index.js +8 -113
  21. package/ScatterChart/Scatter.js +1 -20
  22. package/ScatterChart/ScatterChart.js +1 -20
  23. package/SparkLineChart/SparkLineChart.d.ts +2 -2
  24. package/SparkLineChart/SparkLineChart.js +2 -2
  25. package/esm/BarChart/BarChart.js +1 -19
  26. package/esm/BarChart/formatter.js +1 -1
  27. package/esm/ChartContainer/ChartContainer.js +189 -0
  28. package/esm/ChartContainer/index.js +1 -61
  29. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
  30. package/esm/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  31. package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
  32. package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js +4 -15
  33. package/esm/LineChart/LineChart.js +1 -23
  34. package/esm/LineChart/formatter.js +6 -2
  35. package/esm/PieChart/PieArcLabel.js +1 -1
  36. package/esm/PieChart/PieChart.js +1 -46
  37. package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js +245 -0
  38. package/esm/ResponsiveChartContainer/index.js +1 -115
  39. package/esm/ScatterChart/Scatter.js +1 -20
  40. package/esm/ScatterChart/ScatterChart.js +1 -20
  41. package/esm/SparkLineChart/SparkLineChart.js +2 -2
  42. package/esm/hooks/useAxisEvents.js +1 -3
  43. package/esm/internals/stackSeries.js +5 -3
  44. package/esm/models/index.js +1 -0
  45. package/esm/models/stacking.js +1 -0
  46. package/hooks/useAxisEvents.js +1 -3
  47. package/index.js +1 -1
  48. package/internals/defaultizeColor.d.ts +9 -9
  49. package/internals/stackSeries.d.ts +8 -3
  50. package/internals/stackSeries.js +4 -3
  51. package/legacy/BarChart/BarChart.js +1 -19
  52. package/legacy/BarChart/formatter.js +1 -1
  53. package/legacy/ChartContainer/ChartContainer.js +187 -0
  54. package/legacy/ChartContainer/index.js +1 -59
  55. package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
  56. package/legacy/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  57. package/legacy/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
  58. package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js +4 -15
  59. package/legacy/LineChart/LineChart.js +1 -23
  60. package/legacy/LineChart/formatter.js +7 -3
  61. package/legacy/PieChart/PieArcLabel.js +3 -1
  62. package/legacy/PieChart/PieChart.js +1 -46
  63. package/legacy/ResponsiveChartContainer/ResponsiveChartContainer.js +253 -0
  64. package/legacy/ResponsiveChartContainer/index.js +1 -123
  65. package/legacy/ScatterChart/Scatter.js +1 -20
  66. package/legacy/ScatterChart/ScatterChart.js +1 -20
  67. package/legacy/SparkLineChart/SparkLineChart.js +2 -2
  68. package/legacy/hooks/useAxisEvents.js +1 -3
  69. package/legacy/index.js +1 -1
  70. package/legacy/internals/stackSeries.js +5 -3
  71. package/legacy/models/index.js +1 -0
  72. package/legacy/models/stacking.js +1 -0
  73. package/models/index.d.ts +1 -0
  74. package/models/index.js +11 -0
  75. package/models/seriesType/bar.d.ts +8 -2
  76. package/models/seriesType/common.d.ts +3 -4
  77. package/models/seriesType/index.d.ts +0 -1
  78. package/models/seriesType/line.d.ts +7 -1
  79. package/models/stacking.d.ts +2 -0
  80. package/models/stacking.js +5 -0
  81. package/modern/BarChart/BarChart.js +1 -19
  82. package/modern/BarChart/formatter.js +1 -1
  83. package/modern/ChartContainer/ChartContainer.js +189 -0
  84. package/modern/ChartContainer/index.js +1 -61
  85. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
  86. package/modern/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  87. package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
  88. package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js +3 -15
  89. package/modern/LineChart/LineChart.js +1 -23
  90. package/modern/LineChart/formatter.js +6 -2
  91. package/modern/PieChart/PieArcLabel.js +1 -1
  92. package/modern/PieChart/PieChart.js +1 -46
  93. package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js +242 -0
  94. package/modern/ResponsiveChartContainer/index.js +1 -112
  95. package/modern/ScatterChart/Scatter.js +1 -20
  96. package/modern/ScatterChart/ScatterChart.js +1 -20
  97. package/modern/SparkLineChart/SparkLineChart.js +2 -2
  98. package/modern/hooks/useAxisEvents.js +1 -3
  99. package/modern/index.js +1 -1
  100. package/modern/internals/stackSeries.js +4 -3
  101. package/modern/models/index.js +1 -0
  102. package/modern/models/stacking.js +1 -0
  103. package/package.json +7 -7
@@ -0,0 +1,250 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ResponsiveChartContainer = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _propTypes = _interopRequireDefault(require("prop-types"));
12
+ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
13
+ var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
14
+ var _styles = require("@mui/material/styles");
15
+ var _ChartContainer = require("../ChartContainer");
16
+ var _jsxRuntime = require("react/jsx-runtime");
17
+ const _excluded = ["width", "height"];
18
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
19
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
20
+ const useChartDimensions = (inWidth, inHeight) => {
21
+ const rootRef = React.useRef(null);
22
+ const displayError = React.useRef(false);
23
+ const [width, setWidth] = React.useState(0);
24
+ const [height, setHeight] = React.useState(0);
25
+
26
+ // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
27
+ const computeSize = React.useCallback(() => {
28
+ const mainEl = rootRef?.current;
29
+ if (!mainEl) {
30
+ return;
31
+ }
32
+ const win = (0, _ownerWindow.default)(mainEl);
33
+ const computedStyle = win.getComputedStyle(mainEl);
34
+ const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
35
+ const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
36
+ setWidth(newWidth);
37
+ setHeight(newHeight);
38
+ }, []);
39
+ React.useEffect(() => {
40
+ // Ensure the error detection occurs after the first rendering.
41
+ displayError.current = true;
42
+ }, []);
43
+ (0, _useEnhancedEffect.default)(() => {
44
+ if (inWidth !== undefined && inHeight !== undefined) {
45
+ return () => {};
46
+ }
47
+ computeSize();
48
+ const elementToObserve = rootRef.current;
49
+ if (typeof ResizeObserver === 'undefined') {
50
+ return () => {};
51
+ }
52
+ let animationFrame;
53
+ const observer = new ResizeObserver(() => {
54
+ // See https://github.com/mui/mui-x/issues/8733
55
+ animationFrame = requestAnimationFrame(() => {
56
+ computeSize();
57
+ });
58
+ });
59
+ if (elementToObserve) {
60
+ observer.observe(elementToObserve);
61
+ }
62
+ return () => {
63
+ if (animationFrame) {
64
+ window.cancelAnimationFrame(animationFrame);
65
+ }
66
+ if (elementToObserve) {
67
+ observer.unobserve(elementToObserve);
68
+ }
69
+ };
70
+ }, [computeSize, inHeight, inWidth]);
71
+ if (process.env.NODE_ENV !== 'production') {
72
+ if (displayError.current && inWidth === undefined && width === 0) {
73
+ console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
74
+ displayError.current = false;
75
+ }
76
+ if (displayError.current && inHeight === undefined && height === 0) {
77
+ console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
78
+ displayError.current = false;
79
+ }
80
+ }
81
+ return [rootRef, inWidth ?? width, inHeight ?? height];
82
+ };
83
+ const ResizableContainer = (0, _styles.styled)('div', {
84
+ name: 'MuiResponsiveChart',
85
+ slot: 'Container'
86
+ })(({
87
+ ownerState
88
+ }) => ({
89
+ width: ownerState.width ?? '100%',
90
+ height: ownerState.height ?? '100%',
91
+ display: 'flex',
92
+ position: 'relative',
93
+ flexGrow: 1,
94
+ flexDirection: 'column',
95
+ alignItems: 'center',
96
+ justifyContent: 'center',
97
+ overflow: 'hidden',
98
+ '&>svg': {
99
+ width: '100%',
100
+ height: '100%'
101
+ }
102
+ }));
103
+ const ResponsiveChartContainer = exports.ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
104
+ const {
105
+ width: inWidth,
106
+ height: inHeight
107
+ } = props,
108
+ other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
109
+ const [containerRef, width, height] = useChartDimensions(inWidth, inHeight);
110
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, {
111
+ ref: containerRef,
112
+ ownerState: {
113
+ width: inWidth,
114
+ height: inHeight
115
+ },
116
+ children: width && height ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, other, {
117
+ width: width,
118
+ height: height,
119
+ ref: ref
120
+ })) : null
121
+ });
122
+ });
123
+ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
124
+ // ----------------------------- Warning --------------------------------
125
+ // | These PropTypes are generated from the TypeScript type definitions |
126
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
127
+ // ----------------------------------------------------------------------
128
+ children: _propTypes.default.node,
129
+ className: _propTypes.default.string,
130
+ /**
131
+ * Color palette used to colorize multiple series.
132
+ * @default blueberryTwilightPalette
133
+ */
134
+ colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
135
+ /**
136
+ * An array of objects that can be used to populate series and axes data using their `dataKey` property.
137
+ */
138
+ dataset: _propTypes.default.arrayOf(_propTypes.default.object),
139
+ desc: _propTypes.default.string,
140
+ /**
141
+ * If `true`, the charts will not listen to the mouse move event.
142
+ * It might break interactive features, but will improve performance.
143
+ * @default false
144
+ */
145
+ disableAxisListener: _propTypes.default.bool,
146
+ /**
147
+ * The height of the chart in px. If not defined, it takes the height of the parent element.
148
+ * @default undefined
149
+ */
150
+ height: _propTypes.default.number,
151
+ /**
152
+ * The margin between the SVG and the drawing area.
153
+ * It's used for leaving some space for extra information such as the x- and y-axis or legend.
154
+ * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
155
+ * @default object Depends on the charts type.
156
+ */
157
+ margin: _propTypes.default.shape({
158
+ bottom: _propTypes.default.number,
159
+ left: _propTypes.default.number,
160
+ right: _propTypes.default.number,
161
+ top: _propTypes.default.number
162
+ }),
163
+ /**
164
+ * The array of series to display.
165
+ * Each type of series has its own specificity.
166
+ * Please refer to the appropriate docs page to learn more about it.
167
+ */
168
+ series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
169
+ sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
170
+ title: _propTypes.default.string,
171
+ viewBox: _propTypes.default.shape({
172
+ height: _propTypes.default.number,
173
+ width: _propTypes.default.number,
174
+ x: _propTypes.default.number,
175
+ y: _propTypes.default.number
176
+ }),
177
+ /**
178
+ * The width of the chart in px. If not defined, it takes the width of the parent element.
179
+ * @default undefined
180
+ */
181
+ width: _propTypes.default.number,
182
+ /**
183
+ * The configuration of the x-axes.
184
+ * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
185
+ */
186
+ xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
187
+ axisId: _propTypes.default.string,
188
+ classes: _propTypes.default.object,
189
+ data: _propTypes.default.array,
190
+ dataKey: _propTypes.default.string,
191
+ disableLine: _propTypes.default.bool,
192
+ disableTicks: _propTypes.default.bool,
193
+ fill: _propTypes.default.string,
194
+ hideTooltip: _propTypes.default.bool,
195
+ id: _propTypes.default.string,
196
+ label: _propTypes.default.string,
197
+ labelFontSize: _propTypes.default.number,
198
+ labelStyle: _propTypes.default.object,
199
+ max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
200
+ min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
201
+ position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
202
+ scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
203
+ slotProps: _propTypes.default.object,
204
+ slots: _propTypes.default.object,
205
+ stroke: _propTypes.default.string,
206
+ tickFontSize: _propTypes.default.number,
207
+ tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
208
+ tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
209
+ tickLabelStyle: _propTypes.default.object,
210
+ tickMaxStep: _propTypes.default.number,
211
+ tickMinStep: _propTypes.default.number,
212
+ tickNumber: _propTypes.default.number,
213
+ tickSize: _propTypes.default.number,
214
+ valueFormatter: _propTypes.default.func
215
+ })),
216
+ /**
217
+ * The configuration of the y-axes.
218
+ * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
219
+ */
220
+ yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
221
+ axisId: _propTypes.default.string,
222
+ classes: _propTypes.default.object,
223
+ data: _propTypes.default.array,
224
+ dataKey: _propTypes.default.string,
225
+ disableLine: _propTypes.default.bool,
226
+ disableTicks: _propTypes.default.bool,
227
+ fill: _propTypes.default.string,
228
+ hideTooltip: _propTypes.default.bool,
229
+ id: _propTypes.default.string,
230
+ label: _propTypes.default.string,
231
+ labelFontSize: _propTypes.default.number,
232
+ labelStyle: _propTypes.default.object,
233
+ max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
234
+ min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
235
+ position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
236
+ scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
237
+ slotProps: _propTypes.default.object,
238
+ slots: _propTypes.default.object,
239
+ stroke: _propTypes.default.string,
240
+ tickFontSize: _propTypes.default.number,
241
+ tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
242
+ tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
243
+ tickLabelStyle: _propTypes.default.object,
244
+ tickMaxStep: _propTypes.default.number,
245
+ tickMinStep: _propTypes.default.number,
246
+ tickNumber: _propTypes.default.number,
247
+ tickSize: _propTypes.default.number,
248
+ valueFormatter: _propTypes.default.func
249
+ }))
250
+ } : void 0;
@@ -1,15 +1 @@
1
- import * as React from 'react';
2
- import { ChartContainerProps } from '../ChartContainer';
3
- export interface ResponsiveChartContainerProps extends Omit<ChartContainerProps, 'width' | 'height'> {
4
- /**
5
- * The width of the chart in px. If not defined, it takes the width of the parent element.
6
- * @default undefined
7
- */
8
- width?: number;
9
- /**
10
- * The height of the chart in px. If not defined, it takes the height of the parent element.
11
- * @default undefined
12
- */
13
- height?: number;
14
- }
15
- export declare const ResponsiveChartContainer: React.ForwardRefExoticComponent<ResponsiveChartContainerProps & React.RefAttributes<unknown>>;
1
+ export * from './ResponsiveChartContainer';
@@ -1,121 +1,16 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
- exports.ResponsiveChartContainer = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
10
- var React = _interopRequireWildcard(require("react"));
11
- var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
12
- var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
13
- var _styles = require("@mui/material/styles");
14
- var _ChartContainer = require("../ChartContainer");
15
- var _jsxRuntime = require("react/jsx-runtime");
16
- const _excluded = ["width", "height"];
17
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
18
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
19
- const useChartDimensions = (inWidth, inHeight) => {
20
- const rootRef = React.useRef(null);
21
- const displayError = React.useRef(false);
22
- const [width, setWidth] = React.useState(0);
23
- const [height, setHeight] = React.useState(0);
24
-
25
- // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
26
- const computeSize = React.useCallback(() => {
27
- const mainEl = rootRef?.current;
28
- if (!mainEl) {
29
- return;
30
- }
31
- const win = (0, _ownerWindow.default)(mainEl);
32
- const computedStyle = win.getComputedStyle(mainEl);
33
- const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
34
- const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
35
- setWidth(newWidth);
36
- setHeight(newHeight);
37
- }, []);
38
- React.useEffect(() => {
39
- // Ensure the error detection occurs after the first rendering.
40
- displayError.current = true;
41
- }, []);
42
- (0, _useEnhancedEffect.default)(() => {
43
- if (inWidth !== undefined && inHeight !== undefined) {
44
- return () => {};
45
- }
46
- computeSize();
47
- const elementToObserve = rootRef.current;
48
- if (typeof ResizeObserver === 'undefined') {
49
- return () => {};
50
- }
51
- let animationFrame;
52
- const observer = new ResizeObserver(() => {
53
- // See https://github.com/mui/mui-x/issues/8733
54
- animationFrame = requestAnimationFrame(() => {
55
- computeSize();
56
- });
57
- });
58
- if (elementToObserve) {
59
- observer.observe(elementToObserve);
60
- }
61
- return () => {
62
- if (animationFrame) {
63
- window.cancelAnimationFrame(animationFrame);
64
- }
65
- if (elementToObserve) {
66
- observer.unobserve(elementToObserve);
67
- }
68
- };
69
- }, [computeSize, inHeight, inWidth]);
70
- if (process.env.NODE_ENV !== 'production') {
71
- if (displayError.current && inWidth === undefined && width === 0) {
72
- console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
73
- displayError.current = false;
74
- }
75
- if (displayError.current && inHeight === undefined && height === 0) {
76
- console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
77
- displayError.current = false;
6
+ var _ResponsiveChartContainer = require("./ResponsiveChartContainer");
7
+ Object.keys(_ResponsiveChartContainer).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _ResponsiveChartContainer[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _ResponsiveChartContainer[key];
78
14
  }
79
- }
80
- return [rootRef, inWidth ?? width, inHeight ?? height];
81
- };
82
- const ResizableContainer = (0, _styles.styled)('div', {
83
- name: 'MuiResponsiveChart',
84
- slot: 'Container'
85
- })(({
86
- ownerState
87
- }) => ({
88
- width: ownerState.width ?? '100%',
89
- height: ownerState.height ?? '100%',
90
- display: 'flex',
91
- position: 'relative',
92
- flexGrow: 1,
93
- flexDirection: 'column',
94
- alignItems: 'center',
95
- justifyContent: 'center',
96
- overflow: 'hidden',
97
- '&>svg': {
98
- width: '100%',
99
- height: '100%'
100
- }
101
- }));
102
- const ResponsiveChartContainer = exports.ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
103
- const {
104
- width: inWidth,
105
- height: inHeight
106
- } = props,
107
- other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
108
- const [containerRef, width, height] = useChartDimensions(inWidth, inHeight);
109
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, {
110
- ref: containerRef,
111
- ownerState: {
112
- width: inWidth,
113
- height: inHeight
114
- },
115
- children: width && height ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, other, {
116
- width: width,
117
- height: height,
118
- ref: ref
119
- })) : null
120
15
  });
121
16
  });
@@ -94,26 +94,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
94
94
  // ----------------------------------------------------------------------
95
95
  color: _propTypes.default.string.isRequired,
96
96
  markerSize: _propTypes.default.number.isRequired,
97
- series: _propTypes.default.shape({
98
- color: _propTypes.default.string.isRequired,
99
- data: _propTypes.default.arrayOf(_propTypes.default.shape({
100
- id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
101
- x: _propTypes.default.number.isRequired,
102
- y: _propTypes.default.number.isRequired
103
- })).isRequired,
104
- disableHover: _propTypes.default.bool,
105
- highlightScope: _propTypes.default.shape({
106
- faded: _propTypes.default.oneOf(['global', 'none', 'series']),
107
- highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
108
- }),
109
- id: _propTypes.default.string.isRequired,
110
- label: _propTypes.default.string,
111
- markerSize: _propTypes.default.number,
112
- type: _propTypes.default.oneOf(['scatter']).isRequired,
113
- valueFormatter: _propTypes.default.func.isRequired,
114
- xAxisKey: _propTypes.default.string,
115
- yAxisKey: _propTypes.default.string
116
- }).isRequired,
97
+ series: _propTypes.default.object.isRequired,
117
98
  xScale: _propTypes.default.func.isRequired,
118
99
  yScale: _propTypes.default.func.isRequired
119
100
  } : void 0;
@@ -230,26 +230,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
230
230
  tickNumber: _propTypes.default.number,
231
231
  tickSize: _propTypes.default.number
232
232
  }), _propTypes.default.string]),
233
- series: _propTypes.default.arrayOf(_propTypes.default.shape({
234
- color: _propTypes.default.string,
235
- data: _propTypes.default.arrayOf(_propTypes.default.shape({
236
- id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
237
- x: _propTypes.default.number.isRequired,
238
- y: _propTypes.default.number.isRequired
239
- })).isRequired,
240
- disableHover: _propTypes.default.bool,
241
- highlightScope: _propTypes.default.shape({
242
- faded: _propTypes.default.oneOf(['global', 'none', 'series']),
243
- highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
244
- }),
245
- id: _propTypes.default.string,
246
- label: _propTypes.default.string,
247
- markerSize: _propTypes.default.number,
248
- type: _propTypes.default.oneOf(['scatter']),
249
- valueFormatter: _propTypes.default.func,
250
- xAxisKey: _propTypes.default.string,
251
- yAxisKey: _propTypes.default.string
252
- })).isRequired,
233
+ series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
253
234
  /**
254
235
  * The props used for each component slot.
255
236
  * @default {}
@@ -36,9 +36,9 @@ export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps,
36
36
  * Formatter used by the tooltip.
37
37
  * @param {number} value The value to format.
38
38
  * @returns {string} the formatted value.
39
- * @default (v: number) => v.toString()
39
+ * @default (v: number | null) => (v === null ? '' : v.toString())
40
40
  */
41
- valueFormatter?: (value: number) => string;
41
+ valueFormatter?: (value: number | null) => string;
42
42
  /**
43
43
  * Set to `true` to enable the tooltip in the sparkline.
44
44
  * @default false
@@ -50,7 +50,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
50
50
  slotProps,
51
51
  data,
52
52
  plotType = 'line',
53
- valueFormatter = v => v.toString(),
53
+ valueFormatter = v => v === null ? '' : v.toString(),
54
54
  area,
55
55
  curve = 'linear'
56
56
  } = props;
@@ -213,7 +213,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
213
213
  * Formatter used by the tooltip.
214
214
  * @param {number} value The value to format.
215
215
  * @returns {string} the formatted value.
216
- * @default (v: number) => v.toString()
216
+ * @default (v: number | null) => (v === null ? '' : v.toString())
217
217
  */
218
218
  valueFormatter: _propTypes.default.func,
219
219
  viewBox: _propTypes.default.shape({
@@ -256,25 +256,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
256
256
  tickNumber: PropTypes.number,
257
257
  tickSize: PropTypes.number
258
258
  }), PropTypes.string]),
259
- series: PropTypes.arrayOf(PropTypes.shape({
260
- color: PropTypes.string,
261
- data: PropTypes.arrayOf(PropTypes.number),
262
- dataKey: PropTypes.string,
263
- highlightScope: PropTypes.shape({
264
- faded: PropTypes.oneOf(['global', 'none', 'series']),
265
- highlighted: PropTypes.oneOf(['item', 'none', 'series'])
266
- }),
267
- id: PropTypes.string,
268
- label: PropTypes.string,
269
- layout: PropTypes.oneOf(['horizontal', 'vertical']),
270
- stack: PropTypes.string,
271
- stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
272
- stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
273
- type: PropTypes.oneOf(['bar']),
274
- valueFormatter: PropTypes.func,
275
- xAxisKey: PropTypes.string,
276
- yAxisKey: PropTypes.string
277
- })).isRequired,
259
+ series: PropTypes.arrayOf(PropTypes.object).isRequired,
278
260
  /**
279
261
  * If `true`, animations are skiped.
280
262
  * @default false
@@ -69,7 +69,7 @@ const formatter = (params, dataset) => {
69
69
  return {
70
70
  seriesOrder,
71
71
  stackingGroups,
72
- series: defaultizeValueFormatter(completedSeries, v => v == null ? void 0 : v.toLocaleString())
72
+ series: defaultizeValueFormatter(completedSeries, v => v === null ? '' : v.toLocaleString())
73
73
  };
74
74
  };
75
75
  export default formatter;