@mui/x-charts 6.0.0-alpha.12 → 6.0.0-alpha.14

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 (89) hide show
  1. package/BarChart/BarChart.d.ts +3 -3
  2. package/BarChart/BarChart.js +3 -2
  3. package/BarChart/BarElement.js +2 -4
  4. package/BarChart/formatter.js +1 -2
  5. package/BarChart/legend.js +1 -2
  6. package/CHANGELOG.md +144 -0
  7. package/ChartContainer/index.js +2 -3
  8. package/ChartsAxis/axisClasses.js +1 -2
  9. package/ChartsLegend/ChartsLegend.js +4 -8
  10. package/ChartsLegend/chartsLegendClasses.js +1 -2
  11. package/ChartsSurface.js +2 -3
  12. package/ChartsTooltip/ChartsAxisTooltipContent.d.ts +1 -0
  13. package/ChartsTooltip/ChartsAxisTooltipContent.js +17 -8
  14. package/ChartsTooltip/ChartsItemTooltipContent.d.ts +3 -2
  15. package/ChartsTooltip/ChartsItemTooltipContent.js +16 -6
  16. package/ChartsTooltip/ChartsTooltip.d.ts +23 -0
  17. package/ChartsTooltip/ChartsTooltip.js +47 -13
  18. package/ChartsTooltip/ChartsTooltipTable.js +6 -11
  19. package/ChartsTooltip/tooltipClasses.js +1 -2
  20. package/LineChart/AreaElement.js +2 -4
  21. package/LineChart/LineChart.d.ts +3 -3
  22. package/LineChart/LineChart.js +7 -3
  23. package/LineChart/LineElement.js +2 -4
  24. package/LineChart/LineHighlightElement.js +1 -2
  25. package/LineChart/MarkElement.js +1 -2
  26. package/LineChart/formatter.js +1 -2
  27. package/LineChart/legend.js +1 -2
  28. package/PieChart/PieArc.d.ts +1 -0
  29. package/PieChart/PieArc.js +6 -4
  30. package/PieChart/PieArcLabel.js +1 -2
  31. package/PieChart/PieChart.d.ts +5 -4
  32. package/PieChart/PieChart.js +7 -2
  33. package/PieChart/PiePlot.d.ts +8 -0
  34. package/PieChart/PiePlot.js +21 -5
  35. package/PieChart/formatter.js +1 -2
  36. package/PieChart/legend.js +1 -2
  37. package/ResponsiveChartContainer/index.js +2 -3
  38. package/ScatterChart/ScatterChart.d.ts +3 -3
  39. package/ScatterChart/ScatterChart.js +3 -2
  40. package/ScatterChart/formatter.js +1 -2
  41. package/ScatterChart/legend.js +1 -2
  42. package/SparkLineChart/SparkLineChart.d.ts +3 -3
  43. package/SparkLineChart/SparkLineChart.js +7 -3
  44. package/colorPalettes/colorPalettes.js +6 -12
  45. package/constants.js +4 -7
  46. package/context/CartesianContextProvider.js +1 -2
  47. package/context/DrawingProvider.js +2 -4
  48. package/context/HighlightProvider.js +1 -2
  49. package/context/InteractionProvider.js +1 -2
  50. package/context/SeriesContextProvider.js +1 -2
  51. package/esm/BarChart/BarChart.js +2 -0
  52. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +17 -8
  53. package/esm/ChartsTooltip/ChartsItemTooltipContent.js +15 -6
  54. package/esm/ChartsTooltip/ChartsTooltip.js +47 -12
  55. package/esm/LineChart/LineChart.js +6 -1
  56. package/esm/PieChart/PieArc.js +5 -2
  57. package/esm/PieChart/PieChart.js +7 -2
  58. package/esm/PieChart/PiePlot.js +17 -2
  59. package/esm/ScatterChart/ScatterChart.js +2 -0
  60. package/esm/SparkLineChart/SparkLineChart.js +6 -1
  61. package/hooks/useChartDimensions.js +1 -2
  62. package/hooks/useTicks.js +1 -2
  63. package/index.js +1 -1
  64. package/internals/components/AxisSharedComponents.js +6 -11
  65. package/internals/defaultizeValueFormatter.js +1 -2
  66. package/internals/stackSeries.js +2 -4
  67. package/legacy/BarChart/BarChart.js +2 -0
  68. package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +17 -8
  69. package/legacy/ChartsTooltip/ChartsItemTooltipContent.js +15 -6
  70. package/legacy/ChartsTooltip/ChartsTooltip.js +50 -12
  71. package/legacy/LineChart/LineChart.js +6 -1
  72. package/legacy/PieChart/PieArc.js +4 -1
  73. package/legacy/PieChart/PieChart.js +7 -2
  74. package/legacy/PieChart/PiePlot.js +17 -2
  75. package/legacy/ScatterChart/ScatterChart.js +2 -0
  76. package/legacy/SparkLineChart/SparkLineChart.js +6 -1
  77. package/legacy/index.js +1 -1
  78. package/modern/BarChart/BarChart.js +2 -0
  79. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +17 -8
  80. package/modern/ChartsTooltip/ChartsItemTooltipContent.js +15 -6
  81. package/modern/ChartsTooltip/ChartsTooltip.js +46 -12
  82. package/modern/LineChart/LineChart.js +6 -1
  83. package/modern/PieChart/PieArc.js +5 -2
  84. package/modern/PieChart/PieChart.js +7 -2
  85. package/modern/PieChart/PiePlot.js +17 -2
  86. package/modern/ScatterChart/ScatterChart.js +2 -0
  87. package/modern/SparkLineChart/SparkLineChart.js +6 -1
  88. package/modern/index.js +1 -1
  89. package/package.json +3 -3
@@ -36,13 +36,12 @@ const yExtremumGetters = {
36
36
  scatter: _extremums2.getExtremumY,
37
37
  line: _extremums3.getExtremumY
38
38
  };
39
- const CartesianContext = /*#__PURE__*/React.createContext({
39
+ const CartesianContext = exports.CartesianContext = /*#__PURE__*/React.createContext({
40
40
  xAxis: {},
41
41
  yAxis: {},
42
42
  xAxisIds: [],
43
43
  yAxisIds: []
44
44
  });
45
- exports.CartesianContext = CartesianContext;
46
45
  function CartesianContextProvider({
47
46
  xAxis: inXAxis,
48
47
  yAxis: inYAxis,
@@ -17,17 +17,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
17
17
  * Defines the area in which it is possible to draw the charts.
18
18
  */
19
19
 
20
- const DrawingContext = /*#__PURE__*/React.createContext({
20
+ const DrawingContext = exports.DrawingContext = /*#__PURE__*/React.createContext({
21
21
  top: 0,
22
22
  left: 0,
23
23
  height: 300,
24
24
  width: 400
25
25
  });
26
- exports.DrawingContext = DrawingContext;
27
- const SVGContext = /*#__PURE__*/React.createContext({
26
+ const SVGContext = exports.SVGContext = /*#__PURE__*/React.createContext({
28
27
  current: null
29
28
  });
30
- exports.SVGContext = SVGContext;
31
29
  function DrawingProvider({
32
30
  width,
33
31
  height,
@@ -15,12 +15,11 @@ const defaultScope = {
15
15
  highlighted: 'none',
16
16
  faded: 'none'
17
17
  };
18
- const HighlighContext = /*#__PURE__*/React.createContext({
18
+ const HighlighContext = exports.HighlighContext = /*#__PURE__*/React.createContext({
19
19
  item: null,
20
20
  scope: defaultScope,
21
21
  dispatch: () => null
22
22
  });
23
- exports.HighlighContext = HighlighContext;
24
23
  const dataReducer = (prevState, action) => {
25
24
  switch (action.type) {
26
25
  case 'enterItem':
@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
11
11
  var _jsxRuntime = require("react/jsx-runtime");
12
12
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
13
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
- const InteractionContext = /*#__PURE__*/React.createContext({
14
+ const InteractionContext = exports.InteractionContext = /*#__PURE__*/React.createContext({
15
15
  item: null,
16
16
  axis: {
17
17
  x: null,
@@ -19,7 +19,6 @@ const InteractionContext = /*#__PURE__*/React.createContext({
19
19
  },
20
20
  dispatch: () => null
21
21
  });
22
- exports.InteractionContext = InteractionContext;
23
22
  const dataReducer = (prevState, action) => {
24
23
  switch (action.type) {
25
24
  case 'enterItem':
@@ -18,8 +18,7 @@ var _colorPalettes = require("../colorPalettes");
18
18
  var _jsxRuntime = require("react/jsx-runtime");
19
19
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
20
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
- const SeriesContext = /*#__PURE__*/React.createContext({});
22
- exports.SeriesContext = SeriesContext;
21
+ const SeriesContext = exports.SeriesContext = /*#__PURE__*/React.createContext({});
23
22
  const seriesTypeFormatter = {
24
23
  bar: _formatter.default,
25
24
  scatter: _formatter2.default,
@@ -244,6 +244,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
244
244
  axisContent: PropTypes.elementType,
245
245
  classes: PropTypes.object,
246
246
  itemContent: PropTypes.elementType,
247
+ slotProps: PropTypes.object,
248
+ slots: PropTypes.object,
247
249
  trigger: PropTypes.oneOf(['axis', 'item', 'none'])
248
250
  }),
249
251
  /**
@@ -1,5 +1,7 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
1
2
  import * as React from 'react';
2
3
  import Typography from '@mui/material/Typography';
4
+ import { useSlotProps } from '@mui/base/utils';
3
5
  import { SeriesContext } from '../context/SeriesContextProvider';
4
6
  import { CartesianContext } from '../context/CartesianContextProvider';
5
7
  import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
@@ -67,6 +69,7 @@ export function DefaultChartsAxisContent(props) {
67
69
  export function ChartsAxisTooltipContent(props) {
68
70
  const {
69
71
  content,
72
+ contentProps,
70
73
  axisData,
71
74
  sx,
72
75
  classes
@@ -99,13 +102,19 @@ export function ChartsAxisTooltipContent(props) {
99
102
  return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
100
103
  }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
101
104
  const Content = content != null ? content : DefaultChartsAxisContent;
102
- return /*#__PURE__*/_jsx(Content, {
103
- axisData: axisData,
104
- series: relevantSeries,
105
- axis: relevantAxis,
106
- dataIndex: dataIndex,
107
- axisValue: axisValue,
108
- sx: sx,
109
- classes: classes
105
+ const chartTooltipContentProps = useSlotProps({
106
+ elementType: Content,
107
+ externalSlotProps: contentProps,
108
+ additionalProps: {
109
+ axisData,
110
+ series: relevantSeries,
111
+ axis: relevantAxis,
112
+ dataIndex,
113
+ axisValue,
114
+ sx,
115
+ classes
116
+ },
117
+ ownerState: {}
110
118
  });
119
+ return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
111
120
  }
@@ -1,4 +1,6 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
1
2
  import * as React from 'react';
3
+ import { useSlotProps } from '@mui/base/utils';
2
4
  import { SeriesContext } from '../context/SeriesContextProvider';
3
5
  import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
4
6
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -57,14 +59,21 @@ export function ChartsItemTooltipContent(props) {
57
59
  content,
58
60
  itemData,
59
61
  sx,
60
- classes
62
+ classes,
63
+ contentProps
61
64
  } = props;
62
65
  const series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
63
66
  const Content = content != null ? content : DefaultChartsItemContent;
64
- return /*#__PURE__*/_jsx(Content, {
65
- itemData: itemData,
66
- series: series,
67
- sx: sx,
68
- classes: classes
67
+ const chartTooltipContentProps = useSlotProps({
68
+ elementType: Content,
69
+ externalSlotProps: contentProps,
70
+ additionalProps: {
71
+ itemData,
72
+ series,
73
+ sx,
74
+ classes
75
+ },
76
+ ownerState: {}
69
77
  });
78
+ return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
70
79
  }
@@ -1,8 +1,11 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
1
2
  import * as React from 'react';
2
3
  import PropTypes from 'prop-types';
3
- import { unstable_composeClasses as composeClasses } from '@mui/utils';
4
+ import composeClasses from '@mui/utils/composeClasses';
5
+ import { styled } from '@mui/material/styles';
4
6
  import { Popper } from '@mui/base/Popper';
5
7
  import { NoSsr } from '@mui/base/NoSsr';
8
+ import { useSlotProps } from '@mui/base/utils';
6
9
  import { InteractionContext } from '../context/InteractionProvider';
7
10
  import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
8
11
  import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
@@ -21,11 +24,24 @@ const useUtilityClasses = ownerState => {
21
24
  };
22
25
  return composeClasses(slots, getTooltipUtilityClass, classes);
23
26
  };
27
+ const ChartsTooltipRoot = styled(Popper, {
28
+ name: 'MuiChartsTooltip',
29
+ slot: 'Root',
30
+ overridesResolver: (_, styles) => styles.root
31
+ })(({
32
+ theme
33
+ }) => ({
34
+ pointerEvents: 'none',
35
+ zIndex: theme.zIndex.modal
36
+ }));
24
37
  function ChartsTooltip(props) {
38
+ var _slots$popper, _slots$itemContent, _slots$axisContent;
25
39
  const {
26
40
  trigger = 'axis',
27
41
  itemContent,
28
- axisContent
42
+ axisContent,
43
+ slots,
44
+ slotProps
29
45
  } = props;
30
46
  const mousePosition = useMouseTracker();
31
47
  const {
@@ -38,33 +54,40 @@ function ChartsTooltip(props) {
38
54
  const classes = useUtilityClasses({
39
55
  classes: props.classes
40
56
  });
57
+ const PopperComponent = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : ChartsTooltipRoot;
58
+ const popperProps = useSlotProps({
59
+ elementType: PopperComponent,
60
+ externalSlotProps: slotProps == null ? void 0 : slotProps.popper,
61
+ additionalProps: {
62
+ open: popperOpen,
63
+ placement: 'right-start',
64
+ anchorEl: generateVirtualElement(mousePosition)
65
+ },
66
+ ownerState: {}
67
+ });
41
68
  if (trigger === 'none') {
42
69
  return null;
43
70
  }
44
71
  return /*#__PURE__*/_jsx(NoSsr, {
45
- children: popperOpen && /*#__PURE__*/_jsx(Popper, {
46
- open: popperOpen,
47
- placement: "right-start",
48
- anchorEl: generateVirtualElement(mousePosition),
49
- style: {
50
- pointerEvents: 'none'
51
- },
72
+ children: popperOpen && /*#__PURE__*/_jsx(PopperComponent, _extends({}, popperProps, {
52
73
  children: trigger === 'item' ? /*#__PURE__*/_jsx(ChartsItemTooltipContent, {
53
74
  itemData: displayedData,
54
- content: itemContent,
75
+ content: (_slots$itemContent = slots == null ? void 0 : slots.itemContent) != null ? _slots$itemContent : itemContent,
76
+ contentProps: slotProps == null ? void 0 : slotProps.itemContent,
55
77
  sx: {
56
78
  mx: 2
57
79
  },
58
80
  classes: classes
59
81
  }) : /*#__PURE__*/_jsx(ChartsAxisTooltipContent, {
60
82
  axisData: displayedData,
61
- content: axisContent,
83
+ content: (_slots$axisContent = slots == null ? void 0 : slots.axisContent) != null ? _slots$axisContent : axisContent,
84
+ contentProps: slotProps == null ? void 0 : slotProps.axisContent,
62
85
  sx: {
63
86
  mx: 2
64
87
  },
65
88
  classes: classes
66
89
  })
67
- })
90
+ }))
68
91
  });
69
92
  }
70
93
  process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
@@ -74,6 +97,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
74
97
  // ----------------------------------------------------------------------
75
98
  /**
76
99
  * Component to override the tooltip content when triger is set to 'axis'.
100
+ * @deprecated Use slots.axisContent instead
77
101
  */
78
102
  axisContent: PropTypes.elementType,
79
103
  /**
@@ -82,8 +106,19 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
82
106
  classes: PropTypes.object,
83
107
  /**
84
108
  * Component to override the tooltip content when triger is set to 'item'.
109
+ * @deprecated Use slots.itemContent instead
85
110
  */
86
111
  itemContent: PropTypes.elementType,
112
+ /**
113
+ * The props used for each component slot.
114
+ * @default {}
115
+ */
116
+ slotProps: PropTypes.object,
117
+ /**
118
+ * Overridable component slots.
119
+ * @default {}
120
+ */
121
+ slots: PropTypes.object,
87
122
  /**
88
123
  * Select the kind of tooltip to display
89
124
  * - 'item': Shows data about the item below the mouse.
@@ -91,7 +91,10 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
91
91
  }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
92
92
  slots: slots,
93
93
  slotProps: slotProps
94
- })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
94
+ })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
95
+ slots: slots,
96
+ slotProps: slotProps
97
+ })), /*#__PURE__*/_jsx(ChartsClipPath, {
95
98
  id: clipPathId
96
99
  }), children]
97
100
  });
@@ -250,6 +253,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
250
253
  axisContent: PropTypes.elementType,
251
254
  classes: PropTypes.object,
252
255
  itemContent: PropTypes.elementType,
256
+ slotProps: PropTypes.object,
257
+ slots: PropTypes.object,
253
258
  trigger: PropTypes.oneOf(['axis', 'item', 'none'])
254
259
  }),
255
260
  /**
@@ -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", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded"];
3
+ const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded", "onClick"];
4
4
  import * as React from 'react';
5
5
  import { arc as d3Arc } from 'd3-shape';
6
6
  import PropTypes from 'prop-types';
@@ -55,7 +55,8 @@ export default function PieArc(props) {
55
55
  highlighted,
56
56
  faded = {
57
57
  additionalRadius: -5
58
- }
58
+ },
59
+ onClick
59
60
  } = props,
60
61
  other = _objectWithoutPropertiesLoose(props, _excluded);
61
62
  const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -92,6 +93,8 @@ export default function PieArc(props) {
92
93
  innerRadius,
93
94
  outerRadius
94
95
  })),
96
+ onClick: onClick,
97
+ cursor: onClick ? 'pointer' : 'unset',
95
98
  ownerState: ownerState,
96
99
  className: classes.root
97
100
  }, getInteractionItemProps({
@@ -46,7 +46,8 @@ function PieChart(props) {
46
46
  bottomAxis = null,
47
47
  children,
48
48
  slots,
49
- slotProps
49
+ slotProps,
50
+ onClick
50
51
  } = props;
51
52
  const margin = _extends({}, defaultMargin, marginProps);
52
53
  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
@@ -74,7 +75,8 @@ function PieChart(props) {
74
75
  slotProps: slotProps
75
76
  }), /*#__PURE__*/_jsx(PiePlot, {
76
77
  slots: slots,
77
- slotProps: slotProps
78
+ slotProps: slotProps,
79
+ onClick: onClick
78
80
  }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
79
81
  slots: slots,
80
82
  slotProps: slotProps
@@ -170,6 +172,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
170
172
  right: PropTypes.number,
171
173
  top: PropTypes.number
172
174
  }),
175
+ onClick: PropTypes.func,
173
176
  /**
174
177
  * Indicate which axis to display the right of the charts.
175
178
  * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -244,6 +247,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
244
247
  axisContent: PropTypes.elementType,
245
248
  classes: PropTypes.object,
246
249
  itemContent: PropTypes.elementType,
250
+ slotProps: PropTypes.object,
251
+ slots: PropTypes.object,
247
252
  trigger: PropTypes.oneOf(['axis', 'item', 'none'])
248
253
  }),
249
254
  /**
@@ -27,7 +27,8 @@ function PiePlot(props) {
27
27
  var _slots$pieArc, _slots$pieArcLabel;
28
28
  const {
29
29
  slots,
30
- slotProps
30
+ slotProps,
31
+ onClick
31
32
  } = props;
32
33
  const seriesData = React.useContext(SeriesContext).pie;
33
34
  const {
@@ -78,7 +79,14 @@ function PiePlot(props) {
78
79
  dataIndex: index,
79
80
  highlightScope: series[seriesId].highlightScope,
80
81
  highlighted: highlighted,
81
- faded: faded
82
+ faded: faded,
83
+ onClick: onClick && (event => {
84
+ onClick(event, {
85
+ type: 'pie',
86
+ seriesId,
87
+ dataIndex: index
88
+ }, item);
89
+ })
82
90
  }, slotProps == null ? void 0 : slotProps.pieArc));
83
91
  }), data.map((item, index) => {
84
92
  return /*#__PURE__*/_createElement(ArcLabel, _extends({}, item, {
@@ -103,6 +111,13 @@ process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
103
111
  // | These PropTypes are generated from the TypeScript type definitions |
104
112
  // | To update them edit the TypeScript types and run "yarn proptypes" |
105
113
  // ----------------------------------------------------------------------
114
+ /**
115
+ * Callback fired when a pie item is clicked.
116
+ * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
117
+ * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
118
+ * @param {DefaultizedPieValueType} item The pie item.
119
+ */
120
+ onClick: PropTypes.func,
106
121
  /**
107
122
  * The props used for each component slot.
108
123
  * @default {}
@@ -210,6 +210,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
210
210
  axisContent: PropTypes.elementType,
211
211
  classes: PropTypes.object,
212
212
  itemContent: PropTypes.elementType,
213
+ slotProps: PropTypes.object,
214
+ slots: PropTypes.object,
213
215
  trigger: PropTypes.oneOf(['axis', 'item', 'none'])
214
216
  }),
215
217
  /**
@@ -84,7 +84,10 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
84
84
  slots: slots,
85
85
  slotProps: slotProps
86
86
  })]
87
- }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
87
+ }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
88
+ slotProps: slotProps,
89
+ slots: slots
90
+ })), children]
88
91
  });
89
92
  });
90
93
  process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
@@ -159,6 +162,8 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
159
162
  axisContent: PropTypes.elementType,
160
163
  classes: PropTypes.object,
161
164
  itemContent: PropTypes.elementType,
165
+ slotProps: PropTypes.object,
166
+ slots: PropTypes.object,
162
167
  trigger: PropTypes.oneOf(['axis', 'item', 'none'])
163
168
  }),
164
169
  /**
@@ -20,5 +20,4 @@ const useChartDimensions = (width, height, margin) => {
20
20
  }), [width, height, defaultizedMargin.top, defaultizedMargin.bottom, defaultizedMargin.left, defaultizedMargin.right]);
21
21
  return drawingArea;
22
22
  };
23
- var _default = useChartDimensions;
24
- exports.default = _default;
23
+ var _default = exports.default = useChartDimensions;
package/hooks/useTicks.js CHANGED
@@ -59,5 +59,4 @@ function useTicks(options) {
59
59
  }));
60
60
  }, [ticksNumber, scale, valueFormatter]);
61
61
  }
62
- var _default = useTicks;
63
- exports.default = _default;
62
+ var _default = exports.default = useTicks;
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-charts v6.0.0-alpha.12
2
+ * @mui/x-charts v6.0.0-alpha.14
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -8,7 +8,7 @@ exports.ChartsTickLabel = exports.ChartsTick = exports.ChartsLine = exports.Char
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  var _styles = require("@mui/material/styles");
10
10
  var _axisClasses = require("../../ChartsAxis/axisClasses");
11
- const AxisRoot = (0, _styles.styled)('g', {
11
+ const AxisRoot = exports.AxisRoot = (0, _styles.styled)('g', {
12
12
  name: 'MuiChartsAxis',
13
13
  slot: 'Root',
14
14
  overridesResolver: (props, styles) => styles.root
@@ -47,8 +47,7 @@ const AxisRoot = (0, _styles.styled)('g', {
47
47
  }
48
48
  }
49
49
  });
50
- exports.AxisRoot = AxisRoot;
51
- const ChartsLine = (0, _styles.styled)('line', {
50
+ const ChartsLine = exports.ChartsLine = (0, _styles.styled)('line', {
52
51
  name: 'MuiChartsAxis',
53
52
  slot: 'Line',
54
53
  overridesResolver: (props, styles) => styles.line
@@ -59,8 +58,7 @@ const ChartsLine = (0, _styles.styled)('line', {
59
58
  shapeRendering: 'crispEdges',
60
59
  strokeWidth: 1
61
60
  }));
62
- exports.ChartsLine = ChartsLine;
63
- const ChartsTick = (0, _styles.styled)('line', {
61
+ const ChartsTick = exports.ChartsTick = (0, _styles.styled)('line', {
64
62
  name: 'MuiChartsAxis',
65
63
  slot: 'Tick',
66
64
  overridesResolver: (props, styles) => styles.tick
@@ -70,8 +68,7 @@ const ChartsTick = (0, _styles.styled)('line', {
70
68
  stroke: (theme.vars || theme).palette.text.primary,
71
69
  shapeRendering: 'crispEdges'
72
70
  }));
73
- exports.ChartsTick = ChartsTick;
74
- const ChartsTickLabel = (0, _styles.styled)('text', {
71
+ const ChartsTickLabel = exports.ChartsTickLabel = (0, _styles.styled)('text', {
75
72
  name: 'MuiChartsAxis',
76
73
  slot: 'TickLabel',
77
74
  overridesResolver: (props, styles) => styles.tickLabel
@@ -80,8 +77,7 @@ const ChartsTickLabel = (0, _styles.styled)('text', {
80
77
  }) => (0, _extends2.default)({}, theme.typography.caption, {
81
78
  fill: (theme.vars || theme).palette.text.primary
82
79
  }));
83
- exports.ChartsTickLabel = ChartsTickLabel;
84
- const ChartsLabel = (0, _styles.styled)('text', {
80
+ const ChartsLabel = exports.ChartsLabel = (0, _styles.styled)('text', {
85
81
  name: 'MuiChartsAxis',
86
82
  slot: 'Label',
87
83
  overridesResolver: (props, styles) => styles.label
@@ -89,5 +85,4 @@ const ChartsLabel = (0, _styles.styled)('text', {
89
85
  theme
90
86
  }) => (0, _extends2.default)({}, theme.typography.body1, {
91
87
  fill: (theme.vars || theme).palette.text.primary
92
- }));
93
- exports.ChartsLabel = ChartsLabel;
88
+ }));
@@ -15,5 +15,4 @@ function defaultizeValueFormatter(series, defaultValueFormatter) {
15
15
  });
16
16
  return defaultizedSeries;
17
17
  }
18
- var _default = defaultizeValueFormatter;
19
- exports.default = _default;
18
+ var _default = exports.default = defaultizeValueFormatter;
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.getStackingGroups = exports.StackOrder = exports.StackOffset = void 0;
7
7
  var _d3Shape = require("d3-shape");
8
- const StackOrder = {
8
+ const StackOrder = exports.StackOrder = {
9
9
  /**
10
10
  * Series order such that the earliest series (according to the maximum value) is at the bottom.
11
11
  * */
@@ -31,8 +31,7 @@ const StackOrder = {
31
31
  */
32
32
  reverse: _d3Shape.stackOrderReverse
33
33
  };
34
- exports.StackOrder = StackOrder;
35
- const StackOffset = {
34
+ const StackOffset = exports.StackOffset = {
36
35
  /**
37
36
  * Applies a zero baseline and normalizes the values for each point such that the topline is always one.
38
37
  * */
@@ -60,7 +59,6 @@ const StackOffset = {
60
59
  * @param series the object of all bars series
61
60
  * @returns an array of groups, including the ids, the stacking order, and the stacking offset.
62
61
  */
63
- exports.StackOffset = StackOffset;
64
62
  const getStackingGroups = params => {
65
63
  const {
66
64
  series,
@@ -249,6 +249,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
249
249
  axisContent: PropTypes.elementType,
250
250
  classes: PropTypes.object,
251
251
  itemContent: PropTypes.elementType,
252
+ slotProps: PropTypes.object,
253
+ slots: PropTypes.object,
252
254
  trigger: PropTypes.oneOf(['axis', 'item', 'none'])
253
255
  }),
254
256
  /**
@@ -1,5 +1,7 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
1
2
  import * as React from 'react';
2
3
  import Typography from '@mui/material/Typography';
4
+ import { useSlotProps } from '@mui/base/utils';
3
5
  import { SeriesContext } from '../context/SeriesContextProvider';
4
6
  import { CartesianContext } from '../context/CartesianContextProvider';
5
7
  import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
@@ -67,6 +69,7 @@ export function DefaultChartsAxisContent(props) {
67
69
  }
68
70
  export function ChartsAxisTooltipContent(props) {
69
71
  var content = props.content,
72
+ contentProps = props.contentProps,
70
73
  axisData = props.axisData,
71
74
  sx = props.sx,
72
75
  classes = props.classes;
@@ -99,13 +102,19 @@ export function ChartsAxisTooltipContent(props) {
99
102
  return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
100
103
  }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
101
104
  var Content = content != null ? content : DefaultChartsAxisContent;
102
- return /*#__PURE__*/_jsx(Content, {
103
- axisData: axisData,
104
- series: relevantSeries,
105
- axis: relevantAxis,
106
- dataIndex: dataIndex,
107
- axisValue: axisValue,
108
- sx: sx,
109
- classes: classes
105
+ var chartTooltipContentProps = useSlotProps({
106
+ elementType: Content,
107
+ externalSlotProps: contentProps,
108
+ additionalProps: {
109
+ axisData: axisData,
110
+ series: relevantSeries,
111
+ axis: relevantAxis,
112
+ dataIndex: dataIndex,
113
+ axisValue: axisValue,
114
+ sx: sx,
115
+ classes: classes
116
+ },
117
+ ownerState: {}
110
118
  });
119
+ return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
111
120
  }
@@ -1,4 +1,6 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
1
2
  import * as React from 'react';
3
+ import { useSlotProps } from '@mui/base/utils';
2
4
  import { SeriesContext } from '../context/SeriesContextProvider';
3
5
  import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
4
6
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -53,13 +55,20 @@ export function ChartsItemTooltipContent(props) {
53
55
  var content = props.content,
54
56
  itemData = props.itemData,
55
57
  sx = props.sx,
56
- classes = props.classes;
58
+ classes = props.classes,
59
+ contentProps = props.contentProps;
57
60
  var series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
58
61
  var Content = content != null ? content : DefaultChartsItemContent;
59
- return /*#__PURE__*/_jsx(Content, {
60
- itemData: itemData,
61
- series: series,
62
- sx: sx,
63
- classes: classes
62
+ var chartTooltipContentProps = useSlotProps({
63
+ elementType: Content,
64
+ externalSlotProps: contentProps,
65
+ additionalProps: {
66
+ itemData: itemData,
67
+ series: series,
68
+ sx: sx,
69
+ classes: classes
70
+ },
71
+ ownerState: {}
64
72
  });
73
+ return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
65
74
  }