@mui/x-charts 7.0.0-alpha.7 → 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 +175 -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 +1 -1
- package/PieChart/PieArcLabelPlot.d.ts +5 -0
- package/PieChart/PieArcLabelPlot.js +2 -0
- package/PieChart/PieArcPlot.d.ts +5 -0
- package/PieChart/PieArcPlot.js +1 -0
- package/PieChart/PieChart.d.ts +14 -2
- package/PieChart/PieChart.js +3 -2
- 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 +1 -1
- package/esm/PieChart/PieArcLabelPlot.js +2 -0
- package/esm/PieChart/PieArcPlot.js +1 -0
- package/esm/PieChart/PieChart.js +3 -2
- 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/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 +1 -1
- package/legacy/PieChart/PieArcLabelPlot.js +2 -0
- package/legacy/PieChart/PieArcPlot.js +1 -0
- package/legacy/PieChart/PieChart.js +3 -2
- 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 +1 -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 +1 -1
- package/modern/PieChart/PieArcLabelPlot.js +2 -0
- package/modern/PieChart/PieArcPlot.js +1 -0
- package/modern/PieChart/PieChart.js +3 -2
- 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 +1 -1
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 = {};
|
|
@@ -106,6 +106,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
|
|
|
106
106
|
arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
|
|
107
107
|
/**
|
|
108
108
|
* The minimal angle required to display the arc label.
|
|
109
|
+
* @default 0
|
|
109
110
|
*/
|
|
110
111
|
arcLabelMinAngle: PropTypes.number,
|
|
111
112
|
/**
|
|
@@ -131,6 +132,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
|
|
|
131
132
|
})).isRequired,
|
|
132
133
|
/**
|
|
133
134
|
* Override the arc attibutes when it is faded.
|
|
135
|
+
* @default { additionalRadius: -5 }
|
|
134
136
|
*/
|
|
135
137
|
faded: PropTypes.shape({
|
|
136
138
|
additionalRadius: PropTypes.number,
|
|
@@ -112,6 +112,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
|
|
|
112
112
|
})).isRequired,
|
|
113
113
|
/**
|
|
114
114
|
* Override the arc attibutes when it is faded.
|
|
115
|
+
* @default { additionalRadius: -5 }
|
|
115
116
|
*/
|
|
116
117
|
faded: PropTypes.shape({
|
|
117
118
|
additionalRadius: PropTypes.number,
|
|
@@ -120,7 +120,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
120
120
|
/**
|
|
121
121
|
* Indicate which axis to display the bottom of the charts.
|
|
122
122
|
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
|
|
123
|
-
* @default
|
|
123
|
+
* @default null
|
|
124
124
|
*/
|
|
125
125
|
bottomAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
126
126
|
axisId: PropTypes.string,
|
|
@@ -148,6 +148,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
148
148
|
className: PropTypes.string,
|
|
149
149
|
/**
|
|
150
150
|
* Color palette used to colorize multiple series.
|
|
151
|
+
* @default blueberryTwilightPalette
|
|
151
152
|
*/
|
|
152
153
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
153
154
|
/**
|
|
@@ -169,7 +170,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
169
170
|
/**
|
|
170
171
|
* Indicate which axis to display the left of the charts.
|
|
171
172
|
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
|
|
172
|
-
* @default
|
|
173
|
+
* @default null
|
|
173
174
|
*/
|
|
174
175
|
leftAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
175
176
|
axisId: PropTypes.string,
|
|
@@ -67,11 +67,11 @@ var useChartDimensions = function useChartDimensions(inWidth, inHeight) {
|
|
|
67
67
|
}, [computeSize, inHeight, inWidth]);
|
|
68
68
|
if (process.env.NODE_ENV !== 'production') {
|
|
69
69
|
if (displayError.current && inWidth === undefined && width === 0) {
|
|
70
|
-
console.error("MUI
|
|
70
|
+
console.error("MUI X Charts: ChartContainer does not have `width` prop, and its container has no `width` defined.");
|
|
71
71
|
displayError.current = false;
|
|
72
72
|
}
|
|
73
73
|
if (displayError.current && inHeight === undefined && height === 0) {
|
|
74
|
-
console.error("MUI
|
|
74
|
+
console.error("MUI X Charts: ChartContainer does not have `height` prop, and its container has no `height` defined.");
|
|
75
75
|
displayError.current = false;
|
|
76
76
|
}
|
|
77
77
|
}
|
|
@@ -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
|
/**
|
|
@@ -126,6 +126,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
|
|
|
126
126
|
className: PropTypes.string,
|
|
127
127
|
/**
|
|
128
128
|
* Color palette used to colorize multiple series.
|
|
129
|
+
* @default blueberryTwilightPalette
|
|
129
130
|
*/
|
|
130
131
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
131
132
|
/**
|
|
@@ -156,7 +157,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
|
|
|
156
157
|
* The margin between the SVG and the drawing area.
|
|
157
158
|
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
158
159
|
* Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
159
|
-
* @default
|
|
160
|
+
* @default {
|
|
161
|
+
* top: 5,
|
|
162
|
+
* bottom: 5,
|
|
163
|
+
* left: 5,
|
|
164
|
+
* right: 5,
|
|
165
|
+
* }
|
|
160
166
|
*/
|
|
161
167
|
margin: PropTypes.shape({
|
|
162
168
|
bottom: PropTypes.number,
|
|
@@ -205,6 +211,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
|
|
|
205
211
|
* Formatter used by the tooltip.
|
|
206
212
|
* @param {number} value The value to format.
|
|
207
213
|
* @returns {string} the formatted value.
|
|
214
|
+
* @default (v: number) => v.toString()
|
|
208
215
|
*/
|
|
209
216
|
valueFormatter: PropTypes.func,
|
|
210
217
|
viewBox: PropTypes.shape({
|
|
@@ -40,11 +40,11 @@ export var CartesianContext = /*#__PURE__*/React.createContext({
|
|
|
40
40
|
*
|
|
41
41
|
* - [CartesianContextProvider API](https://mui.com/x/api/charts/cartesian-context-provider/)
|
|
42
42
|
*/
|
|
43
|
-
function CartesianContextProvider(
|
|
44
|
-
var inXAxis =
|
|
45
|
-
inYAxis =
|
|
46
|
-
dataset =
|
|
47
|
-
children =
|
|
43
|
+
function CartesianContextProvider(props) {
|
|
44
|
+
var inXAxis = props.xAxis,
|
|
45
|
+
inYAxis = props.yAxis,
|
|
46
|
+
dataset = props.dataset,
|
|
47
|
+
children = props.children;
|
|
48
48
|
var formattedSeries = React.useContext(SeriesContext);
|
|
49
49
|
var drawingArea = React.useContext(DrawingContext);
|
|
50
50
|
var xAxis = React.useMemo(function () {
|
|
@@ -54,7 +54,7 @@ function CartesianContextProvider(_ref) {
|
|
|
54
54
|
return axisConfig;
|
|
55
55
|
}
|
|
56
56
|
if (dataset === undefined) {
|
|
57
|
-
throw Error('MUI
|
|
57
|
+
throw Error('MUI X Charts: x-axis uses `dataKey` but no `dataset` is provided.');
|
|
58
58
|
}
|
|
59
59
|
return _extends({}, axisConfig, {
|
|
60
60
|
data: dataset.map(function (d) {
|
|
@@ -70,7 +70,7 @@ function CartesianContextProvider(_ref) {
|
|
|
70
70
|
return axisConfig;
|
|
71
71
|
}
|
|
72
72
|
if (dataset === undefined) {
|
|
73
|
-
throw Error('MUI
|
|
73
|
+
throw Error('MUI X Charts: y-axis uses `dataKey` but no `dataset` is provided.');
|
|
74
74
|
}
|
|
75
75
|
return _extends({}, axisConfig, {
|
|
76
76
|
data: dataset.map(function (d) {
|
|
@@ -82,9 +82,9 @@ function CartesianContextProvider(_ref) {
|
|
|
82
82
|
var value = React.useMemo(function () {
|
|
83
83
|
var _xAxis$map, _yAxis$map;
|
|
84
84
|
var axisExtremumCallback = function axisExtremumCallback(acc, chartType, axis, getters, isDefaultAxis) {
|
|
85
|
-
var
|
|
85
|
+
var _ref, _formattedSeries$char;
|
|
86
86
|
var getter = getters[chartType];
|
|
87
|
-
var series = (
|
|
87
|
+
var series = (_ref = (_formattedSeries$char = formattedSeries[chartType]) == null ? void 0 : _formattedSeries$char.series) != null ? _ref : {};
|
|
88
88
|
var _getter = getter({
|
|
89
89
|
series: series,
|
|
90
90
|
axis: axis,
|
|
@@ -114,8 +114,8 @@ function CartesianContextProvider(_ref) {
|
|
|
114
114
|
return _extends({
|
|
115
115
|
id: "deaultized-x-axis-".concat(index)
|
|
116
116
|
}, axis);
|
|
117
|
-
})) != null ? _xAxis$map : []), _toConsumableArray(xAxis === undefined || xAxis.findIndex(function (
|
|
118
|
-
var id =
|
|
117
|
+
})) != null ? _xAxis$map : []), _toConsumableArray(xAxis === undefined || xAxis.findIndex(function (_ref2) {
|
|
118
|
+
var id = _ref2.id;
|
|
119
119
|
return id === DEFAULT_X_AXIS_KEY;
|
|
120
120
|
}) === -1 ? [{
|
|
121
121
|
id: DEFAULT_X_AXIS_KEY,
|
|
@@ -171,8 +171,8 @@ function CartesianContextProvider(_ref) {
|
|
|
171
171
|
return _extends({
|
|
172
172
|
id: "deaultized-y-axis-".concat(index)
|
|
173
173
|
}, axis);
|
|
174
|
-
})) != null ? _yAxis$map : []), _toConsumableArray(yAxis === undefined || yAxis.findIndex(function (
|
|
175
|
-
var id =
|
|
174
|
+
})) != null ? _yAxis$map : []), _toConsumableArray(yAxis === undefined || yAxis.findIndex(function (_ref3) {
|
|
175
|
+
var id = _ref3.id;
|
|
176
176
|
return id === DEFAULT_Y_AXIS_KEY;
|
|
177
177
|
}) === -1 ? [{
|
|
178
178
|
id: DEFAULT_Y_AXIS_KEY,
|
|
@@ -226,12 +226,12 @@ function CartesianContextProvider(_ref) {
|
|
|
226
226
|
return {
|
|
227
227
|
xAxis: completedXAxis,
|
|
228
228
|
yAxis: completedYAxis,
|
|
229
|
-
xAxisIds: allXAxis.map(function (
|
|
230
|
-
var id =
|
|
229
|
+
xAxisIds: allXAxis.map(function (_ref4) {
|
|
230
|
+
var id = _ref4.id;
|
|
231
231
|
return id;
|
|
232
232
|
}),
|
|
233
|
-
yAxisIds: allYAxis.map(function (
|
|
234
|
-
var id =
|
|
233
|
+
yAxisIds: allYAxis.map(function (_ref5) {
|
|
234
|
+
var id = _ref5.id;
|
|
235
235
|
return id;
|
|
236
236
|
})
|
|
237
237
|
};
|
|
@@ -23,12 +23,12 @@ export var SVGContext = /*#__PURE__*/React.createContext({
|
|
|
23
23
|
*
|
|
24
24
|
* - [DrawingProvider API](https://mui.com/x/api/charts/drawing-provider/)
|
|
25
25
|
*/
|
|
26
|
-
function DrawingProvider(
|
|
27
|
-
var width =
|
|
28
|
-
height =
|
|
29
|
-
margin =
|
|
30
|
-
svgRef =
|
|
31
|
-
children =
|
|
26
|
+
function DrawingProvider(props) {
|
|
27
|
+
var width = props.width,
|
|
28
|
+
height = props.height,
|
|
29
|
+
margin = props.margin,
|
|
30
|
+
svgRef = props.svgRef,
|
|
31
|
+
children = props.children;
|
|
32
32
|
var drawingArea = useChartDimensions(width, height, margin);
|
|
33
33
|
return /*#__PURE__*/_jsx(SVGContext.Provider, {
|
|
34
34
|
value: svgRef,
|
|
@@ -34,8 +34,8 @@ var dataReducer = function dataReducer(prevState, action) {
|
|
|
34
34
|
return prevState;
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
|
-
|
|
38
|
-
var children =
|
|
37
|
+
function HighlightProvider(props) {
|
|
38
|
+
var children = props.children;
|
|
39
39
|
var _React$useReducer = React.useReducer(dataReducer, {
|
|
40
40
|
item: null,
|
|
41
41
|
scope: defaultScope
|
|
@@ -52,4 +52,5 @@ export function HighlightProvider(_ref) {
|
|
|
52
52
|
value: value,
|
|
53
53
|
children: children
|
|
54
54
|
});
|
|
55
|
-
}
|
|
55
|
+
}
|
|
56
|
+
export { HighlightProvider };
|
|
@@ -55,8 +55,8 @@ var dataReducer = function dataReducer(prevState, action) {
|
|
|
55
55
|
return prevState;
|
|
56
56
|
}
|
|
57
57
|
};
|
|
58
|
-
|
|
59
|
-
var children =
|
|
58
|
+
function InteractionProvider(props) {
|
|
59
|
+
var children = props.children;
|
|
60
60
|
var _React$useReducer = React.useReducer(dataReducer, {
|
|
61
61
|
item: null,
|
|
62
62
|
axis: {
|
|
@@ -77,4 +77,5 @@ export function InteractionProvider(_ref) {
|
|
|
77
77
|
value: value,
|
|
78
78
|
children: children
|
|
79
79
|
});
|
|
80
|
-
}
|
|
80
|
+
}
|
|
81
|
+
export { InteractionProvider };
|
|
@@ -39,7 +39,7 @@ var formatSeries = function formatSeries(series, colors, dataset) {
|
|
|
39
39
|
};
|
|
40
40
|
}
|
|
41
41
|
if (((_seriesGroups$type = seriesGroups[type]) == null ? void 0 : _seriesGroups$type.series[id]) !== undefined) {
|
|
42
|
-
throw new Error("MUI
|
|
42
|
+
throw new Error("MUI X Charts: series' id \"".concat(id, "\" is not unique."));
|
|
43
43
|
}
|
|
44
44
|
seriesGroups[type].series[id] = _extends({
|
|
45
45
|
id: id
|
|
@@ -56,12 +56,12 @@ var formatSeries = function formatSeries(series, colors, dataset) {
|
|
|
56
56
|
});
|
|
57
57
|
return formattedSeries;
|
|
58
58
|
};
|
|
59
|
-
|
|
60
|
-
var series =
|
|
61
|
-
dataset =
|
|
62
|
-
|
|
63
|
-
colors =
|
|
64
|
-
children =
|
|
59
|
+
function SeriesContextProvider(props) {
|
|
60
|
+
var series = props.series,
|
|
61
|
+
dataset = props.dataset,
|
|
62
|
+
_props$colors = props.colors,
|
|
63
|
+
colors = _props$colors === void 0 ? blueberryTwilightPalette : _props$colors,
|
|
64
|
+
children = props.children;
|
|
65
65
|
var theme = useTheme();
|
|
66
66
|
var formattedSeries = React.useMemo(function () {
|
|
67
67
|
return formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, dataset);
|
|
@@ -70,4 +70,5 @@ export function SeriesContextProvider(_ref) {
|
|
|
70
70
|
value: formattedSeries,
|
|
71
71
|
children: children
|
|
72
72
|
});
|
|
73
|
-
}
|
|
73
|
+
}
|
|
74
|
+
export { SeriesContextProvider };
|
package/legacy/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
|
|
@@ -26,4 +26,5 @@ export * from './PieChart';
|
|
|
26
26
|
export * from './ScatterChart';
|
|
27
27
|
export * from './SparkLineChart';
|
|
28
28
|
export * from './ChartContainer';
|
|
29
|
+
export * from './ChartsSurface';
|
|
29
30
|
export * from './ResponsiveChartContainer';
|
|
@@ -3,9 +3,9 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
|
3
3
|
// DOM utils taken from
|
|
4
4
|
// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
return
|
|
8
|
-
}
|
|
6
|
+
function isSsr() {
|
|
7
|
+
return typeof window === 'undefined';
|
|
8
|
+
}
|
|
9
9
|
var stringCache = {
|
|
10
10
|
widthCache: {},
|
|
11
11
|
cacheCount: 0
|
|
@@ -63,6 +63,7 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
|
|
|
63
63
|
arcLabel?: 'formattedValue' | 'label' | 'value' | ((item: DefaultizedPieValueType) => string);
|
|
64
64
|
/**
|
|
65
65
|
* The minimal angle required to display the arc label.
|
|
66
|
+
* @default 0
|
|
66
67
|
*/
|
|
67
68
|
arcLabelMinAngle?: number;
|
|
68
69
|
/**
|
|
@@ -153,6 +153,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
|
|
|
153
153
|
className: PropTypes.string,
|
|
154
154
|
/**
|
|
155
155
|
* Color palette used to colorize multiple series.
|
|
156
|
+
* @default blueberryTwilightPalette
|
|
156
157
|
*/
|
|
157
158
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
158
159
|
/**
|
|
@@ -69,18 +69,18 @@ const useCompletedData = () => {
|
|
|
69
69
|
let baseScaleConfig;
|
|
70
70
|
if (verticalLayout) {
|
|
71
71
|
if (!isBandScaleConfig(xAxisConfig)) {
|
|
72
|
-
throw new Error(`MUI
|
|
72
|
+
throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}".`);
|
|
73
73
|
}
|
|
74
74
|
if (xAxis[xAxisKey].data === undefined) {
|
|
75
|
-
throw new Error(`MUI
|
|
75
|
+
throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud have data property.`);
|
|
76
76
|
}
|
|
77
77
|
baseScaleConfig = xAxisConfig;
|
|
78
78
|
} else {
|
|
79
79
|
if (!isBandScaleConfig(yAxisConfig)) {
|
|
80
|
-
throw new Error(`MUI
|
|
80
|
+
throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}".`);
|
|
81
81
|
}
|
|
82
82
|
if (yAxis[yAxisKey].data === undefined) {
|
|
83
|
-
throw new Error(`MUI
|
|
83
|
+
throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud have data property.`);
|
|
84
84
|
}
|
|
85
85
|
baseScaleConfig = yAxisConfig;
|
|
86
86
|
}
|
|
@@ -25,7 +25,7 @@ const formatter = (params, dataset) => {
|
|
|
25
25
|
}
|
|
26
26
|
});
|
|
27
27
|
} else if (dataset === undefined) {
|
|
28
|
-
throw new Error([`MUI
|
|
28
|
+
throw new Error([`MUI X Charts: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
31
|
const completedSeries = {};
|
|
@@ -58,16 +58,16 @@ function ChartsAxis(props) {
|
|
|
58
58
|
const topId = getAxisId(topAxis);
|
|
59
59
|
const rightId = getAxisId(rightAxis);
|
|
60
60
|
if (topId !== null && !xAxis[topId]) {
|
|
61
|
-
throw Error([`MUI
|
|
61
|
+
throw Error([`MUI X Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
|
|
62
62
|
}
|
|
63
63
|
if (leftId !== null && !yAxis[leftId]) {
|
|
64
|
-
throw Error([`MUI
|
|
64
|
+
throw Error([`MUI X Charts: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
|
|
65
65
|
}
|
|
66
66
|
if (rightId !== null && !yAxis[rightId]) {
|
|
67
|
-
throw Error([`MUI
|
|
67
|
+
throw Error([`MUI X Charts: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
|
|
68
68
|
}
|
|
69
69
|
if (bottomId !== null && !xAxis[bottomId]) {
|
|
70
|
-
throw Error([`MUI
|
|
70
|
+
throw Error([`MUI X Charts: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
|
|
71
71
|
}
|
|
72
72
|
const topAxisProps = mergeProps(topAxis, slots, slotProps);
|
|
73
73
|
const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
|
|
@@ -5,13 +5,17 @@ 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
|
+
const {
|
|
9
|
+
x,
|
|
10
|
+
y
|
|
11
|
+
} = props;
|
|
12
|
+
if (x !== undefined && y !== undefined) {
|
|
13
|
+
throw new Error('MUI X Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
|
|
10
14
|
}
|
|
11
|
-
if (
|
|
12
|
-
throw new Error('MUI
|
|
15
|
+
if (x === undefined && y === undefined) {
|
|
16
|
+
throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
|
|
13
17
|
}
|
|
14
|
-
if (
|
|
18
|
+
if (x !== undefined) {
|
|
15
19
|
return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));
|
|
16
20
|
}
|
|
17
21
|
return /*#__PURE__*/_jsx(ChartsYReferenceLine, _extends({}, props));
|
package/modern/ChartsSurface.js
CHANGED
|
@@ -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 = ["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";
|
|
@@ -10,7 +11,7 @@ const ChartChartsSurfaceStyles = styled('svg', {
|
|
|
10
11
|
name: 'MuiChartsSurface',
|
|
11
12
|
slot: 'Root'
|
|
12
13
|
})(() => ({}));
|
|
13
|
-
|
|
14
|
+
const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
|
|
14
15
|
const {
|
|
15
16
|
children,
|
|
16
17
|
width,
|
|
@@ -38,4 +39,36 @@ export const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurfac
|
|
|
38
39
|
children: props.desc
|
|
39
40
|
}), children]
|
|
40
41
|
}));
|
|
41
|
-
});
|
|
42
|
+
});
|
|
43
|
+
process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
|
|
44
|
+
// ----------------------------- Warning --------------------------------
|
|
45
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
46
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
47
|
+
// ----------------------------------------------------------------------
|
|
48
|
+
children: PropTypes.node,
|
|
49
|
+
className: PropTypes.string,
|
|
50
|
+
desc: PropTypes.string,
|
|
51
|
+
/**
|
|
52
|
+
* If `true`, the charts will not listen to the mouse move event.
|
|
53
|
+
* It might break interactive features, but will improve performance.
|
|
54
|
+
* @default false
|
|
55
|
+
*/
|
|
56
|
+
disableAxisListener: PropTypes.bool,
|
|
57
|
+
/**
|
|
58
|
+
* The height of the chart in px.
|
|
59
|
+
*/
|
|
60
|
+
height: PropTypes.number.isRequired,
|
|
61
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
62
|
+
title: PropTypes.string,
|
|
63
|
+
viewBox: PropTypes.shape({
|
|
64
|
+
height: PropTypes.number,
|
|
65
|
+
width: PropTypes.number,
|
|
66
|
+
x: PropTypes.number,
|
|
67
|
+
y: PropTypes.number
|
|
68
|
+
}),
|
|
69
|
+
/**
|
|
70
|
+
* The width of the chart in px.
|
|
71
|
+
*/
|
|
72
|
+
width: PropTypes.number.isRequired
|
|
73
|
+
} : void 0;
|
|
74
|
+
export { ChartsSurface };
|
|
@@ -62,10 +62,10 @@ function AreaPlot(props) {
|
|
|
62
62
|
const xData = xAxis[xAxisKey].data;
|
|
63
63
|
if (process.env.NODE_ENV !== 'production') {
|
|
64
64
|
if (xData === undefined) {
|
|
65
|
-
throw new Error(`MUI
|
|
65
|
+
throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
|
|
66
66
|
}
|
|
67
67
|
if (xData.length < stackedData.length) {
|
|
68
|
-
throw new Error(`MUI
|
|
68
|
+
throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
|