import React from 'react';
import { StandardProps } from '../../util/component-types';
import * as d3Scale from 'd3-scale';
export interface IPointsProps extends StandardProps, React.SVGProps<SVGGElement> {
    /** 	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 fields to
    \`lucid.chartConstants\` or custom colors:

        {
            'imps': COLOR_0,
            'rev': COLOR_3,
            'clicks': '#abc123',
        } */
    colorMap?: object;
    /** De-normalized data, e.g.

        [
            { x: 'one'   , y: 1 },
            { x: 'two'   , y: 2 },
            { x: 'three' , y: 2 },
            { x: 'four'  , y: 3 },
            { x: 'five'  , y: 4 },
        ]

    Or (be sure to set \`yFields\` to \`['y0', 'y1', 'y2', 'y3']\`)

        [
            { x: 'one'   , y0: 1  , y1: 2 , y2: 3 , y3: 5 },
            { x: 'two'   , y0: 2  , y1: 3 , y2: 4 , y3: 6 },
            { x: 'three' , y0: 2  , y1: 4 , y2: 5 , y3: 6 },
            { x: 'four'  , y0: 3  , y1: 6 , y2: 7 , y3: 7 },
            { x: 'five'  , y0: 4  , y1: 8 , y2: 9 , y3: 8 },
            { x: 'six'   , y0: 20 , y1: 8 , y2: 9 , y3: 1 },
        ] */
    data: Array<{
        [key: string]: string | number | Date;
    }>;
    /** The scale for the x axis. Must be a d3 scale. Lucid exposes the
        `lucid.d3Scale` library for use here. */
    xScale: d3Scale.ScaleBand<number | string> | d3Scale.ScalePoint<number | string> | d3Scale.ScaleTime<number, number>;
    /** The scale for the y axis. Must be a d3 scale. Lucid exposes the
        `lucid.d3Scale` library for use here. */
    yScale: d3Scale.ScaleContinuousNumeric<number, number> | d3Scale.ScaleBand<number> | d3Scale.ScalePoint<number> | d3Scale.ScaleLinear<number, number>;
    /** Typically this number can be derived from the yScale. However when we're
        \`isStacked\` we need to calculate a new domain for the yScale based on
        the sum of the data. If you need explicit control of the y max when
        stacking, pass it in here. */
    yStackedMax?: number | object;
    /** The field we should look up your x data by. */
    xField: string;
    /** The field(s) we should look up your y data by. Each entry represents a
        series. Your actual y data should be numeric. */
    yFields: string[];
    /** This will stack the data instead of grouping it. In order to stack the
        data we have to calculate a new domain for the y scale that is based on
        the \`sum\` of the data. */
    isStacked: boolean;
    /** Sometimes you might not want the colors to start rotating at the blue
        color, this number will be added the line index in determining which
        color the lines are. */
    colorOffset: number;
    /** Display a stroke around each of the points. */
    hasStroke: boolean;
}
export declare const Points: {
    (props: IPointsProps): React.ReactElement;
    defaultProps: {
        xField: string;
        yFields: string[];
        colorOffset: number;
        hasStroke: boolean;
        isStacked: boolean;
        palette: string[];
    };
    displayName: string;
    peek: {
        description: string;
        categories: string[];
        madeFrom: string[];
    };
    propTypes: {
        className: any;
        palette: any;
        colorMap: any;
        data: any;
        xScale: any;
        yScale: any;
        xField: any;
        yFields: any;
        yStackedMax: any;
        colorOffset: any;
        hasStroke: any;
        isStacked: any;
    };
};
export default Points;