lucid-ui
Version:
A UI component library from Xandr.
418 lines (410 loc) • 15.8 kB
TypeScript
import React, { Key } from 'react';
import PropTypes from 'prop-types';
import { StandardProps } from '../../util/component-types';
import { Collection } from '../../util/chart-helpers';
export interface IBarChartProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
/** Child components of LineChart */
EmptyStateWrapper?: React.ReactNode;
/**
* Height of the chart.
*/
height: number;
/** Width of the chart. */
width: number;
/** An object defining the margins of the chart. These margins typically
* contain the axis and labels. */
margin: {
top: number;
right: number;
bottom: number;
left: number;
};
/** Data for the chart. E.g.
* [
* { x: 'Monday' , y: 1 } ,
* { x: 'Tuesday' , y: 2 } ,
* { x: 'Wednesday' , y: 3 } ,
* { x: 'Thursday' , y: 2 } ,
* { x: 'Friday' , y: 5 } ,
* ]
*/
data: Collection;
/** An object with human readable names for fields that will be used for legends and tooltips. E.g:
* {
* x: 'Date',
* y: 'Impressions',
* }
*/
legend?: {};
/** 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;
/** 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 x values to \`lucid.chartConstants\` or custom colors:
* {
* 'imps': COLOR_0,
* 'rev': COLOR_3,
* 'clicks': '#abc123',
* }
*/
colorMap?: {};
/** The field we should look up your x data by. Your actual x data must be
* strings.
*/
xAxisField: string;
/** 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;
/** An optional function used to format your x axis data. If you don't
* provide anything, we'll use an identity function.
*/
xAxisFormatter: (d: number | Date) => string;
/** 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: string | number;
/** An array of your y axis fields. Typically this will just be a single item
* unless you need to display grouped or stacked bars. 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 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 number formatter.
*/
yAxisFormatter?: (v: unknown) => string;
/** Stack the y axis data instead of showing it as groups. This is only
* useful if you have multiple \`yAxisFields\`. Stacking will cause the
* chart to be aggregated by sum.
*/
yAxisIsStacked: 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: number | null;
/** Set a title for the y axis.
*/
yAxisTitle: string | null;
/** 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: number | string;
/** An optional function used to format your y axis titles and data in the
* tooltip legends. 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: (yField: string, yValueFormatted: Key, yValue: number) => Key;
/** An optional function used to format y-values in the tooltip legends. */
yAxisTooltipDataFormatter?: (d: number | Date) => string;
/** An optional function used to format the entire tooltip body. The only arg is
* the associated data point. This formatter will over-ride yAxisTooltipFormatter
* and yAxisTooltipDataFormatter. Signature:
* \`dataPoint => {}\`
*/
renderTooltipBody: (dataPoint: string | number | object) => {};
/** Determines the orientation of the tick text. This may override what the orient prop
* tries to determine.
*/
xAxisTextOrientation: 'vertical' | 'horizontal' | 'diagonal';
/** Determines the orientation of the tick text. This may override what the orient prop
* tries to determine.
*/
yAxisTextOrientation: 'vertical' | 'horizontal' | 'diagonal';
}
export declare const BarChart: {
(props: IBarChartProps): React.ReactElement;
displayName: string;
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 typically
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: 'Monday' , y: 1 } ,
{ x: 'Tuesday' , y: 2 } ,
{ x: 'Wednesday' , y: 3 } ,
{ x: 'Thursday' , y: 2 } ,
{ x: 'Friday' , 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 x values 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. Your actual x data must be
strings.
*/
xAxisField: PropTypes.Requireable<string>;
/**
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>;
/**
An optional function used to format your x axis data. If you don't
provide anything, we'll use an identity function.
*/
xAxisFormatter: PropTypes.Requireable<(...args: any[]) => any>;
/**
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>;
/**
An array of your y axis fields. Typically this will just be a single item
unless you need to display grouped or stacked bars. The order of the
array determines the series order in the chart.
*/
yAxisFields: PropTypes.Requireable<any[]>;
/**
The minimum number the y axis should display. Typically this should be 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 number formatter.
*/
yAxisFormatter: PropTypes.Requireable<(...args: any[]) => any>;
/**
Stack the y axis data instead of showing it as groups. This is only
useful if you have multiple \`yAxisFields\`. Stacking will cause the
chart to be aggregated by sum.
*/
yAxisIsStacked: 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
tooltip legends. 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 y-values in the tooltip legends.
*/
yAxisTooltipDataFormatter: PropTypes.Requireable<(...args: any[]) => any>;
/**
An optional function used to format the entire tooltip body. The only arg is
the associated data point. This formatter will over-ride yAxisTooltipFormatter
and yAxisTooltipDataFormatter. Signature:
\`dataPoint => {}\`
*/
renderTooltipBody: PropTypes.Requireable<(...args: any[]) => any>;
/**
Determines the orientation of the tick text. This may override what the orient prop
tries to determine.
*/
xAxisTextOrientation: PropTypes.Requireable<string>;
/**
Determines the orientation of the tick text. This may override what the orient prop
tries to determine.
*/
yAxisTextOrientation: PropTypes.Requireable<string>;
};
defaultProps: {
height: number;
width: number;
margin: {
top: number;
right: number;
bottom: number;
left: number;
};
palette: string[];
hasToolTips: boolean;
hasLegend: boolean;
renderTooltipBody: null;
xAxisField: string;
xAxisTickCount: null;
xAxisTitle: null;
xAxisTitleColor: string;
xAxisFormatter: {
<T>(value: T): T;
(): undefined;
};
xAxisTextOrientation: string;
yAxisFields: string[];
yAxisTickCount: null;
yAxisIsStacked: boolean;
yAxisMin: number;
yAxisTitle: null;
yAxisTitleColor: string;
yAxisTooltipFormatter: (yField: unknown, yValueFormatted: unknown) => string;
yAxisTextOrientation: string;
};
peek: {
description: string;
categories: string[];
madeFrom: string[];
};
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;
};
};
PADDING: number;
PADDING_GROUPED_OR_STACKED: number;
MARGIN: {
top: number;
right: number;
bottom: number;
left: number;
};
};
export default BarChart;
//# sourceMappingURL=BarChart.d.ts.map