import { JSX } from 'react'; import { StyleProp, ViewStyle } from 'react-native'; import { FontWeight, NumberProp, FontStyle } from 'react-native-svg'; export type SliceLabel = { /** * Text of the label */ text: string; /** * Color to fill the font with */ fill?: string; /** * Color of the font's outline */ stroke?: string; /** * string or number */ fontSize?: NumberProp; /** * Can be: *'normal', 'bold', 'bolder', 'lighter', '100', '200',... until '900' */ fontWeight?: FontWeight; /** * Name of the font */ fontFamily?: string; /** * Can be: * 'normal', 'italic', 'oblique' */ fontStyle?: FontStyle; /** * By default, the label will be placed at the center of the slice. * You can change it by setting these offsets. These are offset from * the center. These can be negative. */ offsetX?: number; offsetY?: number; }; /** * Represents one slice of the pie */ export type Slice = { /** * Value the slice represents. * Should be a positive number. */ value: number; /** * Color of the slice. Can be any string that HTML & CSS accepts. */ color: string; /** * Optional label that appears on top of the slice. */ label?: SliceLabel; }; /** * Represents the hole inside the doughnut chart */ export type Cover = { /** * Radius of the doughnut hole, in precentage. * For example 0.3 to cover 30% of the center of the chart. */ radius: number; /** * Optional. Color of the doughnut hole. * If you want the hole to be transparent, don't provide this * field. */ color?: string; }; export type Props = { /** * Diameter of the chart. In otherwords, size of the square that wraps the chart's circle. */ widthAndHeight: number; /** * Chart's data. * The sum of the series values cannot be zero. */ series: Slice[]; /** * Optional. * If a `number`, it's the radius of the doughnut's hole, in percentage. * (The hole will be transparent). * Should be between zero and one. * It can be an object that also defined the color of the hole. */ cover?: number | Cover; /** * Optional. * React-native's style object. This will apply to the chart's SVG. */ style?: StyleProp; /** * If provided, it creates a gap between the slices. Use very small numbers, like `0.01`. */ padAngle?: number; }; declare const PieChart: ({ widthAndHeight, series, cover, style, padAngle }: Props) => JSX.Element; export default PieChart;