lucid-ui/dist/components/PieChart/PieChart.d.ts

A UI component library from AppNexus.

import React from 'react';
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<React.SVGProps<SVGGElement>, IPieChartPropsRaw>;
declare const PieChart: {
    (props: IPieChartProps): JSX.Element;
    displayName: string;
    propTypes: {
        style: any;
        className: any;
        height: any;
        width: any;
        margin: any;
        data: any;
        hasToolTips: any;
        hasStroke: any;
        palette: any;
        colorMap: any;
        ToolTip: any;
        isDonut: any;
        isHovering: any;
        hoveringIndex: any;
        onMouseOver: any;
        onMouseOut: any;
        donutWidth: any;
        xAxisField: any;
        xAxisFormatter: any;
        yAxisField: any;
        yAxisFormatter: 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: {
            <T>(value: T): T;
            (): undefined;
        };
        yAxisField: string;
        yAxisFormatter: {
            <T>(value: T): T;
            (): undefined;
        };
    };
};
declare const _default: {
    (props: Overwrite<React.SVGProps<SVGGElement>, IPieChartPropsRaw>): JSX.Element;
    displayName: string;
    propTypes: {
        style: any;
        className: any;
        height: any;
        width: any;
        margin: any;
        data: any;
        hasToolTips: any;
        hasStroke: any;
        palette: any;
        colorMap: any;
        ToolTip: any;
        isDonut: any;
        isHovering: any;
        hoveringIndex: any;
        onMouseOver: any;
        onMouseOut: any;
        donutWidth: any;
        xAxisField: any;
        xAxisFormatter: any;
        yAxisField: any;
        yAxisFormatter: 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: {
            <T>(value: T): T;
            (): undefined;
        };
        yAxisField: string;
        yAxisFormatter: {
            <T>(value: T): T;
            (): undefined;
        };
    };
} & import("../../util/state-management").IHybridComponent<Overwrite<React.SVGProps<SVGGElement>, IPieChartPropsRaw>, IPieChartState>;
export default _default;
export { PieChart as PieChartDumb };