lucid-ui
Version:
A UI component library from AppNexus.
109 lines (103 loc) • 3.92 kB
TypeScript
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;