@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.
- package/BarChart/BarChart.js +1 -19
- package/BarChart/formatter.js +1 -1
- package/CHANGELOG.md +508 -30
- package/ChartContainer/ChartContainer.d.ts +12 -0
- package/ChartContainer/ChartContainer.js +197 -0
- package/ChartContainer/index.d.ts +1 -11
- package/ChartContainer/index.js +9 -63
- package/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
- package/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
- package/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
- package/ChartsTooltip/DefaultChartsItemTooltipContent.js +3 -15
- package/LineChart/LineChart.js +1 -23
- package/LineChart/formatter.js +6 -2
- package/PieChart/PieArcLabel.js +1 -1
- package/PieChart/PieChart.js +1 -46
- package/README.md +3 -3
- package/ResponsiveChartContainer/ResponsiveChartContainer.d.ts +16 -0
- package/ResponsiveChartContainer/ResponsiveChartContainer.js +250 -0
- package/ResponsiveChartContainer/index.d.ts +1 -15
- package/ResponsiveChartContainer/index.js +8 -113
- package/ScatterChart/Scatter.js +1 -20
- package/ScatterChart/ScatterChart.js +1 -20
- package/SparkLineChart/SparkLineChart.d.ts +2 -2
- package/SparkLineChart/SparkLineChart.js +2 -2
- package/esm/BarChart/BarChart.js +1 -19
- package/esm/BarChart/formatter.js +1 -1
- package/esm/ChartContainer/ChartContainer.js +189 -0
- package/esm/ChartContainer/index.js +1 -61
- package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
- package/esm/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
- package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
- package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js +4 -15
- package/esm/LineChart/LineChart.js +1 -23
- package/esm/LineChart/formatter.js +6 -2
- package/esm/PieChart/PieArcLabel.js +1 -1
- package/esm/PieChart/PieChart.js +1 -46
- package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js +245 -0
- package/esm/ResponsiveChartContainer/index.js +1 -115
- package/esm/ScatterChart/Scatter.js +1 -20
- package/esm/ScatterChart/ScatterChart.js +1 -20
- package/esm/SparkLineChart/SparkLineChart.js +2 -2
- package/esm/hooks/useAxisEvents.js +1 -3
- package/esm/internals/stackSeries.js +5 -3
- package/esm/models/index.js +1 -0
- package/esm/models/stacking.js +1 -0
- package/hooks/useAxisEvents.js +1 -3
- package/index.js +1 -1
- package/internals/defaultizeColor.d.ts +9 -9
- package/internals/stackSeries.d.ts +8 -3
- package/internals/stackSeries.js +4 -3
- package/legacy/BarChart/BarChart.js +1 -19
- package/legacy/BarChart/formatter.js +1 -1
- package/legacy/ChartContainer/ChartContainer.js +187 -0
- package/legacy/ChartContainer/index.js +1 -59
- package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
- package/legacy/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
- package/legacy/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
- package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js +4 -15
- package/legacy/LineChart/LineChart.js +1 -23
- package/legacy/LineChart/formatter.js +7 -3
- package/legacy/PieChart/PieArcLabel.js +3 -1
- package/legacy/PieChart/PieChart.js +1 -46
- package/legacy/ResponsiveChartContainer/ResponsiveChartContainer.js +253 -0
- package/legacy/ResponsiveChartContainer/index.js +1 -123
- package/legacy/ScatterChart/Scatter.js +1 -20
- package/legacy/ScatterChart/ScatterChart.js +1 -20
- package/legacy/SparkLineChart/SparkLineChart.js +2 -2
- package/legacy/hooks/useAxisEvents.js +1 -3
- package/legacy/index.js +1 -1
- package/legacy/internals/stackSeries.js +5 -3
- package/legacy/models/index.js +1 -0
- package/legacy/models/stacking.js +1 -0
- package/models/index.d.ts +1 -0
- package/models/index.js +11 -0
- package/models/seriesType/bar.d.ts +8 -2
- package/models/seriesType/common.d.ts +3 -4
- package/models/seriesType/index.d.ts +0 -1
- package/models/seriesType/line.d.ts +7 -1
- package/models/stacking.d.ts +2 -0
- package/models/stacking.js +5 -0
- package/modern/BarChart/BarChart.js +1 -19
- package/modern/BarChart/formatter.js +1 -1
- package/modern/ChartContainer/ChartContainer.js +189 -0
- package/modern/ChartContainer/index.js +1 -61
- package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
- package/modern/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
- package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
- package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js +3 -15
- package/modern/LineChart/LineChart.js +1 -23
- package/modern/LineChart/formatter.js +6 -2
- package/modern/PieChart/PieArcLabel.js +1 -1
- package/modern/PieChart/PieChart.js +1 -46
- package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js +242 -0
- package/modern/ResponsiveChartContainer/index.js +1 -112
- package/modern/ScatterChart/Scatter.js +1 -20
- package/modern/ScatterChart/ScatterChart.js +1 -20
- package/modern/SparkLineChart/SparkLineChart.js +2 -2
- package/modern/hooks/useAxisEvents.js +1 -3
- package/modern/index.js +1 -1
- package/modern/internals/stackSeries.js +4 -3
- package/modern/models/index.js +1 -0
- package/modern/models/stacking.js +1 -0
- 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
|
-
|
|
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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
});
|
package/ScatterChart/Scatter.js
CHANGED
|
@@ -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.
|
|
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.
|
|
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({
|
package/esm/BarChart/BarChart.js
CHANGED
|
@@ -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.
|
|
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
|
|
72
|
+
series: defaultizeValueFormatter(completedSeries, v => v === null ? '' : v.toLocaleString())
|
|
73
73
|
};
|
|
74
74
|
};
|
|
75
75
|
export default formatter;
|