@mui/x-charts 7.0.0-alpha.2 → 7.0.0-alpha.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 (100) 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 +241 -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/ChartsYAxis/ChartsYAxis.js +6 -4
  19. package/LineChart/extremums.js +25 -8
  20. package/LineChart/index.d.ts +1 -1
  21. package/LineChart/index.js +11 -11
  22. package/PieChart/PieArc.d.ts +5 -2
  23. package/PieChart/PieArc.js +17 -2
  24. package/PieChart/PieArcLabel.d.ts +1 -1
  25. package/PieChart/PieArcLabel.js +5 -10
  26. package/PieChart/PieArcLabelPlot.d.ts +5 -1
  27. package/PieChart/PieArcLabelPlot.js +91 -3
  28. package/PieChart/PieArcPlot.d.ts +5 -1
  29. package/PieChart/PieArcPlot.js +90 -3
  30. package/PieChart/index.d.ts +3 -1
  31. package/PieChart/index.js +26 -4
  32. package/README.md +0 -1
  33. package/ScatterChart/Scatter.js +1 -1
  34. package/ScatterChart/index.d.ts +1 -1
  35. package/ScatterChart/index.js +8 -8
  36. package/esm/BarChart/BarElement.js +26 -2
  37. package/esm/BarChart/index.js +2 -1
  38. package/esm/ChartsLegend/index.js +2 -1
  39. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +95 -75
  40. package/esm/ChartsTooltip/ChartsItemTooltipContent.js +40 -58
  41. package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js +168 -0
  42. package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js +92 -0
  43. package/esm/ChartsTooltip/index.js +5 -1
  44. package/esm/ChartsYAxis/ChartsYAxis.js +6 -4
  45. package/esm/LineChart/extremums.js +25 -8
  46. package/esm/LineChart/index.js +1 -1
  47. package/esm/PieChart/PieArc.js +18 -2
  48. package/esm/PieChart/PieArcLabel.js +7 -11
  49. package/esm/PieChart/PieArcLabelPlot.js +92 -3
  50. package/esm/PieChart/PieArcPlot.js +91 -3
  51. package/esm/PieChart/index.js +3 -1
  52. package/esm/ScatterChart/Scatter.js +1 -1
  53. package/esm/ScatterChart/index.js +1 -1
  54. package/esm/internals/defaultizeValueFormatter.js +4 -3
  55. package/index.js +1 -1
  56. package/internals/defaultizeValueFormatter.d.ts +3 -1
  57. package/internals/defaultizeValueFormatter.js +3 -3
  58. package/legacy/BarChart/BarElement.js +26 -2
  59. package/legacy/BarChart/index.js +2 -1
  60. package/legacy/ChartsLegend/index.js +2 -1
  61. package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +95 -74
  62. package/legacy/ChartsTooltip/ChartsItemTooltipContent.js +40 -55
  63. package/legacy/ChartsTooltip/DefaultChartsAxisTooltipContent.js +167 -0
  64. package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js +89 -0
  65. package/legacy/ChartsTooltip/index.js +5 -1
  66. package/legacy/ChartsYAxis/ChartsYAxis.js +6 -4
  67. package/legacy/LineChart/extremums.js +29 -14
  68. package/legacy/LineChart/index.js +1 -1
  69. package/legacy/PieChart/PieArc.js +18 -2
  70. package/legacy/PieChart/PieArcLabel.js +7 -11
  71. package/legacy/PieChart/PieArcLabelPlot.js +92 -3
  72. package/legacy/PieChart/PieArcPlot.js +91 -3
  73. package/legacy/PieChart/index.js +3 -1
  74. package/legacy/ScatterChart/Scatter.js +1 -1
  75. package/legacy/ScatterChart/index.js +1 -1
  76. package/legacy/index.js +1 -1
  77. package/legacy/internals/defaultizeValueFormatter.js +4 -3
  78. package/models/seriesType/config.d.ts +5 -1
  79. package/models/seriesType/scatter.d.ts +1 -1
  80. package/modern/BarChart/BarElement.js +26 -2
  81. package/modern/BarChart/index.js +2 -1
  82. package/modern/ChartsLegend/index.js +2 -1
  83. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +95 -74
  84. package/modern/ChartsTooltip/ChartsItemTooltipContent.js +40 -58
  85. package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js +167 -0
  86. package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js +92 -0
  87. package/modern/ChartsTooltip/index.js +5 -1
  88. package/modern/ChartsYAxis/ChartsYAxis.js +6 -4
  89. package/modern/LineChart/extremums.js +25 -8
  90. package/modern/LineChart/index.js +1 -1
  91. package/modern/PieChart/PieArc.js +18 -2
  92. package/modern/PieChart/PieArcLabel.js +7 -11
  93. package/modern/PieChart/PieArcLabelPlot.js +92 -3
  94. package/modern/PieChart/PieArcPlot.js +91 -3
  95. package/modern/PieChart/index.js +3 -1
  96. package/modern/ScatterChart/Scatter.js +1 -1
  97. package/modern/ScatterChart/index.js +1 -1
  98. package/modern/index.js +1 -1
  99. package/modern/internals/defaultizeValueFormatter.js +3 -3
  100. package/package.json +2 -2
@@ -1,4 +1,6 @@
1
- export * from './PiePlot';
2
1
  export * from './PieChart';
2
+ export * from './PiePlot';
3
+ export * from './PieArcPlot';
4
+ export * from './PieArcLabelPlot';
3
5
  export * from './PieArc';
4
6
  export * from './PieArcLabel';
@@ -78,7 +78,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
78
78
  color: PropTypes.string.isRequired,
79
79
  markerSize: PropTypes.number.isRequired,
80
80
  series: PropTypes.shape({
81
- color: PropTypes.string,
81
+ color: PropTypes.string.isRequired,
82
82
  data: PropTypes.arrayOf(PropTypes.shape({
83
83
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
84
84
  x: PropTypes.number.isRequired,
@@ -1,3 +1,3 @@
1
- export * from './ScatterPlot';
2
1
  export * from './ScatterChart';
2
+ export * from './ScatterPlot';
3
3
  export * from './Scatter';
package/legacy/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-charts v7.0.0-alpha.2
2
+ * @mui/x-charts v7.0.0-alpha.3
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  function defaultizeValueFormatter(series, defaultValueFormatter) {
3
3
  var defaultizedSeries = {};
4
4
  Object.keys(series).forEach(function (seriesId) {
5
- defaultizedSeries[seriesId] = _extends({
6
- valueFormatter: defaultValueFormatter
7
- }, series[seriesId]);
5
+ var _series$seriesId$valu;
6
+ defaultizedSeries[seriesId] = _extends({}, series[seriesId], {
7
+ valueFormatter: (_series$seriesId$valu = series[seriesId].valueFormatter) != null ? _series$seriesId$valu : defaultValueFormatter
8
+ });
8
9
  });
9
10
  return defaultizedSeries;
10
11
  }
@@ -46,7 +46,11 @@ export type ChartSeries<T extends ChartSeriesType> = ChartsSeriesConfig[T] exten
46
46
  } ? ChartsSeriesConfig[T]['seriesInput'] & {
47
47
  stackedData: [number, number][];
48
48
  } : ChartsSeriesConfig[T]['seriesInput'];
49
- export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConfig[T]['series'] & ChartSeries<T>;
49
+ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConfig[T] extends {
50
+ canBeStacked: true;
51
+ } ? ChartsSeriesConfig[T]['series'] & {
52
+ stackedData: [number, number][];
53
+ } : ChartsSeriesConfig[T]['series'];
50
54
  export type ChartItemIdentifier<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
51
55
  type ExtremumGetterParams<T extends ChartSeriesType> = {
52
56
  series: {
@@ -20,5 +20,5 @@ export type ScatterItemIdentifier = {
20
20
  seriesId: DefaultizedScatterSeriesType['id'];
21
21
  dataIndex: number;
22
22
  };
23
- export interface DefaultizedScatterSeriesType extends DefaultizedProps<ScatterSeriesType, CommonDefaultizedProps> {
23
+ export interface DefaultizedScatterSeriesType extends DefaultizedProps<ScatterSeriesType, CommonDefaultizedProps | 'color'> {
24
24
  }
@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
3
  const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style"];
4
4
  import * as React from 'react';
5
+ import PropTypes from 'prop-types';
5
6
  import composeClasses from '@mui/utils/composeClasses';
6
7
  import { useSlotProps } from '@mui/base/utils';
7
8
  import generateUtilityClass from '@mui/utils/generateUtilityClass';
@@ -39,7 +40,7 @@ export const BarElementPath = styled(animated.rect, {
39
40
  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
40
41
  opacity: ownerState.isFaded && 0.3 || 1
41
42
  }));
42
- export function BarElement(props) {
43
+ function BarElement(props) {
43
44
  const {
44
45
  id,
45
46
  dataIndex,
@@ -89,4 +90,27 @@ export function BarElement(props) {
89
90
  ownerState
90
91
  });
91
92
  return /*#__PURE__*/_jsx(Bar, _extends({}, barProps));
92
- }
93
+ }
94
+ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
95
+ // ----------------------------- Warning --------------------------------
96
+ // | These PropTypes are generated from the TypeScript type definitions |
97
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
98
+ // ----------------------------------------------------------------------
99
+ classes: PropTypes.object,
100
+ dataIndex: PropTypes.number.isRequired,
101
+ highlightScope: PropTypes.shape({
102
+ faded: PropTypes.oneOf(['global', 'none', 'series']),
103
+ highlighted: PropTypes.oneOf(['item', 'none', 'series'])
104
+ }),
105
+ /**
106
+ * The props used for each component slot.
107
+ * @default {}
108
+ */
109
+ slotProps: PropTypes.object,
110
+ /**
111
+ * Overridable component slots.
112
+ * @default {}
113
+ */
114
+ slots: PropTypes.object
115
+ } : void 0;
116
+ export { BarElement };
@@ -1,2 +1,3 @@
1
+ export * from './BarChart';
1
2
  export * from './BarPlot';
2
- export * from './BarChart';
3
+ export * from './BarElement';
@@ -1,2 +1,3 @@
1
1
  export * from './ChartsLegend';
2
- export * from './chartsLegendClasses';
2
+ export * from './chartsLegendClasses';
3
+ export * from './utils';
@@ -1,81 +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
- const {
13
- series,
14
- axis,
15
- dataIndex,
16
- axisValue,
17
- sx,
18
- classes
19
- } = props;
20
- if (dataIndex == null) {
21
- return null;
22
- }
23
- const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
24
- return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
25
- sx: sx,
26
- className: classes.root,
27
- children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
28
- className: classes.table,
29
- children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
30
- children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
31
- children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
32
- colSpan: 3,
33
- children: /*#__PURE__*/_jsx(Typography, {
34
- children: axisFormatter(axisValue)
35
- })
36
- })
37
- })
38
- }), /*#__PURE__*/_jsx("tbody", {
39
- children: series.map(({
40
- color,
41
- id,
42
- label,
43
- valueFormatter,
44
- data
45
- }) => {
46
- const formattedValue = valueFormatter(data[dataIndex]);
47
- if (formattedValue == null) {
48
- return null;
49
- }
50
- return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
51
- className: classes.row,
52
- children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
53
- className: clsx(classes.markCell, classes.cell),
54
- children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
55
- ownerState: {
56
- color
57
- },
58
- boxShadow: 1,
59
- className: classes.mark
60
- })
61
- }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
62
- className: clsx(classes.labelCell, classes.cell),
63
- children: label ? /*#__PURE__*/_jsx(Typography, {
64
- children: label
65
- }) : null
66
- }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
67
- className: clsx(classes.valueCell, classes.cell),
68
- children: /*#__PURE__*/_jsx(Typography, {
69
- children: formattedValue
70
- })
71
- })]
72
- }, id);
73
- })
74
- })]
75
- })
76
- });
77
- }
78
- export function ChartsAxisTooltipContent(props) {
9
+ function ChartsAxisTooltipContent(props) {
79
10
  const {
80
11
  content,
81
12
  contentProps,
@@ -110,7 +41,7 @@ export function ChartsAxisTooltipContent(props) {
110
41
  const relevantAxis = React.useMemo(() => {
111
42
  return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
112
43
  }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
113
- const Content = content ?? DefaultChartsAxisContent;
44
+ const Content = content ?? DefaultChartsAxisTooltipContent;
114
45
  const chartTooltipContentProps = useSlotProps({
115
46
  elementType: Content,
116
47
  externalSlotProps: contentProps,
@@ -126,4 +57,94 @@ export function ChartsAxisTooltipContent(props) {
126
57
  ownerState: {}
127
58
  });
128
59
  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
129
- }
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 ?? DefaultChartsItemContent;
17
+ const Content = 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,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
+ const {
10
+ series,
11
+ axis,
12
+ dataIndex,
13
+ axisValue,
14
+ sx,
15
+ classes
16
+ } = props;
17
+ if (dataIndex == null) {
18
+ return null;
19
+ }
20
+ const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
21
+ return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
22
+ sx: sx,
23
+ className: classes.root,
24
+ children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
25
+ className: classes.table,
26
+ children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
27
+ children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
28
+ children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
29
+ colSpan: 3,
30
+ children: /*#__PURE__*/_jsx(Typography, {
31
+ children: axisFormatter(axisValue)
32
+ })
33
+ })
34
+ })
35
+ }), /*#__PURE__*/_jsx("tbody", {
36
+ children: series.map(({
37
+ color,
38
+ id,
39
+ label,
40
+ valueFormatter,
41
+ data
42
+ }) => {
43
+ const 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
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 };