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 DonutChartCell { name: string; value: number; color: MantineColor; } export type DonutChartStylesNames = 'root' | 'label' | ChartTooltipStylesNames; export type DonutChartCssVariables = { root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size'; }; export interface DonutChartProps extends BoxProps, StylesApiProps, ElementProps<'div'> { /** Data used to render chart */ data: DonutChartCell[]; /** 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, by default depends on color scheme */ 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 thickness of the chart segments @default `20` */ thickness?: number; /** 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'; /** Chart label, displayed in the center of the chart */ chartLabel?: string | number; /** Additional elements rendered inside `PieChart` component */ children?: React.ReactNode; /** Props passed down to recharts `PieChart` component */ pieChartProps?: React.ComponentPropsWithoutRef; /** Type of labels to display, `'value'` by default */ labelsType?: 'value' | 'percent'; /** A function to format values inside the tooltip */ valueFormatter?: (value: number) => string; /** Props passed down to recharts `Cell` component */ cellProps?: ((series: DonutChartCell) => Partial>) | Partial>; } export type DonutChartFactory = Factory<{ props: DonutChartProps; ref: HTMLDivElement; stylesNames: DonutChartStylesNames; vars: DonutChartCssVariables; }>; export declare const DonutChart: import("@mantine/core").MantineComponent<{ props: DonutChartProps; ref: HTMLDivElement; stylesNames: DonutChartStylesNames; vars: DonutChartCssVariables; }>;