@mui/x-charts 7.0.0-alpha.9 → 7.0.0-beta.1

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 (214) hide show
  1. package/BarChart/BarChart.d.ts +2 -1
  2. package/BarChart/BarChart.js +24 -23
  3. package/BarChart/BarElement.d.ts +1 -1
  4. package/BarChart/BarElement.js +6 -3
  5. package/BarChart/BarPlot.d.ts +8 -1
  6. package/BarChart/BarPlot.js +19 -5
  7. package/BarChart/formatter.js +1 -1
  8. package/CHANGELOG.md +386 -38
  9. package/ChartContainer/ChartContainer.d.ts +12 -0
  10. package/ChartContainer/ChartContainer.js +197 -0
  11. package/ChartContainer/index.d.ts +1 -11
  12. package/ChartContainer/index.js +9 -63
  13. package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.d.ts +20 -0
  14. package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +83 -0
  15. package/ChartsOnAxisClickHandler/index.d.ts +1 -0
  16. package/ChartsOnAxisClickHandler/index.js +16 -0
  17. package/ChartsOnAxisClickHandler/package.json +6 -0
  18. package/ChartsReferenceLine/ChartsXReferenceLine.js +1 -1
  19. package/ChartsReferenceLine/ChartsYReferenceLine.js +1 -1
  20. package/ChartsTooltip/ChartsAxisTooltipContent.js +8 -59
  21. package/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  22. package/ChartsTooltip/DefaultChartsAxisTooltipContent.js +8 -58
  23. package/ChartsTooltip/DefaultChartsItemTooltipContent.js +1 -11
  24. package/ChartsTooltip/utils.d.ts +3 -1
  25. package/ChartsTooltip/utils.js +8 -0
  26. package/ChartsVoronoiHandler/ChartsVoronoiHandler.d.ts +7 -0
  27. package/ChartsVoronoiHandler/ChartsVoronoiHandler.js +92 -44
  28. package/LineChart/AnimatedArea.d.ts +1361 -0
  29. package/LineChart/AnimatedArea.js +111 -0
  30. package/LineChart/AnimatedLine.d.ts +1361 -0
  31. package/LineChart/AnimatedLine.js +113 -0
  32. package/LineChart/AreaElement.d.ts +17 -17
  33. package/LineChart/AreaElement.js +17 -34
  34. package/LineChart/AreaPlot.d.ts +12 -7
  35. package/LineChart/AreaPlot.js +91 -58
  36. package/LineChart/LineChart.d.ts +13 -4
  37. package/LineChart/LineChart.js +36 -29
  38. package/LineChart/LineElement.d.ts +17 -17
  39. package/LineChart/LineElement.js +16 -36
  40. package/LineChart/LineHighlightElement.js +3 -2
  41. package/LineChart/LinePlot.d.ts +12 -7
  42. package/LineChart/LinePlot.js +89 -56
  43. package/LineChart/MarkElement.d.ts +5 -2
  44. package/LineChart/MarkElement.js +26 -13
  45. package/LineChart/MarkPlot.d.ts +8 -1
  46. package/LineChart/MarkPlot.js +80 -51
  47. package/LineChart/formatter.js +1 -1
  48. package/LineChart/index.d.ts +2 -0
  49. package/LineChart/index.js +22 -0
  50. package/PieChart/PieArcLabelPlot.d.ts +1 -1
  51. package/PieChart/PieArcLabelPlot.js +1 -1
  52. package/PieChart/PieArcPlot.d.ts +2 -2
  53. package/PieChart/PieArcPlot.js +6 -6
  54. package/PieChart/PieChart.d.ts +1 -1
  55. package/PieChart/PieChart.js +5 -50
  56. package/PieChart/PiePlot.d.ts +1 -1
  57. package/PieChart/PiePlot.js +4 -4
  58. package/README.md +2 -2
  59. package/ResponsiveChartContainer/ResponsiveChartContainer.d.ts +16 -0
  60. package/ResponsiveChartContainer/ResponsiveChartContainer.js +250 -0
  61. package/ResponsiveChartContainer/index.d.ts +1 -15
  62. package/ResponsiveChartContainer/index.js +8 -113
  63. package/ScatterChart/Scatter.d.ts +7 -1
  64. package/ScatterChart/Scatter.js +18 -23
  65. package/ScatterChart/ScatterChart.d.ts +8 -2
  66. package/ScatterChart/ScatterChart.js +12 -22
  67. package/ScatterChart/ScatterPlot.d.ts +1 -1
  68. package/ScatterChart/ScatterPlot.js +10 -2
  69. package/SparkLineChart/SparkLineChart.js +2 -0
  70. package/context/DrawingProvider.d.ts +6 -1
  71. package/context/DrawingProvider.js +9 -2
  72. package/context/InteractionProvider.d.ts +3 -3
  73. package/esm/BarChart/BarChart.js +24 -23
  74. package/esm/BarChart/BarElement.js +6 -3
  75. package/esm/BarChart/BarPlot.js +19 -5
  76. package/esm/BarChart/formatter.js +1 -1
  77. package/esm/ChartContainer/ChartContainer.js +189 -0
  78. package/esm/ChartContainer/index.js +1 -61
  79. package/esm/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +77 -0
  80. package/esm/ChartsOnAxisClickHandler/index.js +1 -0
  81. package/esm/ChartsReferenceLine/ChartsXReferenceLine.js +1 -1
  82. package/esm/ChartsReferenceLine/ChartsYReferenceLine.js +1 -1
  83. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +8 -59
  84. package/esm/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  85. package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js +9 -58
  86. package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js +1 -11
  87. package/esm/ChartsTooltip/utils.js +6 -0
  88. package/esm/ChartsVoronoiHandler/ChartsVoronoiHandler.js +92 -44
  89. package/esm/LineChart/AnimatedArea.js +103 -0
  90. package/esm/LineChart/AnimatedLine.js +105 -0
  91. package/esm/LineChart/AreaElement.js +16 -33
  92. package/esm/LineChart/AreaPlot.js +92 -59
  93. package/esm/LineChart/LineChart.js +36 -29
  94. package/esm/LineChart/LineElement.js +16 -35
  95. package/esm/LineChart/LineHighlightElement.js +3 -2
  96. package/esm/LineChart/LinePlot.js +90 -57
  97. package/esm/LineChart/MarkElement.js +26 -13
  98. package/esm/LineChart/MarkPlot.js +80 -51
  99. package/esm/LineChart/formatter.js +1 -1
  100. package/esm/LineChart/index.js +2 -0
  101. package/esm/PieChart/PieArcLabelPlot.js +1 -1
  102. package/esm/PieChart/PieArcPlot.js +6 -6
  103. package/esm/PieChart/PieChart.js +5 -50
  104. package/esm/PieChart/PiePlot.js +4 -4
  105. package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js +245 -0
  106. package/esm/ResponsiveChartContainer/index.js +1 -115
  107. package/esm/ScatterChart/Scatter.js +18 -23
  108. package/esm/ScatterChart/ScatterChart.js +12 -22
  109. package/esm/ScatterChart/ScatterPlot.js +10 -2
  110. package/esm/SparkLineChart/SparkLineChart.js +2 -0
  111. package/esm/context/DrawingProvider.js +9 -2
  112. package/esm/hooks/useDrawingArea.js +7 -3
  113. package/esm/index.js +1 -0
  114. package/esm/internals/geometry.js +1 -1
  115. package/esm/internals/useAnimatedPath.js +29 -0
  116. package/esm/internals/utils.js +7 -0
  117. package/hooks/useDrawingArea.d.ts +2 -0
  118. package/hooks/useDrawingArea.js +7 -3
  119. package/index.d.ts +1 -0
  120. package/index.js +12 -1
  121. package/internals/geometry.js +1 -1
  122. package/internals/useAnimatedPath.d.ts +1 -0
  123. package/internals/useAnimatedPath.js +38 -0
  124. package/internals/utils.d.ts +4 -0
  125. package/internals/utils.js +8 -0
  126. package/legacy/BarChart/BarChart.js +24 -23
  127. package/legacy/BarChart/BarElement.js +5 -2
  128. package/legacy/BarChart/BarPlot.js +18 -4
  129. package/legacy/BarChart/formatter.js +1 -1
  130. package/legacy/ChartContainer/ChartContainer.js +187 -0
  131. package/legacy/ChartContainer/index.js +1 -59
  132. package/legacy/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +75 -0
  133. package/legacy/ChartsOnAxisClickHandler/index.js +1 -0
  134. package/legacy/ChartsReferenceLine/ChartsXReferenceLine.js +1 -1
  135. package/legacy/ChartsReferenceLine/ChartsYReferenceLine.js +1 -1
  136. package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +8 -61
  137. package/legacy/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  138. package/legacy/ChartsTooltip/DefaultChartsAxisTooltipContent.js +9 -58
  139. package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js +1 -11
  140. package/legacy/ChartsTooltip/utils.js +6 -0
  141. package/legacy/ChartsVoronoiHandler/ChartsVoronoiHandler.js +88 -44
  142. package/legacy/LineChart/AnimatedArea.js +102 -0
  143. package/legacy/LineChart/AnimatedLine.js +104 -0
  144. package/legacy/LineChart/AreaElement.js +15 -35
  145. package/legacy/LineChart/AreaPlot.js +102 -66
  146. package/legacy/LineChart/LineChart.js +36 -29
  147. package/legacy/LineChart/LineElement.js +15 -37
  148. package/legacy/LineChart/LineHighlightElement.js +3 -2
  149. package/legacy/LineChart/LinePlot.js +97 -63
  150. package/legacy/LineChart/MarkElement.js +29 -12
  151. package/legacy/LineChart/MarkPlot.js +83 -53
  152. package/legacy/LineChart/formatter.js +1 -1
  153. package/legacy/LineChart/index.js +2 -0
  154. package/legacy/PieChart/PieArcLabelPlot.js +1 -1
  155. package/legacy/PieChart/PieArcPlot.js +6 -6
  156. package/legacy/PieChart/PieChart.js +5 -50
  157. package/legacy/PieChart/PiePlot.js +4 -4
  158. package/legacy/ResponsiveChartContainer/ResponsiveChartContainer.js +253 -0
  159. package/legacy/ResponsiveChartContainer/index.js +1 -123
  160. package/legacy/ScatterChart/Scatter.js +20 -23
  161. package/legacy/ScatterChart/ScatterChart.js +12 -22
  162. package/legacy/ScatterChart/ScatterPlot.js +10 -2
  163. package/legacy/SparkLineChart/SparkLineChart.js +2 -0
  164. package/legacy/context/DrawingProvider.js +11 -2
  165. package/legacy/hooks/useDrawingArea.js +7 -3
  166. package/legacy/index.js +2 -1
  167. package/legacy/internals/geometry.js +1 -1
  168. package/legacy/internals/useAnimatedPath.js +32 -0
  169. package/legacy/internals/utils.js +7 -0
  170. package/modern/BarChart/BarChart.js +24 -23
  171. package/modern/BarChart/BarElement.js +6 -3
  172. package/modern/BarChart/BarPlot.js +19 -5
  173. package/modern/BarChart/formatter.js +1 -1
  174. package/modern/ChartContainer/ChartContainer.js +189 -0
  175. package/modern/ChartContainer/index.js +1 -61
  176. package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +75 -0
  177. package/modern/ChartsOnAxisClickHandler/index.js +1 -0
  178. package/modern/ChartsReferenceLine/ChartsXReferenceLine.js +1 -1
  179. package/modern/ChartsReferenceLine/ChartsYReferenceLine.js +1 -1
  180. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +8 -59
  181. package/modern/ChartsTooltip/ChartsItemTooltipContent.js +1 -11
  182. package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js +8 -58
  183. package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js +1 -11
  184. package/modern/ChartsTooltip/utils.js +6 -0
  185. package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js +92 -44
  186. package/modern/LineChart/AnimatedArea.js +103 -0
  187. package/modern/LineChart/AnimatedLine.js +105 -0
  188. package/modern/LineChart/AreaElement.js +16 -33
  189. package/modern/LineChart/AreaPlot.js +91 -58
  190. package/modern/LineChart/LineChart.js +36 -29
  191. package/modern/LineChart/LineElement.js +16 -35
  192. package/modern/LineChart/LineHighlightElement.js +3 -2
  193. package/modern/LineChart/LinePlot.js +89 -56
  194. package/modern/LineChart/MarkElement.js +26 -13
  195. package/modern/LineChart/MarkPlot.js +80 -51
  196. package/modern/LineChart/formatter.js +1 -1
  197. package/modern/LineChart/index.js +2 -0
  198. package/modern/PieChart/PieArcLabelPlot.js +1 -1
  199. package/modern/PieChart/PieArcPlot.js +6 -6
  200. package/modern/PieChart/PieChart.js +5 -50
  201. package/modern/PieChart/PiePlot.js +4 -4
  202. package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js +242 -0
  203. package/modern/ResponsiveChartContainer/index.js +1 -112
  204. package/modern/ScatterChart/Scatter.js +18 -23
  205. package/modern/ScatterChart/ScatterChart.js +12 -22
  206. package/modern/ScatterChart/ScatterPlot.js +10 -2
  207. package/modern/SparkLineChart/SparkLineChart.js +2 -0
  208. package/modern/context/DrawingProvider.js +9 -2
  209. package/modern/hooks/useDrawingArea.js +7 -3
  210. package/modern/index.js +2 -1
  211. package/modern/internals/geometry.js +1 -1
  212. package/modern/internals/useAnimatedPath.js +29 -0
  213. package/modern/internals/utils.js +7 -0
  214. package/package.json +6 -5
@@ -0,0 +1,197 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ChartContainer = void 0;
8
+ var React = _interopRequireWildcard(require("react"));
9
+ var _propTypes = _interopRequireDefault(require("prop-types"));
10
+ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
11
+ var _DrawingProvider = require("../context/DrawingProvider");
12
+ var _SeriesContextProvider = require("../context/SeriesContextProvider");
13
+ var _InteractionProvider = require("../context/InteractionProvider");
14
+ var _useReducedMotion = require("../hooks/useReducedMotion");
15
+ var _ChartsSurface = require("../ChartsSurface");
16
+ var _CartesianContextProvider = require("../context/CartesianContextProvider");
17
+ var _HighlightProvider = require("../context/HighlightProvider");
18
+ var _jsxRuntime = require("react/jsx-runtime");
19
+ 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); }
20
+ 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; }
21
+ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
22
+ const {
23
+ width,
24
+ height,
25
+ series,
26
+ margin,
27
+ xAxis,
28
+ yAxis,
29
+ colors,
30
+ dataset,
31
+ sx,
32
+ title,
33
+ desc,
34
+ disableAxisListener,
35
+ children
36
+ } = props;
37
+ const svgRef = React.useRef(null);
38
+ const handleRef = (0, _useForkRef.default)(ref, svgRef);
39
+ (0, _useReducedMotion.useReducedMotion)(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
40
+
41
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, {
42
+ width: width,
43
+ height: height,
44
+ margin: margin,
45
+ svgRef: svgRef,
46
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesContextProvider.SeriesContextProvider, {
47
+ series: series,
48
+ colors: colors,
49
+ dataset: dataset,
50
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianContextProvider.CartesianContextProvider, {
51
+ xAxis: xAxis,
52
+ yAxis: yAxis,
53
+ dataset: dataset,
54
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
55
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightProvider.HighlightProvider, {
56
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {
57
+ width: width,
58
+ height: height,
59
+ ref: handleRef,
60
+ sx: sx,
61
+ title: title,
62
+ desc: desc,
63
+ disableAxisListener: disableAxisListener,
64
+ children: children
65
+ })
66
+ })
67
+ })
68
+ })
69
+ })
70
+ });
71
+ });
72
+ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
73
+ // ----------------------------- Warning --------------------------------
74
+ // | These PropTypes are generated from the TypeScript type definitions |
75
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
76
+ // ----------------------------------------------------------------------
77
+ children: _propTypes.default.node,
78
+ className: _propTypes.default.string,
79
+ /**
80
+ * Color palette used to colorize multiple series.
81
+ * @default blueberryTwilightPalette
82
+ */
83
+ colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
84
+ /**
85
+ * An array of objects that can be used to populate series and axes data using their `dataKey` property.
86
+ */
87
+ dataset: _propTypes.default.arrayOf(_propTypes.default.object),
88
+ desc: _propTypes.default.string,
89
+ /**
90
+ * If `true`, the charts will not listen to the mouse move event.
91
+ * It might break interactive features, but will improve performance.
92
+ * @default false
93
+ */
94
+ disableAxisListener: _propTypes.default.bool,
95
+ /**
96
+ * The height of the chart in px.
97
+ */
98
+ height: _propTypes.default.number.isRequired,
99
+ /**
100
+ * The margin between the SVG and the drawing area.
101
+ * It's used for leaving some space for extra information such as the x- and y-axis or legend.
102
+ * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
103
+ * @default object Depends on the charts type.
104
+ */
105
+ margin: _propTypes.default.shape({
106
+ bottom: _propTypes.default.number,
107
+ left: _propTypes.default.number,
108
+ right: _propTypes.default.number,
109
+ top: _propTypes.default.number
110
+ }),
111
+ /**
112
+ * The array of series to display.
113
+ * Each type of series has its own specificity.
114
+ * Please refer to the appropriate docs page to learn more about it.
115
+ */
116
+ series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
117
+ 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]),
118
+ title: _propTypes.default.string,
119
+ viewBox: _propTypes.default.shape({
120
+ height: _propTypes.default.number,
121
+ width: _propTypes.default.number,
122
+ x: _propTypes.default.number,
123
+ y: _propTypes.default.number
124
+ }),
125
+ /**
126
+ * The width of the chart in px.
127
+ */
128
+ width: _propTypes.default.number.isRequired,
129
+ /**
130
+ * The configuration of the x-axes.
131
+ * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
132
+ */
133
+ xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
134
+ axisId: _propTypes.default.string,
135
+ classes: _propTypes.default.object,
136
+ data: _propTypes.default.array,
137
+ dataKey: _propTypes.default.string,
138
+ disableLine: _propTypes.default.bool,
139
+ disableTicks: _propTypes.default.bool,
140
+ fill: _propTypes.default.string,
141
+ hideTooltip: _propTypes.default.bool,
142
+ id: _propTypes.default.string,
143
+ label: _propTypes.default.string,
144
+ labelFontSize: _propTypes.default.number,
145
+ labelStyle: _propTypes.default.object,
146
+ max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
147
+ min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
148
+ position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
149
+ scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
150
+ slotProps: _propTypes.default.object,
151
+ slots: _propTypes.default.object,
152
+ stroke: _propTypes.default.string,
153
+ tickFontSize: _propTypes.default.number,
154
+ tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
155
+ tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
156
+ tickLabelStyle: _propTypes.default.object,
157
+ tickMaxStep: _propTypes.default.number,
158
+ tickMinStep: _propTypes.default.number,
159
+ tickNumber: _propTypes.default.number,
160
+ tickSize: _propTypes.default.number,
161
+ valueFormatter: _propTypes.default.func
162
+ })),
163
+ /**
164
+ * The configuration of the y-axes.
165
+ * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
166
+ */
167
+ yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
168
+ axisId: _propTypes.default.string,
169
+ classes: _propTypes.default.object,
170
+ data: _propTypes.default.array,
171
+ dataKey: _propTypes.default.string,
172
+ disableLine: _propTypes.default.bool,
173
+ disableTicks: _propTypes.default.bool,
174
+ fill: _propTypes.default.string,
175
+ hideTooltip: _propTypes.default.bool,
176
+ id: _propTypes.default.string,
177
+ label: _propTypes.default.string,
178
+ labelFontSize: _propTypes.default.number,
179
+ labelStyle: _propTypes.default.object,
180
+ max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
181
+ min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
182
+ position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
183
+ scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
184
+ slotProps: _propTypes.default.object,
185
+ slots: _propTypes.default.object,
186
+ stroke: _propTypes.default.string,
187
+ tickFontSize: _propTypes.default.number,
188
+ tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
189
+ tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
190
+ tickLabelStyle: _propTypes.default.object,
191
+ tickMaxStep: _propTypes.default.number,
192
+ tickMinStep: _propTypes.default.number,
193
+ tickNumber: _propTypes.default.number,
194
+ tickSize: _propTypes.default.number,
195
+ valueFormatter: _propTypes.default.func
196
+ }))
197
+ } : void 0;
@@ -1,11 +1 @@
1
- import * as React from 'react';
2
- import { DrawingProviderProps } from '../context/DrawingProvider';
3
- import { SeriesContextProviderProps } from '../context/SeriesContextProvider';
4
- import { ChartsSurfaceProps } from '../ChartsSurface';
5
- import { CartesianContextProviderProps } from '../context/CartesianContextProvider';
6
- export type ChartContainerProps = Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, 'svgRef'> & CartesianContextProviderProps, 'children'> & {
7
- children?: React.ReactNode;
8
- };
9
- export declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, "svgRef"> & CartesianContextProviderProps, "children"> & {
10
- children?: React.ReactNode;
11
- } & React.RefAttributes<unknown>>;
1
+ export * from './ChartContainer';
@@ -1,70 +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.ChartContainer = void 0;
8
- var React = _interopRequireWildcard(require("react"));
9
- var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
10
- var _DrawingProvider = require("../context/DrawingProvider");
11
- var _SeriesContextProvider = require("../context/SeriesContextProvider");
12
- var _InteractionProvider = require("../context/InteractionProvider");
13
- var _useReducedMotion = require("../hooks/useReducedMotion");
14
- var _ChartsSurface = require("../ChartsSurface");
15
- var _CartesianContextProvider = require("../context/CartesianContextProvider");
16
- var _HighlightProvider = require("../context/HighlightProvider");
17
- var _jsxRuntime = require("react/jsx-runtime");
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 ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
21
- const {
22
- width,
23
- height,
24
- series,
25
- margin,
26
- xAxis,
27
- yAxis,
28
- colors,
29
- dataset,
30
- sx,
31
- title,
32
- desc,
33
- disableAxisListener,
34
- children
35
- } = props;
36
- const svgRef = React.useRef(null);
37
- const handleRef = (0, _useForkRef.default)(ref, svgRef);
38
- (0, _useReducedMotion.useReducedMotion)(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
39
-
40
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, {
41
- width: width,
42
- height: height,
43
- margin: margin,
44
- svgRef: svgRef,
45
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesContextProvider.SeriesContextProvider, {
46
- series: series,
47
- colors: colors,
48
- dataset: dataset,
49
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianContextProvider.CartesianContextProvider, {
50
- xAxis: xAxis,
51
- yAxis: yAxis,
52
- dataset: dataset,
53
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
54
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightProvider.HighlightProvider, {
55
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {
56
- width: width,
57
- height: height,
58
- ref: handleRef,
59
- sx: sx,
60
- title: title,
61
- desc: desc,
62
- disableAxisListener: disableAxisListener,
63
- children: children
64
- })
65
- })
66
- })
67
- })
68
- })
6
+ var _ChartContainer = require("./ChartContainer");
7
+ Object.keys(_ChartContainer).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _ChartContainer[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _ChartContainer[key];
14
+ }
69
15
  });
70
16
  });
@@ -0,0 +1,20 @@
1
+ import * as React from 'react';
2
+ type AxisData = {
3
+ dataIndex: number;
4
+ axisValue?: number | Date | string;
5
+ seriesValues: Record<string, number | null | undefined>;
6
+ };
7
+ export interface ChartsOnAxisClickHandlerProps {
8
+ /**
9
+ * The function called for onClick events.
10
+ * The second argument contains information about all line/bar elements at the current mouse position.
11
+ * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
12
+ * @param {null | AxisData} data The data about the clicked axis and items associated with it.
13
+ */
14
+ onAxisClick?: (event: MouseEvent, data: null | AxisData) => void;
15
+ }
16
+ declare function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps): React.JSX.Element;
17
+ declare namespace ChartsOnAxisClickHandler {
18
+ var propTypes: any;
19
+ }
20
+ export { ChartsOnAxisClickHandler };
@@ -0,0 +1,83 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ChartsOnAxisClickHandler = ChartsOnAxisClickHandler;
8
+ var React = _interopRequireWildcard(require("react"));
9
+ var _propTypes = _interopRequireDefault(require("prop-types"));
10
+ var _DrawingProvider = require("../context/DrawingProvider");
11
+ var _InteractionProvider = require("../context/InteractionProvider");
12
+ var _CartesianContextProvider = require("../context/CartesianContextProvider");
13
+ var _SeriesContextProvider = require("../context/SeriesContextProvider");
14
+ var _jsxRuntime = require("react/jsx-runtime");
15
+ 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); }
16
+ 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; }
17
+ function ChartsOnAxisClickHandler(props) {
18
+ const {
19
+ onAxisClick
20
+ } = props;
21
+ const svgRef = React.useContext(_DrawingProvider.SVGContext);
22
+ const series = React.useContext(_SeriesContextProvider.SeriesContext);
23
+ const {
24
+ axis
25
+ } = React.useContext(_InteractionProvider.InteractionContext);
26
+ const {
27
+ xAxisIds,
28
+ xAxis,
29
+ yAxisIds,
30
+ yAxis
31
+ } = React.useContext(_CartesianContextProvider.CartesianContext);
32
+ React.useEffect(() => {
33
+ const element = svgRef.current;
34
+ if (element === null || !onAxisClick) {
35
+ return () => {};
36
+ }
37
+ const handleMouseClick = event => {
38
+ event.preventDefault();
39
+ const isXaxis = (axis.x && axis.x.index) !== undefined;
40
+ const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
41
+ const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index;
42
+ if (dataIndex == null) {
43
+ return;
44
+ }
45
+ const seriesValues = {};
46
+ Object.keys(series).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
47
+ series[seriesType]?.seriesOrder.forEach(seriesId => {
48
+ const seriesItem = series[seriesType].series[seriesId];
49
+ const axisKey = isXaxis ? seriesItem.xAxisKey : seriesItem.yAxisKey;
50
+ if (axisKey === undefined || axisKey === USED_AXIS_ID) {
51
+ seriesValues[seriesId] = seriesItem.data[dataIndex];
52
+ }
53
+ });
54
+ });
55
+ const axisValue = (isXaxis ? xAxis : yAxis)[USED_AXIS_ID].data?.[dataIndex];
56
+ onAxisClick(event, {
57
+ dataIndex,
58
+ axisValue,
59
+ seriesValues
60
+ });
61
+ };
62
+ element.addEventListener('click', handleMouseClick);
63
+ return () => {
64
+ element.removeEventListener('click', handleMouseClick);
65
+ };
66
+ }, [axis.x, axis.y, onAxisClick, series, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]);
67
+
68
+ // eslint-disable-next-line react/jsx-no-useless-fragment
69
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {});
70
+ }
71
+ process.env.NODE_ENV !== "production" ? ChartsOnAxisClickHandler.propTypes = {
72
+ // ----------------------------- Warning --------------------------------
73
+ // | These PropTypes are generated from the TypeScript type definitions |
74
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
75
+ // ----------------------------------------------------------------------
76
+ /**
77
+ * The function called for onClick events.
78
+ * The second argument contains information about all line/bar elements at the current mouse position.
79
+ * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
80
+ * @param {null | AxisData} data The data about the clicked axis and items associated with it.
81
+ */
82
+ onAxisClick: _propTypes.default.func
83
+ } : void 0;
@@ -0,0 +1 @@
1
+ export * from './ChartsOnAxisClickHandler';
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _ChartsOnAxisClickHandler = require("./ChartsOnAxisClickHandler");
7
+ Object.keys(_ChartsOnAxisClickHandler).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _ChartsOnAxisClickHandler[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _ChartsOnAxisClickHandler[key];
14
+ }
15
+ });
16
+ });
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "module": "../esm/ChartsOnAxisClickHandler/index.js",
4
+ "main": "./index.js",
5
+ "types": "./index.d.ts"
6
+ }
@@ -78,7 +78,7 @@ function ChartsXReferenceLine(props) {
78
78
  if (process.env.NODE_ENV !== 'production') {
79
79
  if (!warnedOnce) {
80
80
  warnedOnce = true;
81
- console.error(`MUI X: the value ${x} does not exist in the data of x axis with id ${axisId}.`);
81
+ console.error(`MUI X Charts: the value ${x} does not exist in the data of x axis with id ${axisId}.`);
82
82
  }
83
83
  }
84
84
  return null;
@@ -78,7 +78,7 @@ function ChartsYReferenceLine(props) {
78
78
  if (process.env.NODE_ENV !== 'production') {
79
79
  if (!warnedOnce) {
80
80
  warnedOnce = true;
81
- console.error(`MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`);
81
+ console.error(`MUI X Charts: the value ${y} does not exist in the data of y axis with id ${axisId}.`);
82
82
  }
83
83
  }
84
84
  return null;
@@ -12,6 +12,7 @@ var _utils = require("@mui/base/utils");
12
12
  var _SeriesContextProvider = require("../context/SeriesContextProvider");
13
13
  var _CartesianContextProvider = require("../context/CartesianContextProvider");
14
14
  var _DefaultChartsAxisTooltipContent = require("./DefaultChartsAxisTooltipContent");
15
+ var _utils2 = require("./utils");
15
16
  var _jsxRuntime = require("react/jsx-runtime");
16
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); }
17
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; }
@@ -36,7 +37,7 @@ function ChartsAxisTooltipContent(props) {
36
37
  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
37
38
  const relevantSeries = React.useMemo(() => {
38
39
  const rep = [];
39
- Object.keys(series).filter(seriesType => ['bar', 'line', 'scatter'].includes(seriesType)).forEach(seriesType => {
40
+ Object.keys(series).filter(_utils2.isCartesianSeriesType).forEach(seriesType => {
40
41
  series[seriesType].seriesOrder.forEach(seriesId => {
41
42
  const item = series[seriesType].series[seriesId];
42
43
  const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
@@ -75,83 +76,31 @@ process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
75
76
  axisData: _propTypes.default.shape({
76
77
  x: _propTypes.default.shape({
77
78
  index: _propTypes.default.number,
78
- value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired
79
+ value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired
79
80
  }),
80
81
  y: _propTypes.default.shape({
81
82
  index: _propTypes.default.number,
82
- value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired
83
+ value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired
83
84
  })
84
85
  }).isRequired,
85
86
  classes: _propTypes.default.object.isRequired,
86
87
  content: _propTypes.default.elementType,
87
88
  contentProps: _propTypes.default.shape({
88
- axis: _propTypes.default.shape({
89
- axisId: _propTypes.default.string,
90
- classes: _propTypes.default.object,
91
- data: _propTypes.default.array,
92
- dataKey: _propTypes.default.string,
93
- disableLine: _propTypes.default.bool,
94
- disableTicks: _propTypes.default.bool,
95
- fill: _propTypes.default.string,
96
- hideTooltip: _propTypes.default.bool,
97
- id: _propTypes.default.string.isRequired,
98
- label: _propTypes.default.string,
99
- labelFontSize: _propTypes.default.number,
100
- labelStyle: _propTypes.default.object,
101
- max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
102
- min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
103
- position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
104
- scale: _propTypes.default.func.isRequired,
105
- scaleType: _propTypes.default.oneOf(['time']).isRequired,
106
- slotProps: _propTypes.default.object,
107
- slots: _propTypes.default.object,
108
- stroke: _propTypes.default.string,
109
- tickFontSize: _propTypes.default.number,
110
- tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
111
- tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
112
- tickLabelStyle: _propTypes.default.object,
113
- tickMaxStep: _propTypes.default.number,
114
- tickMinStep: _propTypes.default.number,
115
- tickNumber: _propTypes.default.number.isRequired,
116
- tickSize: _propTypes.default.number,
117
- valueFormatter: _propTypes.default.func
118
- }),
89
+ axis: _propTypes.default.object,
119
90
  axisData: _propTypes.default.shape({
120
91
  x: _propTypes.default.shape({
121
92
  index: _propTypes.default.number,
122
- value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired
93
+ value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired
123
94
  }),
124
95
  y: _propTypes.default.shape({
125
96
  index: _propTypes.default.number,
126
- value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired
97
+ value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired
127
98
  })
128
99
  }),
129
100
  axisValue: _propTypes.default.any,
130
101
  classes: _propTypes.default.object,
131
102
  dataIndex: _propTypes.default.number,
132
- series: _propTypes.default.arrayOf(_propTypes.default.shape({
133
- area: _propTypes.default.bool,
134
- color: _propTypes.default.string.isRequired,
135
- connectNulls: _propTypes.default.bool,
136
- curve: _propTypes.default.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
137
- data: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
138
- dataKey: _propTypes.default.string,
139
- disableHighlight: _propTypes.default.bool,
140
- highlightScope: _propTypes.default.shape({
141
- faded: _propTypes.default.oneOf(['global', 'none', 'series']),
142
- highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
143
- }),
144
- id: _propTypes.default.string.isRequired,
145
- label: _propTypes.default.string,
146
- showMark: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
147
- stack: _propTypes.default.string,
148
- stackOffset: _propTypes.default.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
149
- stackOrder: _propTypes.default.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
150
- type: _propTypes.default.oneOf(['line']).isRequired,
151
- valueFormatter: _propTypes.default.func.isRequired,
152
- xAxisKey: _propTypes.default.string,
153
- yAxisKey: _propTypes.default.string
154
- })),
103
+ series: _propTypes.default.arrayOf(_propTypes.default.object),
155
104
  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])
156
105
  }),
157
106
  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])
@@ -51,17 +51,7 @@ process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
51
51
  seriesId: _propTypes.default.string.isRequired,
52
52
  type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
53
53
  }),
54
- series: _propTypes.default.shape({
55
- color: _propTypes.default.string,
56
- data: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
57
- highlightScope: _propTypes.default.shape({
58
- faded: _propTypes.default.oneOf(['global', 'none', 'series']),
59
- highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
60
- }),
61
- id: _propTypes.default.string.isRequired,
62
- type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired,
63
- valueFormatter: _propTypes.default.func.isRequired
64
- }),
54
+ series: _propTypes.default.object,
65
55
  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])
66
56
  }),
67
57
  itemData: _propTypes.default.shape({