@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
@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.DrawingContext = void 0;
8
8
  exports.DrawingProvider = DrawingProvider;
9
9
  exports.SVGContext = void 0;
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
11
  var React = _interopRequireWildcard(require("react"));
11
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
+ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
12
14
  var _useChartDimensions = _interopRequireDefault(require("../hooks/useChartDimensions"));
13
15
  var _jsxRuntime = require("react/jsx-runtime");
14
16
  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); }
@@ -23,7 +25,8 @@ const DrawingContext = exports.DrawingContext = /*#__PURE__*/React.createContext
23
25
  bottom: 0,
24
26
  right: 0,
25
27
  height: 300,
26
- width: 400
28
+ width: 400,
29
+ chartId: ''
27
30
  });
28
31
  const SVGContext = exports.SVGContext = /*#__PURE__*/React.createContext({
29
32
  current: null
@@ -43,10 +46,14 @@ function DrawingProvider(props) {
43
46
  children
44
47
  } = props;
45
48
  const drawingArea = (0, _useChartDimensions.default)(width, height, margin);
49
+ const chartId = (0, _useId.default)();
50
+ const value = React.useMemo(() => (0, _extends2.default)({
51
+ chartId: chartId ?? ''
52
+ }, drawingArea), [chartId, drawingArea]);
46
53
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SVGContext.Provider, {
47
54
  value: svgRef,
48
55
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawingContext.Provider, {
49
- value: drawingArea,
56
+ value: value,
50
57
  children: children
51
58
  })
52
59
  });
@@ -6,11 +6,11 @@ export interface InteractionProviderProps {
6
6
  export type ItemInteractionData<T extends ChartSeriesType> = ChartItemIdentifier<T>;
7
7
  export type AxisInteractionData = {
8
8
  x: null | {
9
- value: number | Date;
9
+ value: number | Date | string;
10
10
  index?: number;
11
11
  };
12
12
  y: null | {
13
- value: number | Date;
13
+ value: number | Date | string;
14
14
  index?: number;
15
15
  };
16
16
  };
@@ -19,7 +19,7 @@ type InteractionActions<T extends ChartSeriesType = ChartSeriesType> = {
19
19
  data: ItemInteractionData<T>;
20
20
  } | {
21
21
  type: 'leaveItem';
22
- data: ItemInteractionData<T>;
22
+ data: Partial<ItemInteractionData<T>>;
23
23
  } | {
24
24
  type: 'exitChart';
25
25
  } | {
@@ -10,6 +10,7 @@ import { ChartsTooltip } from '../ChartsTooltip';
10
10
  import { ChartsLegend } from '../ChartsLegend';
11
11
  import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
12
12
  import { ChartsClipPath } from '../ChartsClipPath';
13
+ import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
13
14
  import { jsx as _jsx } from "react/jsx-runtime";
14
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
16
  /**
@@ -43,6 +44,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
43
44
  rightAxis,
44
45
  bottomAxis,
45
46
  skipAnimation,
47
+ onItemClick,
48
+ onAxisClick,
46
49
  children,
47
50
  slots,
48
51
  slotProps
@@ -83,13 +86,16 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
83
86
  colors: colors,
84
87
  dataset: dataset,
85
88
  sx: sx,
86
- disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
87
- children: [/*#__PURE__*/_jsx("g", {
89
+ disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none' && !onAxisClick,
90
+ children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
91
+ onAxisClick: onAxisClick
92
+ }), /*#__PURE__*/_jsx("g", {
88
93
  clipPath: `url(#${clipPathId})`,
89
94
  children: /*#__PURE__*/_jsx(BarPlot, {
90
95
  slots: slots,
91
96
  slotProps: slotProps,
92
- skipAnimation: skipAnimation
97
+ skipAnimation: skipAnimation,
98
+ onItemClick: onItemClick
93
99
  })
94
100
  }), /*#__PURE__*/_jsx(ChartsAxis, {
95
101
  topAxis: topAxis,
@@ -229,6 +235,19 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
229
235
  right: PropTypes.number,
230
236
  top: PropTypes.number
231
237
  }),
238
+ /**
239
+ * The function called for onClick events.
240
+ * The second argument contains information about all line/bar elements at the current mouse position.
241
+ * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
242
+ * @param {null | AxisData} data The data about the clicked axis and items associated with it.
243
+ */
244
+ onAxisClick: PropTypes.func,
245
+ /**
246
+ * Callback fired when a bar item is clicked.
247
+ * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
248
+ * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
249
+ */
250
+ onItemClick: PropTypes.func,
232
251
  /**
233
252
  * Indicate which axis to display the right of the charts.
234
253
  * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -256,27 +275,9 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
256
275
  tickNumber: PropTypes.number,
257
276
  tickSize: PropTypes.number
258
277
  }), 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,
278
+ series: PropTypes.arrayOf(PropTypes.object).isRequired,
278
279
  /**
279
- * If `true`, animations are skiped.
280
+ * If `true`, animations are skipped.
280
281
  * @default false
281
282
  */
282
283
  skipAnimation: PropTypes.bool,
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style"];
3
+ const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style", "onClick"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import composeClasses from '@mui/utils/composeClasses';
@@ -50,7 +50,8 @@ function BarElement(props) {
50
50
  highlightScope,
51
51
  slots,
52
52
  slotProps,
53
- style
53
+ style,
54
+ onClick
54
55
  } = props,
55
56
  other = _objectWithoutPropertiesLoose(props, _excluded);
56
57
  const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -86,7 +87,9 @@ function BarElement(props) {
86
87
  dataIndex
87
88
  }), {
88
89
  style,
89
- className: classes.root
90
+ className: classes.root,
91
+ onClick,
92
+ cursor: onClick ? 'pointer' : 'unset'
90
93
  }),
91
94
  ownerState
92
95
  });
@@ -1,6 +1,6 @@
1
1
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["skipAnimation"];
3
+ const _excluded = ["skipAnimation", "onItemClick"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import { useTransition } from '@react-spring/web';
@@ -38,7 +38,7 @@ function getBandSize({
38
38
  offset
39
39
  };
40
40
  }
41
- const useCompletedData = () => {
41
+ const useAggregatedData = () => {
42
42
  var _React$useContext$bar;
43
43
  const seriesData = (_React$useContext$bar = React.useContext(SeriesContext).bar) != null ? _React$useContext$bar : {
44
44
  series: {},
@@ -169,9 +169,10 @@ const getInStyle = ({
169
169
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
170
170
  */
171
171
  function BarPlot(props) {
172
- const completedData = useCompletedData();
172
+ const completedData = useAggregatedData();
173
173
  const {
174
- skipAnimation
174
+ skipAnimation,
175
+ onItemClick
175
176
  } = props,
176
177
  other = _objectWithoutPropertiesLoose(props, _excluded);
177
178
  const transition = useTransition(completedData, {
@@ -194,6 +195,13 @@ function BarPlot(props) {
194
195
  highlightScope: highlightScope,
195
196
  color: color
196
197
  }, other, {
198
+ onClick: onItemClick && (event => {
199
+ onItemClick(event, {
200
+ type: 'bar',
201
+ seriesId,
202
+ dataIndex
203
+ });
204
+ }),
197
205
  style: style
198
206
  })))
199
207
  });
@@ -204,7 +212,13 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
204
212
  // | To update them edit the TypeScript types and run "yarn proptypes" |
205
213
  // ----------------------------------------------------------------------
206
214
  /**
207
- * If `true`, animations are skiped.
215
+ * Callback fired when a bar item is clicked.
216
+ * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
217
+ * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
218
+ */
219
+ onItemClick: PropTypes.func,
220
+ /**
221
+ * If `true`, animations are skipped.
208
222
  * @default false
209
223
  */
210
224
  skipAnimation: PropTypes.bool,
@@ -69,7 +69,7 @@ const formatter = (params, dataset) => {
69
69
  return {
70
70
  seriesOrder,
71
71
  stackingGroups,
72
- series: defaultizeValueFormatter(completedSeries, v => v === null ? '' : v.toLocaleString())
72
+ series: defaultizeValueFormatter(completedSeries, v => v == null ? '' : v.toLocaleString())
73
73
  };
74
74
  };
75
75
  export default formatter;
@@ -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';
@@ -0,0 +1,77 @@
1
+ import * as React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import { SVGContext } from '../context/DrawingProvider';
4
+ import { InteractionContext } from '../context/InteractionProvider';
5
+ import { CartesianContext } from '../context/CartesianContextProvider';
6
+ import { SeriesContext } from '../context/SeriesContextProvider';
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ function ChartsOnAxisClickHandler(props) {
9
+ const {
10
+ onAxisClick
11
+ } = props;
12
+ const svgRef = React.useContext(SVGContext);
13
+ const series = React.useContext(SeriesContext);
14
+ const {
15
+ axis
16
+ } = React.useContext(InteractionContext);
17
+ const {
18
+ xAxisIds,
19
+ xAxis,
20
+ yAxisIds,
21
+ yAxis
22
+ } = React.useContext(CartesianContext);
23
+ React.useEffect(() => {
24
+ const element = svgRef.current;
25
+ if (element === null || !onAxisClick) {
26
+ return () => {};
27
+ }
28
+ const handleMouseClick = event => {
29
+ var _USED_AXIS_ID$data;
30
+ event.preventDefault();
31
+ const isXaxis = (axis.x && axis.x.index) !== undefined;
32
+ const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
33
+ const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index;
34
+ if (dataIndex == null) {
35
+ return;
36
+ }
37
+ const seriesValues = {};
38
+ Object.keys(series).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
39
+ var _series$seriesType;
40
+ (_series$seriesType = series[seriesType]) == null || _series$seriesType.seriesOrder.forEach(seriesId => {
41
+ const seriesItem = series[seriesType].series[seriesId];
42
+ const axisKey = isXaxis ? seriesItem.xAxisKey : seriesItem.yAxisKey;
43
+ if (axisKey === undefined || axisKey === USED_AXIS_ID) {
44
+ seriesValues[seriesId] = seriesItem.data[dataIndex];
45
+ }
46
+ });
47
+ });
48
+ const axisValue = (_USED_AXIS_ID$data = (isXaxis ? xAxis : yAxis)[USED_AXIS_ID].data) == null ? void 0 : _USED_AXIS_ID$data[dataIndex];
49
+ onAxisClick(event, {
50
+ dataIndex,
51
+ axisValue,
52
+ seriesValues
53
+ });
54
+ };
55
+ element.addEventListener('click', handleMouseClick);
56
+ return () => {
57
+ element.removeEventListener('click', handleMouseClick);
58
+ };
59
+ }, [axis.x, axis.y, onAxisClick, series, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]);
60
+
61
+ // eslint-disable-next-line react/jsx-no-useless-fragment
62
+ return /*#__PURE__*/_jsx(React.Fragment, {});
63
+ }
64
+ process.env.NODE_ENV !== "production" ? ChartsOnAxisClickHandler.propTypes = {
65
+ // ----------------------------- Warning --------------------------------
66
+ // | These PropTypes are generated from the TypeScript type definitions |
67
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
68
+ // ----------------------------------------------------------------------
69
+ /**
70
+ * The function called for onClick events.
71
+ * The second argument contains information about all line/bar elements at the current mouse position.
72
+ * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
73
+ * @param {null | AxisData} data The data about the clicked axis and items associated with it.
74
+ */
75
+ onAxisClick: PropTypes.func
76
+ } : void 0;
77
+ export { ChartsOnAxisClickHandler };
@@ -0,0 +1 @@
1
+ export * from './ChartsOnAxisClickHandler';
@@ -70,7 +70,7 @@ function ChartsXReferenceLine(props) {
70
70
  if (process.env.NODE_ENV !== 'production') {
71
71
  if (!warnedOnce) {
72
72
  warnedOnce = true;
73
- console.error(`MUI X: the value ${x} does not exist in the data of x axis with id ${axisId}.`);
73
+ console.error(`MUI X Charts: the value ${x} does not exist in the data of x axis with id ${axisId}.`);
74
74
  }
75
75
  }
76
76
  return null;
@@ -70,7 +70,7 @@ function ChartsYReferenceLine(props) {
70
70
  if (process.env.NODE_ENV !== 'production') {
71
71
  if (!warnedOnce) {
72
72
  warnedOnce = true;
73
- console.error(`MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`);
73
+ console.error(`MUI X Charts: the value ${y} does not exist in the data of y axis with id ${axisId}.`);
74
74
  }
75
75
  }
76
76
  return null;