import { CellProps, PieProps, PieChart as ReChartsPieChart, TooltipProps } from 'recharts'; import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core'; import { ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip'; export interface PieChartCell { key?: string | number; name: string; value: number; color: MantineColor; } export type PieChartStylesNames = 'root' | ChartTooltipStylesNames; export type PieChartCssVariables = { root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size'; }; export interface PieChartProps extends BoxProps, StylesApiProps, ElementProps<'div'> { /** Data used to render chart */ data: PieChartCell[]; /** Determines whether the tooltip should be displayed when one of the section is hovered @default `true` */ withTooltip?: boolean; /** Tooltip animation duration in ms @default `0` */ tooltipAnimationDuration?: number; /** Props passed down to `Tooltip` recharts component */ tooltipProps?: Omit, 'ref'>; /** Props passed down to recharts `Pie` component */ pieProps?: Partial>; /** Controls color of the segments stroke, by default depends on color scheme */ strokeColor?: MantineColor; /** Controls text color of all labels, white by default */ labelColor?: MantineColor; /** Controls padding between segments @default `0` */ paddingAngle?: number; /** Determines whether each segment should have associated label @default `false` */ withLabels?: boolean; /** Determines whether segments labels should have lines that connect the segment with the label @default `true` */ withLabelsLine?: boolean; /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default `80` */ size?: number; /** Controls width of segments stroke @default `1` */ strokeWidth?: number; /** Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default `0` */ startAngle?: number; /** Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default `360` */ endAngle?: number; /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default `'all'` */ tooltipDataSource?: 'segment' | 'all'; /** Additional elements rendered inside `PieChart` component */ children?: React.ReactNode; /** Props passed down to recharts `PieChart` component */ pieChartProps?: React.ComponentPropsWithoutRef; /** Controls labels position relative to the segment @default `'outside'` */ labelsPosition?: 'inside' | 'outside'; /** Type of labels to display @default `'value'` */ labelsType?: 'value' | 'percent'; /** A function to format values inside the tooltip */ valueFormatter?: (value: number) => string; /** Props passed down to recharts `Cell` component */ cellProps?: ((series: PieChartCell) => Partial>) | Partial>; } export type PieChartFactory = Factory<{ props: PieChartProps; ref: HTMLDivElement; stylesNames: PieChartStylesNames; vars: PieChartCssVariables; }>; export declare const PieChart: import("@mantine/core").MantineComponent<{ props: PieChartProps; ref: HTMLDivElement; stylesNames: PieChartStylesNames; vars: PieChartCssVariables; }>;