lucid-ui
Version:
A UI component library from Xandr.
298 lines (294 loc) • 11.4 kB
TypeScript
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import * as d3Scale from 'd3-scale';
import { Collection } from '../../util/chart-helpers';
import { StandardProps } from '../../util/component-types';
export interface IBarsProps extends StandardProps {
/**
* 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: {
/**
Appended to the component-specific class names set on the root element.
*/
className: PropTypes.Requireable<string>;
/**
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: PropTypes.Validator<(object | null | undefined)[]>;
/**
An object with human readable names for fields that will be used for
tooltips. E.g:
{
rev: 'Revenue',
imps: 'Impressions',
}
*/
legend: PropTypes.Requireable<object>;
/**
* Show tool tips on hover.
*/
hasToolTips: PropTypes.Requireable<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: 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>;
/**
The scale for the x axis. Must be a d3 band scale. Lucid exposes the
\`lucid.d3Scale.scaleBand\` library for use here.
*/
xScale: PropTypes.Validator<(...args: any[]) => any>;
/**
The field we should look up your x data by.
*/
xField: PropTypes.Requireable<string>;
/**
Function to format the x data.
*/
xFormatter: PropTypes.Requireable<(...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(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)[]>;
/**
Function to format the y data.
*/
yFormatter: PropTypes.Requireable<(...args: any[]) => any>;
/**
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>;
/**
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: PropTypes.Requireable<(...args: any[]) => any>;
/**
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: PropTypes.Requireable<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: PropTypes.Requireable<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: PropTypes.Requireable<(...args: any[]) => 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: undefined;
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: PropTypes.Requireable<(object | null | undefined)[]>;
height: PropTypes.Requireable<number>;
isExpanded: PropTypes.Requireable<boolean>;
onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
renderBody: PropTypes.Requireable<(...args: any[]) => any>;
seriesIndex: PropTypes.Requireable<number>;
width: PropTypes.Requireable<number>;
x: PropTypes.Requireable<number>;
xField: PropTypes.Requireable<string>;
xFormatter: PropTypes.Requireable<(...args: any[]) => any>;
y: PropTypes.Requireable<number>;
};
handleMouseEnter: () => void;
render(): React.ReactNode;
}
export default Bars;
//# sourceMappingURL=Bars.d.ts.map