@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
|
@@ -59,16 +59,16 @@ function ChartsAxis(props) {
|
|
|
59
59
|
const topId = getAxisId(topAxis);
|
|
60
60
|
const rightId = getAxisId(rightAxis);
|
|
61
61
|
if (topId !== null && !xAxis[topId]) {
|
|
62
|
-
throw Error([`MUI
|
|
62
|
+
throw Error([`MUI X Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
|
|
63
63
|
}
|
|
64
64
|
if (leftId !== null && !yAxis[leftId]) {
|
|
65
|
-
throw Error([`MUI
|
|
65
|
+
throw Error([`MUI X Charts: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
|
|
66
66
|
}
|
|
67
67
|
if (rightId !== null && !yAxis[rightId]) {
|
|
68
|
-
throw Error([`MUI
|
|
68
|
+
throw Error([`MUI X Charts: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
|
|
69
69
|
}
|
|
70
70
|
if (bottomId !== null && !xAxis[bottomId]) {
|
|
71
|
-
throw Error([`MUI
|
|
71
|
+
throw Error([`MUI X Charts: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
|
|
72
72
|
}
|
|
73
73
|
const topAxisProps = mergeProps(topAxis, slots, slotProps);
|
|
74
74
|
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/esm/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 };
|
|
@@ -63,10 +63,10 @@ function AreaPlot(props) {
|
|
|
63
63
|
const xData = xAxis[xAxisKey].data;
|
|
64
64
|
if (process.env.NODE_ENV !== 'production') {
|
|
65
65
|
if (xData === undefined) {
|
|
66
|
-
throw new Error(`MUI
|
|
66
|
+
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.`);
|
|
67
67
|
}
|
|
68
68
|
if (xData.length < stackedData.length) {
|
|
69
|
-
throw new Error(`MUI
|
|
69
|
+
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).`);
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
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]));
|
|
@@ -120,6 +120,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
120
120
|
* - 'none': display nothing.
|
|
121
121
|
* - 'line': display a line at the current mouse position.
|
|
122
122
|
* - 'band': display a band at the current mouse position. Only available with band scale.
|
|
123
|
+
* @default { x: 'line' }
|
|
123
124
|
*/
|
|
124
125
|
axisHighlight: PropTypes.shape({
|
|
125
126
|
x: PropTypes.oneOf(['band', 'line', 'none']),
|
|
@@ -156,6 +157,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
156
157
|
className: PropTypes.string,
|
|
157
158
|
/**
|
|
158
159
|
* Color palette used to colorize multiple series.
|
|
160
|
+
* @default blueberryTwilightPalette
|
|
159
161
|
*/
|
|
160
162
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
161
163
|
/**
|
|
@@ -71,7 +71,7 @@ function LineHighlightPlot(props) {
|
|
|
71
71
|
const yScale = yAxis[yAxisKey].scale;
|
|
72
72
|
const xData = xAxis[xAxisKey].data;
|
|
73
73
|
if (xData === undefined) {
|
|
74
|
-
throw new Error(`MUI
|
|
74
|
+
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.`);
|
|
75
75
|
}
|
|
76
76
|
const x = xScale(xData[highlightedIndex]);
|
|
77
77
|
const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
|
|
@@ -62,10 +62,10 @@ function LinePlot(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 linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
|
|
@@ -77,7 +77,7 @@ function MarkPlot(props) {
|
|
|
77
77
|
return true;
|
|
78
78
|
};
|
|
79
79
|
if (xData === undefined) {
|
|
80
|
-
throw new Error(`MUI
|
|
80
|
+
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.`);
|
|
81
81
|
}
|
|
82
82
|
return xData == null ? void 0 : xData.map((x, index) => {
|
|
83
83
|
const value = data[index] == null ? null : stackedData[index][1];
|
|
@@ -28,7 +28,7 @@ const formatter = (params, dataset) => {
|
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
30
|
} else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
|
|
31
|
-
throw new Error([`MUI
|
|
31
|
+
throw new Error([`MUI X Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
34
|
const 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,
|
|
@@ -111,6 +111,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
|
|
|
111
111
|
})).isRequired,
|
|
112
112
|
/**
|
|
113
113
|
* Override the arc attibutes when it is faded.
|
|
114
|
+
* @default { additionalRadius: -5 }
|
|
114
115
|
*/
|
|
115
116
|
faded: PropTypes.shape({
|
|
116
117
|
additionalRadius: PropTypes.number,
|
package/esm/PieChart/PieChart.js
CHANGED
|
@@ -108,7 +108,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
108
108
|
/**
|
|
109
109
|
* Indicate which axis to display the bottom of the charts.
|
|
110
110
|
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
|
|
111
|
-
* @default
|
|
111
|
+
* @default null
|
|
112
112
|
*/
|
|
113
113
|
bottomAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
114
114
|
axisId: PropTypes.string,
|
|
@@ -136,6 +136,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
136
136
|
className: PropTypes.string,
|
|
137
137
|
/**
|
|
138
138
|
* Color palette used to colorize multiple series.
|
|
139
|
+
* @default blueberryTwilightPalette
|
|
139
140
|
*/
|
|
140
141
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
141
142
|
/**
|
|
@@ -157,7 +158,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
157
158
|
/**
|
|
158
159
|
* Indicate which axis to display the left of the charts.
|
|
159
160
|
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
|
|
160
|
-
* @default
|
|
161
|
+
* @default null
|
|
161
162
|
*/
|
|
162
163
|
leftAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
163
164
|
axisId: PropTypes.string,
|
|
@@ -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;
|
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));
|