@mui/x-charts 6.0.0-alpha.6 → 6.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.d.ts +19 -2
- package/BarChart/BarChart.js +84 -22
- package/BarChart/BarElement.d.ts +22 -0
- package/BarChart/BarElement.js +21 -10
- package/BarChart/BarPlot.d.ts +14 -1
- package/BarChart/BarPlot.js +48 -19
- package/BarChart/extremums.js +19 -3
- package/BarChart/formatter.js +3 -1
- package/CHANGELOG.md +213 -28
- package/ChartsAxis/ChartsAxis.d.ts +11 -1
- package/ChartsAxis/ChartsAxis.js +51 -6
- package/ChartsAxisHighlight/ChartsAxisHighlight.d.ts +3 -2
- package/ChartsAxisHighlight/ChartsAxisHighlight.js +11 -3
- package/ChartsLegend/ChartsLegend.d.ts +25 -2
- package/ChartsLegend/ChartsLegend.js +49 -17
- package/ChartsTooltip/ChartsAxisTooltipContent.js +13 -9
- package/ChartsTooltip/ChartsTooltipTable.d.ts +2 -9
- package/ChartsXAxis/ChartsXAxis.js +44 -9
- package/ChartsYAxis/ChartsYAxis.js +44 -9
- package/LineChart/AreaElement.d.ts +22 -0
- package/LineChart/AreaElement.js +31 -11
- package/LineChart/AreaPlot.d.ts +14 -1
- package/LineChart/AreaPlot.js +29 -3
- package/LineChart/LineChart.d.ts +20 -2
- package/LineChart/LineChart.js +63 -11
- package/LineChart/LineElement.d.ts +22 -0
- package/LineChart/LineElement.js +31 -10
- package/LineChart/LinePlot.d.ts +14 -1
- package/LineChart/LinePlot.js +35 -4
- package/LineChart/MarkPlot.d.ts +24 -1
- package/LineChart/MarkPlot.js +29 -4
- package/PieChart/PieArcLabel.js +0 -1
- package/PieChart/PieChart.d.ts +14 -2
- package/PieChart/PieChart.js +52 -10
- package/PieChart/PiePlot.d.ts +27 -1
- package/PieChart/PiePlot.js +29 -6
- package/ScatterChart/ScatterChart.d.ts +18 -2
- package/ScatterChart/ScatterChart.js +56 -10
- package/ScatterChart/ScatterPlot.d.ts +24 -1
- package/ScatterChart/ScatterPlot.js +28 -4
- package/SparkLineChart/SparkLineChart.d.ts +18 -0
- package/SparkLineChart/SparkLineChart.js +29 -6
- package/colorPalettes/colorPalettes.js +2 -2
- package/context/CartesianContextProvider.js +18 -12
- package/esm/BarChart/BarChart.js +88 -26
- package/esm/BarChart/BarElement.js +21 -11
- package/esm/BarChart/BarPlot.js +49 -20
- package/esm/BarChart/extremums.js +18 -2
- package/esm/BarChart/formatter.js +3 -1
- package/esm/ChartsAxis/ChartsAxis.js +51 -6
- package/esm/ChartsAxisHighlight/ChartsAxisHighlight.js +11 -3
- package/esm/ChartsLegend/ChartsLegend.js +47 -14
- package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +13 -9
- package/esm/ChartsXAxis/ChartsXAxis.js +45 -9
- package/esm/ChartsYAxis/ChartsYAxis.js +45 -9
- package/esm/LineChart/AreaElement.js +31 -11
- package/esm/LineChart/AreaPlot.js +31 -4
- package/esm/LineChart/LineChart.js +63 -11
- package/esm/LineChart/LineElement.js +31 -11
- package/esm/LineChart/LinePlot.js +43 -8
- package/esm/LineChart/MarkPlot.js +32 -5
- package/esm/PieChart/PieArcLabel.js +0 -1
- package/esm/PieChart/PieChart.js +52 -10
- package/esm/PieChart/PiePlot.js +31 -6
- package/esm/ScatterChart/ScatterChart.js +56 -10
- package/esm/ScatterChart/ScatterPlot.js +29 -4
- package/esm/SparkLineChart/SparkLineChart.js +29 -6
- package/esm/colorPalettes/colorPalettes.js +2 -2
- package/esm/context/CartesianContextProvider.js +18 -12
- package/esm/hooks/useAxisEvents.js +21 -38
- package/esm/hooks/useTicks.js +11 -8
- package/esm/internals/components/AxisSharedComponents.js +10 -10
- package/hooks/useAxisEvents.js +21 -38
- package/hooks/useTicks.d.ts +20 -5
- package/hooks/useTicks.js +11 -8
- package/index.js +1 -1
- package/internals/components/AxisSharedComponents.d.ts +4 -4
- package/internals/components/AxisSharedComponents.js +15 -15
- package/internals/defaultizeColor.d.ts +1 -0
- package/legacy/BarChart/BarChart.js +93 -29
- package/legacy/BarChart/BarElement.js +20 -10
- package/legacy/BarChart/BarPlot.js +49 -20
- package/legacy/BarChart/extremums.js +22 -2
- package/legacy/BarChart/formatter.js +3 -1
- package/legacy/ChartsAxis/ChartsAxis.js +51 -6
- package/legacy/ChartsAxisHighlight/ChartsAxisHighlight.js +11 -3
- package/legacy/ChartsLegend/ChartsLegend.js +46 -15
- package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +13 -9
- package/legacy/ChartsXAxis/ChartsXAxis.js +45 -9
- package/legacy/ChartsYAxis/ChartsYAxis.js +45 -9
- package/legacy/LineChart/AreaElement.js +30 -10
- package/legacy/LineChart/AreaPlot.js +29 -4
- package/legacy/LineChart/LineChart.js +63 -11
- package/legacy/LineChart/LineElement.js +30 -10
- package/legacy/LineChart/LinePlot.js +36 -5
- package/legacy/LineChart/MarkPlot.js +30 -5
- package/legacy/PieChart/PieArcLabel.js +0 -1
- package/legacy/PieChart/PieChart.js +52 -10
- package/legacy/PieChart/PiePlot.js +29 -6
- package/legacy/ScatterChart/ScatterChart.js +56 -10
- package/legacy/ScatterChart/ScatterPlot.js +27 -4
- package/legacy/SparkLineChart/SparkLineChart.js +29 -6
- package/legacy/colorPalettes/colorPalettes.js +2 -2
- package/legacy/context/CartesianContextProvider.js +18 -12
- package/legacy/hooks/useAxisEvents.js +21 -37
- package/legacy/hooks/useTicks.js +11 -11
- package/legacy/index.js +1 -1
- package/legacy/internals/components/AxisSharedComponents.js +10 -10
- package/models/axis.d.ts +24 -1
- package/models/seriesType/bar.d.ts +6 -1
- package/modern/BarChart/BarChart.js +85 -23
- package/modern/BarChart/BarElement.js +20 -11
- package/modern/BarChart/BarPlot.js +48 -19
- package/modern/BarChart/extremums.js +18 -2
- package/modern/BarChart/formatter.js +3 -1
- package/modern/ChartsAxis/ChartsAxis.js +51 -6
- package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js +11 -3
- package/modern/ChartsLegend/ChartsLegend.js +46 -14
- package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +13 -9
- package/modern/ChartsXAxis/ChartsXAxis.js +44 -9
- package/modern/ChartsYAxis/ChartsYAxis.js +44 -9
- package/modern/LineChart/AreaElement.js +30 -11
- package/modern/LineChart/AreaPlot.js +31 -4
- package/modern/LineChart/LineChart.js +63 -11
- package/modern/LineChart/LineElement.js +30 -11
- package/modern/LineChart/LinePlot.js +37 -5
- package/modern/LineChart/MarkPlot.js +31 -5
- package/modern/PieChart/PieArcLabel.js +0 -1
- package/modern/PieChart/PieChart.js +52 -10
- package/modern/PieChart/PiePlot.js +30 -6
- package/modern/ScatterChart/ScatterChart.js +56 -10
- package/modern/ScatterChart/ScatterPlot.js +28 -4
- package/modern/SparkLineChart/SparkLineChart.js +29 -6
- package/modern/colorPalettes/colorPalettes.js +2 -2
- package/modern/context/CartesianContextProvider.js +18 -12
- package/modern/hooks/useAxisEvents.js +21 -38
- package/modern/hooks/useTicks.js +11 -8
- package/modern/index.js +1 -1
- package/modern/internals/components/AxisSharedComponents.js +10 -10
- package/package.json +5 -5
- package/themeAugmentation/components.d.ts +0 -10
- package/themeAugmentation/overrides.d.ts +0 -2
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["slots", "slotProps"];
|
|
2
4
|
import * as React from 'react';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
3
6
|
import { area as d3Area } from 'd3-shape';
|
|
4
7
|
import { SeriesContext } from '../context/SeriesContextProvider';
|
|
5
8
|
import { CartesianContext } from '../context/CartesianContextProvider';
|
|
@@ -7,7 +10,12 @@ import { AreaElement } from './AreaElement';
|
|
|
7
10
|
import { getValueToPositionMapper } from '../hooks/useScale';
|
|
8
11
|
import getCurveFactory from '../internals/getCurve';
|
|
9
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
|
|
13
|
+
function AreaPlot(props) {
|
|
14
|
+
const {
|
|
15
|
+
slots,
|
|
16
|
+
slotProps
|
|
17
|
+
} = props,
|
|
18
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
11
19
|
const seriesData = React.useContext(SeriesContext).line;
|
|
12
20
|
const axisData = React.useContext(CartesianContext);
|
|
13
21
|
if (seriesData === undefined) {
|
|
@@ -25,7 +33,7 @@ export function AreaPlot(props) {
|
|
|
25
33
|
} = axisData;
|
|
26
34
|
const defaultXAxisId = xAxisIds[0];
|
|
27
35
|
const defaultYAxisId = yAxisIds[0];
|
|
28
|
-
return /*#__PURE__*/_jsx("g", _extends({},
|
|
36
|
+
return /*#__PURE__*/_jsx("g", _extends({}, other, {
|
|
29
37
|
children: stackingGroups.flatMap(({
|
|
30
38
|
ids: groupIds
|
|
31
39
|
}) => {
|
|
@@ -51,9 +59,28 @@ export function AreaPlot(props) {
|
|
|
51
59
|
id: seriesId,
|
|
52
60
|
d: areaPath.curve(curve)(d3Data) || undefined,
|
|
53
61
|
color: series[seriesId].color,
|
|
54
|
-
highlightScope: series[seriesId].highlightScope
|
|
62
|
+
highlightScope: series[seriesId].highlightScope,
|
|
63
|
+
slots: slots,
|
|
64
|
+
slotProps: slotProps
|
|
55
65
|
}, seriesId);
|
|
56
66
|
});
|
|
57
67
|
})
|
|
58
68
|
}));
|
|
59
|
-
}
|
|
69
|
+
}
|
|
70
|
+
process.env.NODE_ENV !== "production" ? AreaPlot.propTypes = {
|
|
71
|
+
// ----------------------------- Warning --------------------------------
|
|
72
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
73
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
74
|
+
// ----------------------------------------------------------------------
|
|
75
|
+
/**
|
|
76
|
+
* The props used for each component slot.
|
|
77
|
+
* @default {}
|
|
78
|
+
*/
|
|
79
|
+
slotProps: PropTypes.object,
|
|
80
|
+
/**
|
|
81
|
+
* Overridable component slots.
|
|
82
|
+
* @default {}
|
|
83
|
+
*/
|
|
84
|
+
slots: PropTypes.object
|
|
85
|
+
} : void 0;
|
|
86
|
+
export { AreaPlot };
|
|
@@ -34,7 +34,9 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
|
|
|
34
34
|
leftAxis,
|
|
35
35
|
rightAxis,
|
|
36
36
|
bottomAxis,
|
|
37
|
-
children
|
|
37
|
+
children,
|
|
38
|
+
slots,
|
|
39
|
+
slotProps
|
|
38
40
|
} = props;
|
|
39
41
|
const id = useId();
|
|
40
42
|
const clipPathId = `${id}-clip-path`;
|
|
@@ -63,13 +65,27 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
|
|
|
63
65
|
disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
|
|
64
66
|
children: [/*#__PURE__*/_jsxs("g", {
|
|
65
67
|
clipPath: `url(#${clipPathId})`,
|
|
66
|
-
children: [/*#__PURE__*/_jsx(AreaPlot, {
|
|
68
|
+
children: [/*#__PURE__*/_jsx(AreaPlot, {
|
|
69
|
+
slots: slots,
|
|
70
|
+
slotProps: slotProps
|
|
71
|
+
}), /*#__PURE__*/_jsx(LinePlot, {
|
|
72
|
+
slots: slots,
|
|
73
|
+
slotProps: slotProps
|
|
74
|
+
})]
|
|
67
75
|
}), /*#__PURE__*/_jsx(ChartsAxis, {
|
|
68
76
|
topAxis: topAxis,
|
|
69
77
|
leftAxis: leftAxis,
|
|
70
78
|
rightAxis: rightAxis,
|
|
71
|
-
bottomAxis: bottomAxis
|
|
72
|
-
|
|
79
|
+
bottomAxis: bottomAxis,
|
|
80
|
+
slots: slots,
|
|
81
|
+
slotProps: slotProps
|
|
82
|
+
}), /*#__PURE__*/_jsx(MarkPlot, {
|
|
83
|
+
slots: slots,
|
|
84
|
+
slotProps: slotProps
|
|
85
|
+
}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
|
|
86
|
+
slots: slots,
|
|
87
|
+
slotProps: slotProps
|
|
88
|
+
})), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
|
|
73
89
|
id: clipPathId
|
|
74
90
|
}), children]
|
|
75
91
|
});
|
|
@@ -81,7 +97,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
81
97
|
// ----------------------------------------------------------------------
|
|
82
98
|
axisHighlight: PropTypes.shape({
|
|
83
99
|
x: PropTypes.oneOf(['band', 'line', 'none']),
|
|
84
|
-
y: PropTypes.oneOf(['line', 'none'])
|
|
100
|
+
y: PropTypes.oneOf(['band', 'line', 'none'])
|
|
85
101
|
}),
|
|
86
102
|
/**
|
|
87
103
|
* Indicate which axis to display the bottom of the charts.
|
|
@@ -97,8 +113,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
97
113
|
label: PropTypes.string,
|
|
98
114
|
labelFontSize: PropTypes.number,
|
|
99
115
|
position: PropTypes.oneOf(['bottom', 'top']),
|
|
116
|
+
slotProps: PropTypes.object,
|
|
117
|
+
slots: PropTypes.object,
|
|
100
118
|
stroke: PropTypes.string,
|
|
101
119
|
tickFontSize: PropTypes.number,
|
|
120
|
+
tickMaxStep: PropTypes.number,
|
|
121
|
+
tickMinStep: PropTypes.number,
|
|
122
|
+
tickNumber: PropTypes.number,
|
|
102
123
|
tickSize: PropTypes.number
|
|
103
124
|
}), PropTypes.string]),
|
|
104
125
|
children: PropTypes.node,
|
|
@@ -125,8 +146,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
125
146
|
label: PropTypes.string,
|
|
126
147
|
labelFontSize: PropTypes.number,
|
|
127
148
|
position: PropTypes.oneOf(['left', 'right']),
|
|
149
|
+
slotProps: PropTypes.object,
|
|
150
|
+
slots: PropTypes.object,
|
|
128
151
|
stroke: PropTypes.string,
|
|
129
152
|
tickFontSize: PropTypes.number,
|
|
153
|
+
tickMaxStep: PropTypes.number,
|
|
154
|
+
tickMinStep: PropTypes.number,
|
|
155
|
+
tickNumber: PropTypes.number,
|
|
130
156
|
tickSize: PropTypes.number
|
|
131
157
|
}), PropTypes.string]),
|
|
132
158
|
legend: PropTypes.shape({
|
|
@@ -143,6 +169,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
143
169
|
horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
|
|
144
170
|
vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
|
|
145
171
|
}),
|
|
172
|
+
slotProps: PropTypes.object,
|
|
173
|
+
slots: PropTypes.object,
|
|
146
174
|
spacing: PropTypes.number
|
|
147
175
|
}),
|
|
148
176
|
margin: PropTypes.shape({
|
|
@@ -165,8 +193,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
165
193
|
label: PropTypes.string,
|
|
166
194
|
labelFontSize: PropTypes.number,
|
|
167
195
|
position: PropTypes.oneOf(['left', 'right']),
|
|
196
|
+
slotProps: PropTypes.object,
|
|
197
|
+
slots: PropTypes.object,
|
|
168
198
|
stroke: PropTypes.string,
|
|
169
199
|
tickFontSize: PropTypes.number,
|
|
200
|
+
tickMaxStep: PropTypes.number,
|
|
201
|
+
tickMinStep: PropTypes.number,
|
|
202
|
+
tickNumber: PropTypes.number,
|
|
170
203
|
tickSize: PropTypes.number
|
|
171
204
|
}), PropTypes.string]),
|
|
172
205
|
series: PropTypes.arrayOf(PropTypes.shape({
|
|
@@ -189,6 +222,16 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
189
222
|
xAxisKey: PropTypes.string,
|
|
190
223
|
yAxisKey: PropTypes.string
|
|
191
224
|
})).isRequired,
|
|
225
|
+
/**
|
|
226
|
+
* The props used for each component slot.
|
|
227
|
+
* @default {}
|
|
228
|
+
*/
|
|
229
|
+
slotProps: PropTypes.object,
|
|
230
|
+
/**
|
|
231
|
+
* Overridable component slots.
|
|
232
|
+
* @default {}
|
|
233
|
+
*/
|
|
234
|
+
slots: PropTypes.object,
|
|
192
235
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
193
236
|
title: PropTypes.string,
|
|
194
237
|
tooltip: PropTypes.shape({
|
|
@@ -211,8 +254,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
211
254
|
label: PropTypes.string,
|
|
212
255
|
labelFontSize: PropTypes.number,
|
|
213
256
|
position: PropTypes.oneOf(['bottom', 'top']),
|
|
257
|
+
slotProps: PropTypes.object,
|
|
258
|
+
slots: PropTypes.object,
|
|
214
259
|
stroke: PropTypes.string,
|
|
215
260
|
tickFontSize: PropTypes.number,
|
|
261
|
+
tickMaxStep: PropTypes.number,
|
|
262
|
+
tickMinStep: PropTypes.number,
|
|
263
|
+
tickNumber: PropTypes.number,
|
|
216
264
|
tickSize: PropTypes.number
|
|
217
265
|
}), PropTypes.string]),
|
|
218
266
|
viewBox: PropTypes.shape({
|
|
@@ -235,15 +283,17 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
235
283
|
label: PropTypes.string,
|
|
236
284
|
labelFontSize: PropTypes.number,
|
|
237
285
|
max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
238
|
-
maxTicks: PropTypes.number,
|
|
239
286
|
min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
240
|
-
minTicks: PropTypes.number,
|
|
241
287
|
position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
|
|
242
288
|
scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
|
|
289
|
+
slotProps: PropTypes.object,
|
|
290
|
+
slots: PropTypes.object,
|
|
243
291
|
stroke: PropTypes.string,
|
|
244
292
|
tickFontSize: PropTypes.number,
|
|
293
|
+
tickMaxStep: PropTypes.number,
|
|
294
|
+
tickMinStep: PropTypes.number,
|
|
295
|
+
tickNumber: PropTypes.number,
|
|
245
296
|
tickSize: PropTypes.number,
|
|
246
|
-
tickSpacing: PropTypes.number,
|
|
247
297
|
valueFormatter: PropTypes.func
|
|
248
298
|
})),
|
|
249
299
|
yAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
@@ -259,15 +309,17 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
259
309
|
label: PropTypes.string,
|
|
260
310
|
labelFontSize: PropTypes.number,
|
|
261
311
|
max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
262
|
-
maxTicks: PropTypes.number,
|
|
263
312
|
min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
264
|
-
minTicks: PropTypes.number,
|
|
265
313
|
position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
|
|
266
314
|
scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
|
|
315
|
+
slotProps: PropTypes.object,
|
|
316
|
+
slots: PropTypes.object,
|
|
267
317
|
stroke: PropTypes.string,
|
|
268
318
|
tickFontSize: PropTypes.number,
|
|
319
|
+
tickMaxStep: PropTypes.number,
|
|
320
|
+
tickMinStep: PropTypes.number,
|
|
321
|
+
tickNumber: PropTypes.number,
|
|
269
322
|
tickSize: PropTypes.number,
|
|
270
|
-
tickSpacing: PropTypes.number,
|
|
271
323
|
valueFormatter: PropTypes.func
|
|
272
324
|
}))
|
|
273
325
|
} : void 0;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
const _excluded = ["id", "classes", "color", "highlightScope"];
|
|
3
|
+
const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import { color as d3Color } from 'd3-color';
|
|
7
7
|
import composeClasses from '@mui/utils/composeClasses';
|
|
8
|
+
import { useSlotProps } from '@mui/base/utils';
|
|
8
9
|
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
|
9
10
|
import { styled } from '@mui/material/styles';
|
|
10
11
|
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
|
@@ -27,7 +28,7 @@ const useUtilityClasses = ownerState => {
|
|
|
27
28
|
};
|
|
28
29
|
return composeClasses(slots, getLineElementUtilityClass, classes);
|
|
29
30
|
};
|
|
30
|
-
const LineElementPath = styled('path', {
|
|
31
|
+
export const LineElementPath = styled('path', {
|
|
31
32
|
name: 'MuiLineElement',
|
|
32
33
|
slot: 'Root',
|
|
33
34
|
overridesResolver: (_, styles) => styles.root
|
|
@@ -57,11 +58,14 @@ LineElementPath.propTypes = {
|
|
|
57
58
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
|
58
59
|
};
|
|
59
60
|
function LineElement(props) {
|
|
61
|
+
var _slots$line;
|
|
60
62
|
const {
|
|
61
63
|
id,
|
|
62
64
|
classes: innerClasses,
|
|
63
65
|
color,
|
|
64
|
-
highlightScope
|
|
66
|
+
highlightScope,
|
|
67
|
+
slots,
|
|
68
|
+
slotProps
|
|
65
69
|
} = props,
|
|
66
70
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
67
71
|
const getInteractionItemProps = useInteractionItemProps(highlightScope);
|
|
@@ -84,13 +88,19 @@ function LineElement(props) {
|
|
|
84
88
|
isHighlighted
|
|
85
89
|
};
|
|
86
90
|
const classes = useUtilityClasses(ownerState);
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
91
|
+
const Line = (_slots$line = slots == null ? void 0 : slots.line) != null ? _slots$line : LineElementPath;
|
|
92
|
+
const lineProps = useSlotProps({
|
|
93
|
+
elementType: Line,
|
|
94
|
+
externalSlotProps: slotProps == null ? void 0 : slotProps.line,
|
|
95
|
+
additionalProps: _extends({}, other, getInteractionItemProps({
|
|
96
|
+
type: 'line',
|
|
97
|
+
seriesId: id
|
|
98
|
+
}), {
|
|
99
|
+
className: classes.root
|
|
100
|
+
}),
|
|
101
|
+
ownerState
|
|
102
|
+
});
|
|
103
|
+
return /*#__PURE__*/_jsx(Line, _extends({}, lineProps));
|
|
94
104
|
}
|
|
95
105
|
process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
|
|
96
106
|
// ----------------------------- Warning --------------------------------
|
|
@@ -101,6 +111,16 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
|
|
|
101
111
|
highlightScope: PropTypes.shape({
|
|
102
112
|
faded: PropTypes.oneOf(['global', 'none', 'series']),
|
|
103
113
|
highlighted: PropTypes.oneOf(['item', 'none', 'series'])
|
|
104
|
-
})
|
|
114
|
+
}),
|
|
115
|
+
/**
|
|
116
|
+
* The props used for each component slot.
|
|
117
|
+
* @default {}
|
|
118
|
+
*/
|
|
119
|
+
slotProps: PropTypes.object,
|
|
120
|
+
/**
|
|
121
|
+
* Overridable component slots.
|
|
122
|
+
* @default {}
|
|
123
|
+
*/
|
|
124
|
+
slots: PropTypes.object
|
|
105
125
|
} : void 0;
|
|
106
126
|
export { LineElement };
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["slots", "slotProps"];
|
|
2
4
|
import * as React from 'react';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
3
6
|
import { line as d3Line } from 'd3-shape';
|
|
4
7
|
import { SeriesContext } from '../context/SeriesContextProvider';
|
|
5
8
|
import { CartesianContext } from '../context/CartesianContextProvider';
|
|
@@ -7,7 +10,12 @@ import { LineElement } from './LineElement';
|
|
|
7
10
|
import { getValueToPositionMapper } from '../hooks/useScale';
|
|
8
11
|
import getCurveFactory from '../internals/getCurve';
|
|
9
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
|
|
13
|
+
function LinePlot(props) {
|
|
14
|
+
const {
|
|
15
|
+
slots,
|
|
16
|
+
slotProps
|
|
17
|
+
} = props,
|
|
18
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
11
19
|
const seriesData = React.useContext(SeriesContext).line;
|
|
12
20
|
const axisData = React.useContext(CartesianContext);
|
|
13
21
|
if (seriesData === undefined) {
|
|
@@ -25,7 +33,7 @@ export function LinePlot(props) {
|
|
|
25
33
|
} = axisData;
|
|
26
34
|
const defaultXAxisId = xAxisIds[0];
|
|
27
35
|
const defaultYAxisId = yAxisIds[0];
|
|
28
|
-
return /*#__PURE__*/_jsx("g", _extends({},
|
|
36
|
+
return /*#__PURE__*/_jsx("g", _extends({}, other, {
|
|
29
37
|
children: stackingGroups.flatMap(({
|
|
30
38
|
ids: groupIds
|
|
31
39
|
}) => {
|
|
@@ -42,18 +50,45 @@ export function LinePlot(props) {
|
|
|
42
50
|
throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
|
|
43
51
|
}
|
|
44
52
|
const linePath = d3Line().x(d => xScale(d.x)).y(d => yScale(d.y[1]));
|
|
53
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
54
|
+
if (xData.length !== stackedData.length) {
|
|
55
|
+
throw new Error(`MUI: data length of the x axis (${xData.length} items) does not match length of series (${stackedData.length} items)`);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
45
58
|
const curve = getCurveFactory(series[seriesId].curve);
|
|
46
|
-
const d3Data = xData == null ? void 0 : xData.map((x, index) =>
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
59
|
+
const d3Data = xData == null ? void 0 : xData.map((x, index) => {
|
|
60
|
+
var _stackedData$index;
|
|
61
|
+
return {
|
|
62
|
+
x,
|
|
63
|
+
y: (_stackedData$index = stackedData[index]) != null ? _stackedData$index : [0, 0]
|
|
64
|
+
};
|
|
65
|
+
});
|
|
50
66
|
return /*#__PURE__*/_jsx(LineElement, {
|
|
51
67
|
id: seriesId,
|
|
52
68
|
d: linePath.curve(curve)(d3Data) || undefined,
|
|
53
69
|
color: series[seriesId].color,
|
|
54
|
-
highlightScope: series[seriesId].highlightScope
|
|
70
|
+
highlightScope: series[seriesId].highlightScope,
|
|
71
|
+
slots: slots,
|
|
72
|
+
slotProps: slotProps
|
|
55
73
|
}, seriesId);
|
|
56
74
|
});
|
|
57
75
|
})
|
|
58
76
|
}));
|
|
59
|
-
}
|
|
77
|
+
}
|
|
78
|
+
process.env.NODE_ENV !== "production" ? LinePlot.propTypes = {
|
|
79
|
+
// ----------------------------- Warning --------------------------------
|
|
80
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
81
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
82
|
+
// ----------------------------------------------------------------------
|
|
83
|
+
/**
|
|
84
|
+
* The props used for each component slot.
|
|
85
|
+
* @default {}
|
|
86
|
+
*/
|
|
87
|
+
slotProps: PropTypes.object,
|
|
88
|
+
/**
|
|
89
|
+
* Overridable component slots.
|
|
90
|
+
* @default {}
|
|
91
|
+
*/
|
|
92
|
+
slots: PropTypes.object
|
|
93
|
+
} : void 0;
|
|
94
|
+
export { LinePlot };
|
|
@@ -1,13 +1,23 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["slots", "slotProps"];
|
|
2
4
|
import * as React from 'react';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
3
6
|
import { SeriesContext } from '../context/SeriesContextProvider';
|
|
4
7
|
import { CartesianContext } from '../context/CartesianContextProvider';
|
|
5
8
|
import { MarkElement } from './MarkElement';
|
|
6
9
|
import { getValueToPositionMapper } from '../hooks/useScale';
|
|
7
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
|
|
11
|
+
function MarkPlot(props) {
|
|
12
|
+
var _slots$mark;
|
|
13
|
+
const {
|
|
14
|
+
slots,
|
|
15
|
+
slotProps
|
|
16
|
+
} = props,
|
|
17
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
9
18
|
const seriesData = React.useContext(SeriesContext).line;
|
|
10
19
|
const axisData = React.useContext(CartesianContext);
|
|
20
|
+
const Mark = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : MarkElement;
|
|
11
21
|
if (seriesData === undefined) {
|
|
12
22
|
return null;
|
|
13
23
|
}
|
|
@@ -23,7 +33,7 @@ export function MarkPlot(props) {
|
|
|
23
33
|
} = axisData;
|
|
24
34
|
const defaultXAxisId = xAxisIds[0];
|
|
25
35
|
const defaultYAxisId = yAxisIds[0];
|
|
26
|
-
return /*#__PURE__*/_jsx("g", _extends({},
|
|
36
|
+
return /*#__PURE__*/_jsx("g", _extends({}, other, {
|
|
27
37
|
children: stackingGroups.flatMap(({
|
|
28
38
|
ids: groupIds
|
|
29
39
|
}) => {
|
|
@@ -64,7 +74,7 @@ export function MarkPlot(props) {
|
|
|
64
74
|
x,
|
|
65
75
|
y,
|
|
66
76
|
index
|
|
67
|
-
}) => /*#__PURE__*/_jsx(
|
|
77
|
+
}) => /*#__PURE__*/_jsx(Mark, _extends({
|
|
68
78
|
id: seriesId,
|
|
69
79
|
dataIndex: index,
|
|
70
80
|
shape: "circle",
|
|
@@ -72,8 +82,25 @@ export function MarkPlot(props) {
|
|
|
72
82
|
x: x,
|
|
73
83
|
y: y,
|
|
74
84
|
highlightScope: series[seriesId].highlightScope
|
|
75
|
-
}, `${seriesId}-${index}`));
|
|
85
|
+
}, slotProps == null ? void 0 : slotProps.mark), `${seriesId}-${index}`));
|
|
76
86
|
});
|
|
77
87
|
})
|
|
78
88
|
}));
|
|
79
|
-
}
|
|
89
|
+
}
|
|
90
|
+
process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
|
|
91
|
+
// ----------------------------- Warning --------------------------------
|
|
92
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
93
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
94
|
+
// ----------------------------------------------------------------------
|
|
95
|
+
/**
|
|
96
|
+
* The props used for each component slot.
|
|
97
|
+
* @default {}
|
|
98
|
+
*/
|
|
99
|
+
slotProps: PropTypes.object,
|
|
100
|
+
/**
|
|
101
|
+
* Overridable component slots.
|
|
102
|
+
* @default {}
|
|
103
|
+
*/
|
|
104
|
+
slots: PropTypes.object
|
|
105
|
+
} : void 0;
|
|
106
|
+
export { MarkPlot };
|
package/esm/PieChart/PieChart.js
CHANGED
|
@@ -44,7 +44,9 @@ function PieChart(props) {
|
|
|
44
44
|
leftAxis = null,
|
|
45
45
|
rightAxis = null,
|
|
46
46
|
bottomAxis = null,
|
|
47
|
-
children
|
|
47
|
+
children,
|
|
48
|
+
slots,
|
|
49
|
+
slotProps
|
|
48
50
|
} = props;
|
|
49
51
|
const margin = _extends({}, defaultMargin, marginProps);
|
|
50
52
|
return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
|
|
@@ -67,8 +69,16 @@ function PieChart(props) {
|
|
|
67
69
|
topAxis: topAxis,
|
|
68
70
|
leftAxis: leftAxis,
|
|
69
71
|
rightAxis: rightAxis,
|
|
70
|
-
bottomAxis: bottomAxis
|
|
71
|
-
|
|
72
|
+
bottomAxis: bottomAxis,
|
|
73
|
+
slots: slots,
|
|
74
|
+
slotProps: slotProps
|
|
75
|
+
}), /*#__PURE__*/_jsx(PiePlot, {
|
|
76
|
+
slots: slots,
|
|
77
|
+
slotProps: slotProps
|
|
78
|
+
}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
|
|
79
|
+
slots: slots,
|
|
80
|
+
slotProps: slotProps
|
|
81
|
+
})), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
|
|
72
82
|
});
|
|
73
83
|
}
|
|
74
84
|
process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
@@ -78,7 +88,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
78
88
|
// ----------------------------------------------------------------------
|
|
79
89
|
axisHighlight: PropTypes.shape({
|
|
80
90
|
x: PropTypes.oneOf(['band', 'line', 'none']),
|
|
81
|
-
y: PropTypes.oneOf(['line', 'none'])
|
|
91
|
+
y: PropTypes.oneOf(['band', 'line', 'none'])
|
|
82
92
|
}),
|
|
83
93
|
/**
|
|
84
94
|
* Indicate which axis to display the bottom of the charts.
|
|
@@ -94,8 +104,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
94
104
|
label: PropTypes.string,
|
|
95
105
|
labelFontSize: PropTypes.number,
|
|
96
106
|
position: PropTypes.oneOf(['bottom', 'top']),
|
|
107
|
+
slotProps: PropTypes.object,
|
|
108
|
+
slots: PropTypes.object,
|
|
97
109
|
stroke: PropTypes.string,
|
|
98
110
|
tickFontSize: PropTypes.number,
|
|
111
|
+
tickMaxStep: PropTypes.number,
|
|
112
|
+
tickMinStep: PropTypes.number,
|
|
113
|
+
tickNumber: PropTypes.number,
|
|
99
114
|
tickSize: PropTypes.number
|
|
100
115
|
}), PropTypes.string]),
|
|
101
116
|
children: PropTypes.node,
|
|
@@ -122,8 +137,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
122
137
|
label: PropTypes.string,
|
|
123
138
|
labelFontSize: PropTypes.number,
|
|
124
139
|
position: PropTypes.oneOf(['left', 'right']),
|
|
140
|
+
slotProps: PropTypes.object,
|
|
141
|
+
slots: PropTypes.object,
|
|
125
142
|
stroke: PropTypes.string,
|
|
126
143
|
tickFontSize: PropTypes.number,
|
|
144
|
+
tickMaxStep: PropTypes.number,
|
|
145
|
+
tickMinStep: PropTypes.number,
|
|
146
|
+
tickNumber: PropTypes.number,
|
|
127
147
|
tickSize: PropTypes.number
|
|
128
148
|
}), PropTypes.string]),
|
|
129
149
|
legend: PropTypes.shape({
|
|
@@ -140,6 +160,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
140
160
|
horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
|
|
141
161
|
vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
|
|
142
162
|
}),
|
|
163
|
+
slotProps: PropTypes.object,
|
|
164
|
+
slots: PropTypes.object,
|
|
143
165
|
spacing: PropTypes.number
|
|
144
166
|
}),
|
|
145
167
|
margin: PropTypes.shape({
|
|
@@ -162,8 +184,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
162
184
|
label: PropTypes.string,
|
|
163
185
|
labelFontSize: PropTypes.number,
|
|
164
186
|
position: PropTypes.oneOf(['left', 'right']),
|
|
187
|
+
slotProps: PropTypes.object,
|
|
188
|
+
slots: PropTypes.object,
|
|
165
189
|
stroke: PropTypes.string,
|
|
166
190
|
tickFontSize: PropTypes.number,
|
|
191
|
+
tickMaxStep: PropTypes.number,
|
|
192
|
+
tickMinStep: PropTypes.number,
|
|
193
|
+
tickNumber: PropTypes.number,
|
|
167
194
|
tickSize: PropTypes.number
|
|
168
195
|
}), PropTypes.string]),
|
|
169
196
|
series: PropTypes.arrayOf(PropTypes.shape({
|
|
@@ -205,6 +232,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
205
232
|
type: PropTypes.oneOf(['pie']),
|
|
206
233
|
valueFormatter: PropTypes.func
|
|
207
234
|
})).isRequired,
|
|
235
|
+
/**
|
|
236
|
+
* The props used for each component slot.
|
|
237
|
+
* @default {}
|
|
238
|
+
*/
|
|
239
|
+
slotProps: PropTypes.object,
|
|
240
|
+
slots: PropTypes.object,
|
|
208
241
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
209
242
|
title: PropTypes.string,
|
|
210
243
|
tooltip: PropTypes.shape({
|
|
@@ -227,8 +260,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
227
260
|
label: PropTypes.string,
|
|
228
261
|
labelFontSize: PropTypes.number,
|
|
229
262
|
position: PropTypes.oneOf(['bottom', 'top']),
|
|
263
|
+
slotProps: PropTypes.object,
|
|
264
|
+
slots: PropTypes.object,
|
|
230
265
|
stroke: PropTypes.string,
|
|
231
266
|
tickFontSize: PropTypes.number,
|
|
267
|
+
tickMaxStep: PropTypes.number,
|
|
268
|
+
tickMinStep: PropTypes.number,
|
|
269
|
+
tickNumber: PropTypes.number,
|
|
232
270
|
tickSize: PropTypes.number
|
|
233
271
|
}), PropTypes.string]),
|
|
234
272
|
viewBox: PropTypes.shape({
|
|
@@ -251,15 +289,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
251
289
|
label: PropTypes.string,
|
|
252
290
|
labelFontSize: PropTypes.number,
|
|
253
291
|
max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
254
|
-
maxTicks: PropTypes.number,
|
|
255
292
|
min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
256
|
-
minTicks: PropTypes.number,
|
|
257
293
|
position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
|
|
258
294
|
scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
|
|
295
|
+
slotProps: PropTypes.object,
|
|
296
|
+
slots: PropTypes.object,
|
|
259
297
|
stroke: PropTypes.string,
|
|
260
298
|
tickFontSize: PropTypes.number,
|
|
299
|
+
tickMaxStep: PropTypes.number,
|
|
300
|
+
tickMinStep: PropTypes.number,
|
|
301
|
+
tickNumber: PropTypes.number,
|
|
261
302
|
tickSize: PropTypes.number,
|
|
262
|
-
tickSpacing: PropTypes.number,
|
|
263
303
|
valueFormatter: PropTypes.func
|
|
264
304
|
})),
|
|
265
305
|
yAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
@@ -275,15 +315,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
275
315
|
label: PropTypes.string,
|
|
276
316
|
labelFontSize: PropTypes.number,
|
|
277
317
|
max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
278
|
-
maxTicks: PropTypes.number,
|
|
279
318
|
min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
280
|
-
minTicks: PropTypes.number,
|
|
281
319
|
position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
|
|
282
320
|
scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
|
|
321
|
+
slotProps: PropTypes.object,
|
|
322
|
+
slots: PropTypes.object,
|
|
283
323
|
stroke: PropTypes.string,
|
|
284
324
|
tickFontSize: PropTypes.number,
|
|
325
|
+
tickMaxStep: PropTypes.number,
|
|
326
|
+
tickMinStep: PropTypes.number,
|
|
327
|
+
tickNumber: PropTypes.number,
|
|
285
328
|
tickSize: PropTypes.number,
|
|
286
|
-
tickSpacing: PropTypes.number,
|
|
287
329
|
valueFormatter: PropTypes.func
|
|
288
330
|
}))
|
|
289
331
|
} : void 0;
|