@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.
- package/BarChart/BarElement.d.ts +5 -1
- package/BarChart/BarElement.js +24 -1
- package/BarChart/index.d.ts +2 -1
- package/BarChart/index.js +15 -4
- package/CHANGELOG.md +241 -0
- package/ChartsLegend/index.d.ts +1 -0
- package/ChartsLegend/index.js +11 -0
- package/ChartsTooltip/ChartsAxisTooltipContent.d.ts +5 -2
- package/ChartsTooltip/ChartsAxisTooltipContent.js +93 -73
- package/ChartsTooltip/ChartsItemTooltipContent.d.ts +5 -2
- package/ChartsTooltip/ChartsItemTooltipContent.js +38 -57
- package/ChartsTooltip/DefaultChartsAxisTooltipContent.d.ts +7 -0
- package/ChartsTooltip/DefaultChartsAxisTooltipContent.js +174 -0
- package/ChartsTooltip/DefaultChartsItemTooltipContent.d.ts +8 -0
- package/ChartsTooltip/DefaultChartsItemTooltipContent.js +99 -0
- package/ChartsTooltip/index.d.ts +4 -0
- package/ChartsTooltip/index.js +44 -0
- package/ChartsYAxis/ChartsYAxis.js +6 -4
- package/LineChart/extremums.js +25 -8
- package/LineChart/index.d.ts +1 -1
- package/LineChart/index.js +11 -11
- package/PieChart/PieArc.d.ts +5 -2
- package/PieChart/PieArc.js +17 -2
- package/PieChart/PieArcLabel.d.ts +1 -1
- package/PieChart/PieArcLabel.js +5 -10
- package/PieChart/PieArcLabelPlot.d.ts +5 -1
- package/PieChart/PieArcLabelPlot.js +91 -3
- package/PieChart/PieArcPlot.d.ts +5 -1
- package/PieChart/PieArcPlot.js +90 -3
- package/PieChart/index.d.ts +3 -1
- package/PieChart/index.js +26 -4
- package/README.md +0 -1
- package/ScatterChart/Scatter.js +1 -1
- package/ScatterChart/index.d.ts +1 -1
- package/ScatterChart/index.js +8 -8
- package/esm/BarChart/BarElement.js +26 -2
- package/esm/BarChart/index.js +2 -1
- package/esm/ChartsLegend/index.js +2 -1
- package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +95 -75
- package/esm/ChartsTooltip/ChartsItemTooltipContent.js +40 -58
- package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js +168 -0
- package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js +92 -0
- package/esm/ChartsTooltip/index.js +5 -1
- package/esm/ChartsYAxis/ChartsYAxis.js +6 -4
- package/esm/LineChart/extremums.js +25 -8
- package/esm/LineChart/index.js +1 -1
- package/esm/PieChart/PieArc.js +18 -2
- package/esm/PieChart/PieArcLabel.js +7 -11
- package/esm/PieChart/PieArcLabelPlot.js +92 -3
- package/esm/PieChart/PieArcPlot.js +91 -3
- package/esm/PieChart/index.js +3 -1
- package/esm/ScatterChart/Scatter.js +1 -1
- package/esm/ScatterChart/index.js +1 -1
- package/esm/internals/defaultizeValueFormatter.js +4 -3
- package/index.js +1 -1
- package/internals/defaultizeValueFormatter.d.ts +3 -1
- package/internals/defaultizeValueFormatter.js +3 -3
- package/legacy/BarChart/BarElement.js +26 -2
- package/legacy/BarChart/index.js +2 -1
- package/legacy/ChartsLegend/index.js +2 -1
- package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +95 -74
- package/legacy/ChartsTooltip/ChartsItemTooltipContent.js +40 -55
- package/legacy/ChartsTooltip/DefaultChartsAxisTooltipContent.js +167 -0
- package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js +89 -0
- package/legacy/ChartsTooltip/index.js +5 -1
- package/legacy/ChartsYAxis/ChartsYAxis.js +6 -4
- package/legacy/LineChart/extremums.js +29 -14
- package/legacy/LineChart/index.js +1 -1
- package/legacy/PieChart/PieArc.js +18 -2
- package/legacy/PieChart/PieArcLabel.js +7 -11
- package/legacy/PieChart/PieArcLabelPlot.js +92 -3
- package/legacy/PieChart/PieArcPlot.js +91 -3
- package/legacy/PieChart/index.js +3 -1
- package/legacy/ScatterChart/Scatter.js +1 -1
- package/legacy/ScatterChart/index.js +1 -1
- package/legacy/index.js +1 -1
- package/legacy/internals/defaultizeValueFormatter.js +4 -3
- package/models/seriesType/config.d.ts +5 -1
- package/models/seriesType/scatter.d.ts +1 -1
- package/modern/BarChart/BarElement.js +26 -2
- package/modern/BarChart/index.js +2 -1
- package/modern/ChartsLegend/index.js +2 -1
- package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +95 -74
- package/modern/ChartsTooltip/ChartsItemTooltipContent.js +40 -58
- package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js +167 -0
- package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js +92 -0
- package/modern/ChartsTooltip/index.js +5 -1
- package/modern/ChartsYAxis/ChartsYAxis.js +6 -4
- package/modern/LineChart/extremums.js +25 -8
- package/modern/LineChart/index.js +1 -1
- package/modern/PieChart/PieArc.js +18 -2
- package/modern/PieChart/PieArcLabel.js +7 -11
- package/modern/PieChart/PieArcLabelPlot.js +92 -3
- package/modern/PieChart/PieArcPlot.js +91 -3
- package/modern/PieChart/index.js +3 -1
- package/modern/ScatterChart/Scatter.js +1 -1
- package/modern/ScatterChart/index.js +1 -1
- package/modern/index.js +1 -1
- package/modern/internals/defaultizeValueFormatter.js +3 -3
- package/package.json +2 -2
package/legacy/PieChart/index.js
CHANGED
|
@@ -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,
|
package/legacy/index.js
CHANGED
|
@@ -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
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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]
|
|
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
|
-
|
|
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 };
|
package/modern/BarChart/index.js
CHANGED
|
@@ -1,81 +1,12 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import
|
|
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 {
|
|
7
|
+
import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
|
|
9
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
|
|
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 ??
|
|
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
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
4
|
import { useSlotProps } from '@mui/base/utils';
|
|
5
5
|
import { SeriesContext } from '../context/SeriesContextProvider';
|
|
6
|
-
import {
|
|
6
|
+
import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
|
|
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 ??
|
|
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 };
|