@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.
Files changed (117) hide show
  1. package/BarChart/BarChart.js +1 -0
  2. package/BarChart/legend.d.ts +3 -0
  3. package/BarChart/legend.js +20 -0
  4. package/CHANGELOG.md +62 -0
  5. package/ChartsLegend/ChartsLegend.d.ts +5 -1
  6. package/ChartsLegend/ChartsLegend.js +5 -1
  7. package/ChartsLegend/utils.d.ts +1 -1
  8. package/ChartsLegend/utils.js +12 -1
  9. package/ChartsTooltip/ChartsAxisTooltipContent.js +1 -1
  10. package/ChartsTooltip/ChartsItemTooltipContent.js +11 -2
  11. package/LineChart/LineChart.js +1 -0
  12. package/LineChart/legend.d.ts +3 -0
  13. package/LineChart/legend.js +20 -0
  14. package/PieChart/PieArc.d.ts +36 -0
  15. package/PieChart/PieArc.js +128 -0
  16. package/PieChart/PieArcLabel.d.ts +36 -0
  17. package/PieChart/PieArcLabel.js +113 -0
  18. package/PieChart/PieChart.d.ts +20 -0
  19. package/PieChart/PieChart.js +292 -0
  20. package/PieChart/PiePlot.d.ts +2 -0
  21. package/PieChart/PiePlot.js +98 -0
  22. package/PieChart/formatter.d.ts +3 -0
  23. package/PieChart/formatter.js +49 -0
  24. package/PieChart/index.d.ts +4 -0
  25. package/PieChart/index.js +47 -0
  26. package/PieChart/legend.d.ts +3 -0
  27. package/PieChart/legend.js +19 -0
  28. package/PieChart/package.json +6 -0
  29. package/README.md +2 -2
  30. package/ResponsiveChartContainer/index.js +14 -3
  31. package/ScatterChart/Scatter.js +1 -1
  32. package/ScatterChart/ScatterChart.js +1 -0
  33. package/ScatterChart/legend.d.ts +3 -0
  34. package/ScatterChart/legend.js +20 -0
  35. package/context/SeriesContextProvider.js +11 -1
  36. package/esm/BarChart/BarChart.js +1 -0
  37. package/esm/BarChart/legend.js +13 -0
  38. package/esm/ChartsLegend/ChartsLegend.js +5 -1
  39. package/esm/ChartsLegend/utils.js +11 -1
  40. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +1 -1
  41. package/esm/ChartsTooltip/ChartsItemTooltipContent.js +11 -3
  42. package/esm/LineChart/LineChart.js +1 -0
  43. package/esm/LineChart/legend.js +13 -0
  44. package/esm/PieChart/PieArc.js +117 -0
  45. package/esm/PieChart/PieArcLabel.js +101 -0
  46. package/esm/PieChart/PieChart.js +285 -0
  47. package/esm/PieChart/PiePlot.js +92 -0
  48. package/esm/PieChart/formatter.js +48 -0
  49. package/esm/PieChart/index.js +4 -0
  50. package/esm/PieChart/legend.js +12 -0
  51. package/esm/ResponsiveChartContainer/index.js +14 -3
  52. package/esm/ScatterChart/Scatter.js +1 -1
  53. package/esm/ScatterChart/ScatterChart.js +1 -0
  54. package/esm/ScatterChart/legend.js +13 -0
  55. package/esm/context/SeriesContextProvider.js +11 -1
  56. package/esm/index.js +1 -0
  57. package/esm/internals/defaultizeColor.js +7 -0
  58. package/esm/models/seriesType/index.js +1 -8
  59. package/index.d.ts +1 -0
  60. package/index.js +12 -1
  61. package/internals/defaultizeColor.d.ts +35 -0
  62. package/internals/defaultizeColor.js +7 -0
  63. package/legacy/BarChart/BarChart.js +1 -0
  64. package/legacy/BarChart/legend.js +15 -0
  65. package/legacy/ChartsLegend/ChartsLegend.js +5 -1
  66. package/legacy/ChartsLegend/utils.js +12 -6
  67. package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +3 -1
  68. package/legacy/ChartsTooltip/ChartsItemTooltipContent.js +10 -3
  69. package/legacy/LineChart/LineChart.js +1 -0
  70. package/legacy/LineChart/legend.js +15 -0
  71. package/legacy/PieChart/PieArc.js +118 -0
  72. package/legacy/PieChart/PieArcLabel.js +101 -0
  73. package/legacy/PieChart/PieChart.js +297 -0
  74. package/legacy/PieChart/PiePlot.js +89 -0
  75. package/legacy/PieChart/formatter.js +55 -0
  76. package/legacy/PieChart/index.js +4 -0
  77. package/legacy/PieChart/legend.js +16 -0
  78. package/legacy/ResponsiveChartContainer/index.js +12 -3
  79. package/legacy/ScatterChart/Scatter.js +1 -1
  80. package/legacy/ScatterChart/ScatterChart.js +1 -0
  81. package/legacy/ScatterChart/legend.js +15 -0
  82. package/legacy/context/SeriesContextProvider.js +11 -1
  83. package/legacy/index.js +2 -1
  84. package/legacy/internals/defaultizeColor.js +9 -0
  85. package/legacy/models/seriesType/index.js +1 -8
  86. package/models/seriesType/bar.d.ts +1 -1
  87. package/models/seriesType/common.d.ts +1 -1
  88. package/models/seriesType/config.d.ts +29 -2
  89. package/models/seriesType/index.d.ts +7 -3
  90. package/models/seriesType/index.js +11 -0
  91. package/models/seriesType/line.d.ts +1 -1
  92. package/models/seriesType/pie.d.ts +103 -3
  93. package/models/seriesType/scatter.d.ts +1 -1
  94. package/modern/BarChart/BarChart.js +1 -0
  95. package/modern/BarChart/legend.js +13 -0
  96. package/modern/ChartsLegend/ChartsLegend.js +5 -1
  97. package/modern/ChartsLegend/utils.js +11 -1
  98. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +1 -1
  99. package/modern/ChartsTooltip/ChartsItemTooltipContent.js +11 -2
  100. package/modern/LineChart/LineChart.js +1 -0
  101. package/modern/LineChart/legend.js +13 -0
  102. package/modern/PieChart/PieArc.js +116 -0
  103. package/modern/PieChart/PieArcLabel.js +101 -0
  104. package/modern/PieChart/PieChart.js +285 -0
  105. package/modern/PieChart/PiePlot.js +91 -0
  106. package/modern/PieChart/formatter.js +41 -0
  107. package/modern/PieChart/index.js +4 -0
  108. package/modern/PieChart/legend.js +12 -0
  109. package/modern/ResponsiveChartContainer/index.js +14 -3
  110. package/modern/ScatterChart/Scatter.js +1 -1
  111. package/modern/ScatterChart/ScatterChart.js +1 -0
  112. package/modern/ScatterChart/legend.js +13 -0
  113. package/modern/context/SeriesContextProvider.js +11 -1
  114. package/modern/index.js +2 -1
  115. package/modern/internals/defaultizeColor.js +7 -0
  116. package/modern/models/seriesType/index.js +1 -8
  117. package/package.json +1 -1
@@ -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.values(series).flatMap(s => s.seriesOrder.map(seriesId => s.series[seriesId])).filter(s => s.label !== undefined);
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 displayedLabel = (_series$label = series.label) != null ? _series$label : null;
18
- const color = series.color;
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 };