@mui/x-charts 6.18.0 → 6.18.1
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.d.ts +7 -0
- package/BarChart/BarChart.js +41 -4
- package/CHANGELOG.md +63 -5
- package/ChartsAxis/ChartsAxis.js +5 -5
- package/ChartsAxis/axisClasses.d.ts +2 -2
- package/ChartsLegend/ChartsLegend.d.ts +1 -0
- package/ChartsLegend/ChartsLegend.js +1 -1
- package/ChartsLegend/chartsLegendClasses.d.ts +1 -1
- package/ChartsLegend/chartsLegendClasses.js +2 -2
- package/ChartsReferenceLine/ChartsReferenceLine.d.ts +10 -0
- package/ChartsReferenceLine/ChartsReferenceLine.js +78 -0
- package/ChartsReferenceLine/ChartsXReferenceLine.d.ts +13 -0
- package/ChartsReferenceLine/ChartsXReferenceLine.js +112 -0
- package/ChartsReferenceLine/ChartsYReferenceLine.d.ts +13 -0
- package/ChartsReferenceLine/ChartsYReferenceLine.js +112 -0
- package/ChartsReferenceLine/chartsReferenceLineClasses.d.ts +15 -0
- package/ChartsReferenceLine/chartsReferenceLineClasses.js +14 -0
- package/ChartsReferenceLine/common.d.ts +41 -0
- package/ChartsReferenceLine/common.js +27 -0
- package/ChartsReferenceLine/index.d.ts +2 -0
- package/ChartsReferenceLine/index.js +27 -0
- package/ChartsReferenceLine/package.json +6 -0
- package/ChartsSurface.d.ts +11 -0
- package/ChartsXAxis/ChartsXAxis.js +9 -5
- package/ChartsYAxis/ChartsYAxis.js +9 -5
- package/LineChart/LineChart.d.ts +7 -0
- package/LineChart/LineChart.js +41 -4
- package/LineChart/LineHighlightPlot.js +1 -1
- package/LineChart/MarkPlot.js +2 -1
- package/PieChart/PieChart.js +34 -4
- package/ResponsiveChartContainer/index.d.ts +13 -3
- package/ScatterChart/ScatterChart.js +34 -4
- package/SparkLineChart/SparkLineChart.js +22 -0
- package/context/CartesianContextProvider.d.ts +21 -1
- package/context/CartesianContextProvider.js +11 -0
- package/context/DrawingProvider.d.ts +18 -0
- package/context/DrawingProvider.js +6 -0
- package/context/HighlightProvider.d.ts +17 -0
- package/context/InteractionProvider.d.ts +6 -0
- package/context/SeriesContextProvider.d.ts +5 -0
- package/esm/BarChart/BarChart.js +41 -4
- package/esm/ChartsAxis/ChartsAxis.js +6 -5
- package/esm/ChartsLegend/ChartsLegend.js +2 -2
- package/esm/ChartsLegend/chartsLegendClasses.js +1 -1
- package/esm/ChartsReferenceLine/ChartsReferenceLine.js +70 -0
- package/esm/ChartsReferenceLine/ChartsXReferenceLine.js +105 -0
- package/esm/ChartsReferenceLine/ChartsYReferenceLine.js +105 -0
- package/esm/ChartsReferenceLine/chartsReferenceLineClasses.js +6 -0
- package/esm/ChartsReferenceLine/common.js +20 -0
- package/esm/ChartsReferenceLine/index.js +2 -0
- package/esm/ChartsXAxis/ChartsXAxis.js +10 -6
- package/esm/ChartsYAxis/ChartsYAxis.js +10 -6
- package/esm/LineChart/LineChart.js +41 -4
- package/esm/LineChart/LineHighlightPlot.js +1 -1
- package/esm/LineChart/MarkPlot.js +2 -1
- package/esm/PieChart/PieChart.js +34 -4
- package/esm/ScatterChart/ScatterChart.js +34 -4
- package/esm/SparkLineChart/SparkLineChart.js +22 -0
- package/esm/context/CartesianContextProvider.js +11 -0
- package/esm/context/DrawingProvider.js +6 -0
- package/esm/index.js +1 -0
- package/esm/internals/geometry.js +2 -2
- package/hooks/useScale.d.ts +2 -2
- package/index.d.ts +1 -0
- package/index.js +12 -1
- package/internals/components/ChartsText.d.ts +1 -1
- package/internals/geometry.d.ts +2 -2
- package/internals/geometry.js +2 -2
- package/internals/isBandScale.d.ts +3 -1
- package/internals/utils.d.ts +5 -0
- package/legacy/BarChart/BarChart.js +41 -4
- package/legacy/ChartsAxis/ChartsAxis.js +6 -5
- package/legacy/ChartsLegend/ChartsLegend.js +2 -2
- package/legacy/ChartsLegend/chartsLegendClasses.js +1 -1
- package/legacy/ChartsReferenceLine/ChartsReferenceLine.js +70 -0
- package/legacy/ChartsReferenceLine/ChartsXReferenceLine.js +105 -0
- package/legacy/ChartsReferenceLine/ChartsYReferenceLine.js +105 -0
- package/legacy/ChartsReferenceLine/chartsReferenceLineClasses.js +6 -0
- package/legacy/ChartsReferenceLine/common.js +20 -0
- package/legacy/ChartsReferenceLine/index.js +2 -0
- package/legacy/ChartsXAxis/ChartsXAxis.js +15 -12
- package/legacy/ChartsYAxis/ChartsYAxis.js +15 -12
- package/legacy/LineChart/LineChart.js +41 -4
- package/legacy/LineChart/LineHighlightPlot.js +1 -1
- package/legacy/LineChart/MarkPlot.js +2 -1
- package/legacy/PieChart/PieChart.js +34 -4
- package/legacy/ScatterChart/ScatterChart.js +34 -4
- package/legacy/SparkLineChart/SparkLineChart.js +22 -0
- package/legacy/context/CartesianContextProvider.js +11 -0
- package/legacy/context/DrawingProvider.js +6 -0
- package/legacy/index.js +2 -1
- package/legacy/internals/geometry.js +2 -2
- package/models/axis.d.ts +33 -13
- package/models/layout.d.ts +6 -0
- package/models/seriesType/common.d.ts +16 -0
- package/modern/BarChart/BarChart.js +41 -4
- package/modern/ChartsAxis/ChartsAxis.js +5 -5
- package/modern/ChartsLegend/ChartsLegend.js +2 -2
- package/modern/ChartsLegend/chartsLegendClasses.js +1 -1
- package/modern/ChartsReferenceLine/ChartsReferenceLine.js +70 -0
- package/modern/ChartsReferenceLine/ChartsXReferenceLine.js +104 -0
- package/modern/ChartsReferenceLine/ChartsYReferenceLine.js +104 -0
- package/modern/ChartsReferenceLine/chartsReferenceLineClasses.js +6 -0
- package/modern/ChartsReferenceLine/common.js +20 -0
- package/modern/ChartsReferenceLine/index.js +2 -0
- package/modern/ChartsXAxis/ChartsXAxis.js +9 -5
- package/modern/ChartsYAxis/ChartsYAxis.js +9 -5
- package/modern/LineChart/LineChart.js +41 -4
- package/modern/LineChart/LineHighlightPlot.js +1 -1
- package/modern/LineChart/MarkPlot.js +2 -1
- package/modern/PieChart/PieChart.js +34 -4
- package/modern/ScatterChart/ScatterChart.js +34 -4
- package/modern/SparkLineChart/SparkLineChart.js +22 -0
- package/modern/context/CartesianContextProvider.js +11 -0
- package/modern/context/DrawingProvider.js +6 -0
- package/modern/index.js +2 -1
- package/modern/internals/geometry.js +2 -2
- package/package.json +1 -1
|
@@ -102,22 +102,25 @@ const defaultProps = {
|
|
|
102
102
|
* - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
|
|
103
103
|
*/
|
|
104
104
|
function ChartsXAxis(inProps) {
|
|
105
|
-
var _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
|
|
105
|
+
var _props$axisId, _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
|
|
106
106
|
const props = useThemeProps({
|
|
107
107
|
props: _extends({}, defaultProps, inProps),
|
|
108
108
|
name: 'MuiChartsXAxis'
|
|
109
109
|
});
|
|
110
|
+
const {
|
|
111
|
+
xAxisIds
|
|
112
|
+
} = React.useContext(CartesianContext);
|
|
110
113
|
const _React$useContext = React.useContext(CartesianContext),
|
|
111
|
-
_props$axisId = props.axisId,
|
|
114
|
+
_ref = (_props$axisId = props.axisId) != null ? _props$axisId : xAxisIds[0],
|
|
112
115
|
{
|
|
113
116
|
xAxis: {
|
|
114
|
-
[
|
|
117
|
+
[_ref]: {
|
|
115
118
|
scale: xScale,
|
|
116
119
|
tickNumber
|
|
117
120
|
}
|
|
118
121
|
}
|
|
119
122
|
} = _React$useContext,
|
|
120
|
-
settings = _objectWithoutPropertiesLoose(_React$useContext.xAxis[
|
|
123
|
+
settings = _objectWithoutPropertiesLoose(_React$useContext.xAxis[_ref], _excluded);
|
|
121
124
|
const isMounted = useMounted();
|
|
122
125
|
const defaultizedProps = _extends({}, defaultProps, settings, props);
|
|
123
126
|
const {
|
|
@@ -235,9 +238,10 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
|
|
|
235
238
|
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
236
239
|
// ----------------------------------------------------------------------
|
|
237
240
|
/**
|
|
238
|
-
*
|
|
241
|
+
* The id of the axis to render.
|
|
242
|
+
* If undefined, it will be the first defined axis.
|
|
239
243
|
*/
|
|
240
|
-
axisId: PropTypes.string
|
|
244
|
+
axisId: PropTypes.string,
|
|
241
245
|
/**
|
|
242
246
|
* Override or extend the styles applied to the component.
|
|
243
247
|
*/
|
|
@@ -48,22 +48,25 @@ const defaultProps = {
|
|
|
48
48
|
* - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
|
|
49
49
|
*/
|
|
50
50
|
function ChartsYAxis(inProps) {
|
|
51
|
-
var _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
|
|
51
|
+
var _props$axisId, _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
|
|
52
52
|
const props = useThemeProps({
|
|
53
53
|
props: _extends({}, defaultProps, inProps),
|
|
54
54
|
name: 'MuiChartsYAxis'
|
|
55
55
|
});
|
|
56
|
+
const {
|
|
57
|
+
yAxisIds
|
|
58
|
+
} = React.useContext(CartesianContext);
|
|
56
59
|
const _React$useContext = React.useContext(CartesianContext),
|
|
57
|
-
_props$axisId = props.axisId,
|
|
60
|
+
_ref = (_props$axisId = props.axisId) != null ? _props$axisId : yAxisIds[0],
|
|
58
61
|
{
|
|
59
62
|
yAxis: {
|
|
60
|
-
[
|
|
63
|
+
[_ref]: {
|
|
61
64
|
scale: yScale,
|
|
62
65
|
tickNumber
|
|
63
66
|
}
|
|
64
67
|
}
|
|
65
68
|
} = _React$useContext,
|
|
66
|
-
settings = _objectWithoutPropertiesLoose(_React$useContext.yAxis[
|
|
69
|
+
settings = _objectWithoutPropertiesLoose(_React$useContext.yAxis[_ref], _excluded);
|
|
67
70
|
const defaultizedProps = _extends({}, defaultProps, settings, props);
|
|
68
71
|
const {
|
|
69
72
|
position,
|
|
@@ -168,9 +171,10 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
|
|
|
168
171
|
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
169
172
|
// ----------------------------------------------------------------------
|
|
170
173
|
/**
|
|
171
|
-
*
|
|
174
|
+
* The id of the axis to render.
|
|
175
|
+
* If undefined, it will be the first defined axis.
|
|
172
176
|
*/
|
|
173
|
-
axisId: PropTypes.string
|
|
177
|
+
axisId: PropTypes.string,
|
|
174
178
|
/**
|
|
175
179
|
* Override or extend the styles applied to the component.
|
|
176
180
|
*/
|
|
@@ -114,6 +114,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
114
114
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
115
115
|
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
116
116
|
// ----------------------------------------------------------------------
|
|
117
|
+
/**
|
|
118
|
+
* Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
|
|
119
|
+
* The two properties accept the following values:
|
|
120
|
+
* - 'none': display nothing.
|
|
121
|
+
* - 'line': display a line at the current mouse position.
|
|
122
|
+
* - 'band': display a band at the current mouse position. Only available with band scale.
|
|
123
|
+
*/
|
|
117
124
|
axisHighlight: PropTypes.shape({
|
|
118
125
|
x: PropTypes.oneOf(['band', 'line', 'none']),
|
|
119
126
|
y: PropTypes.oneOf(['band', 'line', 'none'])
|
|
@@ -124,7 +131,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
124
131
|
* @default xAxisIds[0] The id of the first provided axis
|
|
125
132
|
*/
|
|
126
133
|
bottomAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
127
|
-
axisId: PropTypes.string
|
|
134
|
+
axisId: PropTypes.string,
|
|
128
135
|
classes: PropTypes.object,
|
|
129
136
|
disableLine: PropTypes.bool,
|
|
130
137
|
disableTicks: PropTypes.bool,
|
|
@@ -151,13 +158,25 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
151
158
|
* Color palette used to colorize multiple series.
|
|
152
159
|
*/
|
|
153
160
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
161
|
+
/**
|
|
162
|
+
* An array of objects that can be used to populate series and axes data using their `dataKey` property.
|
|
163
|
+
*/
|
|
154
164
|
dataset: PropTypes.arrayOf(PropTypes.object),
|
|
155
165
|
desc: PropTypes.string,
|
|
166
|
+
/**
|
|
167
|
+
* If `true`, the charts will not listen to the mouse move event.
|
|
168
|
+
* It might break interactive features, but will improve performance.
|
|
169
|
+
* @default false
|
|
170
|
+
*/
|
|
156
171
|
disableAxisListener: PropTypes.bool,
|
|
157
172
|
/**
|
|
158
173
|
* If `true`, render the line highlight item.
|
|
159
174
|
*/
|
|
160
175
|
disableLineItemHighlight: PropTypes.bool,
|
|
176
|
+
/**
|
|
177
|
+
* The height of the chart in px. If not defined, it takes the height of the parent element.
|
|
178
|
+
* @default undefined
|
|
179
|
+
*/
|
|
161
180
|
height: PropTypes.number,
|
|
162
181
|
/**
|
|
163
182
|
* Indicate which axis to display the left of the charts.
|
|
@@ -165,7 +184,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
165
184
|
* @default yAxisIds[0] The id of the first provided axis
|
|
166
185
|
*/
|
|
167
186
|
leftAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
168
|
-
axisId: PropTypes.string
|
|
187
|
+
axisId: PropTypes.string,
|
|
169
188
|
classes: PropTypes.object,
|
|
170
189
|
disableLine: PropTypes.bool,
|
|
171
190
|
disableTicks: PropTypes.bool,
|
|
@@ -200,6 +219,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
200
219
|
slotProps: PropTypes.object,
|
|
201
220
|
slots: PropTypes.object
|
|
202
221
|
}),
|
|
222
|
+
/**
|
|
223
|
+
* The margin between the SVG and the drawing area.
|
|
224
|
+
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
225
|
+
* Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
226
|
+
* @default object Depends on the charts type.
|
|
227
|
+
*/
|
|
203
228
|
margin: PropTypes.shape({
|
|
204
229
|
bottom: PropTypes.number,
|
|
205
230
|
left: PropTypes.number,
|
|
@@ -212,7 +237,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
212
237
|
* @default null
|
|
213
238
|
*/
|
|
214
239
|
rightAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
215
|
-
axisId: PropTypes.string
|
|
240
|
+
axisId: PropTypes.string,
|
|
216
241
|
classes: PropTypes.object,
|
|
217
242
|
disableLine: PropTypes.bool,
|
|
218
243
|
disableTicks: PropTypes.bool,
|
|
@@ -282,7 +307,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
282
307
|
* @default null
|
|
283
308
|
*/
|
|
284
309
|
topAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
285
|
-
axisId: PropTypes.string
|
|
310
|
+
axisId: PropTypes.string,
|
|
286
311
|
classes: PropTypes.object,
|
|
287
312
|
disableLine: PropTypes.bool,
|
|
288
313
|
disableTicks: PropTypes.bool,
|
|
@@ -309,7 +334,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
309
334
|
x: PropTypes.number,
|
|
310
335
|
y: PropTypes.number
|
|
311
336
|
}),
|
|
337
|
+
/**
|
|
338
|
+
* The width of the chart in px. If not defined, it takes the width of the parent element.
|
|
339
|
+
* @default undefined
|
|
340
|
+
*/
|
|
312
341
|
width: PropTypes.number,
|
|
342
|
+
/**
|
|
343
|
+
* The configuration of the x-axes.
|
|
344
|
+
* If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
|
|
345
|
+
*/
|
|
313
346
|
xAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
314
347
|
axisId: PropTypes.string,
|
|
315
348
|
classes: PropTypes.object,
|
|
@@ -340,6 +373,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
340
373
|
tickSize: PropTypes.number,
|
|
341
374
|
valueFormatter: PropTypes.func
|
|
342
375
|
})),
|
|
376
|
+
/**
|
|
377
|
+
* The configuration of the y-axes.
|
|
378
|
+
* If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
|
|
379
|
+
*/
|
|
343
380
|
yAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
344
381
|
axisId: PropTypes.string,
|
|
345
382
|
classes: PropTypes.object,
|
|
@@ -73,7 +73,7 @@ function LineHighlightPlot(props) {
|
|
|
73
73
|
throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
|
|
74
74
|
}
|
|
75
75
|
const x = xScale(xData[highlightedIndex]);
|
|
76
|
-
const y = yScale(stackedData[highlightedIndex][1]);
|
|
76
|
+
const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
|
|
77
77
|
return /*#__PURE__*/_jsx(Element, _extends({
|
|
78
78
|
id: seriesId,
|
|
79
79
|
color: series[seriesId].color,
|
|
@@ -126,7 +126,8 @@ function MarkPlot(props) {
|
|
|
126
126
|
shape: "circle",
|
|
127
127
|
color: series[seriesId].color,
|
|
128
128
|
x: x,
|
|
129
|
-
y: y
|
|
129
|
+
y: y // Don't knwo why TS don't get from the filter that y can't be null
|
|
130
|
+
,
|
|
130
131
|
highlightScope: series[seriesId].highlightScope
|
|
131
132
|
}, slotProps == null ? void 0 : slotProps.mark), `${seriesId}-${index}`);
|
|
132
133
|
});
|
package/esm/PieChart/PieChart.js
CHANGED
|
@@ -111,7 +111,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
111
111
|
* @default xAxisIds[0] The id of the first provided axis
|
|
112
112
|
*/
|
|
113
113
|
bottomAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
114
|
-
axisId: PropTypes.string
|
|
114
|
+
axisId: PropTypes.string,
|
|
115
115
|
classes: PropTypes.object,
|
|
116
116
|
disableLine: PropTypes.bool,
|
|
117
117
|
disableTicks: PropTypes.bool,
|
|
@@ -138,9 +138,21 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
138
138
|
* Color palette used to colorize multiple series.
|
|
139
139
|
*/
|
|
140
140
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
141
|
+
/**
|
|
142
|
+
* An array of objects that can be used to populate series and axes data using their `dataKey` property.
|
|
143
|
+
*/
|
|
141
144
|
dataset: PropTypes.arrayOf(PropTypes.object),
|
|
142
145
|
desc: PropTypes.string,
|
|
146
|
+
/**
|
|
147
|
+
* If `true`, the charts will not listen to the mouse move event.
|
|
148
|
+
* It might break interactive features, but will improve performance.
|
|
149
|
+
* @default false
|
|
150
|
+
*/
|
|
143
151
|
disableAxisListener: PropTypes.bool,
|
|
152
|
+
/**
|
|
153
|
+
* The height of the chart in px. If not defined, it takes the height of the parent element.
|
|
154
|
+
* @default undefined
|
|
155
|
+
*/
|
|
144
156
|
height: PropTypes.number,
|
|
145
157
|
/**
|
|
146
158
|
* Indicate which axis to display the left of the charts.
|
|
@@ -148,7 +160,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
148
160
|
* @default yAxisIds[0] The id of the first provided axis
|
|
149
161
|
*/
|
|
150
162
|
leftAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
151
|
-
axisId: PropTypes.string
|
|
163
|
+
axisId: PropTypes.string,
|
|
152
164
|
classes: PropTypes.object,
|
|
153
165
|
disableLine: PropTypes.bool,
|
|
154
166
|
disableTicks: PropTypes.bool,
|
|
@@ -183,6 +195,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
183
195
|
slotProps: PropTypes.object,
|
|
184
196
|
slots: PropTypes.object
|
|
185
197
|
}),
|
|
198
|
+
/**
|
|
199
|
+
* The margin between the SVG and the drawing area.
|
|
200
|
+
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
201
|
+
* Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
202
|
+
* @default object Depends on the charts type.
|
|
203
|
+
*/
|
|
186
204
|
margin: PropTypes.shape({
|
|
187
205
|
bottom: PropTypes.number,
|
|
188
206
|
left: PropTypes.number,
|
|
@@ -196,7 +214,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
196
214
|
* @default null
|
|
197
215
|
*/
|
|
198
216
|
rightAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
199
|
-
axisId: PropTypes.string
|
|
217
|
+
axisId: PropTypes.string,
|
|
200
218
|
classes: PropTypes.object,
|
|
201
219
|
disableLine: PropTypes.bool,
|
|
202
220
|
disableTicks: PropTypes.bool,
|
|
@@ -287,7 +305,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
287
305
|
* @default null
|
|
288
306
|
*/
|
|
289
307
|
topAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
290
|
-
axisId: PropTypes.string
|
|
308
|
+
axisId: PropTypes.string,
|
|
291
309
|
classes: PropTypes.object,
|
|
292
310
|
disableLine: PropTypes.bool,
|
|
293
311
|
disableTicks: PropTypes.bool,
|
|
@@ -314,7 +332,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
314
332
|
x: PropTypes.number,
|
|
315
333
|
y: PropTypes.number
|
|
316
334
|
}),
|
|
335
|
+
/**
|
|
336
|
+
* The width of the chart in px. If not defined, it takes the width of the parent element.
|
|
337
|
+
* @default undefined
|
|
338
|
+
*/
|
|
317
339
|
width: PropTypes.number,
|
|
340
|
+
/**
|
|
341
|
+
* The configuration of the x-axes.
|
|
342
|
+
* If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
|
|
343
|
+
*/
|
|
318
344
|
xAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
319
345
|
axisId: PropTypes.string,
|
|
320
346
|
classes: PropTypes.object,
|
|
@@ -345,6 +371,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
345
371
|
tickSize: PropTypes.number,
|
|
346
372
|
valueFormatter: PropTypes.func
|
|
347
373
|
})),
|
|
374
|
+
/**
|
|
375
|
+
* The configuration of the y-axes.
|
|
376
|
+
* If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
|
|
377
|
+
*/
|
|
348
378
|
yAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
349
379
|
axisId: PropTypes.string,
|
|
350
380
|
classes: PropTypes.object,
|
|
@@ -88,7 +88,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
|
|
|
88
88
|
* @default xAxisIds[0] The id of the first provided axis
|
|
89
89
|
*/
|
|
90
90
|
bottomAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
91
|
-
axisId: PropTypes.string
|
|
91
|
+
axisId: PropTypes.string,
|
|
92
92
|
classes: PropTypes.object,
|
|
93
93
|
disableLine: PropTypes.bool,
|
|
94
94
|
disableTicks: PropTypes.bool,
|
|
@@ -115,9 +115,21 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
|
|
|
115
115
|
* Color palette used to colorize multiple series.
|
|
116
116
|
*/
|
|
117
117
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
118
|
+
/**
|
|
119
|
+
* An array of objects that can be used to populate series and axes data using their `dataKey` property.
|
|
120
|
+
*/
|
|
118
121
|
dataset: PropTypes.arrayOf(PropTypes.object),
|
|
119
122
|
desc: PropTypes.string,
|
|
123
|
+
/**
|
|
124
|
+
* If `true`, the charts will not listen to the mouse move event.
|
|
125
|
+
* It might break interactive features, but will improve performance.
|
|
126
|
+
* @default false
|
|
127
|
+
*/
|
|
120
128
|
disableAxisListener: PropTypes.bool,
|
|
129
|
+
/**
|
|
130
|
+
* The height of the chart in px. If not defined, it takes the height of the parent element.
|
|
131
|
+
* @default undefined
|
|
132
|
+
*/
|
|
121
133
|
height: PropTypes.number,
|
|
122
134
|
/**
|
|
123
135
|
* Indicate which axis to display the left of the charts.
|
|
@@ -125,7 +137,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
|
|
|
125
137
|
* @default yAxisIds[0] The id of the first provided axis
|
|
126
138
|
*/
|
|
127
139
|
leftAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
128
|
-
axisId: PropTypes.string
|
|
140
|
+
axisId: PropTypes.string,
|
|
129
141
|
classes: PropTypes.object,
|
|
130
142
|
disableLine: PropTypes.bool,
|
|
131
143
|
disableTicks: PropTypes.bool,
|
|
@@ -160,6 +172,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
|
|
|
160
172
|
slotProps: PropTypes.object,
|
|
161
173
|
slots: PropTypes.object
|
|
162
174
|
}),
|
|
175
|
+
/**
|
|
176
|
+
* The margin between the SVG and the drawing area.
|
|
177
|
+
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
178
|
+
* Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
179
|
+
* @default object Depends on the charts type.
|
|
180
|
+
*/
|
|
163
181
|
margin: PropTypes.shape({
|
|
164
182
|
bottom: PropTypes.number,
|
|
165
183
|
left: PropTypes.number,
|
|
@@ -172,7 +190,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
|
|
|
172
190
|
* @default null
|
|
173
191
|
*/
|
|
174
192
|
rightAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
175
|
-
axisId: PropTypes.string
|
|
193
|
+
axisId: PropTypes.string,
|
|
176
194
|
classes: PropTypes.object,
|
|
177
195
|
disableLine: PropTypes.bool,
|
|
178
196
|
disableTicks: PropTypes.bool,
|
|
@@ -238,7 +256,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
|
|
|
238
256
|
* @default null
|
|
239
257
|
*/
|
|
240
258
|
topAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
241
|
-
axisId: PropTypes.string
|
|
259
|
+
axisId: PropTypes.string,
|
|
242
260
|
classes: PropTypes.object,
|
|
243
261
|
disableLine: PropTypes.bool,
|
|
244
262
|
disableTicks: PropTypes.bool,
|
|
@@ -265,7 +283,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
|
|
|
265
283
|
x: PropTypes.number,
|
|
266
284
|
y: PropTypes.number
|
|
267
285
|
}),
|
|
286
|
+
/**
|
|
287
|
+
* The width of the chart in px. If not defined, it takes the width of the parent element.
|
|
288
|
+
* @default undefined
|
|
289
|
+
*/
|
|
268
290
|
width: PropTypes.number,
|
|
291
|
+
/**
|
|
292
|
+
* The configuration of the x-axes.
|
|
293
|
+
* If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
|
|
294
|
+
*/
|
|
269
295
|
xAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
270
296
|
axisId: PropTypes.string,
|
|
271
297
|
classes: PropTypes.object,
|
|
@@ -296,6 +322,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
|
|
|
296
322
|
tickSize: PropTypes.number,
|
|
297
323
|
valueFormatter: PropTypes.func
|
|
298
324
|
})),
|
|
325
|
+
/**
|
|
326
|
+
* The configuration of the y-axes.
|
|
327
|
+
* If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
|
|
328
|
+
*/
|
|
299
329
|
yAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
300
330
|
axisId: PropTypes.string,
|
|
301
331
|
classes: PropTypes.object,
|
|
@@ -129,10 +129,28 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
|
|
|
129
129
|
* Data to plot.
|
|
130
130
|
*/
|
|
131
131
|
data: PropTypes.arrayOf(PropTypes.number).isRequired,
|
|
132
|
+
/**
|
|
133
|
+
* An array of objects that can be used to populate series and axes data using their `dataKey` property.
|
|
134
|
+
*/
|
|
132
135
|
dataset: PropTypes.arrayOf(PropTypes.object),
|
|
133
136
|
desc: PropTypes.string,
|
|
137
|
+
/**
|
|
138
|
+
* If `true`, the charts will not listen to the mouse move event.
|
|
139
|
+
* It might break interactive features, but will improve performance.
|
|
140
|
+
* @default false
|
|
141
|
+
*/
|
|
134
142
|
disableAxisListener: PropTypes.bool,
|
|
143
|
+
/**
|
|
144
|
+
* The height of the chart in px. If not defined, it takes the height of the parent element.
|
|
145
|
+
* @default undefined
|
|
146
|
+
*/
|
|
135
147
|
height: PropTypes.number,
|
|
148
|
+
/**
|
|
149
|
+
* The margin between the SVG and the drawing area.
|
|
150
|
+
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
151
|
+
* Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
152
|
+
* @default object Depends on the charts type.
|
|
153
|
+
*/
|
|
136
154
|
margin: PropTypes.shape({
|
|
137
155
|
bottom: PropTypes.number,
|
|
138
156
|
left: PropTypes.number,
|
|
@@ -188,6 +206,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
|
|
|
188
206
|
x: PropTypes.number,
|
|
189
207
|
y: PropTypes.number
|
|
190
208
|
}),
|
|
209
|
+
/**
|
|
210
|
+
* The width of the chart in px. If not defined, it takes the width of the parent element.
|
|
211
|
+
* @default undefined
|
|
212
|
+
*/
|
|
191
213
|
width: PropTypes.number,
|
|
192
214
|
/**
|
|
193
215
|
* The xAxis configuration.
|
|
@@ -221,7 +221,14 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
|
|
|
221
221
|
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
222
222
|
// ----------------------------------------------------------------------
|
|
223
223
|
children: PropTypes.node,
|
|
224
|
+
/**
|
|
225
|
+
* An array of objects that can be used to populate series and axes data using their `dataKey` property.
|
|
226
|
+
*/
|
|
224
227
|
dataset: PropTypes.arrayOf(PropTypes.object),
|
|
228
|
+
/**
|
|
229
|
+
* The configuration of the x-axes.
|
|
230
|
+
* If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
|
|
231
|
+
*/
|
|
225
232
|
xAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
226
233
|
axisId: PropTypes.string,
|
|
227
234
|
classes: PropTypes.object,
|
|
@@ -252,6 +259,10 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
|
|
|
252
259
|
tickSize: PropTypes.number,
|
|
253
260
|
valueFormatter: PropTypes.func
|
|
254
261
|
})),
|
|
262
|
+
/**
|
|
263
|
+
* The configuration of the y-axes.
|
|
264
|
+
* If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
|
|
265
|
+
*/
|
|
255
266
|
yAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
256
267
|
axisId: PropTypes.string,
|
|
257
268
|
classes: PropTypes.object,
|
|
@@ -46,6 +46,12 @@ process.env.NODE_ENV !== "production" ? DrawingProvider.propTypes = {
|
|
|
46
46
|
// ----------------------------------------------------------------------
|
|
47
47
|
children: PropTypes.node,
|
|
48
48
|
height: PropTypes.number.isRequired,
|
|
49
|
+
/**
|
|
50
|
+
* The margin between the SVG and the drawing area.
|
|
51
|
+
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
52
|
+
* Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
53
|
+
* @default object Depends on the charts type.
|
|
54
|
+
*/
|
|
49
55
|
margin: PropTypes.shape({
|
|
50
56
|
bottom: PropTypes.number,
|
|
51
57
|
left: PropTypes.number,
|
package/esm/index.js
CHANGED
|
@@ -6,8 +6,8 @@ let warnedOnce = false;
|
|
|
6
6
|
* Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
|
|
7
7
|
* This assumes that all rectangles have the same height and angle between -90 and 90.
|
|
8
8
|
* Otherwise it would be problematic because you need the height/width of the next rectangle to do the correct computation.
|
|
9
|
-
* @param width the side along the x
|
|
10
|
-
* @param height the side along the y
|
|
9
|
+
* @param width the side along the x-axis.
|
|
10
|
+
* @param height the side along the y-axis.
|
|
11
11
|
* @param angle the rotation in degrees.
|
|
12
12
|
*/
|
|
13
13
|
export function getMinXTranslation(width, height, angle = 0) {
|
package/hooks/useScale.d.ts
CHANGED
|
@@ -6,5 +6,5 @@ import { D3Scale } from '../models/axis';
|
|
|
6
6
|
* @returns (value: any) => number
|
|
7
7
|
*/
|
|
8
8
|
export declare function getValueToPositionMapper(scale: D3Scale): (value: any) => number;
|
|
9
|
-
export declare function useXScale(identifier?: number | string): import("d3-scale").ScaleBand<
|
|
10
|
-
export declare function useYScale(identifier?: number | string): import("d3-scale").ScaleBand<
|
|
9
|
+
export declare function useXScale(identifier?: number | string): import("d3-scale").ScaleBand<string | number | Date> | import("d3-scale").ScalePoint<string | number | Date> | import("d3-scale").ScaleLogarithmic<number, number, never> | import("d3-scale").ScalePower<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | import("d3-scale").ScaleLinear<number, number, never>;
|
|
10
|
+
export declare function useYScale(identifier?: number | string): import("d3-scale").ScaleBand<string | number | Date> | import("d3-scale").ScalePoint<string | number | Date> | import("d3-scale").ScaleLogarithmic<number, number, never> | import("d3-scale").ScalePower<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | import("d3-scale").ScaleLinear<number, number, never>;
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @mui/x-charts v6.18.
|
|
2
|
+
* @mui/x-charts v6.18.1
|
|
3
3
|
*
|
|
4
4
|
* @license MIT
|
|
5
5
|
* This source code is licensed under the MIT license found in the
|
|
@@ -76,6 +76,17 @@ Object.keys(_ChartsClipPath).forEach(function (key) {
|
|
|
76
76
|
}
|
|
77
77
|
});
|
|
78
78
|
});
|
|
79
|
+
var _ChartsReferenceLine = require("./ChartsReferenceLine");
|
|
80
|
+
Object.keys(_ChartsReferenceLine).forEach(function (key) {
|
|
81
|
+
if (key === "default" || key === "__esModule") return;
|
|
82
|
+
if (key in exports && exports[key] === _ChartsReferenceLine[key]) return;
|
|
83
|
+
Object.defineProperty(exports, key, {
|
|
84
|
+
enumerable: true,
|
|
85
|
+
get: function () {
|
|
86
|
+
return _ChartsReferenceLine[key];
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
});
|
|
79
90
|
var _ChartsAxis = require("./ChartsAxis");
|
|
80
91
|
Object.keys(_ChartsAxis).forEach(function (key) {
|
|
81
92
|
if (key === "default" || key === "__esModule") return;
|
package/internals/geometry.d.ts
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
* Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
|
|
3
3
|
* This assumes that all rectangles have the same height and angle between -90 and 90.
|
|
4
4
|
* Otherwise it would be problematic because you need the height/width of the next rectangle to do the correct computation.
|
|
5
|
-
* @param width the side along the x
|
|
6
|
-
* @param height the side along the y
|
|
5
|
+
* @param width the side along the x-axis.
|
|
6
|
+
* @param height the side along the y-axis.
|
|
7
7
|
* @param angle the rotation in degrees.
|
|
8
8
|
*/
|
|
9
9
|
export declare function getMinXTranslation(width: number, height: number, angle?: number): number;
|
package/internals/geometry.js
CHANGED
|
@@ -12,8 +12,8 @@ let warnedOnce = false;
|
|
|
12
12
|
* Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
|
|
13
13
|
* This assumes that all rectangles have the same height and angle between -90 and 90.
|
|
14
14
|
* Otherwise it would be problematic because you need the height/width of the next rectangle to do the correct computation.
|
|
15
|
-
* @param width the side along the x
|
|
16
|
-
* @param height the side along the y
|
|
15
|
+
* @param width the side along the x-axis.
|
|
16
|
+
* @param height the side along the y-axis.
|
|
17
17
|
* @param angle the rotation in degrees.
|
|
18
18
|
*/
|
|
19
19
|
function getMinXTranslation(width, height, angle = 0) {
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import type { ScaleBand, ScalePoint } from 'd3-scale';
|
|
2
2
|
import { D3Scale } from '../models/axis';
|
|
3
|
-
export declare function isBandScale
|
|
3
|
+
export declare function isBandScale<T extends {
|
|
4
|
+
toString(): string;
|
|
5
|
+
}>(scale: D3Scale<T>): scale is ScaleBand<T> | ScalePoint<T>;
|
package/internals/utils.d.ts
CHANGED
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
export type SymbolsTypes = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
|
|
2
2
|
export declare function getSymbol(shape: SymbolsTypes): number;
|
|
3
|
+
type Without<T, U> = {
|
|
4
|
+
[P in Exclude<keyof T, keyof U>]?: never;
|
|
5
|
+
};
|
|
6
|
+
export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
|
|
7
|
+
export {};
|