lucid-ui

import React from 'react'; import { StandardProps, Overwrite } from '../../util/component-types'; import { formatDate } from '../../util/chart-helpers'; import * as d3Scale from 'd3-scale'; 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?: Array<{ [key: string]: Date | number | undefined; }>; /** * 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: { className: any; height: any; width: any; margin: any; data: any; legend: any; isLoading: any; hasToolTips: any; hasLegend: any; palette: any; colorMap: any; xAxisField: any; xAxisMin: any; xAxisMax: any; xAxisFormatter: any; xAxisTooltipFormatter: any; xAxisTickCount: any; xAxisTicks: any; xAxisTitle: any; xAxisTitleColor: any; xAxisTextOrientation: any; yAxisFields: any; yAxisMin: any; yAxisMax: any; yAxisFormatter: any; yAxisIsStacked: any; yAxisHasPoints: any; yAxisTickCount: any; yAxisTitle: any; yAxisTitleColor: any; yAxisTooltipFormatter: any; yAxisTooltipDataFormatter: any; yAxisColorOffset: any; y2AxisFields: any; y2AxisMin: any; y2AxisMax: any; y2AxisFormatter: any; y2AxisTooltipDataFormatter: any; y2AxisIsStacked: any; y2AxisHasPoints: any; y2AxisTickCount: any; y2AxisTitle: any; y2AxisTitleColor: any; y2AxisColorOffset: any; yAxisTextOrientation: any; }; 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 | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>; _isPrivate: boolean; peek: { description: string; categories: string[]; madeFrom: string[]; }; displayName: string; defaultProps: { isEmpty: boolean; isLoading: boolean; anchorMessage: boolean; }; propTypes: { className: any; children: any; isEmpty: any; isLoading: any; anchorMessage: any; Body: any; Title: any; }; Body: { (_props: import("../EmptyStateWrapper/EmptyStateWrapper").IEmptyStateWrapperBodyProps): null; displayName: string; peek: { description: string; }; propName: string; }; Title: { (_props: import("../EmptyStateWrapper/EmptyStateWrapper").IEmptyStateWrapperTitleProps): null; displayName: string; /** Set a title for the x axis. */ 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;