import * as React from 'react';
import { ReactElement, ReactNode, SVGProps } from 'react';
import { ActiveShape, AnimationDuration, ChartOffsetInternal, Coordinate, DataConsumer, DataKey, DataProvider, EasingInput, GeometrySector, LegendType, PolarLayout, PresentationAttributesAdaptChildEvent, ShapeAnimationProps, TooltipType } from '../util/types';
import { TooltipTriggerInfo } from '../context/tooltipContext';
import { Formatter } from '../component/DefaultTooltipContent';
import { DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME, DATA_ITEM_INDEX_ATTRIBUTE_NAME } from '../util/Constants';
import { AnimationInterpolateFn } from '../animation/AnimatedItems';
import { AnimationMatchByProp } from '../animation/matchBy';
import { PiePresentationProps, PieSettings } from '../state/types/PieSettings';
import { SVGPropsNoEvents } from '../util/svgPropertiesNoEvents';
import { Props as LabelListProps } from '../component/LabelList';
import { GraphicalItemId } from '../state/graphicalItemsSlice';
import { ZIndexable } from '../zIndex/ZIndexLayer';
import { ChartData } from '../state/chartDataSlice';
interface PieDef {
    /**
     * The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width.
     */
    cx?: number | string;
    /**
     * The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.
     */
    cy?: number | string;
    /**
     * Angle in degrees from which the chart should start.
     */
    startAngle?: number;
    /**
     * Angle, in degrees, at which the chart should end.
     */
    endAngle?: number;
    /**
     * The angle between two sectors.
     *
     * @example <Pie paddingAngle={5} />
     * @example https://recharts.github.io/examples/PieChartWithPaddingAngle
     */
    paddingAngle?: number;
    /**
     * The inner radius of the sectors.
     * If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.
     */
    innerRadius?: number | string;
    /**
     * The outer radius of the sectors.
     * If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.
     * Function should return a string percentage or number.
     */
    outerRadius?: number | string | ((dataPoint: any) => number | string);
    cornerRadius?: number | string;
}
type PieLabelLine = ReactElement<SVGElement> | ((props: any) => ReactElement<SVGElement>) | SVGProps<SVGPathElement> | boolean;
interface PieLabelExtraProps {
    stroke: string;
    index: number;
    textAnchor: string;
}
export type PieLabelRenderProps = Omit<SVGPropsNoEvents<PieSvgAttributes>, 'offset'> & Omit<PieSectorDataItem, 'offset'> & PieLabelExtraProps & Coordinate;
export type LabelListPropsWithPosition = LabelListProps & {
    position: LabelListProps['position'];
};
/**
 * The `label` prop in Pie accepts a variety of alternatives.
 */
export type PieLabel = boolean | LabelListPropsWithPosition | Partial<PieLabelRenderProps> | ((props: PieLabelRenderProps) => ReactNode | ReactElement<SVGElement>) | ReactElement<SVGElement>;
export type PieSectorData = GeometrySector & TooltipTriggerInfo & {
    dataKey?: DataKey<any>;
    midAngle?: number;
    middleRadius?: number;
    name?: string | number;
    paddingAngle?: number;
    payload?: any;
    percent?: number;
    value: number;
};
/**
 * We spread the data object into the sector data item,
 * so we can't really know what is going to be inside.
 *
 * This type represents our best effort, but it all depends on the input data
 * and what is inside of it.
 *
 * https://github.com/recharts/recharts/issues/6380
 * https://github.com/recharts/recharts/discussions/6375
 */
export type PieSectorDataItem = PiePresentationProps & PieCoordinate & PieSectorData & {
    cornerRadius: number | undefined;
};
export type PieSectorShapeProps = PieSectorDataItem & ShapeAnimationProps & {
    [DATA_ITEM_INDEX_ATTRIBUTE_NAME]: number;
    [DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME]: GraphicalItemId;
    isActive: boolean;
    index: number;
} & SVGProps<SVGPathElement>;
export type PieShape = ActiveShape<PieSectorShapeProps, SVGPathElement>;
interface PieEvents {
    /**
     * The customized event handler of click on the sectors in this group.
     */
    onClick?: (data: PieSectorDataItem, index: number, e: React.MouseEvent<SVGGraphicsElement>) => void;
    /**
     * The customized event handler of mousedown on the sectors in this group.
     */
    onMouseDown?: (data: PieSectorDataItem, index: number, e: React.MouseEvent<SVGGraphicsElement>) => void;
    /**
     * The customized event handler of mouseup on the sectors in this group.
     */
    onMouseUp?: (data: PieSectorDataItem, index: number, e: React.MouseEvent<SVGGraphicsElement>) => void;
    /**
     * The customized event handler of mousemove on the sectors in this group.
     */
    onMouseMove?: (data: PieSectorDataItem, index: number, e: React.MouseEvent<SVGGraphicsElement>) => void;
    /**
     * The customized event handler of mouseover on the sectors in this group.
     */
    onMouseOver?: (data: PieSectorDataItem, index: number, e: React.MouseEvent<SVGGraphicsElement>) => void;
    /**
     * The customized event handler of mouseout on the sectors in this group.
     */
    onMouseOut?: (data: PieSectorDataItem, index: number, e: React.MouseEvent<SVGGraphicsElement>) => void;
    /**
     * The customized event handler of mouseenter on the sectors in this group.
     */
    onMouseEnter?: (data: PieSectorDataItem, index: number, e: React.MouseEvent<SVGGraphicsElement>) => void;
    /**
     * The customized event handler of mouseleave on the sectors in this group.
     */
    onMouseLeave?: (data: PieSectorDataItem, index: number, e: React.MouseEvent<SVGGraphicsElement>) => void;
    onTouchStart?: (data: PieSectorDataItem, index: number, e: React.TouchEvent<SVGGraphicsElement>) => void;
    onTouchMove?: (data: PieSectorDataItem, index: number, e: React.TouchEvent<SVGGraphicsElement>) => void;
    onTouchEnd?: (data: PieSectorDataItem, index: number, e: React.TouchEvent<SVGGraphicsElement>) => void;
}
interface PieProps<DataPointType = any, DataValueType = any> extends DataProvider<DataPointType>, DataConsumer<DataPointType, DataValueType>, PieDef, PieEvents, ZIndexable {
    /**
     * This component is rendered when this graphical item is activated
     * (could be by mouse hover, touch, keyboard, programmatically).
     *
     * @deprecated Use the `shape` prop to create each sector. `isActive` designates the "active" shape.
     * @example <Pie activeShape={<CustomActiveShape />} />
     * @example https://recharts.github.io/examples/CustomActiveShapePieChart
     */
    activeShape?: ActiveShape<PieSectorDataItem>;
    /**
     * Specifies when the animation should begin, the unit of this option is ms.
     * @defaultValue 400
     */
    animationBegin?: number;
    /**
     * Specifies the duration of animation, the unit of this option is ms.
     * @defaultValue 1500
     */
    animationDuration?: AnimationDuration;
    /**
     * The type of easing function.
     * @defaultValue ease
     */
    animationEasing?: EasingInput;
    /**
     * Custom animation function for interpolating data items.
     * When provided, this replaces the default animation interpolation.
     *
     * @param prevItems The items from the previous animation frame, or null on first render
     * @param nextItems The target items to animate towards
     * @param animationElapsedTime A normalized time value (0 = start, 1 = end)
     * @returns The interpolated items at time animationElapsedTime
     *
     * @since 3.9
     * @see {@link https://recharts.github.io/en-US/guide/animations/ Animations guide}
     */
    animationInterpolateFn?: AnimationInterpolateFn<PieSectorDataItem, PolarLayout>;
    /**
     * Strategy for matching previous items to next items during animation.
     * Determines how Recharts pairs old data points with new data points
     * to create smooth transitions.
     *
     * - `matchAppend` (default): match sequentially by index and treat newly appended items as new
     * - `matchByIndex`: match by array position with proportional stretching
     * - `matchByDataKey('someKey')`: match by a data key from the payload
     * - Custom function `(item, index) => key`: match by the returned key
     *
     * @defaultValue append
     * @see matchByIndex
     * @see matchByDataKey
     * @see matchAppend
     *
     * @since 3.9
     * @see {@link https://recharts.github.io/en-US/guide/animations/ Animations guide}
     */
    animationMatchBy?: AnimationMatchByProp<PieSectorDataItem>;
    className?: string;
    /**
     * Hides the whole graphical element when true.
     *
     * Hiding an element is different from removing it from the chart:
     * Hidden graphical elements are still visible in Legend,
     * and can be included in axis domain calculations,
     * depending on `includeHidden` props of your XAxis/YAxis.
     *
     * @defaultValue false
     */
    hide?: boolean;
    id?: string;
    /**
     * The shape of inactive sector.
     * @deprecated Use the `shape` prop to modify each sector.
     */
    inactiveShape?: ActiveShape<PieSectorDataItem>;
    /**
     * If set false, animation will be disabled.
     * If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
     * @defaultValue auto
     */
    isAnimationActive?: boolean | 'auto';
    /**
     * Renders one label for each pie sector. Options:
     * - `true`: renders default labels;
     * - `false`: no labels are rendered;
     * - `object` that has `position` prop: the props of LabelList component;
     * - `object` that does not have `position` prop: the props of a custom Pie label (similar to Label with position "outside"); this variant supports `labelLine`
     * - `ReactElement`: a custom SVG label element, such as `<text>` or `<g>`.
     *   HTML elements such as `<div>` are not valid inside the chart SVG and may trigger React DOM warnings.
     * - `function`: a render function of custom label.
     *
     * Also see the `labelLine` prop that draws a line connecting each label to the corresponding sector.
     *
     * @defaultValue false
     * @example <Pie label={<CustomizedLabel />} />
     * @example https://recharts.github.io/examples/PieChartWithCustomizedLabel
     */
    label?: PieLabel;
    /**
     * If false set, label lines will not be drawn. If true set, label lines will be drawn which have the props calculated internally.
     * If object set, label lines will be drawn which have the props merged by the internal calculated props and the option.
     * If ReactElement set, the option can be the custom label line element.
     * If set a function, the function will be called to render customized label line.
     * @defaultValue true
     * @example <Pie labelLine={<CustomizedLabelLine />} />
     * @example https://recharts.github.io/examples/PieChartWithCustomizedLabel
     */
    labelLine?: PieLabelLine;
    /**
     * The type of icon in legend. If set to 'none', no legend item will be rendered.
     * @defaultValue rect
     */
    legendType?: LegendType;
    /** the max radius of pie */
    maxRadius?: number;
    /**
     * The minimum angle of each unzero data.
     * @defaultValue 0
     */
    minAngle?: number;
    /**
     * Name represents each sector in the tooltip, and legend.
     * This allows you to extract the name from the data:
     *
     * - `string`: the name of the field in the data object;
     * - `number`: the index of the field in the data;
     * - `function`: a function that receives the data object and returns the name.
     *
     * @defaultValue name
     */
    nameKey?: DataKey<DataPointType, DataValueType>;
    /**
     * The customized event handler of animation end.
     */
    onAnimationEnd?: () => void;
    /**
     * The customized event handler of animation start.
     */
    onAnimationStart?: () => void;
    /**
     * The tabindex of wrapper surrounding the cells.
     * @defaultValue 0
     */
    rootTabIndex?: number;
    /**
     * The custom shape of a Pie Sector.
     * Can also be used to render active sector by checking isActive.
     * During animations, the function shape also receives `animationElapsedTime`, `isAnimating`, and `isEntrance`.
     * If undefined, renders {@link Sector} shape.
     */
    shape?: PieShape;
    tooltipType?: TooltipType;
    /**
     * Formats the value displayed in the tooltip for this Pie.
     * When set, takes precedence over the `formatter` prop on the Tooltip component.
     */
    formatter?: Formatter;
    /**
     * @defaultValue 100
     */
    zIndex?: number;
}
type PieSvgAttributes = Omit<PresentationAttributesAdaptChildEvent<any, SVGElement>, 'ref' | keyof PieEvents>;
export type Props<DataPointType = any, DataValueType = any> = PieSvgAttributes & PieProps<DataPointType, DataValueType>;
export type PieCoordinate = {
    cx: number;
    cy: number;
    innerRadius: number;
    outerRadius: number;
    maxRadius: number;
};
export declare function computePieSectors({ pieSettings, displayedData, cells, offset, }: {
    pieSettings: PieSettings;
    displayedData: ChartData;
    cells: ReadonlyArray<ReactElement> | undefined;
    offset: ChartOffsetInternal;
}): ReadonlyArray<PieSectorDataItem> | undefined;
export declare const defaultPieProps: {
    readonly animationBegin: 400;
    readonly animationDuration: 1500;
    readonly animationEasing: "ease";
    readonly animationInterpolateFn: AnimationInterpolateFn<PieSectorDataItem, PolarLayout>;
    readonly animationMatchBy: "append";
    readonly cx: "50%";
    readonly cy: "50%";
    readonly dataKey: "value";
    readonly endAngle: 360;
    readonly fill: "#808080";
    readonly hide: false;
    readonly innerRadius: 0;
    readonly isAnimationActive: "auto";
    readonly label: false;
    readonly labelLine: true;
    readonly legendType: "rect";
    readonly minAngle: 0;
    readonly nameKey: "name";
    readonly outerRadius: "80%";
    readonly paddingAngle: 0;
    readonly rootTabIndex: 0;
    readonly shape: React.FC<import("..").SectorProps>;
    readonly startAngle: 0;
    readonly stroke: "#fff";
    readonly zIndex: 100;
};
export declare const Pie: {
    <DataPointType = any, DataValueType = any>(outsideProps: Props<DataPointType, DataValueType>): ReactElement;
    (outsideProps: Props<any, any>): ReactElement;
};
export {};