import React from 'react';
import { StandardProps, Overwrite } from '../../util/component-types';
import { formatDate } from '../../util/chart-helpers';
import * as d3Scale from 'd3-scale';
interface ILineChartMargin {
    top?: number;
    right?: number;
    bottom?: number;
    left?: number;
}
declare type yFormatterFunction = (y: number) => string;
export interface ILineChartPropsRaw extends StandardProps {
    /** Child components of LineChart */
    EmptyStateWrapper?: React.ReactNode;
    /** Height of the chart. */
    height: number;
    /** Width of the chart. */
    width: number;
    /**
     * 	Margin is an object defining the margins of the chart. These margins will contain
     * 	the axis and labels.
     */
    margin: ILineChartMargin;
    /**
     * Data for the chart. E.g.
     * { x: new Date('2015-01-01') , y: 1 } ,
     * { x: new Date('2015-01-02') , y: 2 } ,
     * { x: new Date('2015-01-03') , y: 3 } ,
     * { x: new Date('2015-01-04') , y: 2 } ,
     * { x: new Date('2015-01-05') , y: 5 } ,
     * ]
     */
    data?: Array<{
        [key: string]: Date | number | undefined;
    }>;
    /**
     * Legend is an object with human readable names for fields
     * that will be used for legends and tooltips. E.g:
     * {
     * 	x: 'Date',
     * 	y: 'Impressions',
     * }
     */
    legend?: object;
    /** Controls the visibility of the \`LoadingMessage\`. */
    isLoading?: boolean;
    /** Show tool tips on hover. */
    hasToolTips: boolean;
    /**Show a legend at the bottom of the chart. */
    hasLegend: boolean;
    /**
     * Plaette 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[];
    /** colorMap allows you to pass in an object if you want to map fields to
     * \`lucid.chartConstants\` or custom colors:
        
        {
            'imps': COLOR_0,
            'rev': COLOR_3,
            'clicks': '#abc123',
        }
    */
    colorMap?: object;
    /** The field we should look up your x data by.
     * The data must be valid javascript dates.
     */
    xAxisField: string;
    /** The minimum date the x axis should display.
     * Typically this will be the smallest items from your dataset.
     * */
    xAxisMin?: Date;
    /** The maximum date the x axis should display.
     * This should almost always be the largest date from your dataset.
     * */
    xAxisMax?: Date;
    /** An optional function used to format your x axis data.
     * If you don't provide anything, we use the default D3 date variable formatter.
     * */
    xAxisFormatter?: (d: Date) => string;
    /** An optional function used to format your x axis dates in the tooltips.*/
    xAxisTooltipFormatter: (x: string | number) => string | number;
    /** There are some cases where you need to only show a "sampling" of ticks on the x axis.
     * This number will control that.
     * */
    xAxisTickCount: number | null;
    /** In some cases xAxisTickCount is not enough and you want to specify
     * exactly where the tick marks should appear on the x axis.
     * This prop takes an array of dates (currently only dates are supported for the x axis).
     * This prop will override the \`xAxisTickCount\` prop. */
    xAxisTicks?: Date[];
    /** Set a title for the x axis. */
    xAxisTitle?: string | null;
    /** Set a color for the x axis title.
     * Use the color constants exported off `lucid.chartConstants\`.
     * E.g.:
        - \`COLOR_0\`
        - \`COLOR_GOOD\`
        - \`'#123abc'\` // custom color hex

        \`number\` is supported only for backwards compatability.
    */
    xAxisTitleColor: number | string;
    /** Determines the orientation of the tick text.
     * This may override what the orient prop tries to determine.*/
    xAxisTextOrientation: 'vertical' | 'horizontal' | 'diagonal';
    /** An array of your y axis fields. Typically this will just be a single item
     * unless you need to display multiple lines.
     * The order of the array determines the series order in the chart. */
    yAxisFields: string[];
    /** The minimum number the y axis should display.
     * Typically this should be \`0\`. */
    yAxisMin: number;
    /** The maximum number the y axis should display.
     * This should almost always be the largest number from your dataset. */
    yAxisMax?: number;
    /** An optional function used to format your y axis data.
     * If you don't provide anything, we use the default D3 formatter. */
    yAxisFormatter?: yFormatterFunction;
    /** Stack the y axis data. This is only useful if you have multiple	\`yAxisFields\`.
     * Stacking will cause the chart to be aggregated by sum. */
    yAxisIsStacked: boolean;
    /** Display points along with the y axis lines. */
    yAxisHasPoints: boolean;
    /** There are some cases where you need to only show a "sampling" of ticks on the y axis.
     * This number will determine the number of ticks. */
    yAxisTickCount: number | null;
    /** Set a title for the y axis. */
    yAxisTitle: string | null;
    yAxisTitleColor: number | string;
    yAxisTooltipFormatter: (yField: string, yValueFormatted: string | number, yValue: number) => string | number;
    /** An optional function used to format data in the tooltips. */
    yAxisTooltipDataFormatter?: (y: number) => string | number;
    /** Set the starting index where colors start rotating for points and lines along the y axis. */
    yAxisColorOffset: number;
    /**  An array of your y2 axis fields.
     * Typically this will just be a single item unless you need to display multiple lines.
     * The order of the array determines the series order in the chart. */
    y2AxisFields: string[];
    /** The minimum number the y2 axis should display.
     * Typically this should be \`0\`. */
    y2AxisMin: number;
    /** The maximum number the y2 axis should display.
     * This should almost always be the largest number from your dataset. */
    y2AxisMax?: number;
    /** An optional function used to format your y2 axis data.
     * If you don't provide anything, we use the default D3 formatter. */
    y2AxisFormatter?: yFormatterFunction;
    /**
     * An optional function used to format data in the tooltips.
     */
    y2AxisTooltipDataFormatter?: yFormatterFunction;
    /** Stack the y2 axis data.
     * This is only useful if you have multiple	\`y2AxisFields\`.
     * Stacking will cause the chart to be aggregated by sum. */
    y2AxisIsStacked: boolean;
    /** Display points along with the y2 axis lines. */
    y2AxisHasPoints: boolean;
    /** There are some cases where you need to only show a "sampling" of ticks on the y2 axis.
     * This number will control the "sampling". */
    y2AxisTickCount: number | null;
    /** Set a title for the y2 axis. */
    y2AxisTitle: string | null;
    /** Set a color for the y2 axis title.
     * Use the color constants exported off	\`lucid.chartConstants\`. E.g.:
        - \`COLOR_0\`
        - \`COLOR_GOOD\`
        - \`'#123abc'\` // custom color hex

        \`number\` is supported only for backwards compatability. */
    y2AxisTitleColor: number | string;
    /** Set the starting index where colors start rotating for points and lines along the y2 axis. */
    y2AxisColorOffset: number;
    /** Determines the orientation of the tick text.
     * This may override what the orient prop tries to determine.  */
    yAxisTextOrientation: 'vertical' | 'horizontal' | 'diagonal';
}
export declare type ILineChartProps = Overwrite<React.SVGProps<SVGGElement>, ILineChartPropsRaw>;
export interface ILineChartState {
    isHovering: boolean;
    mouseX?: number | string;
}
declare class LineChart extends React.Component<ILineChartProps, ILineChartState, {}> {
    static displayName: string;
    static peek: {
        description: string;
        categories: string[];
        madeFrom: string[];
    };
    static MARGIN: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    static propTypes: {
        className: any;
        height: any;
        width: any;
        margin: any;
        data: any;
        legend: any;
        isLoading: any;
        hasToolTips: any;
        hasLegend: any;
        palette: any;
        colorMap: any;
        xAxisField: any;
        xAxisMin: any;
        xAxisMax: any;
        xAxisFormatter: any;
        xAxisTooltipFormatter: any;
        xAxisTickCount: any;
        xAxisTicks: any;
        xAxisTitle: any;
        xAxisTitleColor: any;
        xAxisTextOrientation: any;
        yAxisFields: any;
        yAxisMin: any;
        yAxisMax: any;
        yAxisFormatter: any;
        yAxisIsStacked: any;
        yAxisHasPoints: any;
        yAxisTickCount: any;
        yAxisTitle: any;
        yAxisTitleColor: any;
        yAxisTooltipFormatter: any;
        yAxisTooltipDataFormatter: any;
        yAxisColorOffset: any;
        y2AxisFields: any;
        y2AxisMin: any;
        y2AxisMax: any;
        y2AxisFormatter: any;
        y2AxisTooltipDataFormatter: any;
        y2AxisIsStacked: any;
        y2AxisHasPoints: any;
        y2AxisTickCount: any;
        y2AxisTitle: any;
        y2AxisTitleColor: any;
        y2AxisColorOffset: any;
        yAxisTextOrientation: any;
    };
    static defaultProps: {
        height: number;
        width: number;
        margin: {
            top: number;
            right: number;
            bottom: number;
            left: number;
        };
        hasToolTips: boolean;
        hasLegend: boolean;
        palette: string[];
        xAxisField: string;
        xAxisFormatter: typeof formatDate;
        xAxisTooltipFormatter: (date: Date) => string;
        xAxisTickCount: null;
        xAxisTicks: undefined;
        xAxisTitle: null;
        xAxisTitleColor: string;
        xAxisTextOrientation: string;
        yAxisFields: string[];
        yAxisMin: number;
        yAxisIsStacked: boolean;
        yAxisHasPoints: boolean;
        yAxisTickCount: null;
        yAxisTitle: null;
        yAxisTitleColor: string;
        yAxisTooltipFormatter: (yField: string, yValueFormatted: number) => string;
        yAxisColorOffset: number;
        y2AxisFields: never[];
        y2AxisMin: number;
        y2AxisIsStacked: boolean;
        y2AxisHasPoints: boolean;
        y2AxisTickCount: null;
        y2AxisTitle: null;
        y2AxisTitleColor: string;
        y2AxisColorOffset: number;
        yAxisTextOrientation: string;
    };
    state: {
        isHovering: boolean;
        mouseX: undefined;
    };
    static EmptyStateWrapper: {
        (props: import("../EmptyStateWrapper/EmptyStateWrapper").IEmptyStateWrapperProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
        _isPrivate: boolean;
        peek: {
            description: string;
            categories: string[];
            madeFrom: string[];
        };
        displayName: string;
        defaultProps: {
            isEmpty: boolean;
            isLoading: boolean;
            anchorMessage: boolean;
        };
        propTypes: {
            className: any;
            children: any;
            isEmpty: any;
            isLoading: any;
            anchorMessage: any;
            Body: any;
            Title: any;
        };
        Body: {
            (_props: import("../EmptyStateWrapper/EmptyStateWrapper").IEmptyStateWrapperBodyProps): null;
            displayName: string;
            peek: {
                description: string;
            };
            propName: string;
        };
        Title: {
            (_props: import("../EmptyStateWrapper/EmptyStateWrapper").IEmptyStateWrapperTitleProps): null;
            displayName: string;
            /** Set a title for the x axis. */
            peek: {
                description: string;
            };
            propName: string;
        };
    };
    handleToolTipHoverZone: ({ clientX, target }: {
        clientX: number;
        target: SVGRectElement;
    }, xPoints: number[]) => void;
    renderY2Axis: (xScale: d3Scale.ScaleTime<number, number>, y2Scale: d3Scale.ScaleLinear<number, number>, y2AxisFinalFormatter: yFormatterFunction, margin: ILineChartMargin) => {
        title: JSX.Element | null;
        lines: JSX.Element | null;
        points: JSX.Element | null;
        axis: JSX.Element | null;
    };
    render(): React.ReactNode;
}
export default LineChart;