@mui/x-charts 6.0.0-alpha.1 → 6.0.0-alpha.2
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/legend.d.ts +3 -0
- package/BarChart/legend.js +20 -0
- package/CHANGELOG.md +62 -0
- package/ChartsLegend/ChartsLegend.d.ts +5 -1
- package/ChartsLegend/ChartsLegend.js +5 -1
- package/ChartsLegend/utils.d.ts +1 -1
- package/ChartsLegend/utils.js +12 -1
- package/ChartsTooltip/ChartsAxisTooltipContent.js +1 -1
- package/ChartsTooltip/ChartsItemTooltipContent.js +11 -2
- package/LineChart/LineChart.js +1 -0
- package/LineChart/legend.d.ts +3 -0
- package/LineChart/legend.js +20 -0
- package/PieChart/PieArc.d.ts +36 -0
- package/PieChart/PieArc.js +128 -0
- package/PieChart/PieArcLabel.d.ts +36 -0
- package/PieChart/PieArcLabel.js +113 -0
- package/PieChart/PieChart.d.ts +20 -0
- package/PieChart/PieChart.js +292 -0
- package/PieChart/PiePlot.d.ts +2 -0
- package/PieChart/PiePlot.js +98 -0
- package/PieChart/formatter.d.ts +3 -0
- package/PieChart/formatter.js +49 -0
- package/PieChart/index.d.ts +4 -0
- package/PieChart/index.js +47 -0
- package/PieChart/legend.d.ts +3 -0
- package/PieChart/legend.js +19 -0
- package/PieChart/package.json +6 -0
- package/README.md +2 -2
- package/ResponsiveChartContainer/index.js +14 -3
- package/ScatterChart/Scatter.js +1 -1
- package/ScatterChart/ScatterChart.js +1 -0
- package/ScatterChart/legend.d.ts +3 -0
- package/ScatterChart/legend.js +20 -0
- package/context/SeriesContextProvider.js +11 -1
- package/esm/BarChart/BarChart.js +1 -0
- package/esm/BarChart/legend.js +13 -0
- package/esm/ChartsLegend/ChartsLegend.js +5 -1
- package/esm/ChartsLegend/utils.js +11 -1
- package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +1 -1
- package/esm/ChartsTooltip/ChartsItemTooltipContent.js +11 -3
- package/esm/LineChart/LineChart.js +1 -0
- package/esm/LineChart/legend.js +13 -0
- package/esm/PieChart/PieArc.js +117 -0
- package/esm/PieChart/PieArcLabel.js +101 -0
- package/esm/PieChart/PieChart.js +285 -0
- package/esm/PieChart/PiePlot.js +92 -0
- package/esm/PieChart/formatter.js +48 -0
- package/esm/PieChart/index.js +4 -0
- package/esm/PieChart/legend.js +12 -0
- package/esm/ResponsiveChartContainer/index.js +14 -3
- package/esm/ScatterChart/Scatter.js +1 -1
- package/esm/ScatterChart/ScatterChart.js +1 -0
- package/esm/ScatterChart/legend.js +13 -0
- package/esm/context/SeriesContextProvider.js +11 -1
- package/esm/index.js +1 -0
- package/esm/internals/defaultizeColor.js +7 -0
- package/esm/models/seriesType/index.js +1 -8
- package/index.d.ts +1 -0
- package/index.js +12 -1
- package/internals/defaultizeColor.d.ts +35 -0
- package/internals/defaultizeColor.js +7 -0
- package/legacy/BarChart/BarChart.js +1 -0
- package/legacy/BarChart/legend.js +15 -0
- package/legacy/ChartsLegend/ChartsLegend.js +5 -1
- package/legacy/ChartsLegend/utils.js +12 -6
- package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +3 -1
- package/legacy/ChartsTooltip/ChartsItemTooltipContent.js +10 -3
- package/legacy/LineChart/LineChart.js +1 -0
- package/legacy/LineChart/legend.js +15 -0
- package/legacy/PieChart/PieArc.js +118 -0
- package/legacy/PieChart/PieArcLabel.js +101 -0
- package/legacy/PieChart/PieChart.js +297 -0
- package/legacy/PieChart/PiePlot.js +89 -0
- package/legacy/PieChart/formatter.js +55 -0
- package/legacy/PieChart/index.js +4 -0
- package/legacy/PieChart/legend.js +16 -0
- package/legacy/ResponsiveChartContainer/index.js +12 -3
- package/legacy/ScatterChart/Scatter.js +1 -1
- package/legacy/ScatterChart/ScatterChart.js +1 -0
- package/legacy/ScatterChart/legend.js +15 -0
- package/legacy/context/SeriesContextProvider.js +11 -1
- package/legacy/index.js +2 -1
- package/legacy/internals/defaultizeColor.js +9 -0
- package/legacy/models/seriesType/index.js +1 -8
- package/models/seriesType/bar.d.ts +1 -1
- package/models/seriesType/common.d.ts +1 -1
- package/models/seriesType/config.d.ts +29 -2
- package/models/seriesType/index.d.ts +7 -3
- package/models/seriesType/index.js +11 -0
- package/models/seriesType/line.d.ts +1 -1
- package/models/seriesType/pie.d.ts +103 -3
- package/models/seriesType/scatter.d.ts +1 -1
- package/modern/BarChart/BarChart.js +1 -0
- package/modern/BarChart/legend.js +13 -0
- package/modern/ChartsLegend/ChartsLegend.js +5 -1
- package/modern/ChartsLegend/utils.js +11 -1
- package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +1 -1
- package/modern/ChartsTooltip/ChartsItemTooltipContent.js +11 -2
- package/modern/LineChart/LineChart.js +1 -0
- package/modern/LineChart/legend.js +13 -0
- package/modern/PieChart/PieArc.js +116 -0
- package/modern/PieChart/PieArcLabel.js +101 -0
- package/modern/PieChart/PieChart.js +285 -0
- package/modern/PieChart/PiePlot.js +91 -0
- package/modern/PieChart/formatter.js +41 -0
- package/modern/PieChart/index.js +4 -0
- package/modern/PieChart/legend.js +12 -0
- package/modern/ResponsiveChartContainer/index.js +14 -3
- package/modern/ScatterChart/Scatter.js +1 -1
- package/modern/ScatterChart/ScatterChart.js +1 -0
- package/modern/ScatterChart/legend.js +13 -0
- package/modern/context/SeriesContextProvider.js +11 -1
- package/modern/index.js +2 -1
- package/modern/internals/defaultizeColor.js +7 -0
- package/modern/models/seriesType/index.js +1 -8
- package/package.json +1 -1
package/esm/BarChart/BarChart.js
CHANGED
|
@@ -123,6 +123,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
|
|
|
123
123
|
legend: PropTypes.shape({
|
|
124
124
|
classes: PropTypes.object,
|
|
125
125
|
direction: PropTypes.oneOf(['column', 'row']),
|
|
126
|
+
hidden: PropTypes.bool,
|
|
126
127
|
itemWidth: PropTypes.number,
|
|
127
128
|
markSize: PropTypes.number,
|
|
128
129
|
offset: PropTypes.shape({
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const legendGetter = params => {
|
|
2
|
+
const {
|
|
3
|
+
seriesOrder,
|
|
4
|
+
series
|
|
5
|
+
} = params;
|
|
6
|
+
const data = seriesOrder.map(seriesId => ({
|
|
7
|
+
color: series[seriesId].color,
|
|
8
|
+
label: series[seriesId].label,
|
|
9
|
+
id: seriesId
|
|
10
|
+
}));
|
|
11
|
+
return data.filter(item => item.label !== undefined);
|
|
12
|
+
};
|
|
13
|
+
export default legendGetter;
|
|
@@ -146,7 +146,8 @@ export function ChartsLegend(inProps) {
|
|
|
146
146
|
const {
|
|
147
147
|
position,
|
|
148
148
|
direction,
|
|
149
|
-
offset
|
|
149
|
+
offset,
|
|
150
|
+
hidden
|
|
150
151
|
} = props;
|
|
151
152
|
const theme = useTheme();
|
|
152
153
|
const classes = useUtilityClasses(_extends({}, props, {
|
|
@@ -154,6 +155,9 @@ export function ChartsLegend(inProps) {
|
|
|
154
155
|
}));
|
|
155
156
|
const drawingArea = React.useContext(DrawingContext);
|
|
156
157
|
const series = React.useContext(SeriesContext);
|
|
158
|
+
if (hidden) {
|
|
159
|
+
return null;
|
|
160
|
+
}
|
|
157
161
|
const seriesToDisplay = getSeriesToDisplay(series);
|
|
158
162
|
return /*#__PURE__*/_jsx(ChartsLegendRoot, {
|
|
159
163
|
ownerState: {
|
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
import getBarLegend from '../BarChart/legend';
|
|
2
|
+
import getScatterLegend from '../ScatterChart/legend';
|
|
3
|
+
import getLineLegend from '../LineChart/legend';
|
|
4
|
+
import getPieLegend from '../PieChart/legend';
|
|
5
|
+
const legendGetter = {
|
|
6
|
+
bar: getBarLegend,
|
|
7
|
+
scatter: getScatterLegend,
|
|
8
|
+
line: getLineLegend,
|
|
9
|
+
pie: getPieLegend
|
|
10
|
+
};
|
|
1
11
|
export function getSeriesToDisplay(series) {
|
|
2
|
-
return Object.
|
|
12
|
+
return Object.keys(series).flatMap(seriesType => legendGetter[seriesType](series[seriesType]));
|
|
3
13
|
}
|
|
@@ -82,7 +82,7 @@ export function ChartsAxisTooltipContent(props) {
|
|
|
82
82
|
const USED_X_AXIS_ID = xAxisIds[0];
|
|
83
83
|
const relevantSeries = React.useMemo(() => {
|
|
84
84
|
const rep = [];
|
|
85
|
-
Object.keys(series).forEach(seriesType => {
|
|
85
|
+
Object.keys(series).filter(seriesType => ['bar', 'line', 'scatter'].includes(seriesType)).forEach(seriesType => {
|
|
86
86
|
series[seriesType].seriesOrder.forEach(seriesId => {
|
|
87
87
|
const axisKey = series[seriesType].series[seriesId].xAxisKey;
|
|
88
88
|
if (axisKey === undefined || axisKey === USED_X_AXIS_ID) {
|
|
@@ -4,7 +4,6 @@ import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltip
|
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
6
|
export function DefaultChartsItemContent(props) {
|
|
7
|
-
var _series$label;
|
|
8
7
|
const {
|
|
9
8
|
series,
|
|
10
9
|
itemData,
|
|
@@ -14,8 +13,17 @@ export function DefaultChartsItemContent(props) {
|
|
|
14
13
|
if (itemData.dataIndex === undefined) {
|
|
15
14
|
return null;
|
|
16
15
|
}
|
|
17
|
-
const
|
|
18
|
-
|
|
16
|
+
const {
|
|
17
|
+
displayedLabel,
|
|
18
|
+
color
|
|
19
|
+
} = series.type === 'pie' ? {
|
|
20
|
+
color: series.data[itemData.dataIndex].color,
|
|
21
|
+
displayedLabel: series.data[itemData.dataIndex].label
|
|
22
|
+
} : {
|
|
23
|
+
color: series.color,
|
|
24
|
+
displayedLabel: series.label
|
|
25
|
+
};
|
|
26
|
+
|
|
19
27
|
// TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
|
|
20
28
|
// @ts-ignore
|
|
21
29
|
const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
|
|
@@ -125,6 +125,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
125
125
|
legend: PropTypes.shape({
|
|
126
126
|
classes: PropTypes.object,
|
|
127
127
|
direction: PropTypes.oneOf(['column', 'row']),
|
|
128
|
+
hidden: PropTypes.bool,
|
|
128
129
|
itemWidth: PropTypes.number,
|
|
129
130
|
markSize: PropTypes.number,
|
|
130
131
|
offset: PropTypes.shape({
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const legendGetter = params => {
|
|
2
|
+
const {
|
|
3
|
+
seriesOrder,
|
|
4
|
+
series
|
|
5
|
+
} = params;
|
|
6
|
+
const data = seriesOrder.map(seriesId => ({
|
|
7
|
+
color: series[seriesId].color,
|
|
8
|
+
label: series[seriesId].label,
|
|
9
|
+
id: seriesId
|
|
10
|
+
}));
|
|
11
|
+
return data.filter(item => item.label !== undefined);
|
|
12
|
+
};
|
|
13
|
+
export default legendGetter;
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded"];
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { arc as d3Arc } from 'd3-shape';
|
|
6
|
+
import PropTypes from 'prop-types';
|
|
7
|
+
import composeClasses from '@mui/utils/composeClasses';
|
|
8
|
+
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
|
9
|
+
import { styled } from '@mui/material/styles';
|
|
10
|
+
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
|
11
|
+
import { InteractionContext } from '../context/InteractionProvider';
|
|
12
|
+
import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
export function getPieArcUtilityClass(slot) {
|
|
15
|
+
return generateUtilityClass('MuiPieArc', slot);
|
|
16
|
+
}
|
|
17
|
+
export const pieArcClasses = generateUtilityClasses('MuiPieArc', ['root', 'highlighted', 'faded']);
|
|
18
|
+
const useUtilityClasses = ownerState => {
|
|
19
|
+
const {
|
|
20
|
+
classes,
|
|
21
|
+
id,
|
|
22
|
+
isFaded,
|
|
23
|
+
isHighlighted
|
|
24
|
+
} = ownerState;
|
|
25
|
+
const slots = {
|
|
26
|
+
root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
|
|
27
|
+
};
|
|
28
|
+
return composeClasses(slots, getPieArcUtilityClass, classes);
|
|
29
|
+
};
|
|
30
|
+
const PieArcRoot = styled('path', {
|
|
31
|
+
name: 'MuiPieArc',
|
|
32
|
+
slot: 'Root',
|
|
33
|
+
overridesResolver: (_, styles) => styles.arc
|
|
34
|
+
})(({
|
|
35
|
+
ownerState,
|
|
36
|
+
theme
|
|
37
|
+
}) => ({
|
|
38
|
+
stroke: theme.palette.background.paper,
|
|
39
|
+
strokeWidth: 1,
|
|
40
|
+
strokeLinejoin: 'round',
|
|
41
|
+
fill: ownerState.color,
|
|
42
|
+
opacity: ownerState.isFaded ? 0.3 : 1
|
|
43
|
+
}));
|
|
44
|
+
export default function PieArc(props) {
|
|
45
|
+
var _attibuesOverride$inn, _attibuesOverride$out, _attibuesOverride$cor;
|
|
46
|
+
const {
|
|
47
|
+
id,
|
|
48
|
+
dataIndex,
|
|
49
|
+
classes: innerClasses,
|
|
50
|
+
color,
|
|
51
|
+
highlightScope,
|
|
52
|
+
innerRadius: baseInnerRadius = 0,
|
|
53
|
+
outerRadius: baseOuterRadius,
|
|
54
|
+
cornerRadius: baseCornerRadius = 0,
|
|
55
|
+
highlighted,
|
|
56
|
+
faded = {
|
|
57
|
+
additionalRadius: -5
|
|
58
|
+
}
|
|
59
|
+
} = props,
|
|
60
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
61
|
+
const getInteractionItemProps = useInteractionItemProps(highlightScope);
|
|
62
|
+
const {
|
|
63
|
+
item
|
|
64
|
+
} = React.useContext(InteractionContext);
|
|
65
|
+
const isHighlighted = getIsHighlighted(item, {
|
|
66
|
+
type: 'pie',
|
|
67
|
+
seriesId: id,
|
|
68
|
+
dataIndex
|
|
69
|
+
}, highlightScope);
|
|
70
|
+
const isFaded = !isHighlighted && getIsFaded(item, {
|
|
71
|
+
type: 'pie',
|
|
72
|
+
seriesId: id,
|
|
73
|
+
dataIndex
|
|
74
|
+
}, highlightScope);
|
|
75
|
+
const ownerState = {
|
|
76
|
+
id,
|
|
77
|
+
dataIndex,
|
|
78
|
+
classes: innerClasses,
|
|
79
|
+
color,
|
|
80
|
+
isFaded,
|
|
81
|
+
isHighlighted
|
|
82
|
+
};
|
|
83
|
+
const classes = useUtilityClasses(ownerState);
|
|
84
|
+
const attibuesOverride = _extends({
|
|
85
|
+
additionalRadius: 0
|
|
86
|
+
}, isFaded && faded || isHighlighted && highlighted || {});
|
|
87
|
+
const innerRadius = Math.max(0, (_attibuesOverride$inn = attibuesOverride.innerRadius) != null ? _attibuesOverride$inn : baseInnerRadius);
|
|
88
|
+
const outerRadius = Math.max(0, (_attibuesOverride$out = attibuesOverride.outerRadius) != null ? _attibuesOverride$out : baseOuterRadius + attibuesOverride.additionalRadius);
|
|
89
|
+
const cornerRadius = (_attibuesOverride$cor = attibuesOverride.cornerRadius) != null ? _attibuesOverride$cor : baseCornerRadius;
|
|
90
|
+
return /*#__PURE__*/_jsx(PieArcRoot, _extends({
|
|
91
|
+
d: d3Arc().cornerRadius(cornerRadius)(_extends({}, other, {
|
|
92
|
+
innerRadius,
|
|
93
|
+
outerRadius
|
|
94
|
+
})),
|
|
95
|
+
ownerState: ownerState,
|
|
96
|
+
className: classes.root
|
|
97
|
+
}, getInteractionItemProps({
|
|
98
|
+
type: 'pie',
|
|
99
|
+
seriesId: id,
|
|
100
|
+
dataIndex
|
|
101
|
+
})));
|
|
102
|
+
}
|
|
103
|
+
process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
|
|
104
|
+
// ----------------------------- Warning --------------------------------
|
|
105
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
106
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
107
|
+
// ----------------------------------------------------------------------
|
|
108
|
+
classes: PropTypes.object,
|
|
109
|
+
cornerRadius: PropTypes.number,
|
|
110
|
+
dataIndex: PropTypes.number.isRequired,
|
|
111
|
+
highlightScope: PropTypes.shape({
|
|
112
|
+
faded: PropTypes.oneOf(['global', 'none', 'series']),
|
|
113
|
+
highlighted: PropTypes.oneOf(['item', 'none', 'series'])
|
|
114
|
+
}),
|
|
115
|
+
innerRadius: PropTypes.number,
|
|
116
|
+
outerRadius: PropTypes.number.isRequired
|
|
117
|
+
} : void 0;
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel"];
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { arc as d3Arc } from 'd3-shape';
|
|
6
|
+
import PropTypes from 'prop-types';
|
|
7
|
+
import composeClasses from '@mui/utils/composeClasses';
|
|
8
|
+
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
|
9
|
+
import { styled } from '@mui/material/styles';
|
|
10
|
+
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
|
11
|
+
import { InteractionContext } from '../context/InteractionProvider';
|
|
12
|
+
import { getIsFaded, getIsHighlighted } from '../hooks/useInteractionItemProps';
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
export function getPieArcLabelUtilityClass(slot) {
|
|
15
|
+
return generateUtilityClass('MuiPieArcLabel', slot);
|
|
16
|
+
}
|
|
17
|
+
export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
|
|
18
|
+
const useUtilityClasses = ownerState => {
|
|
19
|
+
const {
|
|
20
|
+
classes,
|
|
21
|
+
id,
|
|
22
|
+
isFaded,
|
|
23
|
+
isHighlighted
|
|
24
|
+
} = ownerState;
|
|
25
|
+
const slots = {
|
|
26
|
+
root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
|
|
27
|
+
};
|
|
28
|
+
return composeClasses(slots, getPieArcLabelUtilityClass, classes);
|
|
29
|
+
};
|
|
30
|
+
const PieArcLabelRoot = styled('text', {
|
|
31
|
+
name: 'MuiPieArcLabel',
|
|
32
|
+
slot: 'Root',
|
|
33
|
+
overridesResolver: (_, styles) => styles.root
|
|
34
|
+
})(({
|
|
35
|
+
theme
|
|
36
|
+
}) => ({
|
|
37
|
+
fill: theme.palette.text.primary,
|
|
38
|
+
alignmentBaseline: 'baseline',
|
|
39
|
+
textAnchor: 'middle'
|
|
40
|
+
}));
|
|
41
|
+
export default function PieArcLabel(props) {
|
|
42
|
+
const {
|
|
43
|
+
id,
|
|
44
|
+
dataIndex,
|
|
45
|
+
classes: innerClasses,
|
|
46
|
+
color,
|
|
47
|
+
highlightScope,
|
|
48
|
+
innerRadius = 0,
|
|
49
|
+
outerRadius,
|
|
50
|
+
cornerRadius = 0,
|
|
51
|
+
formattedArcLabel
|
|
52
|
+
} = props,
|
|
53
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
54
|
+
const {
|
|
55
|
+
item
|
|
56
|
+
} = React.useContext(InteractionContext);
|
|
57
|
+
const isHighlighted = getIsHighlighted(item, {
|
|
58
|
+
type: 'pie',
|
|
59
|
+
seriesId: id,
|
|
60
|
+
dataIndex
|
|
61
|
+
}, highlightScope);
|
|
62
|
+
const isFaded = !isHighlighted && getIsFaded(item, {
|
|
63
|
+
type: 'pie',
|
|
64
|
+
seriesId: id,
|
|
65
|
+
dataIndex
|
|
66
|
+
}, highlightScope);
|
|
67
|
+
const ownerState = {
|
|
68
|
+
id,
|
|
69
|
+
dataIndex,
|
|
70
|
+
classes: innerClasses,
|
|
71
|
+
color,
|
|
72
|
+
isFaded,
|
|
73
|
+
isHighlighted
|
|
74
|
+
};
|
|
75
|
+
const classes = useUtilityClasses(ownerState);
|
|
76
|
+
const arcLabelPosition = formattedArcLabel ? d3Arc().cornerRadius(cornerRadius).centroid(_extends({}, other, {
|
|
77
|
+
innerRadius,
|
|
78
|
+
outerRadius
|
|
79
|
+
})) : [0, 0];
|
|
80
|
+
return /*#__PURE__*/_jsx(PieArcLabelRoot, {
|
|
81
|
+
className: classes.root,
|
|
82
|
+
x: arcLabelPosition[0],
|
|
83
|
+
y: arcLabelPosition[1],
|
|
84
|
+
children: formattedArcLabel
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
|
|
88
|
+
// ----------------------------- Warning --------------------------------
|
|
89
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
90
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
91
|
+
// ----------------------------------------------------------------------
|
|
92
|
+
classes: PropTypes.object,
|
|
93
|
+
cornerRadius: PropTypes.number,
|
|
94
|
+
dataIndex: PropTypes.number.isRequired,
|
|
95
|
+
highlightScope: PropTypes.shape({
|
|
96
|
+
faded: PropTypes.oneOf(['global', 'none', 'series']),
|
|
97
|
+
highlighted: PropTypes.oneOf(['item', 'none', 'series'])
|
|
98
|
+
}),
|
|
99
|
+
innerRadius: PropTypes.number,
|
|
100
|
+
outerRadius: PropTypes.number.isRequired
|
|
101
|
+
} : void 0;
|
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
|
|
5
|
+
import { ChartsAxis } from '../ChartsAxis/ChartsAxis';
|
|
6
|
+
import { DEFAULT_X_AXIS_KEY } from '../constants';
|
|
7
|
+
import { ChartsTooltip } from '../ChartsTooltip';
|
|
8
|
+
import { ChartsLegend } from '../ChartsLegend';
|
|
9
|
+
import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
|
|
10
|
+
import { PiePlot } from './PiePlot';
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
const defaultMargin = {
|
|
14
|
+
top: 5,
|
|
15
|
+
bottom: 5,
|
|
16
|
+
left: 5,
|
|
17
|
+
right: 100
|
|
18
|
+
};
|
|
19
|
+
function PieChart(props) {
|
|
20
|
+
const {
|
|
21
|
+
xAxis,
|
|
22
|
+
yAxis,
|
|
23
|
+
series,
|
|
24
|
+
width,
|
|
25
|
+
height,
|
|
26
|
+
margin: marginProps,
|
|
27
|
+
colors,
|
|
28
|
+
sx,
|
|
29
|
+
tooltip = {
|
|
30
|
+
trigger: 'item'
|
|
31
|
+
},
|
|
32
|
+
axisHighlight = {
|
|
33
|
+
x: 'none',
|
|
34
|
+
y: 'none'
|
|
35
|
+
},
|
|
36
|
+
legend = {
|
|
37
|
+
direction: 'column',
|
|
38
|
+
position: {
|
|
39
|
+
vertical: 'middle',
|
|
40
|
+
horizontal: 'right'
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
topAxis = null,
|
|
44
|
+
leftAxis = null,
|
|
45
|
+
rightAxis = null,
|
|
46
|
+
bottomAxis = null,
|
|
47
|
+
children
|
|
48
|
+
} = props;
|
|
49
|
+
const margin = _extends({}, defaultMargin, marginProps);
|
|
50
|
+
return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
|
|
51
|
+
series: series.map(s => _extends({
|
|
52
|
+
type: 'pie'
|
|
53
|
+
}, s)),
|
|
54
|
+
width: width,
|
|
55
|
+
height: height,
|
|
56
|
+
margin: margin,
|
|
57
|
+
xAxis: xAxis != null ? xAxis : [{
|
|
58
|
+
id: DEFAULT_X_AXIS_KEY,
|
|
59
|
+
scaleType: 'point',
|
|
60
|
+
data: [...new Array(Math.max(...series.map(s => s.data.length)))].map((_, index) => index)
|
|
61
|
+
}],
|
|
62
|
+
yAxis: yAxis,
|
|
63
|
+
colors: colors,
|
|
64
|
+
sx: sx,
|
|
65
|
+
disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
|
|
66
|
+
children: [/*#__PURE__*/_jsx(ChartsAxis, {
|
|
67
|
+
topAxis: topAxis,
|
|
68
|
+
leftAxis: leftAxis,
|
|
69
|
+
rightAxis: rightAxis,
|
|
70
|
+
bottomAxis: bottomAxis
|
|
71
|
+
}), /*#__PURE__*/_jsx(PiePlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
75
|
+
// ----------------------------- Warning --------------------------------
|
|
76
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
77
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
78
|
+
// ----------------------------------------------------------------------
|
|
79
|
+
axisHighlight: PropTypes.shape({
|
|
80
|
+
x: PropTypes.oneOf(['band', 'line', 'none']),
|
|
81
|
+
y: PropTypes.oneOf(['line', 'none'])
|
|
82
|
+
}),
|
|
83
|
+
/**
|
|
84
|
+
* Indicate which axis to display the bottom of the charts.
|
|
85
|
+
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`
|
|
86
|
+
* @default xAxisIds[0] The id of the first provided axis
|
|
87
|
+
*/
|
|
88
|
+
bottomAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
89
|
+
axisId: PropTypes.string.isRequired,
|
|
90
|
+
classes: PropTypes.object,
|
|
91
|
+
disableLine: PropTypes.bool,
|
|
92
|
+
disableTicks: PropTypes.bool,
|
|
93
|
+
fill: PropTypes.string,
|
|
94
|
+
label: PropTypes.string,
|
|
95
|
+
labelFontSize: PropTypes.number,
|
|
96
|
+
position: PropTypes.oneOf(['bottom', 'top']),
|
|
97
|
+
stroke: PropTypes.string,
|
|
98
|
+
tickFontSize: PropTypes.number,
|
|
99
|
+
tickSize: PropTypes.number
|
|
100
|
+
}), PropTypes.string]),
|
|
101
|
+
children: PropTypes.node,
|
|
102
|
+
className: PropTypes.string,
|
|
103
|
+
/**
|
|
104
|
+
* Color palette used to colorize multiple series.
|
|
105
|
+
*/
|
|
106
|
+
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
107
|
+
desc: PropTypes.string,
|
|
108
|
+
disableAxisListener: PropTypes.bool,
|
|
109
|
+
height: PropTypes.number,
|
|
110
|
+
/**
|
|
111
|
+
* Indicate which axis to display the left of the charts.
|
|
112
|
+
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`
|
|
113
|
+
* @default yAxisIds[0] The id of the first provided axis
|
|
114
|
+
*/
|
|
115
|
+
leftAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
116
|
+
axisId: PropTypes.string.isRequired,
|
|
117
|
+
classes: PropTypes.object,
|
|
118
|
+
disableLine: PropTypes.bool,
|
|
119
|
+
disableTicks: PropTypes.bool,
|
|
120
|
+
fill: PropTypes.string,
|
|
121
|
+
label: PropTypes.string,
|
|
122
|
+
labelFontSize: PropTypes.number,
|
|
123
|
+
position: PropTypes.oneOf(['left', 'right']),
|
|
124
|
+
stroke: PropTypes.string,
|
|
125
|
+
tickFontSize: PropTypes.number,
|
|
126
|
+
tickSize: PropTypes.number
|
|
127
|
+
}), PropTypes.string]),
|
|
128
|
+
legend: PropTypes.shape({
|
|
129
|
+
classes: PropTypes.object,
|
|
130
|
+
direction: PropTypes.oneOf(['column', 'row']),
|
|
131
|
+
hidden: PropTypes.bool,
|
|
132
|
+
itemWidth: PropTypes.number,
|
|
133
|
+
markSize: PropTypes.number,
|
|
134
|
+
offset: PropTypes.shape({
|
|
135
|
+
x: PropTypes.number,
|
|
136
|
+
y: PropTypes.number
|
|
137
|
+
}),
|
|
138
|
+
position: PropTypes.shape({
|
|
139
|
+
horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
|
|
140
|
+
vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
|
|
141
|
+
}),
|
|
142
|
+
spacing: PropTypes.number
|
|
143
|
+
}),
|
|
144
|
+
margin: PropTypes.shape({
|
|
145
|
+
bottom: PropTypes.number,
|
|
146
|
+
left: PropTypes.number,
|
|
147
|
+
right: PropTypes.number,
|
|
148
|
+
top: PropTypes.number
|
|
149
|
+
}),
|
|
150
|
+
/**
|
|
151
|
+
* Indicate which axis to display the right of the charts.
|
|
152
|
+
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`
|
|
153
|
+
* @default null
|
|
154
|
+
*/
|
|
155
|
+
rightAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
156
|
+
axisId: PropTypes.string.isRequired,
|
|
157
|
+
classes: PropTypes.object,
|
|
158
|
+
disableLine: PropTypes.bool,
|
|
159
|
+
disableTicks: PropTypes.bool,
|
|
160
|
+
fill: PropTypes.string,
|
|
161
|
+
label: PropTypes.string,
|
|
162
|
+
labelFontSize: PropTypes.number,
|
|
163
|
+
position: PropTypes.oneOf(['left', 'right']),
|
|
164
|
+
stroke: PropTypes.string,
|
|
165
|
+
tickFontSize: PropTypes.number,
|
|
166
|
+
tickSize: PropTypes.number
|
|
167
|
+
}), PropTypes.string]),
|
|
168
|
+
series: PropTypes.arrayOf(PropTypes.shape({
|
|
169
|
+
arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
|
|
170
|
+
arcLabelMinAngle: PropTypes.number,
|
|
171
|
+
color: PropTypes.string,
|
|
172
|
+
cornerRadius: PropTypes.number,
|
|
173
|
+
cx: PropTypes.number,
|
|
174
|
+
cy: PropTypes.number,
|
|
175
|
+
data: PropTypes.arrayOf(PropTypes.shape({
|
|
176
|
+
color: PropTypes.string,
|
|
177
|
+
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
178
|
+
label: PropTypes.string,
|
|
179
|
+
value: PropTypes.number.isRequired
|
|
180
|
+
})).isRequired,
|
|
181
|
+
endAngle: PropTypes.number,
|
|
182
|
+
faded: PropTypes.shape({
|
|
183
|
+
additionalRadius: PropTypes.number,
|
|
184
|
+
cornerRadius: PropTypes.number,
|
|
185
|
+
innerRadius: PropTypes.number,
|
|
186
|
+
outerRadius: PropTypes.number
|
|
187
|
+
}),
|
|
188
|
+
highlighted: PropTypes.shape({
|
|
189
|
+
additionalRadius: PropTypes.number,
|
|
190
|
+
cornerRadius: PropTypes.number,
|
|
191
|
+
innerRadius: PropTypes.number,
|
|
192
|
+
outerRadius: PropTypes.number
|
|
193
|
+
}),
|
|
194
|
+
highlightScope: PropTypes.shape({
|
|
195
|
+
faded: PropTypes.oneOf(['global', 'none', 'series']),
|
|
196
|
+
highlighted: PropTypes.oneOf(['item', 'none', 'series'])
|
|
197
|
+
}),
|
|
198
|
+
id: PropTypes.string,
|
|
199
|
+
innerRadius: PropTypes.number,
|
|
200
|
+
outerRadius: PropTypes.number,
|
|
201
|
+
paddingAngle: PropTypes.number,
|
|
202
|
+
sortingValues: PropTypes.oneOfType([PropTypes.oneOf(['asc', 'desc', 'none']), PropTypes.func]),
|
|
203
|
+
startAngle: PropTypes.number,
|
|
204
|
+
type: PropTypes.oneOf(['pie']),
|
|
205
|
+
valueFormatter: PropTypes.func
|
|
206
|
+
})).isRequired,
|
|
207
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
208
|
+
title: PropTypes.string,
|
|
209
|
+
tooltip: PropTypes.shape({
|
|
210
|
+
axisContent: PropTypes.elementType,
|
|
211
|
+
classes: PropTypes.object,
|
|
212
|
+
itemContent: PropTypes.elementType,
|
|
213
|
+
trigger: PropTypes.oneOf(['axis', 'item', 'none'])
|
|
214
|
+
}),
|
|
215
|
+
/**
|
|
216
|
+
* Indicate which axis to display the top of the charts.
|
|
217
|
+
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`
|
|
218
|
+
* @default null
|
|
219
|
+
*/
|
|
220
|
+
topAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
221
|
+
axisId: PropTypes.string.isRequired,
|
|
222
|
+
classes: PropTypes.object,
|
|
223
|
+
disableLine: PropTypes.bool,
|
|
224
|
+
disableTicks: PropTypes.bool,
|
|
225
|
+
fill: PropTypes.string,
|
|
226
|
+
label: PropTypes.string,
|
|
227
|
+
labelFontSize: PropTypes.number,
|
|
228
|
+
position: PropTypes.oneOf(['bottom', 'top']),
|
|
229
|
+
stroke: PropTypes.string,
|
|
230
|
+
tickFontSize: PropTypes.number,
|
|
231
|
+
tickSize: PropTypes.number
|
|
232
|
+
}), PropTypes.string]),
|
|
233
|
+
viewBox: PropTypes.shape({
|
|
234
|
+
height: PropTypes.number,
|
|
235
|
+
width: PropTypes.number,
|
|
236
|
+
x: PropTypes.number,
|
|
237
|
+
y: PropTypes.number
|
|
238
|
+
}),
|
|
239
|
+
width: PropTypes.number,
|
|
240
|
+
xAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
241
|
+
axisId: PropTypes.string,
|
|
242
|
+
classes: PropTypes.object,
|
|
243
|
+
data: PropTypes.array,
|
|
244
|
+
disableLine: PropTypes.bool,
|
|
245
|
+
disableTicks: PropTypes.bool,
|
|
246
|
+
fill: PropTypes.string,
|
|
247
|
+
id: PropTypes.string,
|
|
248
|
+
label: PropTypes.string,
|
|
249
|
+
labelFontSize: PropTypes.number,
|
|
250
|
+
max: PropTypes.number,
|
|
251
|
+
maxTicks: PropTypes.number,
|
|
252
|
+
min: PropTypes.number,
|
|
253
|
+
minTicks: PropTypes.number,
|
|
254
|
+
position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
|
|
255
|
+
scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
|
|
256
|
+
stroke: PropTypes.string,
|
|
257
|
+
tickFontSize: PropTypes.number,
|
|
258
|
+
tickSize: PropTypes.number,
|
|
259
|
+
tickSpacing: PropTypes.number,
|
|
260
|
+
valueFormatter: PropTypes.func
|
|
261
|
+
})),
|
|
262
|
+
yAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
263
|
+
axisId: PropTypes.string,
|
|
264
|
+
classes: PropTypes.object,
|
|
265
|
+
data: PropTypes.array,
|
|
266
|
+
disableLine: PropTypes.bool,
|
|
267
|
+
disableTicks: PropTypes.bool,
|
|
268
|
+
fill: PropTypes.string,
|
|
269
|
+
id: PropTypes.string,
|
|
270
|
+
label: PropTypes.string,
|
|
271
|
+
labelFontSize: PropTypes.number,
|
|
272
|
+
max: PropTypes.number,
|
|
273
|
+
maxTicks: PropTypes.number,
|
|
274
|
+
min: PropTypes.number,
|
|
275
|
+
minTicks: PropTypes.number,
|
|
276
|
+
position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
|
|
277
|
+
scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
|
|
278
|
+
stroke: PropTypes.string,
|
|
279
|
+
tickFontSize: PropTypes.number,
|
|
280
|
+
tickSize: PropTypes.number,
|
|
281
|
+
tickSpacing: PropTypes.number,
|
|
282
|
+
valueFormatter: PropTypes.func
|
|
283
|
+
}))
|
|
284
|
+
} : void 0;
|
|
285
|
+
export { PieChart };
|