lucid-ui
Version:
A UI component library from Xandr.
192 lines (182 loc) • 7.48 kB
TypeScript
import React from 'react';
import PropTypes from 'prop-types';
import * as d3Scale from 'd3-scale';
import { StandardProps } from '../../util/component-types';
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: {
/**
Appended to the component-specific class names set on the root element.
*/
className: PropTypes.Requireable<string>;
/**
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 fields to
\`lucid.chartConstants\` or custom colors:
{
'imps': COLOR_0,
'rev': COLOR_3,
'clicks': '#abc123',
}
*/
colorMap: PropTypes.Requireable<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: PropTypes.Validator<(object | null | undefined)[]>;
/**
The scale for the x axis. Must be a d3 scale. Lucid exposes the
\`lucid.d3Scale\` library for use here.
*/
xScale: PropTypes.Validator<(...args: any[]) => any>;
/**
The scale for the y axis. Must be a d3 scale. Lucid exposes the
\`lucid.d3Scale\` library for use here.
*/
yScale: PropTypes.Validator<(...args: any[]) => any>;
/**
The field we should look up your x data by.
*/
xField: PropTypes.Requireable<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: PropTypes.Requireable<(string | null | undefined)[]>;
/**
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: PropTypes.Requireable<number>;
/**
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: PropTypes.Requireable<number>;
/**
Display a stroke around each of the points.
*/
hasStroke: PropTypes.Requireable<boolean>;
/**
This will stack the data. 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: PropTypes.Requireable<boolean>;
};
};
export default Points;
//# sourceMappingURL=Points.d.ts.map