@mui/x-charts 7.0.0-beta.0 → 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 (185) hide show
  1. package/BarChart/BarChart.d.ts +2 -1
  2. package/BarChart/BarChart.js +23 -4
  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 +247 -0
  9. package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.d.ts +20 -0
  10. package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +83 -0
  11. package/ChartsOnAxisClickHandler/index.d.ts +1 -0
  12. package/ChartsOnAxisClickHandler/index.js +16 -0
  13. package/ChartsOnAxisClickHandler/package.json +6 -0
  14. package/ChartsReferenceLine/ChartsXReferenceLine.js +1 -1
  15. package/ChartsReferenceLine/ChartsYReferenceLine.js +1 -1
  16. package/ChartsTooltip/ChartsAxisTooltipContent.js +6 -5
  17. package/ChartsTooltip/DefaultChartsAxisTooltipContent.js +6 -4
  18. package/ChartsTooltip/utils.d.ts +3 -1
  19. package/ChartsTooltip/utils.js +8 -0
  20. package/ChartsVoronoiHandler/ChartsVoronoiHandler.d.ts +7 -0
  21. package/ChartsVoronoiHandler/ChartsVoronoiHandler.js +92 -44
  22. package/LineChart/AnimatedArea.d.ts +1361 -0
  23. package/LineChart/AnimatedArea.js +111 -0
  24. package/LineChart/AnimatedLine.d.ts +1361 -0
  25. package/LineChart/AnimatedLine.js +113 -0
  26. package/LineChart/AreaElement.d.ts +17 -17
  27. package/LineChart/AreaElement.js +17 -34
  28. package/LineChart/AreaPlot.d.ts +12 -7
  29. package/LineChart/AreaPlot.js +91 -58
  30. package/LineChart/LineChart.d.ts +13 -4
  31. package/LineChart/LineChart.js +35 -6
  32. package/LineChart/LineElement.d.ts +17 -17
  33. package/LineChart/LineElement.js +16 -36
  34. package/LineChart/LineHighlightElement.js +3 -2
  35. package/LineChart/LinePlot.d.ts +12 -7
  36. package/LineChart/LinePlot.js +89 -56
  37. package/LineChart/MarkElement.d.ts +5 -2
  38. package/LineChart/MarkElement.js +26 -13
  39. package/LineChart/MarkPlot.d.ts +8 -1
  40. package/LineChart/MarkPlot.js +80 -51
  41. package/LineChart/formatter.js +1 -1
  42. package/LineChart/index.d.ts +2 -0
  43. package/LineChart/index.js +22 -0
  44. package/PieChart/PieArcLabelPlot.d.ts +1 -1
  45. package/PieChart/PieArcLabelPlot.js +1 -1
  46. package/PieChart/PieArcPlot.d.ts +2 -2
  47. package/PieChart/PieArcPlot.js +6 -6
  48. package/PieChart/PieChart.d.ts +1 -1
  49. package/PieChart/PieChart.js +4 -4
  50. package/PieChart/PiePlot.d.ts +1 -1
  51. package/PieChart/PiePlot.js +4 -4
  52. package/ScatterChart/Scatter.d.ts +7 -1
  53. package/ScatterChart/Scatter.js +17 -3
  54. package/ScatterChart/ScatterChart.d.ts +8 -2
  55. package/ScatterChart/ScatterChart.js +11 -2
  56. package/ScatterChart/ScatterPlot.d.ts +1 -1
  57. package/ScatterChart/ScatterPlot.js +10 -2
  58. package/SparkLineChart/SparkLineChart.js +2 -0
  59. package/context/DrawingProvider.d.ts +6 -1
  60. package/context/DrawingProvider.js +9 -2
  61. package/context/InteractionProvider.d.ts +3 -3
  62. package/esm/BarChart/BarChart.js +23 -4
  63. package/esm/BarChart/BarElement.js +6 -3
  64. package/esm/BarChart/BarPlot.js +19 -5
  65. package/esm/BarChart/formatter.js +1 -1
  66. package/esm/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +77 -0
  67. package/esm/ChartsOnAxisClickHandler/index.js +1 -0
  68. package/esm/ChartsReferenceLine/ChartsXReferenceLine.js +1 -1
  69. package/esm/ChartsReferenceLine/ChartsYReferenceLine.js +1 -1
  70. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +6 -5
  71. package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js +7 -4
  72. package/esm/ChartsTooltip/utils.js +6 -0
  73. package/esm/ChartsVoronoiHandler/ChartsVoronoiHandler.js +92 -44
  74. package/esm/LineChart/AnimatedArea.js +103 -0
  75. package/esm/LineChart/AnimatedLine.js +105 -0
  76. package/esm/LineChart/AreaElement.js +16 -33
  77. package/esm/LineChart/AreaPlot.js +92 -59
  78. package/esm/LineChart/LineChart.js +35 -6
  79. package/esm/LineChart/LineElement.js +16 -35
  80. package/esm/LineChart/LineHighlightElement.js +3 -2
  81. package/esm/LineChart/LinePlot.js +90 -57
  82. package/esm/LineChart/MarkElement.js +26 -13
  83. package/esm/LineChart/MarkPlot.js +80 -51
  84. package/esm/LineChart/formatter.js +1 -1
  85. package/esm/LineChart/index.js +2 -0
  86. package/esm/PieChart/PieArcLabelPlot.js +1 -1
  87. package/esm/PieChart/PieArcPlot.js +6 -6
  88. package/esm/PieChart/PieChart.js +4 -4
  89. package/esm/PieChart/PiePlot.js +4 -4
  90. package/esm/ScatterChart/Scatter.js +17 -3
  91. package/esm/ScatterChart/ScatterChart.js +11 -2
  92. package/esm/ScatterChart/ScatterPlot.js +10 -2
  93. package/esm/SparkLineChart/SparkLineChart.js +2 -0
  94. package/esm/context/DrawingProvider.js +9 -2
  95. package/esm/hooks/useDrawingArea.js +7 -3
  96. package/esm/index.js +1 -0
  97. package/esm/internals/geometry.js +1 -1
  98. package/esm/internals/useAnimatedPath.js +29 -0
  99. package/esm/internals/utils.js +7 -0
  100. package/hooks/useDrawingArea.d.ts +2 -0
  101. package/hooks/useDrawingArea.js +7 -3
  102. package/index.d.ts +1 -0
  103. package/index.js +12 -1
  104. package/internals/geometry.js +1 -1
  105. package/internals/useAnimatedPath.d.ts +1 -0
  106. package/internals/useAnimatedPath.js +38 -0
  107. package/internals/utils.d.ts +4 -0
  108. package/internals/utils.js +8 -0
  109. package/legacy/BarChart/BarChart.js +23 -4
  110. package/legacy/BarChart/BarElement.js +5 -2
  111. package/legacy/BarChart/BarPlot.js +18 -4
  112. package/legacy/BarChart/formatter.js +1 -1
  113. package/legacy/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +75 -0
  114. package/legacy/ChartsOnAxisClickHandler/index.js +1 -0
  115. package/legacy/ChartsReferenceLine/ChartsXReferenceLine.js +1 -1
  116. package/legacy/ChartsReferenceLine/ChartsYReferenceLine.js +1 -1
  117. package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +6 -7
  118. package/legacy/ChartsTooltip/DefaultChartsAxisTooltipContent.js +7 -4
  119. package/legacy/ChartsTooltip/utils.js +6 -0
  120. package/legacy/ChartsVoronoiHandler/ChartsVoronoiHandler.js +88 -44
  121. package/legacy/LineChart/AnimatedArea.js +102 -0
  122. package/legacy/LineChart/AnimatedLine.js +104 -0
  123. package/legacy/LineChart/AreaElement.js +15 -35
  124. package/legacy/LineChart/AreaPlot.js +102 -66
  125. package/legacy/LineChart/LineChart.js +35 -6
  126. package/legacy/LineChart/LineElement.js +15 -37
  127. package/legacy/LineChart/LineHighlightElement.js +3 -2
  128. package/legacy/LineChart/LinePlot.js +97 -63
  129. package/legacy/LineChart/MarkElement.js +29 -12
  130. package/legacy/LineChart/MarkPlot.js +83 -53
  131. package/legacy/LineChart/formatter.js +1 -1
  132. package/legacy/LineChart/index.js +2 -0
  133. package/legacy/PieChart/PieArcLabelPlot.js +1 -1
  134. package/legacy/PieChart/PieArcPlot.js +6 -6
  135. package/legacy/PieChart/PieChart.js +4 -4
  136. package/legacy/PieChart/PiePlot.js +4 -4
  137. package/legacy/ScatterChart/Scatter.js +19 -3
  138. package/legacy/ScatterChart/ScatterChart.js +11 -2
  139. package/legacy/ScatterChart/ScatterPlot.js +10 -2
  140. package/legacy/SparkLineChart/SparkLineChart.js +2 -0
  141. package/legacy/context/DrawingProvider.js +11 -2
  142. package/legacy/hooks/useDrawingArea.js +7 -3
  143. package/legacy/index.js +2 -1
  144. package/legacy/internals/geometry.js +1 -1
  145. package/legacy/internals/useAnimatedPath.js +32 -0
  146. package/legacy/internals/utils.js +7 -0
  147. package/modern/BarChart/BarChart.js +23 -4
  148. package/modern/BarChart/BarElement.js +6 -3
  149. package/modern/BarChart/BarPlot.js +19 -5
  150. package/modern/BarChart/formatter.js +1 -1
  151. package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +75 -0
  152. package/modern/ChartsOnAxisClickHandler/index.js +1 -0
  153. package/modern/ChartsReferenceLine/ChartsXReferenceLine.js +1 -1
  154. package/modern/ChartsReferenceLine/ChartsYReferenceLine.js +1 -1
  155. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +6 -5
  156. package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js +6 -4
  157. package/modern/ChartsTooltip/utils.js +6 -0
  158. package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js +92 -44
  159. package/modern/LineChart/AnimatedArea.js +103 -0
  160. package/modern/LineChart/AnimatedLine.js +105 -0
  161. package/modern/LineChart/AreaElement.js +16 -33
  162. package/modern/LineChart/AreaPlot.js +91 -58
  163. package/modern/LineChart/LineChart.js +35 -6
  164. package/modern/LineChart/LineElement.js +16 -35
  165. package/modern/LineChart/LineHighlightElement.js +3 -2
  166. package/modern/LineChart/LinePlot.js +89 -56
  167. package/modern/LineChart/MarkElement.js +26 -13
  168. package/modern/LineChart/MarkPlot.js +80 -51
  169. package/modern/LineChart/formatter.js +1 -1
  170. package/modern/LineChart/index.js +2 -0
  171. package/modern/PieChart/PieArcLabelPlot.js +1 -1
  172. package/modern/PieChart/PieArcPlot.js +6 -6
  173. package/modern/PieChart/PieChart.js +4 -4
  174. package/modern/PieChart/PiePlot.js +4 -4
  175. package/modern/ScatterChart/Scatter.js +17 -3
  176. package/modern/ScatterChart/ScatterChart.js +11 -2
  177. package/modern/ScatterChart/ScatterPlot.js +10 -2
  178. package/modern/SparkLineChart/SparkLineChart.js +2 -0
  179. package/modern/context/DrawingProvider.js +9 -2
  180. package/modern/hooks/useDrawingArea.js +7 -3
  181. package/modern/index.js +2 -1
  182. package/modern/internals/geometry.js +1 -1
  183. package/modern/internals/useAnimatedPath.js +29 -0
  184. package/modern/internals/utils.js +7 -0
  185. package/package.json +6 -5
@@ -8,11 +8,12 @@ import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '
8
8
  import { ChartsLegendProps, ChartsLegendSlots, ChartsLegendSlotProps } from '../ChartsLegend';
9
9
  import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
10
10
  import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
11
+ import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
11
12
  export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
12
13
  }
13
14
  export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
14
15
  }
15
- export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Pick<BarPlotProps, 'skipAnimation'> {
16
+ export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
16
17
  series: MakeOptional<BarSeriesType, 'type'>[];
17
18
  tooltip?: ChartsTooltipProps;
18
19
  /**
@@ -17,6 +17,7 @@ var _ChartsTooltip = require("../ChartsTooltip");
17
17
  var _ChartsLegend = require("../ChartsLegend");
18
18
  var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
19
19
  var _ChartsClipPath = require("../ChartsClipPath");
20
+ var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
20
21
  var _jsxRuntime = require("react/jsx-runtime");
21
22
  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); }
22
23
  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; }
@@ -51,6 +52,8 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
51
52
  rightAxis,
52
53
  bottomAxis,
53
54
  skipAnimation,
55
+ onItemClick,
56
+ onAxisClick,
54
57
  children,
55
58
  slots,
56
59
  slotProps
@@ -88,13 +91,16 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
88
91
  colors: colors,
89
92
  dataset: dataset,
90
93
  sx: sx,
91
- disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
92
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
94
+ disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
95
+ children: [onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, {
96
+ onAxisClick: onAxisClick
97
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
93
98
  clipPath: `url(#${clipPathId})`,
94
99
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, {
95
100
  slots: slots,
96
101
  slotProps: slotProps,
97
- skipAnimation: skipAnimation
102
+ skipAnimation: skipAnimation,
103
+ onItemClick: onItemClick
98
104
  })
99
105
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
100
106
  topAxis: topAxis,
@@ -234,6 +240,19 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
234
240
  right: _propTypes.default.number,
235
241
  top: _propTypes.default.number
236
242
  }),
243
+ /**
244
+ * The function called for onClick events.
245
+ * The second argument contains information about all line/bar elements at the current mouse position.
246
+ * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
247
+ * @param {null | AxisData} data The data about the clicked axis and items associated with it.
248
+ */
249
+ onAxisClick: _propTypes.default.func,
250
+ /**
251
+ * Callback fired when a bar item is clicked.
252
+ * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
253
+ * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
254
+ */
255
+ onItemClick: _propTypes.default.func,
237
256
  /**
238
257
  * Indicate which axis to display the right of the charts.
239
258
  * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -263,7 +282,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
263
282
  }), _propTypes.default.string]),
264
283
  series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
265
284
  /**
266
- * If `true`, animations are skiped.
285
+ * If `true`, animations are skipped.
267
286
  * @default false
268
287
  */
269
288
  skipAnimation: _propTypes.default.bool,
@@ -1366,7 +1366,7 @@ export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighligh
1366
1366
  */
1367
1367
  slots?: {
1368
1368
  /**
1369
- * The component that renders the root.
1369
+ * The component that renders the bar.
1370
1370
  * @default BarElementPath
1371
1371
  */
1372
1372
  bar?: React.ElementType;
@@ -21,7 +21,7 @@ var _web = require("@react-spring/web");
21
21
  var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
22
22
  var _InteractionProvider = require("../context/InteractionProvider");
23
23
  var _jsxRuntime = require("react/jsx-runtime");
24
- const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style"];
24
+ const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style", "onClick"];
25
25
  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); }
26
26
  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; }
27
27
  function getBarElementUtilityClass(slot) {
@@ -60,7 +60,8 @@ function BarElement(props) {
60
60
  highlightScope,
61
61
  slots,
62
62
  slotProps,
63
- style
63
+ style,
64
+ onClick
64
65
  } = props,
65
66
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
66
67
  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
@@ -96,7 +97,9 @@ function BarElement(props) {
96
97
  dataIndex
97
98
  }), {
98
99
  style,
99
- className: classes.root
100
+ className: classes.root,
101
+ onClick,
102
+ cursor: onClick ? 'pointer' : 'unset'
100
103
  }),
101
104
  ownerState
102
105
  });
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { BarElementProps } from './BarElement';
3
+ import { BarItemIdentifier } from '../models';
3
4
  export interface BarPlotSlots {
4
5
  bar?: React.JSXElementConstructor<BarElementProps>;
5
6
  }
@@ -8,10 +9,16 @@ export interface BarPlotSlotProps {
8
9
  }
9
10
  export interface BarPlotProps extends Pick<BarElementProps, 'slots' | 'slotProps'> {
10
11
  /**
11
- * If `true`, animations are skiped.
12
+ * If `true`, animations are skipped.
12
13
  * @default false
13
14
  */
14
15
  skipAnimation?: boolean;
16
+ /**
17
+ * Callback fired when a bar item is clicked.
18
+ * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
19
+ * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
20
+ */
21
+ onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
15
22
  }
16
23
  /**
17
24
  * Demos:
@@ -16,7 +16,7 @@ var _BarElement = require("./BarElement");
16
16
  var _axis = require("../models/axis");
17
17
  var _constants = require("../constants");
18
18
  var _jsxRuntime = require("react/jsx-runtime");
19
- const _excluded = ["skipAnimation"];
19
+ const _excluded = ["skipAnimation", "onItemClick"];
20
20
  /**
21
21
  * Solution of the equations
22
22
  * W = barWidth * N + offset * (N-1)
@@ -46,7 +46,7 @@ function getBandSize({
46
46
  offset
47
47
  };
48
48
  }
49
- const useCompletedData = () => {
49
+ const useAggregatedData = () => {
50
50
  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).bar ?? {
51
51
  series: {},
52
52
  stackingGroups: [],
@@ -174,9 +174,10 @@ const getInStyle = ({
174
174
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
175
175
  */
176
176
  function BarPlot(props) {
177
- const completedData = useCompletedData();
177
+ const completedData = useAggregatedData();
178
178
  const {
179
- skipAnimation
179
+ skipAnimation,
180
+ onItemClick
180
181
  } = props,
181
182
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
182
183
  const transition = (0, _web.useTransition)(completedData, {
@@ -199,6 +200,13 @@ function BarPlot(props) {
199
200
  highlightScope: highlightScope,
200
201
  color: color
201
202
  }, other, {
203
+ onClick: onItemClick && (event => {
204
+ onItemClick(event, {
205
+ type: 'bar',
206
+ seriesId,
207
+ dataIndex
208
+ });
209
+ }),
202
210
  style: style
203
211
  })))
204
212
  });
@@ -209,7 +217,13 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
209
217
  // | To update them edit the TypeScript types and run "yarn proptypes" |
210
218
  // ----------------------------------------------------------------------
211
219
  /**
212
- * If `true`, animations are skiped.
220
+ * Callback fired when a bar item is clicked.
221
+ * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
222
+ * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
223
+ */
224
+ onItemClick: _propTypes.default.func,
225
+ /**
226
+ * If `true`, animations are skipped.
213
227
  * @default false
214
228
  */
215
229
  skipAnimation: _propTypes.default.bool,
@@ -72,7 +72,7 @@ const formatter = (params, dataset) => {
72
72
  return {
73
73
  seriesOrder,
74
74
  stackingGroups,
75
- series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v === null ? '' : v.toLocaleString())
75
+ series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v == null ? '' : v.toLocaleString())
76
76
  };
77
77
  };
78
78
  var _default = exports.default = formatter;
package/CHANGELOG.md CHANGED
@@ -3,6 +3,169 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 7.0.0-beta.1
7
+
8
+ _Feb 1, 2024_
9
+
10
+ We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
11
+
12
+ - 🏃 Improve the filtering performance of the Data Grid by changing the `GridColDef` methods signatures (#11573) @cherniavskii
13
+ - 🎁 The Line Chart component now has animation by default (#11620) @alexfauquette
14
+ - 🚀 All charts have click handlers (#11411) @alexfauquette
15
+ Test their respective documentation demonstrations to know more about the data format:
16
+
17
+ - [Scatter Chart](https://next.mui.com/x/react-charts/scatter/#click-event)
18
+ - [Line Chart](https://next.mui.com/x/react-charts/lines/#click-event)
19
+ - [Bar Chart](https://next.mui.com/x/react-charts/bars/#click-event)
20
+ - [Pie Chart](https://next.mui.com/x/react-charts/pie/#click-event)
21
+
22
+ Big thanks to @giladappsforce and @yaredtsy for their contribution on exploring this feature.
23
+
24
+ ### Data Grid
25
+
26
+ ### Breaking changes
27
+
28
+ - The signature of `GridColDef['valueGetter']` has been changed for performance reasons:
29
+
30
+ ```diff
31
+ - valueGetter: ({ value, row }) => value,
32
+ + valueGetter: (value, row, column, apiRef) => value,
33
+ ```
34
+
35
+ The `GridValueGetterParams` interface has been removed:
36
+
37
+ ```diff
38
+ - const customValueGetter = (params: GridValueGetterParams) => params.row.budget;
39
+ + const customValueGetter: GridValueGetterFn = (value, row) => row.budget;
40
+ ```
41
+
42
+ - The signature of `GridColDef['valueFormatter']` has been changed for performance reasons:
43
+
44
+ ```diff
45
+ - valueFormatter: ({ value }) => value,
46
+ + valueFormatter: (value, row, column, apiRef) => value,
47
+ ```
48
+
49
+ The `GridValueFormatterParams` interface has been removed:
50
+
51
+ ```diff
52
+ - const gridDateFormatter = ({ value, field, id }: GridValueFormatterParams<Date>) => value.toLocaleDateString();
53
+ + const gridDateFormatter: GridValueFormatter = (value: Date) => value.toLocaleDateString();
54
+ ```
55
+
56
+ - The signature of `GridColDef['valueSetter']` has been changed for performance reasons:
57
+
58
+ ```diff
59
+ - valueSetter: (params) => {
60
+ - const [firstName, lastName] = params.value!.toString().split(' ');
61
+ - return { ...params.row, firstName, lastName };
62
+ - }
63
+ + valueSetter: (value, row) => {
64
+ + const [firstName, lastName] = value!.toString().split(' ');
65
+ + return { ...row, firstName, lastName };
66
+ +}
67
+ ```
68
+
69
+ The `GridValueSetterParams` interface has been removed:
70
+
71
+ ```diff
72
+ - const setFullName = (params: GridValueSetterParams) => {
73
+ - const [firstName, lastName] = params.value!.toString().split(' ');
74
+ - return { ...params.row, firstName, lastName };
75
+ - };
76
+ + const setFullName: GridValueSetter<Row> = (value, row) => {
77
+ + const [firstName, lastName] = value!.toString().split(' ');
78
+ + return { ...row, firstName, lastName };
79
+ + }
80
+ ```
81
+
82
+ - The signature of `GridColDef['valueParser']` has been changed for performance reasons:
83
+
84
+ ```diff
85
+ - valueParser: (value, params: GridCellParams) => value.toLowerCase(),
86
+ + valueParser: (value, row, column, apiRef) => value.toLowerCase(),
87
+ ```
88
+
89
+ - The signature of `GridColDef['colSpan']` has been changed for performance reasons:
90
+
91
+ ```diff
92
+ - colSpan: ({ row, field, value }: GridCellParams) => (row.id === 'total' ? 2 : 1),
93
+ + colSpan: (value, row, column, apiRef) => (row.id === 'total' ? 2 : 1),
94
+ ```
95
+
96
+ - The signature of `GridColDef['pastedValueParser']` has been changed for performance reasons:
97
+
98
+ ```diff
99
+ - pastedValueParser: (value, params) => new Date(value),
100
+ + pastedValueParser: (value, row, column, apiRef) => new Date(value),
101
+ ```
102
+
103
+ - The signature of `GridColDef['groupingValueGetter']` has been changed for performance reasons:
104
+
105
+ ```diff
106
+ - groupingValueGetter: (params) => params.value.name,
107
+ + groupingValueGetter: (value: { name: string }) => value.name,
108
+ ```
109
+
110
+ #### `@mui/x-data-grid@7.0.0-beta.1`
111
+
112
+ - [DataGrid] Add `toggleAllMode` prop to the `columnsManagement` slot (#10794) @H999
113
+ - [DataGrid] Change `GridColDef` methods signatures (#11573) @cherniavskii
114
+ - [DataGrid] Fix row reorder with cell selection (#11783) @PEsteves8
115
+ - [DataGrid] Make columns management' casing consistent (#11858) @MBilalShafi
116
+ - [l10n] Improve Hebrew (he-IL) locale (#11788) @danielmishan85
117
+
118
+ #### `@mui/x-data-grid-pro@7.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
119
+
120
+ Same changes as in `@mui/x-data-grid@7.0.0-beta.1`.
121
+
122
+ #### `@mui/x-data-grid-premium@7.0.0-beta.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
123
+
124
+ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.1`.
125
+
126
+ ### Date Pickers
127
+
128
+ #### `@mui/x-date-pickers@7.0.0-beta.1`
129
+
130
+ - [TimePicker] Add missing toolbar classes descriptions (#11856) @LukasTy
131
+
132
+ #### `@mui/x-date-pickers-pro@7.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
133
+
134
+ Same changes as in `@mui/x-date-pickers@7.0.0-beta.1`.
135
+
136
+ ### Charts
137
+
138
+ #### Breaking changes
139
+
140
+ - The line chart now have animation by default.
141
+ You can disable it with `skipAnimation` prop.
142
+ See [animation documentation](next.mui.com/x/react-charts/lines/#animation) for more information.
143
+
144
+ - Pie charts `onClick` get renamed `onItemClick` for consistency with other charts click callback.
145
+
146
+ `@mui/x-charts@7.0.0-beta.1`
147
+
148
+ - [charts] Add `onClick` support (#11411) @alexfauquette
149
+ - [charts] Add line animation (#11620) @alexfauquette
150
+ - [charts] Document how to modify color according to values (#11824) @alexfauquette
151
+ - [charts] Fix Tooltip crash with out of range lines (#11898) @alexfauquette
152
+
153
+ ### Docs
154
+
155
+ - [docs] Add a general uplift to the changelog page (#11396) @danilo-leal
156
+ - [docs] Do not reference the Tree View overview page in the API pages (#11826) @flaviendelangle
157
+ - [docs] Fix charts API links (#11832) @alexfauquette
158
+ - [docs] Improve Support page (#11556) @oliviertassinari
159
+ - [docs] Improve column visibility documentation (#11857) @MBilalShafi
160
+ - [docs] Polish header @oliviertassinari
161
+ - [docs] Sync support page with core @oliviertassinari
162
+ - [docs] Update whats new page with "v7 Beta blogpost" content (#11879) @joserodolfofreitas
163
+
164
+ ### Core
165
+
166
+ - [core] Rely on immutable ref when possible (#11847) @oliviertassinari
167
+ - [core] Bump monorepo (#11897) @alexfauquette
168
+
6
169
  ## 7.0.0-beta.0
7
170
 
8
171
  _Jan 26, 2024_
@@ -1873,6 +2036,90 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
1873
2036
  - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
1874
2037
  - [license] Correctly throw errors (#10924) @oliviertassinari
1875
2038
 
2039
+ ## 6.19.3
2040
+
2041
+ _Feb 1, 2024_
2042
+
2043
+ We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
2044
+
2045
+ - 🌍 Improve Hebrew (he-IL) locale (#11831) @danielmishan85
2046
+ - 🐞 Bugfixes
2047
+ - 📚 Documentation improvements
2048
+
2049
+ ### Data Grid
2050
+
2051
+ #### `@mui/x-data-grid@6.19.3`
2052
+
2053
+ - [l10n] Improve Hebrew (he-IL) locale (@danielmishan85) (#11831)
2054
+
2055
+ #### `@mui/x-data-grid-pro@6.19.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
2056
+
2057
+ Same changes as in `@mui/x-data-grid@6.19.3`.
2058
+
2059
+ #### `@mui/x-data-grid-premium@6.19.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
2060
+
2061
+ Same changes as in `@mui/x-data-grid-pro@6.19.3`.
2062
+
2063
+ ### Date Pickers
2064
+
2065
+ #### `@mui/x-date-pickers@6.19.3`
2066
+
2067
+ - [TimePicker] Add missing toolbar classes descriptions (#11862) @LukasTy
2068
+
2069
+ #### `@mui/x-date-pickers-pro@6.19.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
2070
+
2071
+ Same changes as in `@mui/x-date-pickers@6.19.3`.
2072
+
2073
+ ### Charts / `@mui/x-charts@6.19.3`
2074
+
2075
+ - [charts] Document how to modify color according to values (#11854) @alexfauquette
2076
+
2077
+ ### Docs
2078
+
2079
+ - [docs] Add a general uplift to the whats new page (#11883) @danilo-leal
2080
+ - [docs] Fix 404 (#11852) @alexfauquette
2081
+ - [docs] Fix <title> generation (#11825) @alexfauquette
2082
+ - [docs] Fix docs:api when typo in slots typing (#11861) @alexfauquette
2083
+ - [docs] Improve Support page (#11556) @oliviertassinari
2084
+ - [docs] Sync support page with core @oliviertassinari
2085
+ - [docs] These API don't exist in MUI X v6 @oliviertassinari
2086
+ - [docs] Update whats new page with v7 Beta blogpost content (#11886) @joserodolfofreitas
2087
+
2088
+ ## 6.19.2
2089
+
2090
+ _Jan 25, 2024_
2091
+
2092
+ We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
2093
+
2094
+ - 🚀 Apply the `layout.tabs` class to `Tabs` slot (@LukasTy) (#11782)
2095
+ - 🐞 Bugfixes
2096
+
2097
+ ### Date Pickers
2098
+
2099
+ #### `@mui/x-date-pickers@6.19.2`
2100
+
2101
+ - [pickers] Apply the `layout.tabs` class to `Tabs` slot (@LukasTy) (#11782)
2102
+
2103
+ #### `@mui/x-date-pickers-pro@6.19.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
2104
+
2105
+ Same changes as in `@mui/x-date-pickers@6.19.2`, plus:
2106
+
2107
+ - [DateRangePicker] Remove `calendars` prop on `Mobile` (@LukasTy) (#11771)
2108
+
2109
+ ### Data Grid
2110
+
2111
+ #### `@mui/x-data-grid@6.19.2`
2112
+
2113
+ - [DataGrid] Fix support for tree with more than 50,000 children (@zenazn) (#11808)
2114
+
2115
+ #### `@mui/x-data-grid-pro@6.19.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
2116
+
2117
+ Same changes as in `@mui/x-data-grid@6.19.2`.
2118
+
2119
+ #### `@mui/x-data-grid-premium@6.19.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
2120
+
2121
+ Same changes as in `@mui/x-data-grid-pro@6.19.2`.
2122
+
1876
2123
  ## 6.19.1
1877
2124
 
1878
2125
  _Jan 19, 2024_
@@ -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;