@mui/x-charts 6.18.2 → 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.
- package/BarChart/BarElement.d.ts +5 -1
- package/BarChart/BarElement.js +24 -1
- package/BarChart/index.d.ts +3 -2
- package/BarChart/index.js +31 -12
- package/CHANGELOG.md +59 -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 +5 -5
- package/LineChart/index.js +50 -41
- package/PieChart/PieArcLabelPlot.d.ts +5 -1
- package/PieChart/PieArcLabelPlot.js +89 -1
- package/PieChart/PieArcPlot.d.ts +5 -1
- package/PieChart/PieArcPlot.js +88 -1
- package/PieChart/index.d.ts +6 -6
- package/PieChart/index.js +60 -46
- package/ScatterChart/Scatter.js +1 -1
- package/ScatterChart/index.d.ts +3 -3
- package/ScatterChart/index.js +31 -19
- package/esm/BarChart/BarElement.js +26 -2
- package/esm/BarChart/index.js +3 -2
- 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 +5 -5
- package/esm/PieChart/PieArcLabelPlot.js +91 -2
- package/esm/PieChart/PieArcPlot.js +90 -2
- package/esm/PieChart/index.js +6 -4
- package/esm/ScatterChart/Scatter.js +1 -1
- package/esm/ScatterChart/index.js +3 -3
- 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 +3 -2
- 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 +5 -5
- package/legacy/PieChart/PieArcLabelPlot.js +91 -2
- package/legacy/PieChart/PieArcPlot.js +90 -2
- package/legacy/PieChart/index.js +6 -4
- package/legacy/ScatterChart/Scatter.js +1 -1
- package/legacy/ScatterChart/index.js +3 -3
- 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 +3 -2
- 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 +5 -5
- package/modern/PieChart/PieArcLabelPlot.js +91 -2
- package/modern/PieChart/PieArcPlot.js +90 -2
- package/modern/PieChart/index.js +6 -4
- package/modern/ScatterChart/Scatter.js +1 -1
- package/modern/ScatterChart/index.js +3 -3
- package/modern/index.js +1 -1
- package/modern/internals/defaultizeValueFormatter.js +3 -3
- package/package.json +1 -1
|
@@ -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 != null ? content :
|
|
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';
|
|
@@ -75,6 +75,8 @@ function ChartsYAxis(inProps) {
|
|
|
75
75
|
tickFontSize,
|
|
76
76
|
label,
|
|
77
77
|
labelFontSize,
|
|
78
|
+
labelStyle,
|
|
79
|
+
tickLabelStyle,
|
|
78
80
|
tickSize: tickSizeProp,
|
|
79
81
|
valueFormatter,
|
|
80
82
|
slots,
|
|
@@ -109,11 +111,11 @@ function ChartsYAxis(inProps) {
|
|
|
109
111
|
elementType: TickLabel,
|
|
110
112
|
externalSlotProps: slotProps == null ? void 0 : slotProps.axisTickLabel,
|
|
111
113
|
additionalProps: {
|
|
112
|
-
style: {
|
|
114
|
+
style: _extends({
|
|
113
115
|
fontSize: tickFontSize,
|
|
114
116
|
textAnchor: position === 'right' ? 'start' : 'end',
|
|
115
117
|
dominantBaseline: 'central'
|
|
116
|
-
},
|
|
118
|
+
}, tickLabelStyle),
|
|
117
119
|
className: classes.tickLabel
|
|
118
120
|
},
|
|
119
121
|
ownerState: {}
|
|
@@ -122,12 +124,12 @@ function ChartsYAxis(inProps) {
|
|
|
122
124
|
elementType: Label,
|
|
123
125
|
externalSlotProps: slotProps == null ? void 0 : slotProps.axisLabel,
|
|
124
126
|
additionalProps: {
|
|
125
|
-
style: {
|
|
127
|
+
style: _extends({
|
|
126
128
|
fontSize: labelFontSize,
|
|
127
129
|
angle: positionSign * 90,
|
|
128
130
|
textAnchor: 'middle',
|
|
129
131
|
dominantBaseline: 'auto'
|
|
130
|
-
}
|
|
132
|
+
}, labelStyle)
|
|
131
133
|
},
|
|
132
134
|
ownerState: {}
|
|
133
135
|
});
|
|
@@ -7,6 +7,18 @@ export const getExtremumX = params => {
|
|
|
7
7
|
const maxX = Math.max(...((_axis$data2 = axis.data) != null ? _axis$data2 : []));
|
|
8
8
|
return [minX, maxX];
|
|
9
9
|
};
|
|
10
|
+
function getSeriesExtremums(getValues, stackedData) {
|
|
11
|
+
if (stackedData.length === 0) {
|
|
12
|
+
return [null, null];
|
|
13
|
+
}
|
|
14
|
+
return stackedData.reduce((seriesAcc, stackedValue) => {
|
|
15
|
+
const [base, value] = getValues(stackedValue);
|
|
16
|
+
if (seriesAcc[0] === null) {
|
|
17
|
+
return [Math.min(base, value), Math.max(base, value)];
|
|
18
|
+
}
|
|
19
|
+
return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
|
|
20
|
+
}, getValues(stackedData[0]));
|
|
21
|
+
}
|
|
10
22
|
export const getExtremumY = params => {
|
|
11
23
|
const {
|
|
12
24
|
series,
|
|
@@ -14,16 +26,21 @@ export const getExtremumY = params => {
|
|
|
14
26
|
isDefaultAxis
|
|
15
27
|
} = params;
|
|
16
28
|
return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === undefined).reduce((acc, seriesId) => {
|
|
17
|
-
const
|
|
18
|
-
|
|
29
|
+
const {
|
|
30
|
+
area,
|
|
31
|
+
stackedData
|
|
32
|
+
} = series[seriesId];
|
|
33
|
+
const isArea = area !== undefined;
|
|
34
|
+
const getValues = isArea ? d => d : d => [d[1], d[1]]; // Since this series is not used to display an area, we do not consider the base (the d[0]).
|
|
19
35
|
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
return
|
|
23
|
-
}
|
|
24
|
-
if (
|
|
25
|
-
return
|
|
36
|
+
const seriesExtremums = getSeriesExtremums(getValues, stackedData);
|
|
37
|
+
if (acc[0] === null) {
|
|
38
|
+
return seriesExtremums;
|
|
39
|
+
}
|
|
40
|
+
if (seriesExtremums[0] === null) {
|
|
41
|
+
return acc;
|
|
26
42
|
}
|
|
43
|
+
const [seriesMin, seriesMax] = seriesExtremums;
|
|
27
44
|
return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
|
|
28
45
|
}, [null, null]);
|
|
29
46
|
};
|
package/esm/LineChart/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
1
|
+
export * from './LineChart';
|
|
2
|
+
export * from './LinePlot';
|
|
3
|
+
export * from './AreaPlot';
|
|
4
|
+
export * from './MarkPlot';
|
|
5
|
+
export * from './LineHighlightPlot';
|
|
6
6
|
export * from './AreaElement';
|
|
7
7
|
export * from './LineElement';
|
|
8
8
|
export * from './MarkElement';
|
|
@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
|
|
|
3
3
|
const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
|
|
4
4
|
_excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
|
|
5
5
|
import * as React from 'react';
|
|
6
|
+
import PropTypes from 'prop-types';
|
|
6
7
|
import { useTransition } from '@react-spring/web';
|
|
7
8
|
import { defaultLabelTransitionConfig } from './dataTransform/transition';
|
|
8
9
|
import { useTransformData } from './dataTransform/useTransformData';
|
|
@@ -23,7 +24,7 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
|
|
|
23
24
|
}
|
|
24
25
|
return arcLabel(item);
|
|
25
26
|
}
|
|
26
|
-
|
|
27
|
+
function PieArcLabelPlot(props) {
|
|
27
28
|
var _slots$pieArcLabel;
|
|
28
29
|
const {
|
|
29
30
|
slots,
|
|
@@ -89,4 +90,92 @@ export function PieArcLabelPlot(props) {
|
|
|
89
90
|
}, slotProps == null ? void 0 : slotProps.pieArcLabel));
|
|
90
91
|
})
|
|
91
92
|
}));
|
|
92
|
-
}
|
|
93
|
+
}
|
|
94
|
+
process.env.NODE_ENV !== "production" ? PieArcLabelPlot.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
|
+
/**
|
|
100
|
+
* The label displayed into the arc.
|
|
101
|
+
*/
|
|
102
|
+
arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
|
|
103
|
+
/**
|
|
104
|
+
* The minimal angle required to display the arc label.
|
|
105
|
+
*/
|
|
106
|
+
arcLabelMinAngle: PropTypes.number,
|
|
107
|
+
/**
|
|
108
|
+
* The radius applied to arc corners (similar to border radius).
|
|
109
|
+
* @default 0
|
|
110
|
+
*/
|
|
111
|
+
cornerRadius: PropTypes.number,
|
|
112
|
+
data: PropTypes.arrayOf(PropTypes.shape({
|
|
113
|
+
color: PropTypes.string.isRequired,
|
|
114
|
+
endAngle: PropTypes.number.isRequired,
|
|
115
|
+
formattedValue: PropTypes.string.isRequired,
|
|
116
|
+
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
|
|
117
|
+
index: PropTypes.number.isRequired,
|
|
118
|
+
label: PropTypes.string,
|
|
119
|
+
padAngle: PropTypes.number.isRequired,
|
|
120
|
+
startAngle: PropTypes.number.isRequired,
|
|
121
|
+
value: PropTypes.number.isRequired
|
|
122
|
+
})).isRequired,
|
|
123
|
+
/**
|
|
124
|
+
* Override the arc attibutes when it is faded.
|
|
125
|
+
*/
|
|
126
|
+
faded: PropTypes.shape({
|
|
127
|
+
additionalRadius: PropTypes.number,
|
|
128
|
+
color: PropTypes.string,
|
|
129
|
+
cornerRadius: PropTypes.number,
|
|
130
|
+
innerRadius: PropTypes.number,
|
|
131
|
+
outerRadius: PropTypes.number,
|
|
132
|
+
paddingAngle: PropTypes.number
|
|
133
|
+
}),
|
|
134
|
+
/**
|
|
135
|
+
* Override the arc attibutes when it is highlighted.
|
|
136
|
+
*/
|
|
137
|
+
highlighted: PropTypes.shape({
|
|
138
|
+
additionalRadius: PropTypes.number,
|
|
139
|
+
color: PropTypes.string,
|
|
140
|
+
cornerRadius: PropTypes.number,
|
|
141
|
+
innerRadius: PropTypes.number,
|
|
142
|
+
outerRadius: PropTypes.number,
|
|
143
|
+
paddingAngle: PropTypes.number
|
|
144
|
+
}),
|
|
145
|
+
highlightScope: PropTypes.shape({
|
|
146
|
+
faded: PropTypes.oneOf(['global', 'none', 'series']),
|
|
147
|
+
highlighted: PropTypes.oneOf(['item', 'none', 'series'])
|
|
148
|
+
}),
|
|
149
|
+
id: PropTypes.string.isRequired,
|
|
150
|
+
/**
|
|
151
|
+
* The radius between circle center and the begining of the arc.
|
|
152
|
+
* @default 0
|
|
153
|
+
*/
|
|
154
|
+
innerRadius: PropTypes.number,
|
|
155
|
+
/**
|
|
156
|
+
* The radius between circle center and the end of the arc.
|
|
157
|
+
* @default R_max The maximal radius that fit into the drawing area.
|
|
158
|
+
*/
|
|
159
|
+
outerRadius: PropTypes.number.isRequired,
|
|
160
|
+
/**
|
|
161
|
+
* The padding angle (deg) between two arcs.
|
|
162
|
+
* @default 0
|
|
163
|
+
*/
|
|
164
|
+
paddingAngle: PropTypes.number,
|
|
165
|
+
/**
|
|
166
|
+
* If `true`, animations are skiped.
|
|
167
|
+
* @default false
|
|
168
|
+
*/
|
|
169
|
+
skipAnimation: PropTypes.bool,
|
|
170
|
+
/**
|
|
171
|
+
* The props used for each component slot.
|
|
172
|
+
* @default {}
|
|
173
|
+
*/
|
|
174
|
+
slotProps: PropTypes.object,
|
|
175
|
+
/**
|
|
176
|
+
* Overridable component slots.
|
|
177
|
+
* @default {}
|
|
178
|
+
*/
|
|
179
|
+
slots: PropTypes.object
|
|
180
|
+
} : void 0;
|
|
181
|
+
export { PieArcLabelPlot };
|