@mui/x-charts 7.0.0-alpha.5 → 7.0.0-alpha.8
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/BarChart.js +1 -0
- package/BarChart/BarElement.d.ts +37 -20
- package/BarChart/BarPlot.js +4 -4
- package/BarChart/formatter.js +1 -1
- package/CHANGELOG.md +357 -49
- package/ChartsAxis/ChartsAxis.js +4 -4
- package/ChartsReferenceLine/ChartsReferenceLine.js +9 -5
- package/ChartsSurface.d.ts +2 -2
- package/ChartsSurface.js +33 -1
- package/ChartsTooltip/ChartsTooltipTable.d.ts +1 -1
- package/ChartsTooltip/ChartsTooltipTable.js +2 -0
- package/LineChart/AreaPlot.js +2 -2
- package/LineChart/LineChart.d.ts +1 -0
- package/LineChart/LineChart.js +2 -0
- package/LineChart/LineHighlightPlot.js +1 -1
- package/LineChart/LinePlot.js +2 -2
- package/LineChart/MarkPlot.js +1 -1
- package/LineChart/formatter.js +2 -2
- package/PieChart/PieArcLabel.d.ts +1 -0
- package/PieChart/PieArcLabel.js +7 -8
- package/PieChart/PieArcLabelPlot.d.ts +5 -0
- package/PieChart/PieArcLabelPlot.js +16 -3
- package/PieChart/PieArcPlot.d.ts +5 -0
- package/PieChart/PieArcPlot.js +9 -1
- package/PieChart/PieChart.d.ts +14 -2
- package/PieChart/PieChart.js +6 -2
- package/PieChart/PiePlot.js +3 -0
- package/PieChart/dataTransform/transition.js +9 -2
- package/PieChart/dataTransform/useTransformData.d.ts +1 -0
- package/PieChart/dataTransform/useTransformData.js +11 -8
- package/ResponsiveChartContainer/index.js +2 -2
- package/ScatterChart/ScatterChart.js +1 -0
- package/SparkLineChart/SparkLineChart.d.ts +15 -1
- package/SparkLineChart/SparkLineChart.js +8 -1
- package/context/CartesianContextProvider.d.ts +1 -1
- package/context/CartesianContextProvider.js +9 -8
- package/context/DrawingProvider.d.ts +1 -1
- package/context/DrawingProvider.js +8 -7
- package/context/HighlightProvider.d.ts +2 -2
- package/context/HighlightProvider.js +4 -3
- package/context/InteractionProvider.d.ts +2 -2
- package/context/InteractionProvider.js +4 -3
- package/context/SeriesContextProvider.d.ts +3 -1
- package/context/SeriesContextProvider.js +8 -7
- package/esm/BarChart/BarChart.js +1 -0
- package/esm/BarChart/BarPlot.js +4 -4
- package/esm/BarChart/formatter.js +1 -1
- package/esm/ChartsAxis/ChartsAxis.js +4 -4
- package/esm/ChartsReferenceLine/ChartsReferenceLine.js +9 -5
- package/esm/ChartsSurface.js +35 -2
- package/esm/ChartsTooltip/ChartsTooltipTable.js +2 -0
- package/esm/LineChart/AreaPlot.js +2 -2
- package/esm/LineChart/LineChart.js +2 -0
- package/esm/LineChart/LineHighlightPlot.js +1 -1
- package/esm/LineChart/LinePlot.js +2 -2
- package/esm/LineChart/MarkPlot.js +1 -1
- package/esm/LineChart/formatter.js +2 -2
- package/esm/PieChart/PieArcLabel.js +7 -8
- package/esm/PieChart/PieArcLabelPlot.js +16 -3
- package/esm/PieChart/PieArcPlot.js +9 -1
- package/esm/PieChart/PieChart.js +6 -2
- package/esm/PieChart/PiePlot.js +3 -0
- package/esm/PieChart/dataTransform/transition.js +9 -2
- package/esm/PieChart/dataTransform/useTransformData.js +12 -9
- package/esm/ResponsiveChartContainer/index.js +2 -2
- package/esm/ScatterChart/ScatterChart.js +1 -0
- package/esm/SparkLineChart/SparkLineChart.js +8 -1
- package/esm/context/CartesianContextProvider.js +9 -8
- package/esm/context/DrawingProvider.js +8 -7
- package/esm/context/HighlightProvider.js +6 -4
- package/esm/context/InteractionProvider.js +6 -4
- package/esm/context/SeriesContextProvider.js +10 -8
- package/esm/index.js +1 -0
- package/esm/internals/domUtils.js +3 -1
- package/index.d.ts +1 -0
- package/index.js +12 -1
- package/internals/defaultizeColor.d.ts +3 -0
- package/internals/domUtils.js +3 -1
- package/legacy/BarChart/BarChart.js +1 -0
- package/legacy/BarChart/BarPlot.js +4 -4
- package/legacy/BarChart/formatter.js +1 -1
- package/legacy/ChartsAxis/ChartsAxis.js +4 -4
- package/legacy/ChartsReferenceLine/ChartsReferenceLine.js +7 -5
- package/legacy/ChartsSurface.js +35 -2
- package/legacy/ChartsTooltip/ChartsTooltipTable.js +2 -0
- package/legacy/LineChart/AreaPlot.js +2 -2
- package/legacy/LineChart/LineChart.js +2 -0
- package/legacy/LineChart/LineHighlightPlot.js +1 -1
- package/legacy/LineChart/LinePlot.js +2 -2
- package/legacy/LineChart/MarkPlot.js +1 -1
- package/legacy/LineChart/formatter.js +2 -2
- package/legacy/PieChart/PieArcLabel.js +7 -8
- package/legacy/PieChart/PieArcLabelPlot.js +16 -4
- package/legacy/PieChart/PieArcPlot.js +10 -1
- package/legacy/PieChart/PieChart.js +6 -2
- package/legacy/PieChart/PiePlot.js +3 -0
- package/legacy/PieChart/dataTransform/transition.js +9 -2
- package/legacy/PieChart/dataTransform/useTransformData.js +12 -9
- package/legacy/ResponsiveChartContainer/index.js +2 -2
- package/legacy/ScatterChart/ScatterChart.js +1 -0
- package/legacy/SparkLineChart/SparkLineChart.js +8 -1
- package/legacy/context/CartesianContextProvider.js +17 -17
- package/legacy/context/DrawingProvider.js +6 -6
- package/legacy/context/HighlightProvider.js +4 -3
- package/legacy/context/InteractionProvider.js +4 -3
- package/legacy/context/SeriesContextProvider.js +9 -8
- package/legacy/index.js +2 -1
- package/legacy/internals/domUtils.js +3 -3
- package/models/seriesType/pie.d.ts +15 -0
- package/modern/BarChart/BarChart.js +1 -0
- package/modern/BarChart/BarPlot.js +4 -4
- package/modern/BarChart/formatter.js +1 -1
- package/modern/ChartsAxis/ChartsAxis.js +4 -4
- package/modern/ChartsReferenceLine/ChartsReferenceLine.js +9 -5
- package/modern/ChartsSurface.js +35 -2
- package/modern/ChartsTooltip/ChartsTooltipTable.js +2 -0
- package/modern/LineChart/AreaPlot.js +2 -2
- package/modern/LineChart/LineChart.js +2 -0
- package/modern/LineChart/LineHighlightPlot.js +1 -1
- package/modern/LineChart/LinePlot.js +2 -2
- package/modern/LineChart/MarkPlot.js +1 -1
- package/modern/LineChart/formatter.js +2 -2
- package/modern/PieChart/PieArcLabel.js +7 -8
- package/modern/PieChart/PieArcLabelPlot.js +16 -3
- package/modern/PieChart/PieArcPlot.js +9 -1
- package/modern/PieChart/PieChart.js +6 -2
- package/modern/PieChart/PiePlot.js +3 -0
- package/modern/PieChart/dataTransform/transition.js +9 -2
- package/modern/PieChart/dataTransform/useTransformData.js +11 -8
- package/modern/ResponsiveChartContainer/index.js +2 -2
- package/modern/ScatterChart/ScatterChart.js +1 -0
- package/modern/SparkLineChart/SparkLineChart.js +8 -1
- package/modern/context/CartesianContextProvider.js +9 -8
- package/modern/context/DrawingProvider.js +8 -7
- package/modern/context/HighlightProvider.js +6 -4
- package/modern/context/InteractionProvider.js +6 -4
- package/modern/context/SeriesContextProvider.js +10 -8
- package/modern/index.js +2 -1
- package/modern/internals/domUtils.js +3 -1
- package/package.json +5 -5
|
@@ -70,6 +70,7 @@ export const defaultLabelTransitionConfig = {
|
|
|
70
70
|
from: ({
|
|
71
71
|
innerRadius,
|
|
72
72
|
outerRadius,
|
|
73
|
+
arcLabelRadius,
|
|
73
74
|
cornerRadius,
|
|
74
75
|
startAngle,
|
|
75
76
|
endAngle,
|
|
@@ -78,6 +79,7 @@ export const defaultLabelTransitionConfig = {
|
|
|
78
79
|
innerRadius,
|
|
79
80
|
outerRadius: (innerRadius + outerRadius) / 2,
|
|
80
81
|
cornerRadius,
|
|
82
|
+
arcLabelRadius,
|
|
81
83
|
startAngle: (startAngle + endAngle) / 2,
|
|
82
84
|
endAngle: (startAngle + endAngle) / 2,
|
|
83
85
|
paddingAngle,
|
|
@@ -90,6 +92,7 @@ export const defaultLabelTransitionConfig = {
|
|
|
90
92
|
}) => ({
|
|
91
93
|
innerRadius,
|
|
92
94
|
outerRadius: innerRadius,
|
|
95
|
+
arcLabelRadius: innerRadius,
|
|
93
96
|
startAngle: (startAngle + endAngle) / 2,
|
|
94
97
|
endAngle: (startAngle + endAngle) / 2,
|
|
95
98
|
opacity: 0
|
|
@@ -98,12 +101,14 @@ export const defaultLabelTransitionConfig = {
|
|
|
98
101
|
innerRadius,
|
|
99
102
|
outerRadius,
|
|
100
103
|
startAngle,
|
|
101
|
-
endAngle
|
|
104
|
+
endAngle,
|
|
105
|
+
arcLabelRadius
|
|
102
106
|
}) => ({
|
|
103
107
|
innerRadius,
|
|
104
108
|
outerRadius,
|
|
105
109
|
startAngle,
|
|
106
110
|
endAngle,
|
|
111
|
+
arcLabelRadius,
|
|
107
112
|
opacity: 1
|
|
108
113
|
}),
|
|
109
114
|
update: ({
|
|
@@ -112,7 +117,8 @@ export const defaultLabelTransitionConfig = {
|
|
|
112
117
|
cornerRadius,
|
|
113
118
|
startAngle,
|
|
114
119
|
endAngle,
|
|
115
|
-
paddingAngle
|
|
120
|
+
paddingAngle,
|
|
121
|
+
arcLabelRadius
|
|
116
122
|
}) => ({
|
|
117
123
|
innerRadius,
|
|
118
124
|
outerRadius,
|
|
@@ -120,6 +126,7 @@ export const defaultLabelTransitionConfig = {
|
|
|
120
126
|
startAngle,
|
|
121
127
|
endAngle,
|
|
122
128
|
paddingAngle,
|
|
129
|
+
arcLabelRadius,
|
|
123
130
|
opacity: 1
|
|
124
131
|
}),
|
|
125
132
|
config: {
|
|
@@ -11,6 +11,7 @@ export function useTransformData(series) {
|
|
|
11
11
|
highlighted,
|
|
12
12
|
paddingAngle: basePaddingAngle = 0,
|
|
13
13
|
innerRadius: baseInnerRadius = 0,
|
|
14
|
+
arcLabelRadius: baseArcLabelRadius,
|
|
14
15
|
outerRadius: baseOuterRadius,
|
|
15
16
|
cornerRadius: baseCornerRadius = 0
|
|
16
17
|
} = series;
|
|
@@ -34,26 +35,28 @@ export function useTransformData(series) {
|
|
|
34
35
|
};
|
|
35
36
|
}, [highlightScope, highlightedItem, seriesId]);
|
|
36
37
|
const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
|
|
37
|
-
var
|
|
38
|
+
var _attributesOverride$p, _attributesOverride$i, _attributesOverride$o, _attributesOverride$c, _ref, _attributesOverride$a;
|
|
38
39
|
const {
|
|
39
40
|
isHighlighted,
|
|
40
41
|
isFaded
|
|
41
42
|
} = getHighlightStatus(itemIndex);
|
|
42
|
-
const
|
|
43
|
+
const attributesOverride = _extends({
|
|
43
44
|
additionalRadius: 0
|
|
44
45
|
}, isFaded && faded || isHighlighted && highlighted || {});
|
|
45
|
-
const paddingAngle = Math.max(0, Math.PI * ((
|
|
46
|
-
const innerRadius = Math.max(0, (
|
|
47
|
-
const outerRadius = Math.max(0, (
|
|
48
|
-
const cornerRadius = (
|
|
49
|
-
|
|
46
|
+
const paddingAngle = Math.max(0, Math.PI * ((_attributesOverride$p = attributesOverride.paddingAngle) != null ? _attributesOverride$p : basePaddingAngle) / 180);
|
|
47
|
+
const innerRadius = Math.max(0, (_attributesOverride$i = attributesOverride.innerRadius) != null ? _attributesOverride$i : baseInnerRadius);
|
|
48
|
+
const outerRadius = Math.max(0, (_attributesOverride$o = attributesOverride.outerRadius) != null ? _attributesOverride$o : baseOuterRadius + attributesOverride.additionalRadius);
|
|
49
|
+
const cornerRadius = (_attributesOverride$c = attributesOverride.cornerRadius) != null ? _attributesOverride$c : baseCornerRadius;
|
|
50
|
+
const arcLabelRadius = (_ref = (_attributesOverride$a = attributesOverride.arcLabelRadius) != null ? _attributesOverride$a : baseArcLabelRadius) != null ? _ref : (innerRadius + outerRadius) / 2;
|
|
51
|
+
return _extends({}, item, attributesOverride, {
|
|
50
52
|
isFaded,
|
|
51
53
|
isHighlighted,
|
|
52
54
|
paddingAngle,
|
|
53
55
|
innerRadius,
|
|
54
56
|
outerRadius,
|
|
55
|
-
cornerRadius
|
|
57
|
+
cornerRadius,
|
|
58
|
+
arcLabelRadius
|
|
56
59
|
});
|
|
57
|
-
}), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, data, faded, getHighlightStatus, highlighted]);
|
|
60
|
+
}), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, getHighlightStatus, highlighted]);
|
|
58
61
|
return dataWithHighlight;
|
|
59
62
|
}
|
|
@@ -60,11 +60,11 @@ const useChartDimensions = (inWidth, inHeight) => {
|
|
|
60
60
|
}, [computeSize, inHeight, inWidth]);
|
|
61
61
|
if (process.env.NODE_ENV !== 'production') {
|
|
62
62
|
if (displayError.current && inWidth === undefined && width === 0) {
|
|
63
|
-
console.error(`MUI
|
|
63
|
+
console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
|
|
64
64
|
displayError.current = false;
|
|
65
65
|
}
|
|
66
66
|
if (displayError.current && inHeight === undefined && height === 0) {
|
|
67
|
-
console.error(`MUI
|
|
67
|
+
console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
|
|
68
68
|
displayError.current = false;
|
|
69
69
|
}
|
|
70
70
|
}
|
|
@@ -118,6 +118,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
|
|
|
118
118
|
className: PropTypes.string,
|
|
119
119
|
/**
|
|
120
120
|
* Color palette used to colorize multiple series.
|
|
121
|
+
* @default blueberryTwilightPalette
|
|
121
122
|
*/
|
|
122
123
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
123
124
|
/**
|
|
@@ -120,6 +120,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
|
|
|
120
120
|
className: PropTypes.string,
|
|
121
121
|
/**
|
|
122
122
|
* Color palette used to colorize multiple series.
|
|
123
|
+
* @default blueberryTwilightPalette
|
|
123
124
|
*/
|
|
124
125
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
125
126
|
/**
|
|
@@ -150,7 +151,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
|
|
|
150
151
|
* The margin between the SVG and the drawing area.
|
|
151
152
|
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
152
153
|
* Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
153
|
-
* @default
|
|
154
|
+
* @default {
|
|
155
|
+
* top: 5,
|
|
156
|
+
* bottom: 5,
|
|
157
|
+
* left: 5,
|
|
158
|
+
* right: 5,
|
|
159
|
+
* }
|
|
154
160
|
*/
|
|
155
161
|
margin: PropTypes.shape({
|
|
156
162
|
bottom: PropTypes.number,
|
|
@@ -199,6 +205,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
|
|
|
199
205
|
* Formatter used by the tooltip.
|
|
200
206
|
* @param {number} value The value to format.
|
|
201
207
|
* @returns {string} the formatted value.
|
|
208
|
+
* @default (v: number) => v.toString()
|
|
202
209
|
*/
|
|
203
210
|
valueFormatter: PropTypes.func,
|
|
204
211
|
viewBox: PropTypes.shape({
|
|
@@ -38,12 +38,13 @@ export const CartesianContext = /*#__PURE__*/React.createContext({
|
|
|
38
38
|
*
|
|
39
39
|
* - [CartesianContextProvider API](https://mui.com/x/api/charts/cartesian-context-provider/)
|
|
40
40
|
*/
|
|
41
|
-
function CartesianContextProvider({
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
function CartesianContextProvider(props) {
|
|
42
|
+
const {
|
|
43
|
+
xAxis: inXAxis,
|
|
44
|
+
yAxis: inYAxis,
|
|
45
|
+
dataset,
|
|
46
|
+
children
|
|
47
|
+
} = props;
|
|
47
48
|
const formattedSeries = React.useContext(SeriesContext);
|
|
48
49
|
const drawingArea = React.useContext(DrawingContext);
|
|
49
50
|
const xAxis = React.useMemo(() => inXAxis == null ? void 0 : inXAxis.map(axisConfig => {
|
|
@@ -52,7 +53,7 @@ function CartesianContextProvider({
|
|
|
52
53
|
return axisConfig;
|
|
53
54
|
}
|
|
54
55
|
if (dataset === undefined) {
|
|
55
|
-
throw Error('MUI
|
|
56
|
+
throw Error('MUI X Charts: x-axis uses `dataKey` but no `dataset` is provided.');
|
|
56
57
|
}
|
|
57
58
|
return _extends({}, axisConfig, {
|
|
58
59
|
data: dataset.map(d => d[dataKey])
|
|
@@ -64,7 +65,7 @@ function CartesianContextProvider({
|
|
|
64
65
|
return axisConfig;
|
|
65
66
|
}
|
|
66
67
|
if (dataset === undefined) {
|
|
67
|
-
throw Error('MUI
|
|
68
|
+
throw Error('MUI X Charts: y-axis uses `dataKey` but no `dataset` is provided.');
|
|
68
69
|
}
|
|
69
70
|
return _extends({}, axisConfig, {
|
|
70
71
|
data: dataset.map(d => d[dataKey])
|
|
@@ -23,13 +23,14 @@ export const SVGContext = /*#__PURE__*/React.createContext({
|
|
|
23
23
|
*
|
|
24
24
|
* - [DrawingProvider API](https://mui.com/x/api/charts/drawing-provider/)
|
|
25
25
|
*/
|
|
26
|
-
function DrawingProvider({
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
26
|
+
function DrawingProvider(props) {
|
|
27
|
+
const {
|
|
28
|
+
width,
|
|
29
|
+
height,
|
|
30
|
+
margin,
|
|
31
|
+
svgRef,
|
|
32
|
+
children
|
|
33
|
+
} = props;
|
|
33
34
|
const drawingArea = useChartDimensions(width, height, margin);
|
|
34
35
|
return /*#__PURE__*/_jsx(SVGContext.Provider, {
|
|
35
36
|
value: svgRef,
|
|
@@ -29,9 +29,10 @@ const dataReducer = (prevState, action) => {
|
|
|
29
29
|
return prevState;
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
function HighlightProvider(props) {
|
|
33
|
+
const {
|
|
34
|
+
children
|
|
35
|
+
} = props;
|
|
35
36
|
const [data, dispatch] = React.useReducer(dataReducer, {
|
|
36
37
|
item: null,
|
|
37
38
|
scope: defaultScope
|
|
@@ -43,4 +44,5 @@ export function HighlightProvider({
|
|
|
43
44
|
value: value,
|
|
44
45
|
children: children
|
|
45
46
|
});
|
|
46
|
-
}
|
|
47
|
+
}
|
|
48
|
+
export { HighlightProvider };
|
|
@@ -50,9 +50,10 @@ const dataReducer = (prevState, action) => {
|
|
|
50
50
|
return prevState;
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
function InteractionProvider(props) {
|
|
54
|
+
const {
|
|
55
|
+
children
|
|
56
|
+
} = props;
|
|
56
57
|
const [data, dispatch] = React.useReducer(dataReducer, {
|
|
57
58
|
item: null,
|
|
58
59
|
axis: {
|
|
@@ -68,4 +69,5 @@ export function InteractionProvider({
|
|
|
68
69
|
value: value,
|
|
69
70
|
children: children
|
|
70
71
|
});
|
|
71
|
-
}
|
|
72
|
+
}
|
|
73
|
+
export { InteractionProvider };
|
|
@@ -40,7 +40,7 @@ const formatSeries = (series, colors, dataset) => {
|
|
|
40
40
|
};
|
|
41
41
|
}
|
|
42
42
|
if (((_seriesGroups$type = seriesGroups[type]) == null ? void 0 : _seriesGroups$type.series[id]) !== undefined) {
|
|
43
|
-
throw new Error(`MUI
|
|
43
|
+
throw new Error(`MUI X Charts: series' id "${id}" is not unique.`);
|
|
44
44
|
}
|
|
45
45
|
seriesGroups[type].series[id] = _extends({
|
|
46
46
|
id
|
|
@@ -57,16 +57,18 @@ const formatSeries = (series, colors, dataset) => {
|
|
|
57
57
|
});
|
|
58
58
|
return formattedSeries;
|
|
59
59
|
};
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
60
|
+
function SeriesContextProvider(props) {
|
|
61
|
+
const {
|
|
62
|
+
series,
|
|
63
|
+
dataset,
|
|
64
|
+
colors = blueberryTwilightPalette,
|
|
65
|
+
children
|
|
66
|
+
} = props;
|
|
66
67
|
const theme = useTheme();
|
|
67
68
|
const formattedSeries = React.useMemo(() => formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, dataset), [series, colors, theme.palette.mode, dataset]);
|
|
68
69
|
return /*#__PURE__*/_jsx(SeriesContext.Provider, {
|
|
69
70
|
value: formattedSeries,
|
|
70
71
|
children: children
|
|
71
72
|
});
|
|
72
|
-
}
|
|
73
|
+
}
|
|
74
|
+
export { SeriesContextProvider };
|
package/esm/index.js
CHANGED
|
@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
// DOM utils taken from
|
|
3
3
|
// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
function isSsr() {
|
|
6
|
+
return typeof window === 'undefined';
|
|
7
|
+
}
|
|
6
8
|
const stringCache = {
|
|
7
9
|
widthCache: {},
|
|
8
10
|
cacheCount: 0
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @mui/x-charts v7.0.0-alpha.
|
|
2
|
+
* @mui/x-charts v7.0.0-alpha.8
|
|
3
3
|
*
|
|
4
4
|
* @license MIT
|
|
5
5
|
* This source code is licensed under the MIT license found in the
|
|
@@ -241,6 +241,17 @@ Object.keys(_ChartContainer).forEach(function (key) {
|
|
|
241
241
|
}
|
|
242
242
|
});
|
|
243
243
|
});
|
|
244
|
+
var _ChartsSurface = require("./ChartsSurface");
|
|
245
|
+
Object.keys(_ChartsSurface).forEach(function (key) {
|
|
246
|
+
if (key === "default" || key === "__esModule") return;
|
|
247
|
+
if (key in exports && exports[key] === _ChartsSurface[key]) return;
|
|
248
|
+
Object.defineProperty(exports, key, {
|
|
249
|
+
enumerable: true,
|
|
250
|
+
get: function () {
|
|
251
|
+
return _ChartsSurface[key];
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
});
|
|
244
255
|
var _ResponsiveChartContainer = require("./ResponsiveChartContainer");
|
|
245
256
|
Object.keys(_ResponsiveChartContainer).forEach(function (key) {
|
|
246
257
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -9,6 +9,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
|
|
|
9
9
|
type: "pie";
|
|
10
10
|
innerRadius?: string | number | undefined;
|
|
11
11
|
outerRadius?: string | number | undefined;
|
|
12
|
+
arcLabelRadius?: string | number | undefined;
|
|
12
13
|
cornerRadius?: number | undefined;
|
|
13
14
|
startAngle?: number | undefined;
|
|
14
15
|
endAngle?: number | undefined;
|
|
@@ -24,6 +25,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
|
|
|
24
25
|
outerRadius?: number | undefined;
|
|
25
26
|
cornerRadius?: number | undefined;
|
|
26
27
|
paddingAngle?: number | undefined;
|
|
28
|
+
arcLabelRadius?: number | undefined;
|
|
27
29
|
color?: string | undefined;
|
|
28
30
|
} | undefined;
|
|
29
31
|
faded?: {
|
|
@@ -32,6 +34,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
|
|
|
32
34
|
outerRadius?: number | undefined;
|
|
33
35
|
cornerRadius?: number | undefined;
|
|
34
36
|
paddingAngle?: number | undefined;
|
|
37
|
+
arcLabelRadius?: number | undefined;
|
|
35
38
|
color?: string | undefined;
|
|
36
39
|
} | undefined;
|
|
37
40
|
id?: string | undefined;
|
package/internals/domUtils.js
CHANGED
|
@@ -9,7 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
9
9
|
// DOM utils taken from
|
|
10
10
|
// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
function isSsr() {
|
|
13
|
+
return typeof window === 'undefined';
|
|
14
|
+
}
|
|
13
15
|
const stringCache = {
|
|
14
16
|
widthCache: {},
|
|
15
17
|
cacheCount: 0
|
|
@@ -161,6 +161,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
|
|
|
161
161
|
className: PropTypes.string,
|
|
162
162
|
/**
|
|
163
163
|
* Color palette used to colorize multiple series.
|
|
164
|
+
* @default blueberryTwilightPalette
|
|
164
165
|
*/
|
|
165
166
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
166
167
|
/**
|
|
@@ -66,18 +66,18 @@ var useCompletedData = function useCompletedData() {
|
|
|
66
66
|
var baseScaleConfig;
|
|
67
67
|
if (verticalLayout) {
|
|
68
68
|
if (!isBandScaleConfig(xAxisConfig)) {
|
|
69
|
-
throw new Error("MUI
|
|
69
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\"."));
|
|
70
70
|
}
|
|
71
71
|
if (xAxis[xAxisKey].data === undefined) {
|
|
72
|
-
throw new Error("MUI
|
|
72
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud have data property."));
|
|
73
73
|
}
|
|
74
74
|
baseScaleConfig = xAxisConfig;
|
|
75
75
|
} else {
|
|
76
76
|
if (!isBandScaleConfig(yAxisConfig)) {
|
|
77
|
-
throw new Error("MUI
|
|
77
|
+
throw new Error("MUI X Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\"."));
|
|
78
78
|
}
|
|
79
79
|
if (yAxis[yAxisKey].data === undefined) {
|
|
80
|
-
throw new Error("MUI
|
|
80
|
+
throw new Error("MUI X Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud have data property."));
|
|
81
81
|
}
|
|
82
82
|
baseScaleConfig = yAxisConfig;
|
|
83
83
|
}
|
|
@@ -24,7 +24,7 @@ var formatter = function formatter(params, dataset) {
|
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
26
|
} else if (dataset === undefined) {
|
|
27
|
-
throw new Error(["MUI
|
|
27
|
+
throw new Error(["MUI X Charts: bar series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
30
|
var completedSeries = {};
|
|
@@ -57,16 +57,16 @@ function ChartsAxis(props) {
|
|
|
57
57
|
var topId = getAxisId(topAxis);
|
|
58
58
|
var rightId = getAxisId(rightAxis);
|
|
59
59
|
if (topId !== null && !xAxis[topId]) {
|
|
60
|
-
throw Error(["MUI
|
|
60
|
+
throw Error(["MUI X Charts: id used for top axis \"".concat(topId, "\" is not defined."), "Available ids are: ".concat(xAxisIds.join(', '), ".")].join('\n'));
|
|
61
61
|
}
|
|
62
62
|
if (leftId !== null && !yAxis[leftId]) {
|
|
63
|
-
throw Error(["MUI
|
|
63
|
+
throw Error(["MUI X Charts: id used for left axis \"".concat(leftId, "\" is not defined."), "Available ids are: ".concat(yAxisIds.join(', '), ".")].join('\n'));
|
|
64
64
|
}
|
|
65
65
|
if (rightId !== null && !yAxis[rightId]) {
|
|
66
|
-
throw Error(["MUI
|
|
66
|
+
throw Error(["MUI X Charts: id used for right axis \"".concat(rightId, "\" is not defined."), "Available ids are: ".concat(yAxisIds.join(', '), ".")].join('\n'));
|
|
67
67
|
}
|
|
68
68
|
if (bottomId !== null && !xAxis[bottomId]) {
|
|
69
|
-
throw Error(["MUI
|
|
69
|
+
throw Error(["MUI X Charts: id used for bottom axis \"".concat(bottomId, "\" is not defined."), "Available ids are: ".concat(xAxisIds.join(', '), ".")].join('\n'));
|
|
70
70
|
}
|
|
71
71
|
var topAxisProps = mergeProps(topAxis, slots, slotProps);
|
|
72
72
|
var bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
|
|
@@ -5,13 +5,15 @@ import { ChartsXReferenceLine } from './ChartsXReferenceLine';
|
|
|
5
5
|
import { ChartsYReferenceLine } from './ChartsYReferenceLine';
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
7
|
function ChartsReferenceLine(props) {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
var x = props.x,
|
|
9
|
+
y = props.y;
|
|
10
|
+
if (x !== undefined && y !== undefined) {
|
|
11
|
+
throw new Error('MUI X Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
|
|
10
12
|
}
|
|
11
|
-
if (
|
|
12
|
-
throw new Error('MUI
|
|
13
|
+
if (x === undefined && y === undefined) {
|
|
14
|
+
throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
|
|
13
15
|
}
|
|
14
|
-
if (
|
|
16
|
+
if (x !== undefined) {
|
|
15
17
|
return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));
|
|
16
18
|
}
|
|
17
19
|
return /*#__PURE__*/_jsx(ChartsYReferenceLine, _extends({}, props));
|
package/legacy/ChartsSurface.js
CHANGED
|
@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
5
6
|
import * as React from 'react';
|
|
6
7
|
import { useAxisEvents } from './hooks/useAxisEvents';
|
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -12,7 +13,7 @@ var ChartChartsSurfaceStyles = styled('svg', {
|
|
|
12
13
|
})(function () {
|
|
13
14
|
return {};
|
|
14
15
|
});
|
|
15
|
-
|
|
16
|
+
var ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
|
|
16
17
|
var children = props.children,
|
|
17
18
|
width = props.width,
|
|
18
19
|
height = props.height,
|
|
@@ -40,4 +41,36 @@ export var ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(
|
|
|
40
41
|
children: props.desc
|
|
41
42
|
}), children]
|
|
42
43
|
}));
|
|
43
|
-
});
|
|
44
|
+
});
|
|
45
|
+
process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
|
|
46
|
+
// ----------------------------- Warning --------------------------------
|
|
47
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
48
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
49
|
+
// ----------------------------------------------------------------------
|
|
50
|
+
children: PropTypes.node,
|
|
51
|
+
className: PropTypes.string,
|
|
52
|
+
desc: PropTypes.string,
|
|
53
|
+
/**
|
|
54
|
+
* If `true`, the charts will not listen to the mouse move event.
|
|
55
|
+
* It might break interactive features, but will improve performance.
|
|
56
|
+
* @default false
|
|
57
|
+
*/
|
|
58
|
+
disableAxisListener: PropTypes.bool,
|
|
59
|
+
/**
|
|
60
|
+
* The height of the chart in px.
|
|
61
|
+
*/
|
|
62
|
+
height: PropTypes.number.isRequired,
|
|
63
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
64
|
+
title: PropTypes.string,
|
|
65
|
+
viewBox: PropTypes.shape({
|
|
66
|
+
height: PropTypes.number,
|
|
67
|
+
width: PropTypes.number,
|
|
68
|
+
x: PropTypes.number,
|
|
69
|
+
y: PropTypes.number
|
|
70
|
+
}),
|
|
71
|
+
/**
|
|
72
|
+
* The width of the chart in px.
|
|
73
|
+
*/
|
|
74
|
+
width: PropTypes.number.isRequired
|
|
75
|
+
} : void 0;
|
|
76
|
+
export { ChartsSurface };
|
|
@@ -57,10 +57,10 @@ function AreaPlot(props) {
|
|
|
57
57
|
var xData = xAxis[xAxisKey].data;
|
|
58
58
|
if (process.env.NODE_ENV !== 'production') {
|
|
59
59
|
if (xData === undefined) {
|
|
60
|
-
throw new Error("MUI
|
|
60
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot."));
|
|
61
61
|
}
|
|
62
62
|
if (xData.length < stackedData.length) {
|
|
63
|
-
throw new Error("MUI
|
|
63
|
+
throw new Error("MUI X Charts: The data length of the x axis (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)."));
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
var areaPath = d3Area().x(function (d) {
|
|
@@ -124,6 +124,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
124
124
|
* - 'none': display nothing.
|
|
125
125
|
* - 'line': display a line at the current mouse position.
|
|
126
126
|
* - 'band': display a band at the current mouse position. Only available with band scale.
|
|
127
|
+
* @default { x: 'line' }
|
|
127
128
|
*/
|
|
128
129
|
axisHighlight: PropTypes.shape({
|
|
129
130
|
x: PropTypes.oneOf(['band', 'line', 'none']),
|
|
@@ -160,6 +161,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
160
161
|
className: PropTypes.string,
|
|
161
162
|
/**
|
|
162
163
|
* Color palette used to colorize multiple series.
|
|
164
|
+
* @default blueberryTwilightPalette
|
|
163
165
|
*/
|
|
164
166
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
165
167
|
/**
|
|
@@ -64,7 +64,7 @@ function LineHighlightPlot(props) {
|
|
|
64
64
|
var yScale = yAxis[yAxisKey].scale;
|
|
65
65
|
var xData = xAxis[xAxisKey].data;
|
|
66
66
|
if (xData === undefined) {
|
|
67
|
-
throw new Error("MUI
|
|
67
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot."));
|
|
68
68
|
}
|
|
69
69
|
var x = xScale(xData[highlightedIndex]);
|
|
70
70
|
var y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
|
|
@@ -56,10 +56,10 @@ function LinePlot(props) {
|
|
|
56
56
|
var xData = xAxis[xAxisKey].data;
|
|
57
57
|
if (process.env.NODE_ENV !== 'production') {
|
|
58
58
|
if (xData === undefined) {
|
|
59
|
-
throw new Error("MUI
|
|
59
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot."));
|
|
60
60
|
}
|
|
61
61
|
if (xData.length < stackedData.length) {
|
|
62
|
-
throw new Error("MUI
|
|
62
|
+
throw new Error("MUI X Charts: The data length of the x axis (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)."));
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
var linePath = d3Line().x(function (d) {
|
|
@@ -72,7 +72,7 @@ function MarkPlot(props) {
|
|
|
72
72
|
return true;
|
|
73
73
|
};
|
|
74
74
|
if (xData === undefined) {
|
|
75
|
-
throw new Error("MUI
|
|
75
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot."));
|
|
76
76
|
}
|
|
77
77
|
return xData == null ? void 0 : xData.map(function (x, index) {
|
|
78
78
|
var value = data[index] == null ? null : stackedData[index][1];
|
|
@@ -26,7 +26,7 @@ var formatter = function formatter(params, dataset) {
|
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
28
|
} else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
|
|
29
|
-
throw new Error(["MUI
|
|
29
|
+
throw new Error(["MUI X Charts: line series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
|
|
30
30
|
}
|
|
31
31
|
});
|
|
32
32
|
var completedSeries = {};
|
|
@@ -54,7 +54,7 @@ var formatter = function formatter(params, dataset) {
|
|
|
54
54
|
warnedOnce = true;
|
|
55
55
|
console.error(["MUI-X charts: your dataset key \"".concat(dataKey, "\" is used for plotting line, but contains nonnumerical elements."), 'Line plots only support numbers and null values.']);
|
|
56
56
|
}
|
|
57
|
-
return
|
|
57
|
+
return null;
|
|
58
58
|
}
|
|
59
59
|
return value;
|
|
60
60
|
}) : series[id].data,
|