@mui/x-charts 7.0.0-alpha.2 → 7.0.0-alpha.4

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