@mui/x-charts 6.0.0-alpha.0 → 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 +8 -5
- package/BarChart/legend.d.ts +3 -0
- package/BarChart/legend.js +20 -0
- package/CHANGELOG.md +136 -8
- package/ChartsAxis/ChartsAxis.d.ts +4 -4
- package/ChartsAxis/ChartsAxis.js +4 -4
- 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/ChartsTooltip/ChartsTooltipTable.js +8 -8
- package/LineChart/LineChart.js +8 -5
- 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 +30 -2
- package/ResponsiveChartContainer/index.js +91 -25
- package/ScatterChart/Scatter.js +1 -1
- package/ScatterChart/ScatterChart.js +5 -4
- package/ScatterChart/legend.d.ts +3 -0
- package/ScatterChart/legend.js +20 -0
- package/context/SeriesContextProvider.js +11 -1
- package/esm/BarChart/BarChart.js +8 -5
- package/esm/BarChart/legend.js +13 -0
- package/esm/ChartsAxis/ChartsAxis.js +4 -4
- 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/ChartsTooltip/ChartsTooltipTable.js +8 -8
- package/esm/LineChart/LineChart.js +8 -5
- 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 +94 -26
- package/esm/ScatterChart/Scatter.js +1 -1
- package/esm/ScatterChart/ScatterChart.js +5 -4
- 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 +10 -7
- package/legacy/BarChart/legend.js +15 -0
- package/legacy/ChartsAxis/ChartsAxis.js +4 -4
- 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/ChartsTooltip/ChartsTooltipTable.js +7 -9
- package/legacy/LineChart/LineChart.js +10 -7
- 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 +89 -26
- package/legacy/ScatterChart/Scatter.js +1 -1
- package/legacy/ScatterChart/ScatterChart.js +5 -4
- 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 +8 -5
- package/modern/BarChart/legend.js +13 -0
- package/modern/ChartsAxis/ChartsAxis.js +4 -4
- 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/ChartsTooltip/ChartsTooltipTable.js +8 -8
- package/modern/LineChart/LineChart.js +8 -5
- 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 +91 -25
- package/modern/ScatterChart/Scatter.js +1 -1
- package/modern/ScatterChart/ScatterChart.js +5 -4
- 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 -3
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = PieArc;
|
|
8
|
+
exports.getPieArcUtilityClass = getPieArcUtilityClass;
|
|
9
|
+
exports.pieArcClasses = void 0;
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
12
|
+
var React = _interopRequireWildcard(require("react"));
|
|
13
|
+
var _d3Shape = require("d3-shape");
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
16
|
+
var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
|
|
17
|
+
var _styles = require("@mui/material/styles");
|
|
18
|
+
var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
|
|
19
|
+
var _InteractionProvider = require("../context/InteractionProvider");
|
|
20
|
+
var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
|
|
21
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
+
const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded"];
|
|
23
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
24
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
function getPieArcUtilityClass(slot) {
|
|
26
|
+
return (0, _generateUtilityClass.default)('MuiPieArc', slot);
|
|
27
|
+
}
|
|
28
|
+
const pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded']);
|
|
29
|
+
exports.pieArcClasses = pieArcClasses;
|
|
30
|
+
const useUtilityClasses = ownerState => {
|
|
31
|
+
const {
|
|
32
|
+
classes,
|
|
33
|
+
id,
|
|
34
|
+
isFaded,
|
|
35
|
+
isHighlighted
|
|
36
|
+
} = ownerState;
|
|
37
|
+
const slots = {
|
|
38
|
+
root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
|
|
39
|
+
};
|
|
40
|
+
return (0, _composeClasses.default)(slots, getPieArcUtilityClass, classes);
|
|
41
|
+
};
|
|
42
|
+
const PieArcRoot = (0, _styles.styled)('path', {
|
|
43
|
+
name: 'MuiPieArc',
|
|
44
|
+
slot: 'Root',
|
|
45
|
+
overridesResolver: (_, styles) => styles.arc
|
|
46
|
+
})(({
|
|
47
|
+
ownerState,
|
|
48
|
+
theme
|
|
49
|
+
}) => ({
|
|
50
|
+
stroke: theme.palette.background.paper,
|
|
51
|
+
strokeWidth: 1,
|
|
52
|
+
strokeLinejoin: 'round',
|
|
53
|
+
fill: ownerState.color,
|
|
54
|
+
opacity: ownerState.isFaded ? 0.3 : 1
|
|
55
|
+
}));
|
|
56
|
+
function PieArc(props) {
|
|
57
|
+
const {
|
|
58
|
+
id,
|
|
59
|
+
dataIndex,
|
|
60
|
+
classes: innerClasses,
|
|
61
|
+
color,
|
|
62
|
+
highlightScope,
|
|
63
|
+
innerRadius: baseInnerRadius = 0,
|
|
64
|
+
outerRadius: baseOuterRadius,
|
|
65
|
+
cornerRadius: baseCornerRadius = 0,
|
|
66
|
+
highlighted,
|
|
67
|
+
faded = {
|
|
68
|
+
additionalRadius: -5
|
|
69
|
+
}
|
|
70
|
+
} = props,
|
|
71
|
+
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
72
|
+
const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
|
|
73
|
+
const {
|
|
74
|
+
item
|
|
75
|
+
} = React.useContext(_InteractionProvider.InteractionContext);
|
|
76
|
+
const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
|
|
77
|
+
type: 'pie',
|
|
78
|
+
seriesId: id,
|
|
79
|
+
dataIndex
|
|
80
|
+
}, highlightScope);
|
|
81
|
+
const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
|
|
82
|
+
type: 'pie',
|
|
83
|
+
seriesId: id,
|
|
84
|
+
dataIndex
|
|
85
|
+
}, highlightScope);
|
|
86
|
+
const ownerState = {
|
|
87
|
+
id,
|
|
88
|
+
dataIndex,
|
|
89
|
+
classes: innerClasses,
|
|
90
|
+
color,
|
|
91
|
+
isFaded,
|
|
92
|
+
isHighlighted
|
|
93
|
+
};
|
|
94
|
+
const classes = useUtilityClasses(ownerState);
|
|
95
|
+
const attibuesOverride = (0, _extends2.default)({
|
|
96
|
+
additionalRadius: 0
|
|
97
|
+
}, isFaded && faded || isHighlighted && highlighted || {});
|
|
98
|
+
const innerRadius = Math.max(0, attibuesOverride.innerRadius ?? baseInnerRadius);
|
|
99
|
+
const outerRadius = Math.max(0, attibuesOverride.outerRadius ?? baseOuterRadius + attibuesOverride.additionalRadius);
|
|
100
|
+
const cornerRadius = attibuesOverride.cornerRadius ?? baseCornerRadius;
|
|
101
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcRoot, (0, _extends2.default)({
|
|
102
|
+
d: (0, _d3Shape.arc)().cornerRadius(cornerRadius)((0, _extends2.default)({}, other, {
|
|
103
|
+
innerRadius,
|
|
104
|
+
outerRadius
|
|
105
|
+
})),
|
|
106
|
+
ownerState: ownerState,
|
|
107
|
+
className: classes.root
|
|
108
|
+
}, getInteractionItemProps({
|
|
109
|
+
type: 'pie',
|
|
110
|
+
seriesId: id,
|
|
111
|
+
dataIndex
|
|
112
|
+
})));
|
|
113
|
+
}
|
|
114
|
+
process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
|
|
115
|
+
// ----------------------------- Warning --------------------------------
|
|
116
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
117
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
118
|
+
// ----------------------------------------------------------------------
|
|
119
|
+
classes: _propTypes.default.object,
|
|
120
|
+
cornerRadius: _propTypes.default.number,
|
|
121
|
+
dataIndex: _propTypes.default.number.isRequired,
|
|
122
|
+
highlightScope: _propTypes.default.shape({
|
|
123
|
+
faded: _propTypes.default.oneOf(['global', 'none', 'series']),
|
|
124
|
+
highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
|
|
125
|
+
}),
|
|
126
|
+
innerRadius: _propTypes.default.number,
|
|
127
|
+
outerRadius: _propTypes.default.number.isRequired
|
|
128
|
+
} : void 0;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { PieArcDatum as D3PieArcDatum } from 'd3-shape';
|
|
3
|
+
import { HighlightScope } from '../context/HighlightProvider';
|
|
4
|
+
import { PieSeriesType } from '../models/seriesType/pie';
|
|
5
|
+
export interface PieArcLabelClasses {
|
|
6
|
+
/** Styles applied to the root element. */
|
|
7
|
+
root: string;
|
|
8
|
+
/** Styles applied to the root element when higlighted. */
|
|
9
|
+
highlighted: string;
|
|
10
|
+
/** Styles applied to the root element when faded. */
|
|
11
|
+
faded: string;
|
|
12
|
+
}
|
|
13
|
+
export type PieArcLabelClassKey = keyof PieArcLabelClasses;
|
|
14
|
+
export interface PieArcLabelOwnerState {
|
|
15
|
+
id: string;
|
|
16
|
+
dataIndex: number;
|
|
17
|
+
color: string;
|
|
18
|
+
isFaded: boolean;
|
|
19
|
+
isHighlighted: boolean;
|
|
20
|
+
classes?: Partial<PieArcLabelClasses>;
|
|
21
|
+
}
|
|
22
|
+
export declare function getPieArcLabelUtilityClass(slot: string): string;
|
|
23
|
+
export declare const pieArcLabelClasses: PieArcLabelClasses;
|
|
24
|
+
export type PieArcLabelProps = Omit<PieArcLabelOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & D3PieArcDatum<any> & {
|
|
25
|
+
highlightScope?: Partial<HighlightScope>;
|
|
26
|
+
innerRadius: PieSeriesType['innerRadius'];
|
|
27
|
+
outerRadius: number;
|
|
28
|
+
cornerRadius: PieSeriesType['cornerRadius'];
|
|
29
|
+
} & {
|
|
30
|
+
formattedArcLabel?: string | null;
|
|
31
|
+
};
|
|
32
|
+
declare function PieArcLabel(props: PieArcLabelProps): React.JSX.Element;
|
|
33
|
+
declare namespace PieArcLabel {
|
|
34
|
+
var propTypes: any;
|
|
35
|
+
}
|
|
36
|
+
export default PieArcLabel;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = PieArcLabel;
|
|
8
|
+
exports.getPieArcLabelUtilityClass = getPieArcLabelUtilityClass;
|
|
9
|
+
exports.pieArcLabelClasses = void 0;
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
12
|
+
var React = _interopRequireWildcard(require("react"));
|
|
13
|
+
var _d3Shape = require("d3-shape");
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
16
|
+
var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
|
|
17
|
+
var _styles = require("@mui/material/styles");
|
|
18
|
+
var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
|
|
19
|
+
var _InteractionProvider = require("../context/InteractionProvider");
|
|
20
|
+
var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
|
|
21
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
+
const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel"];
|
|
23
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
24
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
function getPieArcLabelUtilityClass(slot) {
|
|
26
|
+
return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
|
|
27
|
+
}
|
|
28
|
+
const pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
|
|
29
|
+
exports.pieArcLabelClasses = pieArcLabelClasses;
|
|
30
|
+
const useUtilityClasses = ownerState => {
|
|
31
|
+
const {
|
|
32
|
+
classes,
|
|
33
|
+
id,
|
|
34
|
+
isFaded,
|
|
35
|
+
isHighlighted
|
|
36
|
+
} = ownerState;
|
|
37
|
+
const slots = {
|
|
38
|
+
root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
|
|
39
|
+
};
|
|
40
|
+
return (0, _composeClasses.default)(slots, getPieArcLabelUtilityClass, classes);
|
|
41
|
+
};
|
|
42
|
+
const PieArcLabelRoot = (0, _styles.styled)('text', {
|
|
43
|
+
name: 'MuiPieArcLabel',
|
|
44
|
+
slot: 'Root',
|
|
45
|
+
overridesResolver: (_, styles) => styles.root
|
|
46
|
+
})(({
|
|
47
|
+
theme
|
|
48
|
+
}) => ({
|
|
49
|
+
fill: theme.palette.text.primary,
|
|
50
|
+
alignmentBaseline: 'baseline',
|
|
51
|
+
textAnchor: 'middle'
|
|
52
|
+
}));
|
|
53
|
+
function PieArcLabel(props) {
|
|
54
|
+
const {
|
|
55
|
+
id,
|
|
56
|
+
dataIndex,
|
|
57
|
+
classes: innerClasses,
|
|
58
|
+
color,
|
|
59
|
+
highlightScope,
|
|
60
|
+
innerRadius = 0,
|
|
61
|
+
outerRadius,
|
|
62
|
+
cornerRadius = 0,
|
|
63
|
+
formattedArcLabel
|
|
64
|
+
} = props,
|
|
65
|
+
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
66
|
+
const {
|
|
67
|
+
item
|
|
68
|
+
} = React.useContext(_InteractionProvider.InteractionContext);
|
|
69
|
+
const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
|
|
70
|
+
type: 'pie',
|
|
71
|
+
seriesId: id,
|
|
72
|
+
dataIndex
|
|
73
|
+
}, highlightScope);
|
|
74
|
+
const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
|
|
75
|
+
type: 'pie',
|
|
76
|
+
seriesId: id,
|
|
77
|
+
dataIndex
|
|
78
|
+
}, highlightScope);
|
|
79
|
+
const ownerState = {
|
|
80
|
+
id,
|
|
81
|
+
dataIndex,
|
|
82
|
+
classes: innerClasses,
|
|
83
|
+
color,
|
|
84
|
+
isFaded,
|
|
85
|
+
isHighlighted
|
|
86
|
+
};
|
|
87
|
+
const classes = useUtilityClasses(ownerState);
|
|
88
|
+
const arcLabelPosition = formattedArcLabel ? (0, _d3Shape.arc)().cornerRadius(cornerRadius).centroid((0, _extends2.default)({}, other, {
|
|
89
|
+
innerRadius,
|
|
90
|
+
outerRadius
|
|
91
|
+
})) : [0, 0];
|
|
92
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelRoot, {
|
|
93
|
+
className: classes.root,
|
|
94
|
+
x: arcLabelPosition[0],
|
|
95
|
+
y: arcLabelPosition[1],
|
|
96
|
+
children: formattedArcLabel
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
|
|
100
|
+
// ----------------------------- Warning --------------------------------
|
|
101
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
102
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
103
|
+
// ----------------------------------------------------------------------
|
|
104
|
+
classes: _propTypes.default.object,
|
|
105
|
+
cornerRadius: _propTypes.default.number,
|
|
106
|
+
dataIndex: _propTypes.default.number.isRequired,
|
|
107
|
+
highlightScope: _propTypes.default.shape({
|
|
108
|
+
faded: _propTypes.default.oneOf(['global', 'none', 'series']),
|
|
109
|
+
highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
|
|
110
|
+
}),
|
|
111
|
+
innerRadius: _propTypes.default.number,
|
|
112
|
+
outerRadius: _propTypes.default.number.isRequired
|
|
113
|
+
} : void 0;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
|
|
3
|
+
import { ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
|
|
4
|
+
import { PieSeriesType } from '../models/seriesType';
|
|
5
|
+
import { MakeOptional } from '../models/helpers';
|
|
6
|
+
import { ChartsTooltipProps } from '../ChartsTooltip';
|
|
7
|
+
import { ChartsLegendProps } from '../ChartsLegend';
|
|
8
|
+
import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
|
|
9
|
+
import { PieValueType } from '../models/seriesType/pie';
|
|
10
|
+
export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, ChartsAxisProps {
|
|
11
|
+
series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
|
|
12
|
+
tooltip?: ChartsTooltipProps;
|
|
13
|
+
axisHighlight?: ChartsAxisHighlightProps;
|
|
14
|
+
legend?: ChartsLegendProps;
|
|
15
|
+
}
|
|
16
|
+
declare function PieChart(props: PieChartProps): React.JSX.Element;
|
|
17
|
+
declare namespace PieChart {
|
|
18
|
+
var propTypes: any;
|
|
19
|
+
}
|
|
20
|
+
export { PieChart };
|
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.PieChart = PieChart;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var React = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
|
|
12
|
+
var _ChartsAxis = require("../ChartsAxis/ChartsAxis");
|
|
13
|
+
var _constants = require("../constants");
|
|
14
|
+
var _ChartsTooltip = require("../ChartsTooltip");
|
|
15
|
+
var _ChartsLegend = require("../ChartsLegend");
|
|
16
|
+
var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
|
|
17
|
+
var _PiePlot = require("./PiePlot");
|
|
18
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
20
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
+
const defaultMargin = {
|
|
22
|
+
top: 5,
|
|
23
|
+
bottom: 5,
|
|
24
|
+
left: 5,
|
|
25
|
+
right: 100
|
|
26
|
+
};
|
|
27
|
+
function PieChart(props) {
|
|
28
|
+
const {
|
|
29
|
+
xAxis,
|
|
30
|
+
yAxis,
|
|
31
|
+
series,
|
|
32
|
+
width,
|
|
33
|
+
height,
|
|
34
|
+
margin: marginProps,
|
|
35
|
+
colors,
|
|
36
|
+
sx,
|
|
37
|
+
tooltip = {
|
|
38
|
+
trigger: 'item'
|
|
39
|
+
},
|
|
40
|
+
axisHighlight = {
|
|
41
|
+
x: 'none',
|
|
42
|
+
y: 'none'
|
|
43
|
+
},
|
|
44
|
+
legend = {
|
|
45
|
+
direction: 'column',
|
|
46
|
+
position: {
|
|
47
|
+
vertical: 'middle',
|
|
48
|
+
horizontal: 'right'
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
topAxis = null,
|
|
52
|
+
leftAxis = null,
|
|
53
|
+
rightAxis = null,
|
|
54
|
+
bottomAxis = null,
|
|
55
|
+
children
|
|
56
|
+
} = props;
|
|
57
|
+
const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
|
|
58
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
|
|
59
|
+
series: series.map(s => (0, _extends2.default)({
|
|
60
|
+
type: 'pie'
|
|
61
|
+
}, s)),
|
|
62
|
+
width: width,
|
|
63
|
+
height: height,
|
|
64
|
+
margin: margin,
|
|
65
|
+
xAxis: xAxis ?? [{
|
|
66
|
+
id: _constants.DEFAULT_X_AXIS_KEY,
|
|
67
|
+
scaleType: 'point',
|
|
68
|
+
data: [...new Array(Math.max(...series.map(s => s.data.length)))].map((_, index) => index)
|
|
69
|
+
}],
|
|
70
|
+
yAxis: yAxis,
|
|
71
|
+
colors: colors,
|
|
72
|
+
sx: sx,
|
|
73
|
+
disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
|
|
74
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
|
|
75
|
+
topAxis: topAxis,
|
|
76
|
+
leftAxis: leftAxis,
|
|
77
|
+
rightAxis: rightAxis,
|
|
78
|
+
bottomAxis: bottomAxis
|
|
79
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), children]
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
83
|
+
// ----------------------------- Warning --------------------------------
|
|
84
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
85
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
86
|
+
// ----------------------------------------------------------------------
|
|
87
|
+
axisHighlight: _propTypes.default.shape({
|
|
88
|
+
x: _propTypes.default.oneOf(['band', 'line', 'none']),
|
|
89
|
+
y: _propTypes.default.oneOf(['line', 'none'])
|
|
90
|
+
}),
|
|
91
|
+
/**
|
|
92
|
+
* Indicate which axis to display the bottom of the charts.
|
|
93
|
+
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`
|
|
94
|
+
* @default xAxisIds[0] The id of the first provided axis
|
|
95
|
+
*/
|
|
96
|
+
bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
|
|
97
|
+
axisId: _propTypes.default.string.isRequired,
|
|
98
|
+
classes: _propTypes.default.object,
|
|
99
|
+
disableLine: _propTypes.default.bool,
|
|
100
|
+
disableTicks: _propTypes.default.bool,
|
|
101
|
+
fill: _propTypes.default.string,
|
|
102
|
+
label: _propTypes.default.string,
|
|
103
|
+
labelFontSize: _propTypes.default.number,
|
|
104
|
+
position: _propTypes.default.oneOf(['bottom', 'top']),
|
|
105
|
+
stroke: _propTypes.default.string,
|
|
106
|
+
tickFontSize: _propTypes.default.number,
|
|
107
|
+
tickSize: _propTypes.default.number
|
|
108
|
+
}), _propTypes.default.string]),
|
|
109
|
+
children: _propTypes.default.node,
|
|
110
|
+
className: _propTypes.default.string,
|
|
111
|
+
/**
|
|
112
|
+
* Color palette used to colorize multiple series.
|
|
113
|
+
*/
|
|
114
|
+
colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
|
|
115
|
+
desc: _propTypes.default.string,
|
|
116
|
+
disableAxisListener: _propTypes.default.bool,
|
|
117
|
+
height: _propTypes.default.number,
|
|
118
|
+
/**
|
|
119
|
+
* Indicate which axis to display the left of the charts.
|
|
120
|
+
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`
|
|
121
|
+
* @default yAxisIds[0] The id of the first provided axis
|
|
122
|
+
*/
|
|
123
|
+
leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
|
|
124
|
+
axisId: _propTypes.default.string.isRequired,
|
|
125
|
+
classes: _propTypes.default.object,
|
|
126
|
+
disableLine: _propTypes.default.bool,
|
|
127
|
+
disableTicks: _propTypes.default.bool,
|
|
128
|
+
fill: _propTypes.default.string,
|
|
129
|
+
label: _propTypes.default.string,
|
|
130
|
+
labelFontSize: _propTypes.default.number,
|
|
131
|
+
position: _propTypes.default.oneOf(['left', 'right']),
|
|
132
|
+
stroke: _propTypes.default.string,
|
|
133
|
+
tickFontSize: _propTypes.default.number,
|
|
134
|
+
tickSize: _propTypes.default.number
|
|
135
|
+
}), _propTypes.default.string]),
|
|
136
|
+
legend: _propTypes.default.shape({
|
|
137
|
+
classes: _propTypes.default.object,
|
|
138
|
+
direction: _propTypes.default.oneOf(['column', 'row']),
|
|
139
|
+
hidden: _propTypes.default.bool,
|
|
140
|
+
itemWidth: _propTypes.default.number,
|
|
141
|
+
markSize: _propTypes.default.number,
|
|
142
|
+
offset: _propTypes.default.shape({
|
|
143
|
+
x: _propTypes.default.number,
|
|
144
|
+
y: _propTypes.default.number
|
|
145
|
+
}),
|
|
146
|
+
position: _propTypes.default.shape({
|
|
147
|
+
horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
|
|
148
|
+
vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
|
|
149
|
+
}),
|
|
150
|
+
spacing: _propTypes.default.number
|
|
151
|
+
}),
|
|
152
|
+
margin: _propTypes.default.shape({
|
|
153
|
+
bottom: _propTypes.default.number,
|
|
154
|
+
left: _propTypes.default.number,
|
|
155
|
+
right: _propTypes.default.number,
|
|
156
|
+
top: _propTypes.default.number
|
|
157
|
+
}),
|
|
158
|
+
/**
|
|
159
|
+
* Indicate which axis to display the right of the charts.
|
|
160
|
+
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`
|
|
161
|
+
* @default null
|
|
162
|
+
*/
|
|
163
|
+
rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
|
|
164
|
+
axisId: _propTypes.default.string.isRequired,
|
|
165
|
+
classes: _propTypes.default.object,
|
|
166
|
+
disableLine: _propTypes.default.bool,
|
|
167
|
+
disableTicks: _propTypes.default.bool,
|
|
168
|
+
fill: _propTypes.default.string,
|
|
169
|
+
label: _propTypes.default.string,
|
|
170
|
+
labelFontSize: _propTypes.default.number,
|
|
171
|
+
position: _propTypes.default.oneOf(['left', 'right']),
|
|
172
|
+
stroke: _propTypes.default.string,
|
|
173
|
+
tickFontSize: _propTypes.default.number,
|
|
174
|
+
tickSize: _propTypes.default.number
|
|
175
|
+
}), _propTypes.default.string]),
|
|
176
|
+
series: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
177
|
+
arcLabel: _propTypes.default.oneOfType([_propTypes.default.oneOf(['formattedValue', 'label', 'value']), _propTypes.default.func]),
|
|
178
|
+
arcLabelMinAngle: _propTypes.default.number,
|
|
179
|
+
color: _propTypes.default.string,
|
|
180
|
+
cornerRadius: _propTypes.default.number,
|
|
181
|
+
cx: _propTypes.default.number,
|
|
182
|
+
cy: _propTypes.default.number,
|
|
183
|
+
data: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
184
|
+
color: _propTypes.default.string,
|
|
185
|
+
id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
186
|
+
label: _propTypes.default.string,
|
|
187
|
+
value: _propTypes.default.number.isRequired
|
|
188
|
+
})).isRequired,
|
|
189
|
+
endAngle: _propTypes.default.number,
|
|
190
|
+
faded: _propTypes.default.shape({
|
|
191
|
+
additionalRadius: _propTypes.default.number,
|
|
192
|
+
cornerRadius: _propTypes.default.number,
|
|
193
|
+
innerRadius: _propTypes.default.number,
|
|
194
|
+
outerRadius: _propTypes.default.number
|
|
195
|
+
}),
|
|
196
|
+
highlighted: _propTypes.default.shape({
|
|
197
|
+
additionalRadius: _propTypes.default.number,
|
|
198
|
+
cornerRadius: _propTypes.default.number,
|
|
199
|
+
innerRadius: _propTypes.default.number,
|
|
200
|
+
outerRadius: _propTypes.default.number
|
|
201
|
+
}),
|
|
202
|
+
highlightScope: _propTypes.default.shape({
|
|
203
|
+
faded: _propTypes.default.oneOf(['global', 'none', 'series']),
|
|
204
|
+
highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
|
|
205
|
+
}),
|
|
206
|
+
id: _propTypes.default.string,
|
|
207
|
+
innerRadius: _propTypes.default.number,
|
|
208
|
+
outerRadius: _propTypes.default.number,
|
|
209
|
+
paddingAngle: _propTypes.default.number,
|
|
210
|
+
sortingValues: _propTypes.default.oneOfType([_propTypes.default.oneOf(['asc', 'desc', 'none']), _propTypes.default.func]),
|
|
211
|
+
startAngle: _propTypes.default.number,
|
|
212
|
+
type: _propTypes.default.oneOf(['pie']),
|
|
213
|
+
valueFormatter: _propTypes.default.func
|
|
214
|
+
})).isRequired,
|
|
215
|
+
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
|
|
216
|
+
title: _propTypes.default.string,
|
|
217
|
+
tooltip: _propTypes.default.shape({
|
|
218
|
+
axisContent: _propTypes.default.elementType,
|
|
219
|
+
classes: _propTypes.default.object,
|
|
220
|
+
itemContent: _propTypes.default.elementType,
|
|
221
|
+
trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
|
|
222
|
+
}),
|
|
223
|
+
/**
|
|
224
|
+
* Indicate which axis to display the top of the charts.
|
|
225
|
+
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`
|
|
226
|
+
* @default null
|
|
227
|
+
*/
|
|
228
|
+
topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
|
|
229
|
+
axisId: _propTypes.default.string.isRequired,
|
|
230
|
+
classes: _propTypes.default.object,
|
|
231
|
+
disableLine: _propTypes.default.bool,
|
|
232
|
+
disableTicks: _propTypes.default.bool,
|
|
233
|
+
fill: _propTypes.default.string,
|
|
234
|
+
label: _propTypes.default.string,
|
|
235
|
+
labelFontSize: _propTypes.default.number,
|
|
236
|
+
position: _propTypes.default.oneOf(['bottom', 'top']),
|
|
237
|
+
stroke: _propTypes.default.string,
|
|
238
|
+
tickFontSize: _propTypes.default.number,
|
|
239
|
+
tickSize: _propTypes.default.number
|
|
240
|
+
}), _propTypes.default.string]),
|
|
241
|
+
viewBox: _propTypes.default.shape({
|
|
242
|
+
height: _propTypes.default.number,
|
|
243
|
+
width: _propTypes.default.number,
|
|
244
|
+
x: _propTypes.default.number,
|
|
245
|
+
y: _propTypes.default.number
|
|
246
|
+
}),
|
|
247
|
+
width: _propTypes.default.number,
|
|
248
|
+
xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
249
|
+
axisId: _propTypes.default.string,
|
|
250
|
+
classes: _propTypes.default.object,
|
|
251
|
+
data: _propTypes.default.array,
|
|
252
|
+
disableLine: _propTypes.default.bool,
|
|
253
|
+
disableTicks: _propTypes.default.bool,
|
|
254
|
+
fill: _propTypes.default.string,
|
|
255
|
+
id: _propTypes.default.string,
|
|
256
|
+
label: _propTypes.default.string,
|
|
257
|
+
labelFontSize: _propTypes.default.number,
|
|
258
|
+
max: _propTypes.default.number,
|
|
259
|
+
maxTicks: _propTypes.default.number,
|
|
260
|
+
min: _propTypes.default.number,
|
|
261
|
+
minTicks: _propTypes.default.number,
|
|
262
|
+
position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
|
|
263
|
+
scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
|
|
264
|
+
stroke: _propTypes.default.string,
|
|
265
|
+
tickFontSize: _propTypes.default.number,
|
|
266
|
+
tickSize: _propTypes.default.number,
|
|
267
|
+
tickSpacing: _propTypes.default.number,
|
|
268
|
+
valueFormatter: _propTypes.default.func
|
|
269
|
+
})),
|
|
270
|
+
yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
271
|
+
axisId: _propTypes.default.string,
|
|
272
|
+
classes: _propTypes.default.object,
|
|
273
|
+
data: _propTypes.default.array,
|
|
274
|
+
disableLine: _propTypes.default.bool,
|
|
275
|
+
disableTicks: _propTypes.default.bool,
|
|
276
|
+
fill: _propTypes.default.string,
|
|
277
|
+
id: _propTypes.default.string,
|
|
278
|
+
label: _propTypes.default.string,
|
|
279
|
+
labelFontSize: _propTypes.default.number,
|
|
280
|
+
max: _propTypes.default.number,
|
|
281
|
+
maxTicks: _propTypes.default.number,
|
|
282
|
+
min: _propTypes.default.number,
|
|
283
|
+
minTicks: _propTypes.default.number,
|
|
284
|
+
position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
|
|
285
|
+
scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
|
|
286
|
+
stroke: _propTypes.default.string,
|
|
287
|
+
tickFontSize: _propTypes.default.number,
|
|
288
|
+
tickSize: _propTypes.default.number,
|
|
289
|
+
tickSpacing: _propTypes.default.number,
|
|
290
|
+
valueFormatter: _propTypes.default.func
|
|
291
|
+
}))
|
|
292
|
+
} : void 0;
|