@mui/x-charts 6.18.1 → 6.18.3

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 (125) hide show
  1. package/BarChart/BarElement.d.ts +5 -1
  2. package/BarChart/BarElement.js +24 -1
  3. package/BarChart/index.d.ts +3 -2
  4. package/BarChart/index.js +31 -12
  5. package/CHANGELOG.md +112 -0
  6. package/ChartsLegend/index.d.ts +1 -0
  7. package/ChartsLegend/index.js +11 -0
  8. package/ChartsTooltip/ChartsAxisTooltipContent.d.ts +6 -3
  9. package/ChartsTooltip/ChartsAxisTooltipContent.js +93 -69
  10. package/ChartsTooltip/ChartsItemTooltipContent.d.ts +6 -3
  11. package/ChartsTooltip/ChartsItemTooltipContent.js +38 -53
  12. package/ChartsTooltip/ChartsTooltip.d.ts +1 -1
  13. package/ChartsTooltip/ChartsTooltip.js +13 -5
  14. package/ChartsTooltip/ChartsTooltipTable.js +3 -3
  15. package/ChartsTooltip/DefaultChartsAxisTooltipContent.d.ts +7 -0
  16. package/ChartsTooltip/DefaultChartsAxisTooltipContent.js +174 -0
  17. package/ChartsTooltip/DefaultChartsItemTooltipContent.d.ts +8 -0
  18. package/ChartsTooltip/DefaultChartsItemTooltipContent.js +99 -0
  19. package/ChartsTooltip/chartsTooltipClasses.d.ts +21 -0
  20. package/ChartsTooltip/chartsTooltipClasses.js +12 -0
  21. package/ChartsTooltip/index.d.ts +5 -0
  22. package/ChartsTooltip/index.js +55 -0
  23. package/ChartsTooltip/utils.d.ts +1 -1
  24. package/ChartsTooltip/utils.js +2 -2
  25. package/ChartsYAxis/ChartsYAxis.js +6 -4
  26. package/LineChart/extremums.js +25 -8
  27. package/LineChart/index.d.ts +5 -5
  28. package/LineChart/index.js +50 -41
  29. package/PieChart/PieArc.d.ts +5 -2
  30. package/PieChart/PieArc.js +17 -2
  31. package/PieChart/PieArcLabel.d.ts +1 -1
  32. package/PieChart/PieArcLabel.js +5 -10
  33. package/PieChart/PieArcLabelPlot.d.ts +5 -1
  34. package/PieChart/PieArcLabelPlot.js +91 -3
  35. package/PieChart/PieArcPlot.d.ts +5 -1
  36. package/PieChart/PieArcPlot.js +90 -3
  37. package/PieChart/index.d.ts +4 -2
  38. package/PieChart/index.js +42 -18
  39. package/ScatterChart/Scatter.js +1 -1
  40. package/ScatterChart/index.d.ts +3 -3
  41. package/ScatterChart/index.js +31 -19
  42. package/esm/BarChart/BarElement.js +26 -2
  43. package/esm/BarChart/index.js +3 -2
  44. package/esm/ChartsLegend/index.js +2 -1
  45. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +95 -71
  46. package/esm/ChartsTooltip/ChartsItemTooltipContent.js +40 -54
  47. package/esm/ChartsTooltip/ChartsTooltip.js +15 -7
  48. package/esm/ChartsTooltip/ChartsTooltipTable.js +3 -3
  49. package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js +168 -0
  50. package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js +92 -0
  51. package/esm/ChartsTooltip/chartsTooltipClasses.js +5 -0
  52. package/esm/ChartsTooltip/index.js +6 -1
  53. package/esm/ChartsTooltip/utils.js +1 -1
  54. package/esm/ChartsYAxis/ChartsYAxis.js +6 -4
  55. package/esm/LineChart/extremums.js +25 -8
  56. package/esm/LineChart/index.js +5 -5
  57. package/esm/PieChart/PieArc.js +18 -2
  58. package/esm/PieChart/PieArcLabel.js +7 -11
  59. package/esm/PieChart/PieArcLabelPlot.js +92 -3
  60. package/esm/PieChart/PieArcPlot.js +91 -3
  61. package/esm/PieChart/index.js +4 -2
  62. package/esm/ScatterChart/Scatter.js +1 -1
  63. package/esm/ScatterChart/index.js +3 -3
  64. package/esm/internals/defaultizeValueFormatter.js +4 -3
  65. package/index.js +1 -1
  66. package/internals/defaultizeValueFormatter.d.ts +3 -1
  67. package/internals/defaultizeValueFormatter.js +3 -3
  68. package/legacy/BarChart/BarElement.js +26 -2
  69. package/legacy/BarChart/index.js +3 -2
  70. package/legacy/ChartsLegend/index.js +2 -1
  71. package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +95 -70
  72. package/legacy/ChartsTooltip/ChartsItemTooltipContent.js +40 -51
  73. package/legacy/ChartsTooltip/ChartsTooltip.js +20 -12
  74. package/legacy/ChartsTooltip/ChartsTooltipTable.js +3 -3
  75. package/legacy/ChartsTooltip/DefaultChartsAxisTooltipContent.js +167 -0
  76. package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js +89 -0
  77. package/legacy/ChartsTooltip/chartsTooltipClasses.js +5 -0
  78. package/legacy/ChartsTooltip/index.js +6 -1
  79. package/legacy/ChartsTooltip/utils.js +1 -1
  80. package/legacy/ChartsYAxis/ChartsYAxis.js +6 -4
  81. package/legacy/LineChart/extremums.js +29 -14
  82. package/legacy/LineChart/index.js +5 -5
  83. package/legacy/PieChart/PieArc.js +18 -2
  84. package/legacy/PieChart/PieArcLabel.js +7 -11
  85. package/legacy/PieChart/PieArcLabelPlot.js +92 -3
  86. package/legacy/PieChart/PieArcPlot.js +91 -3
  87. package/legacy/PieChart/index.js +4 -2
  88. package/legacy/ScatterChart/Scatter.js +1 -1
  89. package/legacy/ScatterChart/index.js +3 -3
  90. package/legacy/index.js +1 -1
  91. package/legacy/internals/defaultizeValueFormatter.js +4 -3
  92. package/models/seriesType/config.d.ts +5 -1
  93. package/models/seriesType/scatter.d.ts +1 -1
  94. package/modern/BarChart/BarElement.js +26 -2
  95. package/modern/BarChart/index.js +3 -2
  96. package/modern/ChartsLegend/index.js +2 -1
  97. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +95 -70
  98. package/modern/ChartsTooltip/ChartsItemTooltipContent.js +40 -54
  99. package/modern/ChartsTooltip/ChartsTooltip.js +15 -7
  100. package/modern/ChartsTooltip/ChartsTooltipTable.js +3 -3
  101. package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js +167 -0
  102. package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js +92 -0
  103. package/modern/ChartsTooltip/chartsTooltipClasses.js +5 -0
  104. package/modern/ChartsTooltip/index.js +6 -1
  105. package/modern/ChartsTooltip/utils.js +1 -1
  106. package/modern/ChartsYAxis/ChartsYAxis.js +6 -4
  107. package/modern/LineChart/extremums.js +25 -8
  108. package/modern/LineChart/index.js +5 -5
  109. package/modern/PieChart/PieArc.js +18 -2
  110. package/modern/PieChart/PieArcLabel.js +7 -11
  111. package/modern/PieChart/PieArcLabelPlot.js +92 -3
  112. package/modern/PieChart/PieArcPlot.js +91 -3
  113. package/modern/PieChart/index.js +4 -2
  114. package/modern/ScatterChart/Scatter.js +1 -1
  115. package/modern/ScatterChart/index.js +3 -3
  116. package/modern/index.js +1 -1
  117. package/modern/internals/defaultizeValueFormatter.js +3 -3
  118. package/package.json +1 -1
  119. package/themeAugmentation/components.d.ts +1 -0
  120. package/themeAugmentation/overrides.d.ts +2 -0
  121. package/ChartsTooltip/tooltipClasses.d.ts +0 -13
  122. package/ChartsTooltip/tooltipClasses.js +0 -12
  123. package/esm/ChartsTooltip/tooltipClasses.js +0 -5
  124. package/legacy/ChartsTooltip/tooltipClasses.js +0 -5
  125. package/modern/ChartsTooltip/tooltipClasses.js +0 -5
@@ -1,77 +1,12 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import * as React from 'react';
3
- import Typography from '@mui/material/Typography';
3
+ import PropTypes from 'prop-types';
4
4
  import { useSlotProps } from '@mui/base/utils';
5
5
  import { SeriesContext } from '../context/SeriesContextProvider';
6
6
  import { CartesianContext } from '../context/CartesianContextProvider';
7
- import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
7
+ import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
- import { jsxs as _jsxs } from "react/jsx-runtime";
10
- export function DefaultChartsAxisContent(props) {
11
- var _axis$valueFormatter;
12
- var series = props.series,
13
- axis = props.axis,
14
- dataIndex = props.dataIndex,
15
- axisValue = props.axisValue,
16
- sx = props.sx,
17
- classes = props.classes;
18
- if (dataIndex == null) {
19
- return null;
20
- }
21
- var axisFormatter = (_axis$valueFormatter = axis.valueFormatter) != null ? _axis$valueFormatter : function (v) {
22
- return v.toLocaleString();
23
- };
24
- return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
25
- sx: sx,
26
- className: classes.root,
27
- children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
28
- children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
29
- children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
30
- children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
31
- colSpan: 3,
32
- children: /*#__PURE__*/_jsx(Typography, {
33
- children: axisFormatter(axisValue)
34
- })
35
- })
36
- })
37
- }), /*#__PURE__*/_jsx("tbody", {
38
- children: series.map(function (_ref) {
39
- var color = _ref.color,
40
- id = _ref.id,
41
- label = _ref.label,
42
- valueFormatter = _ref.valueFormatter,
43
- data = _ref.data;
44
- var formattedValue = valueFormatter(data[dataIndex]);
45
- if (formattedValue == null) {
46
- return null;
47
- }
48
- return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
49
- children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
50
- className: classes.markCell,
51
- children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
52
- ownerState: {
53
- color: color
54
- },
55
- boxShadow: 1
56
- })
57
- }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
58
- className: classes.labelCell,
59
- children: label ? /*#__PURE__*/_jsx(Typography, {
60
- children: label
61
- }) : null
62
- }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
63
- className: classes.valueCell,
64
- children: /*#__PURE__*/_jsx(Typography, {
65
- children: formattedValue
66
- })
67
- })]
68
- }, id);
69
- })
70
- })]
71
- })
72
- });
73
- }
74
- export function ChartsAxisTooltipContent(props) {
9
+ function ChartsAxisTooltipContent(props) {
75
10
  var content = props.content,
76
11
  contentProps = props.contentProps,
77
12
  axisData = props.axisData,
@@ -105,7 +40,7 @@ export function ChartsAxisTooltipContent(props) {
105
40
  var relevantAxis = React.useMemo(function () {
106
41
  return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
107
42
  }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
108
- var Content = content != null ? content : DefaultChartsAxisContent;
43
+ var Content = content != null ? content : DefaultChartsAxisTooltipContent;
109
44
  var chartTooltipContentProps = useSlotProps({
110
45
  elementType: Content,
111
46
  externalSlotProps: contentProps,
@@ -121,4 +56,94 @@ export function ChartsAxisTooltipContent(props) {
121
56
  ownerState: {}
122
57
  });
123
58
  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
124
- }
59
+ }
60
+ process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
61
+ // ----------------------------- Warning --------------------------------
62
+ // | These PropTypes are generated from the TypeScript type definitions |
63
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
64
+ // ----------------------------------------------------------------------
65
+ axisData: PropTypes.shape({
66
+ x: PropTypes.shape({
67
+ index: PropTypes.number,
68
+ value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
69
+ }),
70
+ y: PropTypes.shape({
71
+ index: PropTypes.number,
72
+ value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
73
+ })
74
+ }).isRequired,
75
+ classes: PropTypes.object.isRequired,
76
+ content: PropTypes.elementType,
77
+ contentProps: PropTypes.shape({
78
+ axis: PropTypes.shape({
79
+ axisId: PropTypes.string,
80
+ classes: PropTypes.object,
81
+ data: PropTypes.array,
82
+ dataKey: PropTypes.string,
83
+ disableLine: PropTypes.bool,
84
+ disableTicks: PropTypes.bool,
85
+ fill: PropTypes.string,
86
+ hideTooltip: PropTypes.bool,
87
+ id: PropTypes.string.isRequired,
88
+ label: PropTypes.string,
89
+ labelFontSize: PropTypes.number,
90
+ labelStyle: PropTypes.object,
91
+ max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
92
+ min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
93
+ position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
94
+ scale: PropTypes.func.isRequired,
95
+ scaleType: PropTypes.oneOf(['time']).isRequired,
96
+ slotProps: PropTypes.object,
97
+ slots: PropTypes.object,
98
+ stroke: PropTypes.string,
99
+ tickFontSize: PropTypes.number,
100
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
101
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
102
+ tickLabelStyle: PropTypes.object,
103
+ tickMaxStep: PropTypes.number,
104
+ tickMinStep: PropTypes.number,
105
+ tickNumber: PropTypes.number.isRequired,
106
+ tickSize: PropTypes.number,
107
+ valueFormatter: PropTypes.func
108
+ }),
109
+ axisData: PropTypes.shape({
110
+ x: PropTypes.shape({
111
+ index: PropTypes.number,
112
+ value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
113
+ }),
114
+ y: PropTypes.shape({
115
+ index: PropTypes.number,
116
+ value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
117
+ })
118
+ }),
119
+ axisValue: PropTypes.any,
120
+ classes: PropTypes.object,
121
+ dataIndex: PropTypes.number,
122
+ series: PropTypes.arrayOf(PropTypes.shape({
123
+ area: PropTypes.bool,
124
+ color: PropTypes.string.isRequired,
125
+ connectNulls: PropTypes.bool,
126
+ curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
127
+ data: PropTypes.arrayOf(PropTypes.number).isRequired,
128
+ dataKey: PropTypes.string,
129
+ disableHighlight: PropTypes.bool,
130
+ highlightScope: PropTypes.shape({
131
+ faded: PropTypes.oneOf(['global', 'none', 'series']),
132
+ highlighted: PropTypes.oneOf(['item', 'none', 'series'])
133
+ }),
134
+ id: PropTypes.string.isRequired,
135
+ label: PropTypes.string,
136
+ showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
137
+ stack: PropTypes.string,
138
+ stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
139
+ stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
140
+ type: PropTypes.oneOf(['line']).isRequired,
141
+ valueFormatter: PropTypes.func.isRequired,
142
+ xAxisKey: PropTypes.string,
143
+ yAxisKey: PropTypes.string
144
+ })),
145
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
146
+ }),
147
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
148
+ } : void 0;
149
+ export { ChartsAxisTooltipContent };
@@ -1,64 +1,18 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import * as React from 'react';
3
+ import PropTypes from 'prop-types';
3
4
  import { useSlotProps } from '@mui/base/utils';
4
5
  import { SeriesContext } from '../context/SeriesContextProvider';
5
- import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
6
+ import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
- import { jsxs as _jsxs } from "react/jsx-runtime";
8
- export function DefaultChartsItemContent(props) {
9
- var series = props.series,
10
- itemData = props.itemData,
11
- sx = props.sx,
12
- classes = props.classes;
13
- if (itemData.dataIndex === undefined) {
14
- return null;
15
- }
16
- var _ref = series.type === 'pie' ? {
17
- color: series.data[itemData.dataIndex].color,
18
- displayedLabel: series.data[itemData.dataIndex].label
19
- } : {
20
- color: series.color,
21
- displayedLabel: series.label
22
- },
23
- displayedLabel = _ref.displayedLabel,
24
- color = _ref.color;
25
-
26
- // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
27
- // @ts-ignore
28
- var formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
29
- return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
30
- sx: sx,
31
- className: classes.root,
32
- children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
33
- children: /*#__PURE__*/_jsx("tbody", {
34
- children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
35
- children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
36
- className: classes.markCell,
37
- children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
38
- ownerState: {
39
- color: color
40
- }
41
- })
42
- }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
43
- className: classes.labelCell,
44
- children: displayedLabel
45
- }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
46
- className: classes.valueCell,
47
- children: formattedValue
48
- })]
49
- })
50
- })
51
- })
52
- });
53
- }
54
- export function ChartsItemTooltipContent(props) {
8
+ function ChartsItemTooltipContent(props) {
55
9
  var content = props.content,
56
10
  itemData = props.itemData,
57
11
  sx = props.sx,
58
12
  classes = props.classes,
59
13
  contentProps = props.contentProps;
60
14
  var series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
61
- var Content = content != null ? content : DefaultChartsItemContent;
15
+ var Content = content != null ? content : DefaultChartsItemTooltipContent;
62
16
  var chartTooltipContentProps = useSlotProps({
63
17
  elementType: Content,
64
18
  externalSlotProps: contentProps,
@@ -71,4 +25,39 @@ export function ChartsItemTooltipContent(props) {
71
25
  ownerState: {}
72
26
  });
73
27
  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
74
- }
28
+ }
29
+ process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
30
+ // ----------------------------- Warning --------------------------------
31
+ // | These PropTypes are generated from the TypeScript type definitions |
32
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
33
+ // ----------------------------------------------------------------------
34
+ classes: PropTypes.object.isRequired,
35
+ content: PropTypes.elementType,
36
+ contentProps: PropTypes.shape({
37
+ classes: PropTypes.object,
38
+ itemData: PropTypes.shape({
39
+ dataIndex: PropTypes.number,
40
+ seriesId: PropTypes.string.isRequired,
41
+ type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
42
+ }),
43
+ series: PropTypes.shape({
44
+ color: PropTypes.string,
45
+ data: PropTypes.arrayOf(PropTypes.number).isRequired,
46
+ highlightScope: PropTypes.shape({
47
+ faded: PropTypes.oneOf(['global', 'none', 'series']),
48
+ highlighted: PropTypes.oneOf(['item', 'none', 'series'])
49
+ }),
50
+ id: PropTypes.string.isRequired,
51
+ type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired,
52
+ valueFormatter: PropTypes.func.isRequired
53
+ }),
54
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
55
+ }),
56
+ itemData: PropTypes.shape({
57
+ dataIndex: PropTypes.number,
58
+ seriesId: PropTypes.string.isRequired,
59
+ type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
60
+ }).isRequired,
61
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
62
+ } : void 0;
63
+ export { ChartsItemTooltipContent };
@@ -2,25 +2,29 @@ import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import * as React from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import composeClasses from '@mui/utils/composeClasses';
5
- import { styled } from '@mui/material/styles';
5
+ import { styled, useThemeProps } from '@mui/material/styles';
6
6
  import { Popper } from '@mui/base/Popper';
7
7
  import { NoSsr } from '@mui/base/NoSsr';
8
8
  import { useSlotProps } from '@mui/base/utils';
9
9
  import { InteractionContext } from '../context/InteractionProvider';
10
- import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
10
+ import { generateVirtualElement, useMouseTracker, getTooltipHasData } from './utils';
11
11
  import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
12
12
  import { ChartsAxisTooltipContent } from './ChartsAxisTooltipContent';
13
- import { getTooltipUtilityClass } from './tooltipClasses';
13
+ import { getChartsTooltipUtilityClass } from './chartsTooltipClasses';
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
15
  var useUtilityClasses = function useUtilityClasses(ownerState) {
16
16
  var classes = ownerState.classes;
17
17
  var slots = {
18
18
  root: ['root'],
19
+ table: ['table'],
20
+ row: ['row'],
21
+ cell: ['cell'],
22
+ mark: ['mark'],
19
23
  markCell: ['markCell'],
20
24
  labelCell: ['labelCell'],
21
25
  valueCell: ['valueCell']
22
26
  };
23
- return composeClasses(slots, getTooltipUtilityClass, classes);
27
+ return composeClasses(slots, getChartsTooltipUtilityClass, classes);
24
28
  };
25
29
  var ChartsTooltipRoot = styled(Popper, {
26
30
  name: 'MuiChartsTooltip',
@@ -47,21 +51,25 @@ var ChartsTooltipRoot = styled(Popper, {
47
51
  */
48
52
  function ChartsTooltip(props) {
49
53
  var _slots$popper, _slots$itemContent, _slots$axisContent;
50
- var _props$trigger = props.trigger,
51
- trigger = _props$trigger === void 0 ? 'axis' : _props$trigger,
52
- itemContent = props.itemContent,
53
- axisContent = props.axisContent,
54
- slots = props.slots,
55
- slotProps = props.slotProps;
54
+ var themeProps = useThemeProps({
55
+ props: props,
56
+ name: 'MuiChartsTooltip'
57
+ });
58
+ var _themeProps$trigger = themeProps.trigger,
59
+ trigger = _themeProps$trigger === void 0 ? 'axis' : _themeProps$trigger,
60
+ itemContent = themeProps.itemContent,
61
+ axisContent = themeProps.axisContent,
62
+ slots = themeProps.slots,
63
+ slotProps = themeProps.slotProps;
56
64
  var mousePosition = useMouseTracker();
57
65
  var _React$useContext = React.useContext(InteractionContext),
58
66
  item = _React$useContext.item,
59
67
  axis = _React$useContext.axis;
60
68
  var displayedData = trigger === 'item' ? item : axis;
61
- var tooltipHasData = getTootipHasData(trigger, displayedData);
69
+ var tooltipHasData = getTooltipHasData(trigger, displayedData);
62
70
  var popperOpen = mousePosition !== null && tooltipHasData;
63
71
  var classes = useUtilityClasses({
64
- classes: props.classes
72
+ classes: themeProps.classes
65
73
  });
66
74
  var PopperComponent = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : ChartsTooltipRoot;
67
75
  var popperProps = useSlotProps({
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
2
  import Box from '@mui/system/Box';
3
3
  import { styled } from '@mui/material/styles';
4
- import { tooltipClasses } from './tooltipClasses';
4
+ import { chartsTooltipClasses } from './chartsTooltipClasses';
5
5
  export var ChartsTooltipPaper = styled('div', {
6
6
  name: 'MuiChartsTooltip',
7
7
  slot: 'Container'
@@ -50,9 +50,9 @@ export var ChartsTooltipCell = styled('td', {
50
50
  return _ref5 = {
51
51
  verticalAlign: 'middle',
52
52
  color: (theme.vars || theme).palette.text.secondary
53
- }, _defineProperty(_ref5, "&.".concat(tooltipClasses.labelCell), {
53
+ }, _defineProperty(_ref5, "&.".concat(chartsTooltipClasses.labelCell), {
54
54
  paddingLeft: theme.spacing(1)
55
- }), _defineProperty(_ref5, "&.".concat(tooltipClasses.valueCell), {
55
+ }), _defineProperty(_ref5, "&.".concat(chartsTooltipClasses.valueCell), {
56
56
  paddingLeft: theme.spacing(4),
57
57
  color: (theme.vars || theme).palette.text.primary
58
58
  }), _defineProperty(_ref5, 'td:first-of-type&', {
@@ -0,0 +1,167 @@
1
+ import * as React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import clsx from 'clsx';
4
+ import Typography from '@mui/material/Typography';
5
+ import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ function DefaultChartsAxisTooltipContent(props) {
9
+ var _axis$valueFormatter;
10
+ var series = props.series,
11
+ axis = props.axis,
12
+ dataIndex = props.dataIndex,
13
+ axisValue = props.axisValue,
14
+ sx = props.sx,
15
+ classes = props.classes;
16
+ if (dataIndex == null) {
17
+ return null;
18
+ }
19
+ var axisFormatter = (_axis$valueFormatter = axis.valueFormatter) != null ? _axis$valueFormatter : function (v) {
20
+ return v.toLocaleString();
21
+ };
22
+ return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
23
+ sx: sx,
24
+ className: classes.root,
25
+ children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
26
+ className: classes.table,
27
+ children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
28
+ children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
29
+ children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
30
+ colSpan: 3,
31
+ children: /*#__PURE__*/_jsx(Typography, {
32
+ children: axisFormatter(axisValue)
33
+ })
34
+ })
35
+ })
36
+ }), /*#__PURE__*/_jsx("tbody", {
37
+ children: series.map(function (_ref) {
38
+ var color = _ref.color,
39
+ id = _ref.id,
40
+ label = _ref.label,
41
+ valueFormatter = _ref.valueFormatter,
42
+ data = _ref.data;
43
+ var formattedValue = valueFormatter(data[dataIndex]);
44
+ if (formattedValue == null) {
45
+ return null;
46
+ }
47
+ return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
48
+ className: classes.row,
49
+ children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
50
+ className: clsx(classes.markCell, classes.cell),
51
+ children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
52
+ ownerState: {
53
+ color: color
54
+ },
55
+ boxShadow: 1,
56
+ className: classes.mark
57
+ })
58
+ }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
59
+ className: clsx(classes.labelCell, classes.cell),
60
+ children: label ? /*#__PURE__*/_jsx(Typography, {
61
+ children: label
62
+ }) : null
63
+ }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
64
+ className: clsx(classes.valueCell, classes.cell),
65
+ children: /*#__PURE__*/_jsx(Typography, {
66
+ children: formattedValue
67
+ })
68
+ })]
69
+ }, id);
70
+ })
71
+ })]
72
+ })
73
+ });
74
+ }
75
+ process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propTypes = {
76
+ // ----------------------------- Warning --------------------------------
77
+ // | These PropTypes are generated from the TypeScript type definitions |
78
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
79
+ // ----------------------------------------------------------------------
80
+ /**
81
+ * The properties of the triggered axis.
82
+ */
83
+ axis: PropTypes.shape({
84
+ axisId: PropTypes.string,
85
+ classes: PropTypes.object,
86
+ data: PropTypes.array,
87
+ dataKey: PropTypes.string,
88
+ disableLine: PropTypes.bool,
89
+ disableTicks: PropTypes.bool,
90
+ fill: PropTypes.string,
91
+ hideTooltip: PropTypes.bool,
92
+ id: PropTypes.string.isRequired,
93
+ label: PropTypes.string,
94
+ labelFontSize: PropTypes.number,
95
+ labelStyle: PropTypes.object,
96
+ max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
97
+ min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
98
+ position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
99
+ scale: PropTypes.func.isRequired,
100
+ scaleType: PropTypes.oneOf(['time']).isRequired,
101
+ slotProps: PropTypes.object,
102
+ slots: PropTypes.object,
103
+ stroke: PropTypes.string,
104
+ tickFontSize: PropTypes.number,
105
+ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
106
+ tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
107
+ tickLabelStyle: PropTypes.object,
108
+ tickMaxStep: PropTypes.number,
109
+ tickMinStep: PropTypes.number,
110
+ tickNumber: PropTypes.number.isRequired,
111
+ tickSize: PropTypes.number,
112
+ valueFormatter: PropTypes.func
113
+ }).isRequired,
114
+ /**
115
+ * Data identifying the triggered axis.
116
+ */
117
+ axisData: PropTypes.shape({
118
+ x: PropTypes.shape({
119
+ index: PropTypes.number,
120
+ value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
121
+ }),
122
+ y: PropTypes.shape({
123
+ index: PropTypes.number,
124
+ value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
125
+ })
126
+ }).isRequired,
127
+ /**
128
+ * The value associated to the current mouse position.
129
+ */
130
+ axisValue: PropTypes.any.isRequired,
131
+ /**
132
+ * Override or extend the styles applied to the component.
133
+ */
134
+ classes: PropTypes.object.isRequired,
135
+ /**
136
+ * The index of the data item triggered.
137
+ */
138
+ dataIndex: PropTypes.number,
139
+ /**
140
+ * The series linked to the triggered axis.
141
+ */
142
+ series: PropTypes.arrayOf(PropTypes.shape({
143
+ area: PropTypes.bool,
144
+ color: PropTypes.string.isRequired,
145
+ connectNulls: PropTypes.bool,
146
+ curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
147
+ data: PropTypes.arrayOf(PropTypes.number).isRequired,
148
+ dataKey: PropTypes.string,
149
+ disableHighlight: PropTypes.bool,
150
+ highlightScope: PropTypes.shape({
151
+ faded: PropTypes.oneOf(['global', 'none', 'series']),
152
+ highlighted: PropTypes.oneOf(['item', 'none', 'series'])
153
+ }),
154
+ id: PropTypes.string.isRequired,
155
+ label: PropTypes.string,
156
+ showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
157
+ stack: PropTypes.string,
158
+ stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
159
+ stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
160
+ type: PropTypes.oneOf(['line']).isRequired,
161
+ valueFormatter: PropTypes.func.isRequired,
162
+ xAxisKey: PropTypes.string,
163
+ yAxisKey: PropTypes.string
164
+ })).isRequired,
165
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
166
+ } : void 0;
167
+ export { DefaultChartsAxisTooltipContent };
@@ -0,0 +1,89 @@
1
+ import * as React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import clsx from 'clsx';
4
+ import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { jsxs as _jsxs } from "react/jsx-runtime";
7
+ function DefaultChartsItemTooltipContent(props) {
8
+ var series = props.series,
9
+ itemData = props.itemData,
10
+ sx = props.sx,
11
+ classes = props.classes;
12
+ if (itemData.dataIndex === undefined) {
13
+ return null;
14
+ }
15
+ var _ref = series.type === 'pie' ? {
16
+ color: series.data[itemData.dataIndex].color,
17
+ displayedLabel: series.data[itemData.dataIndex].label
18
+ } : {
19
+ color: series.color,
20
+ displayedLabel: series.label
21
+ },
22
+ displayedLabel = _ref.displayedLabel,
23
+ color = _ref.color;
24
+
25
+ // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
26
+ // @ts-ignore
27
+ var formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
28
+ return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
29
+ sx: sx,
30
+ className: classes.root,
31
+ children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
32
+ className: classes.table,
33
+ children: /*#__PURE__*/_jsx("tbody", {
34
+ children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
35
+ className: classes.row,
36
+ children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
37
+ className: clsx(classes.markCell, classes.cell),
38
+ children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
39
+ ownerState: {
40
+ color: color
41
+ },
42
+ className: classes.mark
43
+ })
44
+ }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
45
+ className: clsx(classes.labelCell, classes.cell),
46
+ children: displayedLabel
47
+ }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
48
+ className: clsx(classes.valueCell, classes.cell),
49
+ children: formattedValue
50
+ })]
51
+ })
52
+ })
53
+ })
54
+ });
55
+ }
56
+ process.env.NODE_ENV !== "production" ? DefaultChartsItemTooltipContent.propTypes = {
57
+ // ----------------------------- Warning --------------------------------
58
+ // | These PropTypes are generated from the TypeScript type definitions |
59
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
60
+ // ----------------------------------------------------------------------
61
+ /**
62
+ * Override or extend the styles applied to the component.
63
+ */
64
+ classes: PropTypes.object.isRequired,
65
+ /**
66
+ * The data used to identify the triggered item.
67
+ */
68
+ itemData: PropTypes.shape({
69
+ dataIndex: PropTypes.number,
70
+ seriesId: PropTypes.string.isRequired,
71
+ type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
72
+ }).isRequired,
73
+ /**
74
+ * The series linked to the triggered axis.
75
+ */
76
+ series: PropTypes.shape({
77
+ color: PropTypes.string,
78
+ data: PropTypes.arrayOf(PropTypes.number).isRequired,
79
+ highlightScope: PropTypes.shape({
80
+ faded: PropTypes.oneOf(['global', 'none', 'series']),
81
+ highlighted: PropTypes.oneOf(['item', 'none', 'series'])
82
+ }),
83
+ id: PropTypes.string.isRequired,
84
+ type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired,
85
+ valueFormatter: PropTypes.func.isRequired
86
+ }).isRequired,
87
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
88
+ } : void 0;
89
+ export { DefaultChartsItemTooltipContent };
@@ -0,0 +1,5 @@
1
+ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
2
+ export function getChartsTooltipUtilityClass(slot) {
3
+ return generateUtilityClass('MuiChartsTooltip', slot);
4
+ }
5
+ export var chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);
@@ -1 +1,6 @@
1
- export * from './ChartsTooltip';
1
+ export * from './ChartsTooltip';
2
+ export * from './chartsTooltipClasses';
3
+ export * from './ChartsAxisTooltipContent';
4
+ export * from './ChartsItemTooltipContent';
5
+ export * from './DefaultChartsAxisTooltipContent';
6
+ export * from './DefaultChartsItemTooltipContent';
@@ -81,7 +81,7 @@ export function useMouseTracker() {
81
81
  }, [svgRef]);
82
82
  return mousePosition;
83
83
  }
84
- export function getTootipHasData(trigger, displayedData) {
84
+ export function getTooltipHasData(trigger, displayedData) {
85
85
  if (trigger === 'item') {
86
86
  return displayedData !== null;
87
87
  }