@mui/x-charts
Version:
The community edition of MUI X Charts components.
281 lines (280 loc) • 9.15 kB
JavaScript
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
import * as React from 'react';
import PropTypes from 'prop-types';
import { useThemeProps } from '@mui/material/styles';
import { DEFAULT_PIE_CHART_MARGIN } from "../internals/constants.js";
import { ChartsTooltip } from "../ChartsTooltip/index.js";
import { ChartsLegend } from "../ChartsLegend/index.js";
import { PiePlot } from "./PiePlot.js";
import { ChartsOverlay } from "../ChartsOverlay/index.js";
import { ChartsSurface } from "../ChartsSurface/index.js";
import { ChartDataProvider } from "../ChartDataProvider/index.js";
import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
import { ChartsWrapper } from "../ChartsWrapper/index.js";
import { PIE_CHART_PLUGINS } from "./PieChart.plugins.js";
import { defaultizeMargin } from "../internals/defaultizeMargin.js";
import { FocusedPieArc } from "./FocusedPieArc.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Demos:
*
* - [Pie](https://mui.com/x/react-charts/pie/)
* - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
*
* API:
*
* - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
*/
const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
const props = useThemeProps({
props: inProps,
name: 'MuiPieChart'
});
const {
series,
width,
height,
margin: marginProps,
colors,
sx,
skipAnimation,
hideLegend,
children,
slots,
slotProps,
onItemClick,
loading,
highlightedItem,
onHighlightChange,
className,
showToolbar
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const margin = defaultizeMargin(marginProps, DEFAULT_PIE_CHART_MARGIN);
const {
chartDataProviderProps,
chartsSurfaceProps
} = useChartContainerProps(_extends({}, other, {
series: series.map(s => _extends({
type: 'pie'
}, s)),
width,
height,
margin,
colors,
highlightedItem,
onHighlightChange,
className,
skipAnimation,
plugins: PIE_CHART_PLUGINS
}), ref);
const Tooltip = slots?.tooltip ?? ChartsTooltip;
const Toolbar = slots?.toolbar;
return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
children: /*#__PURE__*/_jsxs(ChartsWrapper, {
legendPosition: slotProps?.legend?.position,
legendDirection: slotProps?.legend?.direction ?? 'vertical',
sx: sx,
hideLegend: hideLegend ?? false,
children: [showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
direction: slotProps?.legend?.direction ?? 'vertical',
slots: slots,
slotProps: slotProps
}), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
children: [/*#__PURE__*/_jsx(PiePlot, {
slots: slots,
slotProps: slotProps,
onItemClick: onItemClick
}), /*#__PURE__*/_jsx(FocusedPieArc, {}), /*#__PURE__*/_jsx(ChartsOverlay, {
loading: loading,
slots: slots,
slotProps: slotProps
}), children]
})), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({
trigger: "item"
}, slotProps?.tooltip))]
})
}));
});
if (process.env.NODE_ENV !== "production") PieChart.displayName = "PieChart";
process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
apiRef: PropTypes.shape({
current: PropTypes.object
}),
children: PropTypes.node,
className: PropTypes.string,
/**
* Color palette used to colorize multiple series.
* @default rainbowSurgePalette
*/
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
/**
* An array of objects that can be used to populate series and axes data using their `dataKey` property.
*/
dataset: PropTypes.arrayOf(PropTypes.object),
desc: PropTypes.string,
enableKeyboardNavigation: PropTypes.bool,
/**
* The height of the chart in px. If not defined, it takes the height of the parent element.
*/
height: PropTypes.number,
/**
* List of hidden series and/or items.
*
* Different chart types use different keys.
*
* @example
* ```ts
* [
* {
* type: 'pie',
* seriesId: 'series-1',
* dataIndex: 3,
* },
* {
* type: 'line',
* seriesId: 'series-2',
* }
* ]
* ```
*/
hiddenItems: PropTypes.arrayOf(PropTypes.shape({
dataIndex: PropTypes.number,
seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
type: PropTypes.oneOf(['pie']).isRequired
})),
/**
* If `true`, the legend is not rendered.
*/
hideLegend: PropTypes.bool,
/**
* The highlighted item.
* Used when the highlight is controlled.
*/
highlightedItem: PropTypes.shape({
dataIndex: PropTypes.number,
seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
}),
/**
* This prop is used to help implement the accessibility logic.
* If you don't provide this prop. It falls back to a randomly generated id.
*/
id: PropTypes.string,
/**
* List of initially hidden series and/or items.
* Used for uncontrolled state.
*
* Different chart types use different keys.
*
* @example
* ```ts
* [
* {
* type: 'pie',
* seriesId: 'series-1',
* dataIndex: 3,
* },
* {
* type: 'line',
* seriesId: 'series-2',
* }
* ]
* ```
*/
initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
dataIndex: PropTypes.number,
seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
type: PropTypes.oneOf(['pie']).isRequired
})),
/**
* If `true`, a loading overlay is displayed.
* @default false
*/
loading: PropTypes.bool,
/**
* Localized text for chart components.
*/
localeText: PropTypes.object,
/**
* The margin between the SVG and the drawing area.
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
*
* Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
*/
margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
bottom: PropTypes.number,
left: PropTypes.number,
right: PropTypes.number,
top: PropTypes.number
})]),
/**
* Callback fired when any hidden identifiers change.
* @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
*/
onHiddenItemsChange: PropTypes.func,
/**
* The callback fired when the highlighted item changes.
*
* @param {HighlightItemData | null} highlightedItem The newly highlighted item.
*/
onHighlightChange: PropTypes.func,
/**
* Callback fired when a pie arc is clicked.
*/
onItemClick: PropTypes.func,
/**
* The callback fired when the tooltip item changes.
*
* @param {SeriesItemIdentifier<TSeries> | null} tooltipItem The newly highlighted item.
*/
onTooltipItemChange: PropTypes.func,
/**
* The series to display in the pie chart.
* An array of [[PieSeries]] objects.
*/
series: PropTypes.arrayOf(PropTypes.object).isRequired,
/**
* If true, shows the default chart toolbar.
* @default false
*/
showToolbar: PropTypes.bool,
/**
* If `true`, animations are skipped.
* If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
*/
skipAnimation: PropTypes.bool,
/**
* The props used for each component slot.
* @default {}
*/
slotProps: PropTypes.object,
/**
* Overridable component slots.
* @default {}
*/
slots: PropTypes.object,
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
theme: PropTypes.oneOf(['dark', 'light']),
title: PropTypes.string,
/**
* The tooltip item.
* Used when the tooltip is controlled.
*/
tooltipItem: PropTypes.shape({
dataIndex: PropTypes.number.isRequired,
seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
type: PropTypes.oneOf(['pie']).isRequired
}),
/**
* The width of the chart in px. If not defined, it takes the width of the parent element.
*/
width: PropTypes.number
} : void 0;
export { PieChart };