react-minimal-pie-chart
Version:
Lightweight but versatile SVG pie/donut charts for React
51 lines (50 loc) • 2.06 kB
TypeScript
import React from 'react';
import type { CSSProperties, FocusEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react';
import type { Data, BaseDataEntry, LabelRenderFunction } from '../commonTypes';
export type Props<DataEntry extends BaseDataEntry = BaseDataEntry> = {
animate?: boolean;
animationDuration?: number;
animationEasing?: string;
background?: string;
center?: [number, number];
children?: ReactNode;
className?: string;
data: Data<DataEntry>;
lengthAngle?: number;
lineWidth?: number;
label?: LabelRenderFunction<DataEntry>;
labelPosition?: number;
labelStyle?: CSSProperties | ((dataIndex: number) => CSSProperties | undefined);
onBlur?: (event: FocusEvent, dataIndex: number) => void;
onClick?: (event: MouseEvent, dataIndex: number) => void;
onFocus?: (event: FocusEvent, dataIndex: number) => void;
onKeyDown?: (event: KeyboardEvent, dataIndex: number) => void;
onMouseOut?: (event: MouseEvent, dataIndex: number) => void;
onMouseOver?: (event: MouseEvent, dataIndex: number) => void;
paddingAngle?: number;
radius?: number;
reveal?: number;
rounded?: boolean;
segmentsShift?: number | ((dataIndex: number) => number | undefined);
segmentsStyle?: CSSProperties | ((dataIndex: number) => CSSProperties | undefined);
segmentsTabIndex?: number;
startAngle?: number;
style?: CSSProperties;
totalValue?: number;
viewBoxSize?: [number, number];
};
export declare const defaultProps: {
animationDuration: number;
animationEasing: string;
center: [number, number];
data: Data;
labelPosition: number;
lengthAngle: number;
lineWidth: number;
paddingAngle: number;
radius: number;
startAngle: number;
viewBoxSize: [number, number];
};
export type PropsWithDefaults<DataEntry extends BaseDataEntry = BaseDataEntry> = Props<DataEntry> & typeof defaultProps;
export declare function ReactMinimalPieChart<DataEntry extends BaseDataEntry>(originalProps: Props<DataEntry>): React.JSX.Element;