@mui/x-charts 7.0.0-alpha.9 → 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 (62) hide show
  1. package/BarChart/BarChart.js +1 -19
  2. package/CHANGELOG.md +139 -38
  3. package/ChartContainer/ChartContainer.d.ts +12 -0
  4. package/ChartContainer/ChartContainer.js +197 -0
  5. package/ChartContainer/index.d.ts +1 -11
  6. package/ChartContainer/index.js +9 -63
  7. package/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
  8. package/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  9. package/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
  10. package/ChartsTooltip/DefaultChartsItemTooltipContent.js +1 -11
  11. package/LineChart/LineChart.js +1 -23
  12. package/PieChart/PieChart.js +1 -46
  13. package/README.md +2 -2
  14. package/ResponsiveChartContainer/ResponsiveChartContainer.d.ts +16 -0
  15. package/ResponsiveChartContainer/ResponsiveChartContainer.js +250 -0
  16. package/ResponsiveChartContainer/index.d.ts +1 -15
  17. package/ResponsiveChartContainer/index.js +8 -113
  18. package/ScatterChart/Scatter.js +1 -20
  19. package/ScatterChart/ScatterChart.js +1 -20
  20. package/esm/BarChart/BarChart.js +1 -19
  21. package/esm/ChartContainer/ChartContainer.js +189 -0
  22. package/esm/ChartContainer/index.js +1 -61
  23. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
  24. package/esm/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  25. package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
  26. package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js +1 -11
  27. package/esm/LineChart/LineChart.js +1 -23
  28. package/esm/PieChart/PieChart.js +1 -46
  29. package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js +245 -0
  30. package/esm/ResponsiveChartContainer/index.js +1 -115
  31. package/esm/ScatterChart/Scatter.js +1 -20
  32. package/esm/ScatterChart/ScatterChart.js +1 -20
  33. package/index.js +1 -1
  34. package/legacy/BarChart/BarChart.js +1 -19
  35. package/legacy/ChartContainer/ChartContainer.js +187 -0
  36. package/legacy/ChartContainer/index.js +1 -59
  37. package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
  38. package/legacy/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  39. package/legacy/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
  40. package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js +1 -11
  41. package/legacy/LineChart/LineChart.js +1 -23
  42. package/legacy/PieChart/PieChart.js +1 -46
  43. package/legacy/ResponsiveChartContainer/ResponsiveChartContainer.js +253 -0
  44. package/legacy/ResponsiveChartContainer/index.js +1 -123
  45. package/legacy/ScatterChart/Scatter.js +1 -20
  46. package/legacy/ScatterChart/ScatterChart.js +1 -20
  47. package/legacy/index.js +1 -1
  48. package/modern/BarChart/BarChart.js +1 -19
  49. package/modern/ChartContainer/ChartContainer.js +189 -0
  50. package/modern/ChartContainer/index.js +1 -61
  51. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +2 -54
  52. package/modern/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  53. package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js +2 -54
  54. package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js +1 -11
  55. package/modern/LineChart/LineChart.js +1 -23
  56. package/modern/PieChart/PieChart.js +1 -46
  57. package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js +242 -0
  58. package/modern/ResponsiveChartContainer/index.js +1 -112
  59. package/modern/ScatterChart/Scatter.js +1 -20
  60. package/modern/ScatterChart/ScatterChart.js +1 -20
  61. package/modern/index.js +1 -1
  62. package/package.json +4 -4
@@ -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 {}
@@ -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
@@ -0,0 +1,189 @@
1
+ import * as React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import useForkRef from '@mui/utils/useForkRef';
4
+ import { DrawingProvider } from '../context/DrawingProvider';
5
+ import { SeriesContextProvider } from '../context/SeriesContextProvider';
6
+ import { InteractionProvider } from '../context/InteractionProvider';
7
+ import { useReducedMotion } from '../hooks/useReducedMotion';
8
+ import { ChartsSurface } from '../ChartsSurface';
9
+ import { CartesianContextProvider } from '../context/CartesianContextProvider';
10
+ import { HighlightProvider } from '../context/HighlightProvider';
11
+ import { jsx as _jsx } from "react/jsx-runtime";
12
+ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
13
+ const {
14
+ width,
15
+ height,
16
+ series,
17
+ margin,
18
+ xAxis,
19
+ yAxis,
20
+ colors,
21
+ dataset,
22
+ sx,
23
+ title,
24
+ desc,
25
+ disableAxisListener,
26
+ children
27
+ } = props;
28
+ const svgRef = React.useRef(null);
29
+ const handleRef = useForkRef(ref, svgRef);
30
+ useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
31
+
32
+ return /*#__PURE__*/_jsx(DrawingProvider, {
33
+ width: width,
34
+ height: height,
35
+ margin: margin,
36
+ svgRef: svgRef,
37
+ children: /*#__PURE__*/_jsx(SeriesContextProvider, {
38
+ series: series,
39
+ colors: colors,
40
+ dataset: dataset,
41
+ children: /*#__PURE__*/_jsx(CartesianContextProvider, {
42
+ xAxis: xAxis,
43
+ yAxis: yAxis,
44
+ dataset: dataset,
45
+ children: /*#__PURE__*/_jsx(InteractionProvider, {
46
+ children: /*#__PURE__*/_jsx(HighlightProvider, {
47
+ children: /*#__PURE__*/_jsx(ChartsSurface, {
48
+ width: width,
49
+ height: height,
50
+ ref: handleRef,
51
+ sx: sx,
52
+ title: title,
53
+ desc: desc,
54
+ disableAxisListener: disableAxisListener,
55
+ children: children
56
+ })
57
+ })
58
+ })
59
+ })
60
+ })
61
+ });
62
+ });
63
+ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
64
+ // ----------------------------- Warning --------------------------------
65
+ // | These PropTypes are generated from the TypeScript type definitions |
66
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
67
+ // ----------------------------------------------------------------------
68
+ children: PropTypes.node,
69
+ className: PropTypes.string,
70
+ /**
71
+ * Color palette used to colorize multiple series.
72
+ * @default blueberryTwilightPalette
73
+ */
74
+ colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
75
+ /**
76
+ * An array of objects that can be used to populate series and axes data using their `dataKey` property.
77
+ */
78
+ dataset: PropTypes.arrayOf(PropTypes.object),
79
+ desc: PropTypes.string,
80
+ /**
81
+ * If `true`, the charts will not listen to the mouse move event.
82
+ * It might break interactive features, but will improve performance.
83
+ * @default false
84
+ */
85
+ disableAxisListener: PropTypes.bool,
86
+ /**
87
+ * The height of the chart in px.
88
+ */
89
+ height: PropTypes.number.isRequired,
90
+ /**
91
+ * The margin between the SVG and the drawing area.
92
+ * It's used for leaving some space for extra information such as the x- and y-axis or legend.
93
+ * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
94
+ * @default object Depends on the charts type.
95
+ */
96
+ margin: PropTypes.shape({
97
+ bottom: PropTypes.number,
98
+ left: PropTypes.number,
99
+ right: PropTypes.number,
100
+ top: PropTypes.number
101
+ }),
102
+ /**
103
+ * The array of series to display.
104
+ * Each type of series has its own specificity.
105
+ * Please refer to the appropriate docs page to learn more about it.
106
+ */
107
+ series: PropTypes.arrayOf(PropTypes.object).isRequired,
108
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
109
+ title: PropTypes.string,
110
+ viewBox: PropTypes.shape({
111
+ height: PropTypes.number,
112
+ width: PropTypes.number,
113
+ x: PropTypes.number,
114
+ y: PropTypes.number
115
+ }),
116
+ /**
117
+ * The width of the chart in px.
118
+ */
119
+ width: PropTypes.number.isRequired,
120
+ /**
121
+ * The configuration of the x-axes.
122
+ * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
123
+ */
124
+ xAxis: PropTypes.arrayOf(PropTypes.shape({
125
+ axisId: PropTypes.string,
126
+ classes: PropTypes.object,
127
+ data: PropTypes.array,
128
+ dataKey: PropTypes.string,
129
+ disableLine: PropTypes.bool,
130
+ disableTicks: PropTypes.bool,
131
+ fill: PropTypes.string,
132
+ hideTooltip: PropTypes.bool,
133
+ id: PropTypes.string,
134
+ label: PropTypes.string,
135
+ labelFontSize: PropTypes.number,
136
+ labelStyle: PropTypes.object,
137
+ max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
138
+ min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
139
+ position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
140
+ scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
141
+ slotProps: PropTypes.object,
142
+ slots: PropTypes.object,
143
+ stroke: PropTypes.string,
144
+ tickFontSize: PropTypes.number,
145
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
146
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
147
+ tickLabelStyle: PropTypes.object,
148
+ tickMaxStep: PropTypes.number,
149
+ tickMinStep: PropTypes.number,
150
+ tickNumber: PropTypes.number,
151
+ tickSize: PropTypes.number,
152
+ valueFormatter: PropTypes.func
153
+ })),
154
+ /**
155
+ * The configuration of the y-axes.
156
+ * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
157
+ */
158
+ yAxis: PropTypes.arrayOf(PropTypes.shape({
159
+ axisId: PropTypes.string,
160
+ classes: PropTypes.object,
161
+ data: PropTypes.array,
162
+ dataKey: PropTypes.string,
163
+ disableLine: PropTypes.bool,
164
+ disableTicks: PropTypes.bool,
165
+ fill: PropTypes.string,
166
+ hideTooltip: PropTypes.bool,
167
+ id: PropTypes.string,
168
+ label: PropTypes.string,
169
+ labelFontSize: PropTypes.number,
170
+ labelStyle: PropTypes.object,
171
+ max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
172
+ min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
173
+ position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
174
+ scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
175
+ slotProps: PropTypes.object,
176
+ slots: PropTypes.object,
177
+ stroke: PropTypes.string,
178
+ tickFontSize: PropTypes.number,
179
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
180
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
181
+ tickLabelStyle: PropTypes.object,
182
+ tickMaxStep: PropTypes.number,
183
+ tickMinStep: PropTypes.number,
184
+ tickNumber: PropTypes.number,
185
+ tickSize: PropTypes.number,
186
+ valueFormatter: PropTypes.func
187
+ }))
188
+ } : void 0;
189
+ export { ChartContainer };
@@ -1,61 +1 @@
1
- import * as React from 'react';
2
- import useForkRef from '@mui/utils/useForkRef';
3
- import { DrawingProvider } from '../context/DrawingProvider';
4
- import { SeriesContextProvider } from '../context/SeriesContextProvider';
5
- import { InteractionProvider } from '../context/InteractionProvider';
6
- import { useReducedMotion } from '../hooks/useReducedMotion';
7
- import { ChartsSurface } from '../ChartsSurface';
8
- import { CartesianContextProvider } from '../context/CartesianContextProvider';
9
- import { HighlightProvider } from '../context/HighlightProvider';
10
- import { jsx as _jsx } from "react/jsx-runtime";
11
- export const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
12
- const {
13
- width,
14
- height,
15
- series,
16
- margin,
17
- xAxis,
18
- yAxis,
19
- colors,
20
- dataset,
21
- sx,
22
- title,
23
- desc,
24
- disableAxisListener,
25
- children
26
- } = props;
27
- const svgRef = React.useRef(null);
28
- const handleRef = useForkRef(ref, svgRef);
29
- useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
30
-
31
- return /*#__PURE__*/_jsx(DrawingProvider, {
32
- width: width,
33
- height: height,
34
- margin: margin,
35
- svgRef: svgRef,
36
- children: /*#__PURE__*/_jsx(SeriesContextProvider, {
37
- series: series,
38
- colors: colors,
39
- dataset: dataset,
40
- children: /*#__PURE__*/_jsx(CartesianContextProvider, {
41
- xAxis: xAxis,
42
- yAxis: yAxis,
43
- dataset: dataset,
44
- children: /*#__PURE__*/_jsx(InteractionProvider, {
45
- children: /*#__PURE__*/_jsx(HighlightProvider, {
46
- children: /*#__PURE__*/_jsx(ChartsSurface, {
47
- width: width,
48
- height: height,
49
- ref: handleRef,
50
- sx: sx,
51
- title: title,
52
- desc: desc,
53
- disableAxisListener: disableAxisListener,
54
- children: children
55
- })
56
- })
57
- })
58
- })
59
- })
60
- });
61
- });
1
+ export * from './ChartContainer';
@@ -76,37 +76,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
76
76
  classes: PropTypes.object.isRequired,
77
77
  content: PropTypes.elementType,
78
78
  contentProps: PropTypes.shape({
79
- axis: PropTypes.shape({
80
- axisId: PropTypes.string,
81
- classes: PropTypes.object,
82
- data: PropTypes.array,
83
- dataKey: PropTypes.string,
84
- disableLine: PropTypes.bool,
85
- disableTicks: PropTypes.bool,
86
- fill: PropTypes.string,
87
- hideTooltip: PropTypes.bool,
88
- id: PropTypes.string.isRequired,
89
- label: PropTypes.string,
90
- labelFontSize: PropTypes.number,
91
- labelStyle: PropTypes.object,
92
- max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
93
- min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
94
- position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
95
- scale: PropTypes.func.isRequired,
96
- scaleType: PropTypes.oneOf(['time']).isRequired,
97
- slotProps: PropTypes.object,
98
- slots: PropTypes.object,
99
- stroke: PropTypes.string,
100
- tickFontSize: PropTypes.number,
101
- tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
102
- tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
103
- tickLabelStyle: PropTypes.object,
104
- tickMaxStep: PropTypes.number,
105
- tickMinStep: PropTypes.number,
106
- tickNumber: PropTypes.number.isRequired,
107
- tickSize: PropTypes.number,
108
- valueFormatter: PropTypes.func
109
- }),
79
+ axis: PropTypes.object,
110
80
  axisData: PropTypes.shape({
111
81
  x: PropTypes.shape({
112
82
  index: PropTypes.number,
@@ -120,29 +90,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
120
90
  axisValue: PropTypes.any,
121
91
  classes: PropTypes.object,
122
92
  dataIndex: PropTypes.number,
123
- series: PropTypes.arrayOf(PropTypes.shape({
124
- area: PropTypes.bool,
125
- color: PropTypes.string.isRequired,
126
- connectNulls: PropTypes.bool,
127
- curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
128
- data: PropTypes.arrayOf(PropTypes.number).isRequired,
129
- dataKey: PropTypes.string,
130
- disableHighlight: PropTypes.bool,
131
- highlightScope: PropTypes.shape({
132
- faded: PropTypes.oneOf(['global', 'none', 'series']),
133
- highlighted: PropTypes.oneOf(['item', 'none', 'series'])
134
- }),
135
- id: PropTypes.string.isRequired,
136
- label: PropTypes.string,
137
- showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
138
- stack: PropTypes.string,
139
- stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
140
- stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
141
- type: PropTypes.oneOf(['line']).isRequired,
142
- valueFormatter: PropTypes.func.isRequired,
143
- xAxisKey: PropTypes.string,
144
- yAxisKey: PropTypes.string
145
- })),
93
+ series: PropTypes.arrayOf(PropTypes.object),
146
94
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
147
95
  }),
148
96
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
@@ -42,17 +42,7 @@ process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
42
42
  seriesId: PropTypes.string.isRequired,
43
43
  type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
44
44
  }),
45
- series: PropTypes.shape({
46
- color: PropTypes.string,
47
- data: PropTypes.arrayOf(PropTypes.number).isRequired,
48
- highlightScope: PropTypes.shape({
49
- faded: PropTypes.oneOf(['global', 'none', 'series']),
50
- highlighted: PropTypes.oneOf(['item', 'none', 'series'])
51
- }),
52
- id: PropTypes.string.isRequired,
53
- type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired,
54
- valueFormatter: PropTypes.func.isRequired
55
- }),
45
+ series: PropTypes.object,
56
46
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
57
47
  }),
58
48
  itemData: PropTypes.shape({
@@ -81,37 +81,7 @@ process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propType
81
81
  /**
82
82
  * The properties of the triggered axis.
83
83
  */
84
- axis: PropTypes.shape({
85
- axisId: PropTypes.string,
86
- classes: PropTypes.object,
87
- data: PropTypes.array,
88
- dataKey: PropTypes.string,
89
- disableLine: PropTypes.bool,
90
- disableTicks: PropTypes.bool,
91
- fill: PropTypes.string,
92
- hideTooltip: PropTypes.bool,
93
- id: PropTypes.string.isRequired,
94
- label: PropTypes.string,
95
- labelFontSize: PropTypes.number,
96
- labelStyle: PropTypes.object,
97
- max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
98
- min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
99
- position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
100
- scale: PropTypes.func.isRequired,
101
- scaleType: PropTypes.oneOf(['time']).isRequired,
102
- slotProps: PropTypes.object,
103
- slots: PropTypes.object,
104
- stroke: PropTypes.string,
105
- tickFontSize: PropTypes.number,
106
- tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
107
- tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
108
- tickLabelStyle: PropTypes.object,
109
- tickMaxStep: PropTypes.number,
110
- tickMinStep: PropTypes.number,
111
- tickNumber: PropTypes.number.isRequired,
112
- tickSize: PropTypes.number,
113
- valueFormatter: PropTypes.func
114
- }).isRequired,
84
+ axis: PropTypes.object.isRequired,
115
85
  /**
116
86
  * Data identifying the triggered axis.
117
87
  */
@@ -140,29 +110,7 @@ process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propType
140
110
  /**
141
111
  * The series linked to the triggered axis.
142
112
  */
143
- series: PropTypes.arrayOf(PropTypes.shape({
144
- area: PropTypes.bool,
145
- color: PropTypes.string.isRequired,
146
- connectNulls: PropTypes.bool,
147
- curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
148
- data: PropTypes.arrayOf(PropTypes.number).isRequired,
149
- dataKey: PropTypes.string,
150
- disableHighlight: PropTypes.bool,
151
- highlightScope: PropTypes.shape({
152
- faded: PropTypes.oneOf(['global', 'none', 'series']),
153
- highlighted: PropTypes.oneOf(['item', 'none', 'series'])
154
- }),
155
- id: PropTypes.string.isRequired,
156
- label: PropTypes.string,
157
- showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
158
- stack: PropTypes.string,
159
- stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
160
- stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
161
- type: PropTypes.oneOf(['line']).isRequired,
162
- valueFormatter: PropTypes.func.isRequired,
163
- xAxisKey: PropTypes.string,
164
- yAxisKey: PropTypes.string
165
- })).isRequired,
113
+ series: PropTypes.arrayOf(PropTypes.object).isRequired,
166
114
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
167
115
  } : void 0;
168
116
  export { DefaultChartsAxisTooltipContent };
@@ -75,17 +75,7 @@ process.env.NODE_ENV !== "production" ? DefaultChartsItemTooltipContent.propType
75
75
  /**
76
76
  * The series linked to the triggered axis.
77
77
  */
78
- series: PropTypes.shape({
79
- color: PropTypes.string,
80
- data: PropTypes.arrayOf(PropTypes.number).isRequired,
81
- highlightScope: PropTypes.shape({
82
- faded: PropTypes.oneOf(['global', 'none', 'series']),
83
- highlighted: PropTypes.oneOf(['item', 'none', 'series'])
84
- }),
85
- id: PropTypes.string.isRequired,
86
- type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired,
87
- valueFormatter: PropTypes.func.isRequired
88
- }).isRequired,
78
+ series: PropTypes.object.isRequired,
89
79
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
90
80
  } : void 0;
91
81
  export { DefaultChartsItemTooltipContent };