lucid-ui
Version:
A UI component library from AppNexus.
198 lines (197 loc) • 6.69 kB
TypeScript
import React, { PureComponent } from 'react';
import { Collection } from '../../util/chart-helpers';
import { StandardProps } from '../../util/component-types';
import * as d3Scale from 'd3-scale';
interface IBarsProps extends StandardProps, React.SVGProps<SVGGElement> {
/**
* De-normalized data
*
* [
* { 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 },
* ]
*/
data: Collection;
/**
* An object with human readable names for fields that will be used for tooltips. E.g:
* {
* rev: 'Revenue',
* imps: 'Impressions',
* }
*/
legend?: object;
/** Show tool tips on hover. Default is true. */
hasToolTips: 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 fields to `lucid.chartConstants\`
* or custom colors:
* {
* 'imps': COLOR_0,
* 'rev': COLOR_3,
* 'clicks': '#abc123',
* }
*
*/
colorMap?: object;
/** The scale for the x axis.
* Must be a d3 band scale.
* Lucid exposes the\`lucid.d3Scale.scaleBand\` library for use here.
*/
xScale: d3Scale.ScaleBand<string> | d3Scale.ScaleBand<number> | d3Scale.ScalePoint<string>;
/** The field we should look up your x data by.*/
xField: string;
/** Function to format the x data. */
xFormatter: (d: Date) => string;
/** The scale for the y axis. Is required.
* Must be a d3 scale.
* Lucid exposes the \`lucid.d3Scale\` library for use here.
* */
yScale: d3Scale.ScaleBand<string | number> | d3Scale.ScalePoint<string | number> | d3Scale.ScaleLinear<number, number>;
/** The field(s) we should look up your y data by.
* Each entry represents a series.
* The actual y data should be numeric. */
yFields: string[];
/** Function to format the y data.
* Signature yFormatter(dataPoint[field], dataPoint),
*/
yFormatter: (y: string | number, dataPoint: {
[key: string]: string | number;
}) => string;
/** 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;
/** An optional function used to format your y axis titles and data in the tooltips.
* The first value is the name of your y field,
* the second value is your post-formatted y value,
* and the third value is your non-formatted y-value.
* Signature: \`(yField, yValueFormatted, yValue) => {}\`
* */
yTooltipFormatter: (yField: string, yValueFormatted: string | number, yValue: number) => string | number;
/** 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 bar index in determining which color the bars are. */
colorOffset: number;
/** An optional function used to format the entire tooltip body.
* The only arg is the associated data point.
* This formatter will over-ride yTooltipFormatter and yAxisTooltipDataFormatter.
* Signature: \`dataPoint => {}\`
*/
renderTooltipBody: (dataPoint: number | string | object) => {};
}
interface IBarsState {
hoveringSeriesIndex: null | number;
}
export declare class Bars extends PureComponent<IBarsProps, IBarsState> {
static displayName: string;
static peek: {
description: string;
categories: string[];
madeFrom: string[];
};
static propTypes: {
className: any;
data: any;
legend: any;
hasToolTips: any;
palette: any;
colorMap: any;
xScale: any;
xField: any;
xFormatter: any;
yScale: any;
yFields: any;
yFormatter: any;
yStackedMax: any;
yTooltipFormatter: any;
isStacked: any;
colorOffset: any;
renderTooltipBody: any;
};
defaultTooltipFormatter: (dataPoint: {
[key: string]: number;
}) => JSX.Element;
handleMouseEnter: (hoveringSeriesIndex: number) => void;
handleMouseOut: () => void;
static defaultProps: {
hasToolTips: boolean;
xField: string;
xFormatter: {
<T>(value: T): T;
(): undefined;
};
yFields: string[];
yFormatter: {
<T>(value: T): T;
(): undefined;
};
yTooltipFormatter: (yField: string, yValueFormatted: any) => string;
renderTooltipBody: null;
isStacked: boolean;
colorOffset: number;
palette: string[];
};
state: {
hoveringSeriesIndex: null;
};
render(): JSX.Element;
}
export interface IPureToolTipsProps extends StandardProps {
isExpanded: boolean;
height: number;
width: number;
x?: number;
y?: number;
series: Array<[number, number]>;
seriesIndex: number;
onMouseEnter: (seriesIndex: number) => void;
onMouseOut?: ((event: React.MouseEvent<SVGRectElement, MouseEvent>) => void) | undefined;
xFormatter: (d: Date, seriesIndex: number) => string;
xField: string;
renderBody: (dataPoint: number) => {};
data: Array<{
[key: string]: string | number;
}>;
}
export declare class PureToolTip extends PureComponent<IPureToolTipsProps> {
static displayName: string;
static _isPrivate: boolean;
static propTypes: {
data: any;
height: any;
isExpanded: any;
onMouseEnter: any;
onMouseOut: any;
renderBody: any;
seriesIndex: any;
width: any;
x: any;
xField: any;
xFormatter: any;
y: any;
};
handleMouseEnter: () => void;
render(): React.ReactNode;
}
export default Bars;