import React from 'react'; import PropTypes from 'prop-types'; import { StandardProps, Overwrite } from '../../util/component-types'; import { IToolTipProps } from '../../components/ToolTip/ToolTip'; import { IPieChartState } from './PieChart.reducers'; interface IPieChartMargin { top?: number; right?: number; bottom?: number; left?: number; } export interface IPieChartPropsRaw extends StandardProps { /** Height of the chart. */ height: number; /** Width of the chart. */ width: number; /** * An object defining the margins of the chart. These margins typically * contain the axis and labels. */ margin?: IPieChartMargin; /** * Data for the chart. E.g. * * [ * { x: 'Monday' , y: 1 } , * { x: 'Tuesday' , y: 2 } , * { x: 'Wednesday' , y: 3 } , * { x: 'Thursday' , y: 2 } , * { x: 'Friday' , y: 5 } , * ] */ data?: Array<{ [key: string]: string | number; }>; /** Show tool tips on hover. */ hasToolTips: boolean; /** Determines if the pie slices have a stroke around them. */ hasStroke: boolean; /** * Takes one of the palettes exported from \`lucid.chartConstants\`. Available palettes: - \`PALETTE_7\` (default) - \`PALETTE_30\` - \`PALETTE_MONOCHROME_0_5\` - \`PALETTE_MONOCHROME_1_5\` - \`PALETTE_MONOCHROME_2_5\` - \`PALETTE_MONOCHROME_3_5\` - \`PALETTE_MONOCHROME_4_5\` - \`PALETTE_MONOCHROME_5_5\` - \`PALETTE_MONOCHROME_6_5\` */ palette: string[]; /** You can pass in an object if you want to map x values to \`lucid.chartConstants\` or custom colors: { 'imps': COLOR_0, 'rev': COLOR_3, 'clicks': '#abc123', }*/ colorMap?: object; /** An object of ToolTip props that are passed through to the underlying ToolTip component. */ ToolTip: IToolTipProps; /** Show the pie chart as a donut with a hollow center. */ isDonut: boolean; /** Controls the visibility of the tooltip and the size of the currently hovered slice. */ isHovering: boolean; /** Determines which slice to scale up and which data to display in he tooltip. */ hoveringIndex: number; /** Called when the user hovers over a slice. */ onMouseOver: (index: number, { event, props }: { event: React.MouseEvent; props: IPieChartProps; }) => void; /** Called when the user hovers away from either the pie or the tooltip. */ onMouseOut: ({ event, props, }: { event: React.MouseEvent; props: IPieChartProps; }) => void; /** Width of the donut in px. */ donutWidth: number; /** The field we should look up your x data by. The data should be strings. */ xAxisField: string; /** An optional function used to format your x axis data. */ xAxisFormatter: (x: string | number) => string | number; /** The field we should look up your y data by. The data should be numeric. */ yAxisField: string; /** An optional function used to format your y axis data. */ yAxisFormatter: (y: number) => string | number; } export declare type IPieChartProps = Overwrite, IPieChartPropsRaw>; declare const PieChart: { (props: IPieChartProps): JSX.Element; displayName: string; propTypes: { /** Styles that are passed through to the root container. */ style: PropTypes.Requireable; /** Appended to the component-specific class names set on the root element. */ className: PropTypes.Requireable; /** Height of the chart. */ height: PropTypes.Requireable; /** Width of the chart. */ width: PropTypes.Requireable; /** An object defining the margins of the chart. These margins typically contain the axis and labels. */ margin: PropTypes.Requireable; right: PropTypes.Requireable; bottom: PropTypes.Requireable; left: PropTypes.Requireable; }>>; /** Data for the chart. E.g. [ { x: 'Monday' , y: 1 } , { x: 'Tuesday' , y: 2 } , { x: 'Wednesday' , y: 3 } , { x: 'Thursday' , y: 2 } , { x: 'Friday' , y: 5 } , ] */ data: PropTypes.Requireable<(object | null | undefined)[]>; /** Show tool tips on hover. */ hasToolTips: PropTypes.Requireable; /** Determines if the pie slices have a stroke around them. */ hasStroke: PropTypes.Requireable; /** Takes one of the palettes exported from \`lucid.chartConstants\`. Available palettes: - \`PALETTE_7\` (default) - \`PALETTE_30\` - \`PALETTE_MONOCHROME_0_5\` - \`PALETTE_MONOCHROME_1_5\` - \`PALETTE_MONOCHROME_2_5\` - \`PALETTE_MONOCHROME_3_5\` - \`PALETTE_MONOCHROME_4_5\` - \`PALETTE_MONOCHROME_5_5\` - \`PALETTE_MONOCHROME_6_5\` */ palette: PropTypes.Requireable<(string | null | undefined)[]>; /** You can pass in an object if you want to map x values to \`lucid.chartConstants\` or custom colors: { 'imps': COLOR_0, 'rev': COLOR_3, 'clicks': '#abc123', } */ colorMap: PropTypes.Requireable; /** An object of ToolTip props that are passed through to the underlying ToolTip component. */ ToolTip: PropTypes.Requireable; className: PropTypes.Requireable; isCloseable: PropTypes.Requireable; isLight: PropTypes.Requireable; onClose: PropTypes.Requireable<(...args: any[]) => any>; style: PropTypes.Requireable; flyOutStyle: PropTypes.Requireable; flyOutMaxWidth: PropTypes.Requireable; direction: PropTypes.Requireable; alignment: PropTypes.Requireable; isExpanded: PropTypes.Requireable; onMouseOver: PropTypes.Requireable<(...args: any[]) => any>; onMouseOut: PropTypes.Requireable<(...args: any[]) => any>; portalId: PropTypes.Requireable; Title: PropTypes.Requireable; Body: PropTypes.Requireable; Target: PropTypes.Requireable; }>>; /** Show the pie chart as a donut with a hollow center. */ isDonut: PropTypes.Requireable; /** Controls the visibility of the tooltip and the size of the currently hovered slice. */ isHovering: PropTypes.Requireable; /** Determines which slice to scale up and which data to display in he tooltip. */ hoveringIndex: PropTypes.Requireable; /** Called when the user hovers over a slice. Signature: */ onMouseOver: PropTypes.Requireable<(...args: any[]) => any>; /** Called when the user hovers away from either the pie or the tooltip. */ onMouseOut: PropTypes.Requireable<(...args: any[]) => any>; /** Width of the donut in px. */ donutWidth: PropTypes.Requireable; /** The field we should look up your x data by. The data should be strings. */ xAxisField: PropTypes.Requireable; /** An optional function used to format your x axis data. */ xAxisFormatter: PropTypes.Requireable<(...args: any[]) => any>; /** The field we should look up your y data by. The data should be numeric. */ yAxisField: PropTypes.Requireable; /** An optional function used to format your y axis data. */ yAxisFormatter: PropTypes.Requireable<(...args: any[]) => any>; }; peek: { description: string; categories: string[]; madeFrom: string[]; }; MARGIN: { top: number; right: number; bottom: number; left: number; }; DONUT_WIDTH: number; HOVER_SCALE: number; reducers: { onMouseOut: typeof import("./PieChart.reducers").onMouseOut; onMouseOver: typeof import("./PieChart.reducers").onMouseOver; }; defaultProps: { height: number; width: number; margin: { top: number; right: number; bottom: number; left: number; }; palette: string[]; hasToolTips: boolean; hasStroke: boolean; isDonut: boolean; donutWidth: number; ToolTip: { alignment: import("../ContextMenu/ContextMenu").EnumAlignment; direction: import("../ContextMenu/ContextMenu").EnumDirection; flyOutStyle: {}; isCloseable: boolean; isExpanded: boolean; isLight: boolean; onClose: (...args: any[]) => void; onMouseOut: (...args: any[]) => void; onMouseOver: (...args: any[]) => void; portalId: null; }; isHovering: boolean; hoveringIndex: number; onMouseOver: (...args: any[]) => void; onMouseOut: (...args: any[]) => void; xAxisField: string; xAxisFormatter: { (value: T): T; (): undefined; }; yAxisField: string; yAxisFormatter: { (value: T): T; (): undefined; }; }; }; declare const _default: { (props: IPieChartProps): JSX.Element; displayName: string; propTypes: { /** Styles that are passed through to the root container. */ style: PropTypes.Requireable; /** Appended to the component-specific class names set on the root element. */ className: PropTypes.Requireable; /** Height of the chart. */ height: PropTypes.Requireable; /** Width of the chart. */ width: PropTypes.Requireable; /** An object defining the margins of the chart. These margins typically contain the axis and labels. */ margin: PropTypes.Requireable; right: PropTypes.Requireable; bottom: PropTypes.Requireable; left: PropTypes.Requireable; }>>; /** Data for the chart. E.g. [ { x: 'Monday' , y: 1 } , { x: 'Tuesday' , y: 2 } , { x: 'Wednesday' , y: 3 } , { x: 'Thursday' , y: 2 } , { x: 'Friday' , y: 5 } , ] */ data: PropTypes.Requireable<(object | null | undefined)[]>; /** Show tool tips on hover. */ hasToolTips: PropTypes.Requireable; /** Determines if the pie slices have a stroke around them. */ hasStroke: PropTypes.Requireable; /** Takes one of the palettes exported from \`lucid.chartConstants\`. Available palettes: - \`PALETTE_7\` (default) - \`PALETTE_30\` - \`PALETTE_MONOCHROME_0_5\` - \`PALETTE_MONOCHROME_1_5\` - \`PALETTE_MONOCHROME_2_5\` - \`PALETTE_MONOCHROME_3_5\` - \`PALETTE_MONOCHROME_4_5\` - \`PALETTE_MONOCHROME_5_5\` - \`PALETTE_MONOCHROME_6_5\` */ palette: PropTypes.Requireable<(string | null | undefined)[]>; /** You can pass in an object if you want to map x values to \`lucid.chartConstants\` or custom colors: { 'imps': COLOR_0, 'rev': COLOR_3, 'clicks': '#abc123', } */ colorMap: PropTypes.Requireable; /** An object of ToolTip props that are passed through to the underlying ToolTip component. */ ToolTip: PropTypes.Requireable; className: PropTypes.Requireable; isCloseable: PropTypes.Requireable; isLight: PropTypes.Requireable; onClose: PropTypes.Requireable<(...args: any[]) => any>; style: PropTypes.Requireable; flyOutStyle: PropTypes.Requireable; flyOutMaxWidth: PropTypes.Requireable; direction: PropTypes.Requireable; alignment: PropTypes.Requireable; isExpanded: PropTypes.Requireable; onMouseOver: PropTypes.Requireable<(...args: any[]) => any>; onMouseOut: PropTypes.Requireable<(...args: any[]) => any>; portalId: PropTypes.Requireable; Title: PropTypes.Requireable; Body: PropTypes.Requireable; Target: PropTypes.Requireable; }>>; /** Show the pie chart as a donut with a hollow center. */ isDonut: PropTypes.Requireable; /** Controls the visibility of the tooltip and the size of the currently hovered slice. */ isHovering: PropTypes.Requireable; /** Determines which slice to scale up and which data to display in he tooltip. */ hoveringIndex: PropTypes.Requireable; /** Called when the user hovers over a slice. Signature: */ onMouseOver: PropTypes.Requireable<(...args: any[]) => any>; /** Called when the user hovers away from either the pie or the tooltip. */ onMouseOut: PropTypes.Requireable<(...args: any[]) => any>; /** Width of the donut in px. */ donutWidth: PropTypes.Requireable; /** The field we should look up your x data by. The data should be strings. */ xAxisField: PropTypes.Requireable; /** An optional function used to format your x axis data. */ xAxisFormatter: PropTypes.Requireable<(...args: any[]) => any>; /** The field we should look up your y data by. The data should be numeric. */ yAxisField: PropTypes.Requireable; /** An optional function used to format your y axis data. */ yAxisFormatter: PropTypes.Requireable<(...args: any[]) => any>; }; peek: { description: string; categories: string[]; madeFrom: string[]; }; MARGIN: { top: number; right: number; bottom: number; left: number; }; DONUT_WIDTH: number; HOVER_SCALE: number; reducers: { onMouseOut: typeof import("./PieChart.reducers").onMouseOut; onMouseOver: typeof import("./PieChart.reducers").onMouseOver; }; defaultProps: { height: number; width: number; margin: { top: number; right: number; bottom: number; left: number; }; palette: string[]; hasToolTips: boolean; hasStroke: boolean; isDonut: boolean; donutWidth: number; ToolTip: { alignment: import("../ContextMenu/ContextMenu").EnumAlignment; direction: import("../ContextMenu/ContextMenu").EnumDirection; flyOutStyle: {}; isCloseable: boolean; isExpanded: boolean; isLight: boolean; onClose: (...args: any[]) => void; onMouseOut: (...args: any[]) => void; onMouseOver: (...args: any[]) => void; portalId: null; }; isHovering: boolean; hoveringIndex: number; onMouseOver: (...args: any[]) => void; onMouseOut: (...args: any[]) => void; xAxisField: string; xAxisFormatter: { (value: T): T; (): undefined; }; yAxisField: string; yAxisFormatter: { (value: T): T; (): undefined; }; }; } & import("../../util/state-management").IHybridComponent; export default _default; export { PieChart as PieChartDumb }; //# sourceMappingURL=PieChart.d.ts.map