lucid-ui
Version:
A UI component library from Xandr.
574 lines (560 loc) • 22.4 kB
TypeScript
import React from 'react';
import PropTypes from 'prop-types';
import * as d3Scale from 'd3-scale';
import { StandardProps, Overwrite } from '../../util/component-types';
import { formatDate, Collection } from '../../util/chart-helpers';
interface ILineChartMargin {
top?: number;
right?: number;
bottom?: number;
left?: number;
}
declare type yFormatterFunction = (y: number) => string;
export interface ILineChartPropsRaw extends StandardProps {
/** Child components of LineChart */
EmptyStateWrapper?: React.ReactNode;
/** Height of the chart. */
height: number;
/** Width of the chart. */
width: number;
/**
* Margin is an object defining the margins of the chart. These margins will contain
* the axis and labels.
*/
margin: ILineChartMargin;
/**
* Data for the chart. E.g.
*
* [
* { x: new Date('2015-01-01') , y: 1 } ,
* { x: new Date('2015-01-02') , y: 2 } ,
* { x: new Date('2015-01-03') , y: 3 } ,
* { x: new Date('2015-01-04') , y: 2 } ,
* { x: new Date('2015-01-05') , y: 5 } ,
* ]
*/
data?: Collection;
/**
* Legend is an object with human readable names for fields
* that will be used for legends and tooltips. E.g:
* {
* x: 'Date',
* y: 'Impressions',
* }
*/
legend?: object;
/** Controls the visibility of the \`LoadingMessage\`. */
isLoading?: boolean;
/** Show tool tips on hover. */
hasToolTips: boolean;
/**Show a legend at the bottom of the chart. */
hasLegend: boolean;
/**
* Plaette 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[];
/** colorMap allows you to 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 field we should look up your x data by.
* The data must be valid javascript dates.
*/
xAxisField: string;
/** The minimum date the x axis should display.
* Typically this will be the smallest items from your dataset.
* */
xAxisMin?: Date;
/** The maximum date the x axis should display.
* This should almost always be the largest date from your dataset.
* */
xAxisMax?: Date;
/** An optional function used to format your x axis data.
* If you don't provide anything, we use the default D3 date variable formatter.
* */
xAxisFormatter?: (d: Date) => string;
/** An optional function used to format your x axis dates in the tooltips.*/
xAxisTooltipFormatter: (x: string | number) => string | number;
/** There are some cases where you need to only show a "sampling" of ticks on the x axis.
* This number will control that.
* */
xAxisTickCount: number | null;
/** In some cases xAxisTickCount is not enough and you want to specify
* exactly where the tick marks should appear on the x axis.
* This prop takes an array of dates (currently only dates are supported for the x axis).
* This prop will override the \`xAxisTickCount\` prop. */
xAxisTicks?: Date[];
/** Set a title for the x axis. */
xAxisTitle?: string | null;
/** Set a color for the x axis title.
* Use the color constants exported off `lucid.chartConstants\`.
* E.g.:
- \`COLOR_0\`
- \`COLOR_GOOD\`
- \`'#123abc'\` // custom color hex
\`number\` is supported only for backwards compatability.
*/
xAxisTitleColor: number | string;
/** Determines the orientation of the tick text.
* This may override what the orient prop tries to determine.*/
xAxisTextOrientation: 'vertical' | 'horizontal' | 'diagonal';
/** An array of your y axis fields. Typically this will just be a single item
* unless you need to display multiple lines.
* The order of the array determines the series order in the chart. */
yAxisFields: string[];
/** The minimum number the y axis should display.
* Typically this should be \`0\`. */
yAxisMin: number;
/** The maximum number the y axis should display.
* This should almost always be the largest number from your dataset. */
yAxisMax?: number;
/** An optional function used to format your y axis data.
* If you don't provide anything, we use the default D3 formatter. */
yAxisFormatter?: yFormatterFunction;
/** Stack the y axis data. This is only useful if you have multiple \`yAxisFields\`.
* Stacking will cause the chart to be aggregated by sum. */
yAxisIsStacked: boolean;
/** Display points along with the y axis lines. */
yAxisHasPoints: boolean;
/** There are some cases where you need to only show a "sampling" of ticks on the y axis.
* This number will determine the number of ticks. */
yAxisTickCount: number | null;
/** Set a title for the y axis. */
yAxisTitle: string | null;
yAxisTitleColor: number | string;
yAxisTooltipFormatter: (yField: string, yValueFormatted: string | number, yValue: number) => string | number;
/** An optional function used to format data in the tooltips. */
yAxisTooltipDataFormatter?: (y: number) => string | number;
/** Set the starting index where colors start rotating for points and lines along the y axis. */
yAxisColorOffset: number;
/** An array of your y2 axis fields.
* Typically this will just be a single item unless you need to display multiple lines.
* The order of the array determines the series order in the chart. */
y2AxisFields: string[];
/** The minimum number the y2 axis should display.
* Typically this should be \`0\`. */
y2AxisMin: number;
/** The maximum number the y2 axis should display.
* This should almost always be the largest number from your dataset. */
y2AxisMax?: number;
/** An optional function used to format your y2 axis data.
* If you don't provide anything, we use the default D3 formatter. */
y2AxisFormatter?: yFormatterFunction;
/**
* An optional function used to format data in the tooltips.
*/
y2AxisTooltipDataFormatter?: yFormatterFunction;
/** Stack the y2 axis data.
* This is only useful if you have multiple \`y2AxisFields\`.
* Stacking will cause the chart to be aggregated by sum. */
y2AxisIsStacked: boolean;
/** Display points along with the y2 axis lines. */
y2AxisHasPoints: boolean;
/** There are some cases where you need to only show a "sampling" of ticks on the y2 axis.
* This number will control the "sampling". */
y2AxisTickCount: number | null;
/** Set a title for the y2 axis. */
y2AxisTitle: string | null;
/** Set a color for the y2 axis title.
* Use the color constants exported off \`lucid.chartConstants\`. E.g.:
- \`COLOR_0\`
- \`COLOR_GOOD\`
- \`'#123abc'\` // custom color hex
\`number\` is supported only for backwards compatability. */
y2AxisTitleColor: number | string;
/** Set the starting index where colors start rotating for points and lines along the y2 axis. */
y2AxisColorOffset: number;
/** Determines the orientation of the tick text.
* This may override what the orient prop tries to determine. */
yAxisTextOrientation: 'vertical' | 'horizontal' | 'diagonal';
}
export declare type ILineChartProps = Overwrite<React.SVGProps<SVGGElement>, ILineChartPropsRaw>;
export interface ILineChartState {
isHovering: boolean;
mouseX?: number | string;
}
declare class LineChart extends React.Component<ILineChartProps, ILineChartState, {}> {
static displayName: string;
static peek: {
description: string;
categories: string[];
madeFrom: string[];
};
static MARGIN: {
top: number;
right: number;
bottom: number;
left: number;
};
static propTypes: {
/**
Appended to the component-specific class names set on the root element.
*/
className: PropTypes.Requireable<string>;
/**
Height of the chart.
*/
height: PropTypes.Requireable<number>;
/**
Width of the chart.
*/
width: PropTypes.Requireable<number>;
/**
An object defining the margins of the chart. These margins will contain
the axis and labels.
*/
margin: PropTypes.Requireable<PropTypes.InferProps<{
top: PropTypes.Requireable<number>;
right: PropTypes.Requireable<number>;
bottom: PropTypes.Requireable<number>;
left: PropTypes.Requireable<number>;
}>>;
/**
Data for the chart. E.g.
[
{ x: new Date('2015-01-01') , y: 1 } ,
{ x: new Date('2015-01-02') , y: 2 } ,
{ x: new Date('2015-01-03') , y: 3 } ,
{ x: new Date('2015-01-04') , y: 2 } ,
{ x: new Date('2015-01-05') , y: 5 } ,
]
*/
data: PropTypes.Requireable<(object | null | undefined)[]>;
/**
An object with human readable names for fields that will be used for
legends and tooltips. E.g:
{
x: 'Date',
y: 'Impressions',
}
*/
legend: PropTypes.Requireable<object>;
/**
Controls the visibility of the \`LoadingMessage\`.
*/
isLoading: PropTypes.Requireable<boolean>;
/**
Show tool tips on hover.
*/
hasToolTips: PropTypes.Requireable<boolean>;
/**
Show a legend at the bottom of the chart.
*/
hasLegend: 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 field we should look up your x data by. The data must be valid
javascript dates.
*/
xAxisField: PropTypes.Requireable<string>;
/**
The minimum date the x axis should display. Typically this will be the
smallest items from your dataset.
*/
xAxisMin: PropTypes.Requireable<Date>;
/**
The maximum date the x axis should display. This should almost always be
the largest date from your dataset.
*/
xAxisMax: PropTypes.Requireable<Date>;
/**
An optional function used to format your x axis data. If you don't
provide anything, we use the default D3 date variable formatter.
*/
xAxisFormatter: PropTypes.Requireable<(...args: any[]) => any>;
/**
An optional function used to format your x axis dates in the tooltips.
*/
xAxisTooltipFormatter: PropTypes.Requireable<(...args: any[]) => any>;
/**
There are some cases where you need to only show a "sampling" of ticks on
the x axis. This number will control that.
*/
xAxisTickCount: PropTypes.Requireable<number>;
/**
In some cases xAxisTickCount is not enough and you want to specify
exactly where the tick marks should appear on the x axis. This prop takes
an array of dates (currently only dates are supported for the x axis).
This prop will override the \`xAxisTickCount\` prop.
*/
xAxisTicks: PropTypes.Requireable<(Date | null | undefined)[]>;
/**
Set a title for the x axis.
*/
xAxisTitle: PropTypes.Requireable<string>;
/**
Set a color for the x axis title. Use the color constants exported off
\`lucid.chartConstants\`. E.g.:
- \`COLOR_0\`
- \`COLOR_GOOD\`
- \`'#123abc'\` // custom color hex
\`number\` is supported only for backwards compatability.
*/
xAxisTitleColor: PropTypes.Requireable<string | number>;
/**
Determines the orientation of the tick text. This may override what the orient prop
tries to determine.
*/
xAxisTextOrientation: PropTypes.Requireable<string>;
/**
An array of your y axis fields. Typically this will just be a single item
unless you need to display multiple lines. The order of the array
determines the series order in the chart.
*/
yAxisFields: PropTypes.Requireable<(string | null | undefined)[]>;
/**
The minimum number the y axis should display. Typically this should be
\`0\`.
*/
yAxisMin: PropTypes.Requireable<number>;
/**
The maximum number the y axis should display. This should almost always
be the largest number from your dataset.
*/
yAxisMax: PropTypes.Requireable<number>;
/**
An optional function used to format your y axis data. If you don't
provide anything, we use the default D3 formatter.
*/
yAxisFormatter: PropTypes.Requireable<(...args: any[]) => any>;
/**
Stack the y axis data. This is only useful if you have multiple
\`yAxisFields\`. Stacking will cause the chart to be aggregated by sum.
*/
yAxisIsStacked: PropTypes.Requireable<boolean>;
/**
Display points along with the y axis lines.
*/
yAxisHasPoints: PropTypes.Requireable<boolean>;
/**
There are some cases where you need to only show a "sampling" of ticks on
the y axis. This number will control that.
*/
yAxisTickCount: PropTypes.Requireable<number>;
/**
Set a title for the y axis.
*/
yAxisTitle: PropTypes.Requireable<string>;
/**
Set a color for the y axis title. Use the color constants exported off
\`lucid.chartConstants\`. E.g.:
- \`COLOR_0\`
- \`COLOR_GOOD\`
- \`'#123abc'\` // custom color hex
\`number\` is supported only for backwards compatability.
*/
yAxisTitleColor: PropTypes.Requireable<string | 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) => {}\`
*/
yAxisTooltipFormatter: PropTypes.Requireable<(...args: any[]) => any>;
/**
An optional function used to format data in the tooltips.
*/
yAxisTooltipDataFormatter: PropTypes.Requireable<(...args: any[]) => any>;
/**
Set the starting index where colors start rotating for points and lines
along the y axis.
*/
yAxisColorOffset: PropTypes.Requireable<number>;
/**
An array of your y2 axis fields. Typically this will just be a single
item unless you need to display multiple lines. The order of the array
determines the series order in the chart.
*/
y2AxisFields: PropTypes.Requireable<(string | null | undefined)[]>;
/**
The minimum number the y2 axis should display. Typically this should be
\`0\`.
*/
y2AxisMin: PropTypes.Requireable<number>;
/**
The maximum number the y2 axis should display. This should almost always
be the largest number from your dataset.
*/
y2AxisMax: PropTypes.Requireable<number>;
/**
An optional function used to format your y2 axis data. If you don't
provide anything, we use the default D3 formatter.
*/
y2AxisFormatter: PropTypes.Requireable<(...args: any[]) => any>;
/**
An optional function used to format data in the tooltips.
*/
y2AxisTooltipDataFormatter: PropTypes.Requireable<(...args: any[]) => any>;
/**
Stack the y2 axis data. This is only useful if you have multiple
\`y2AxisFields\`. Stacking will cause the chart to be aggregated by sum.
*/
y2AxisIsStacked: PropTypes.Requireable<boolean>;
/**
Display points along with the y2 axis lines.
*/
y2AxisHasPoints: PropTypes.Requireable<boolean>;
/**
There are some cases where you need to only show a "sampling" of ticks on
the y2 axis. This number will control that.
*/
y2AxisTickCount: PropTypes.Requireable<number>;
/**
Set a title for the y2 axis.
*/
y2AxisTitle: PropTypes.Requireable<string>;
/**
Set a color for the y2 axis title. Use the color constants exported off
\`lucid.chartConstants\`. E.g.:
- \`COLOR_0\`
- \`COLOR_GOOD\`
- \`'#123abc'\` // custom color hex
\`number\` is supported only for backwards compatability.
*/
y2AxisTitleColor: PropTypes.Requireable<string | number>;
/**
Set the starting index where colors start rotating for points and lines
along the y2 axis.
*/
y2AxisColorOffset: PropTypes.Requireable<number>;
/**
Determines the orientation of the tick text. This may override what the orient prop
tries to determine.
*/
yAxisTextOrientation: PropTypes.Requireable<string>;
};
static defaultProps: {
height: number;
width: number;
margin: {
top: number;
right: number;
bottom: number;
left: number;
};
hasToolTips: boolean;
hasLegend: boolean;
palette: string[];
xAxisField: string;
xAxisFormatter: typeof formatDate;
xAxisTooltipFormatter: (date: Date) => string;
xAxisTickCount: null;
xAxisTicks: undefined;
xAxisTitle: null;
xAxisTitleColor: string;
xAxisTextOrientation: string;
yAxisFields: string[];
yAxisMin: number;
yAxisIsStacked: boolean;
yAxisHasPoints: boolean;
yAxisTickCount: null;
yAxisTitle: null;
yAxisTitleColor: string;
yAxisTooltipFormatter: (yField: string, yValueFormatted: number) => string;
yAxisColorOffset: number;
y2AxisFields: never[];
y2AxisMin: number;
y2AxisIsStacked: boolean;
y2AxisHasPoints: boolean;
y2AxisTickCount: null;
y2AxisTitle: null;
y2AxisTitleColor: string;
y2AxisColorOffset: number;
yAxisTextOrientation: string;
};
state: {
isHovering: boolean;
mouseX: undefined;
};
static EmptyStateWrapper: {
(props: import("../EmptyStateWrapper/EmptyStateWrapper").IEmptyStateWrapperProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
_isPrivate: boolean;
peek: {
description: string;
categories: string[];
madeFrom: string[];
};
displayName: string;
defaultProps: {
isEmpty: boolean;
isLoading: boolean;
anchorMessage: boolean;
};
propTypes: {
className: PropTypes.Requireable<string>;
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
isEmpty: PropTypes.Requireable<boolean>;
isLoading: PropTypes.Requireable<boolean>;
anchorMessage: PropTypes.Requireable<boolean>;
Body: PropTypes.Requireable<any>;
Title: PropTypes.Requireable<any>;
};
Body: {
(_props: import("../EmptyStateWrapper/EmptyStateWrapper").IEmptyStateWrapperBodyProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
};
Title: {
(_props: import("../EmptyStateWrapper/EmptyStateWrapper").IEmptyStateWrapperTitleProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
};
};
handleToolTipHoverZone: ({ clientX, target }: {
clientX: number;
target: SVGRectElement;
}, xPoints: number[]) => void;
renderY2Axis: (xScale: d3Scale.ScaleTime<number, number>, y2Scale: d3Scale.ScaleLinear<number, number>, y2AxisFinalFormatter: yFormatterFunction, margin: ILineChartMargin) => {
title: JSX.Element | null;
lines: JSX.Element | null;
points: JSX.Element | null;
axis: JSX.Element | null;
};
render(): React.ReactNode;
}
export default LineChart;
//# sourceMappingURL=LineChart.d.ts.map