lucid-ui
Version:
A UI component library from Xandr.
126 lines (125 loc) • 5.03 kB
TypeScript
/// <reference types="react" />
import { ScaleLinear, ScalePoint } from 'd3-scale';
import { StandardProps } from '../../util/component-types';
import { IXAxisRenderProp, ISelection } from './d3-helpers';
export interface IChartData {
x: string;
y: number;
ref?: any;
}
export declare type IOnDragEnd = (newYValue: string, xValue: string) => void;
export declare type IData = IChartData[];
export declare type ISelectedChartData = IChartData & {
isSelected: boolean;
};
export declare type IOnPreselect = (data: ISelectedChartData[]) => void;
interface IDraggableLineChartMargin {
top: number;
right: number;
bottom: number;
left: number;
}
export interface IDraggableLineChart extends StandardProps {
/** 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?: IDraggableLineChartMargin;
/** Data for the chart.
Basic example:
[
{ 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 } ,
]
If you want to be able to navigate to one of the components, you can use ref as well:
[
{ x: new Date('2015-01-01') , y: 1, ref: React.createRef() } ,
{ x: new Date('2015-01-02') , y: 2, ref: React.createRef() } ,
{ x: new Date('2015-01-03') , y: 3, ref: React.createRef() } ,
{ x: new Date('2015-01-04') , y: 2, ref: React.createRef() } ,
{ x: new Date('2015-01-05') , y: 5, ref: React.createRef() } ,
]
*/
data: IData;
/** Drag handler function which is a callable function executed at the end of drag.
Called when the user stops to dragging an item.
Signature: `({ event, props }) => {}` */
onDragEnd?: IOnDragEnd;
/** Drag handler function which is a callable function executed at the end of drag.
Called when the user stops to dragging an item.
Signature: `({ event, props }) => {}`
When defined show draggable pane.
*/
onPreselect?: IOnPreselect;
/** Flag for if xAxis tick labels are vertical. */
xAxisTicksVertical?: boolean;
/** Flag for if data is center aligned rather than default left aligned. */
dataIsCentered?: boolean;
/** Flag for yAxis sticking to minimum (not readjusting minimum). */
yAxisMin?: number;
/** Optional react component to render within X-Axis.
Note: If you are using input boxes or similar and you want to navigate
to the next component on tab, you will might need to provide refs
in the data. This react component will always be passed the following props: ({x, y, ref }: { x: string; y: number; ref?: any })
*/
xAxisRenderProp?: IXAxisRenderProp;
/** Text to show to users when there is no data selection. */
preSelectText?: string;
/**
An optional function used to format your y axis data. If you don't
provide anything, we use the default D3 formatter.
*/
yAxisFormatter?: ((value: string) => string) | null;
}
interface IDraggableLineChartParams extends IDraggableLineChart {
IDraggableLineChart?: boolean;
cx: (d: any) => void;
height: number;
width: number;
margin: IDraggableLineChartMargin;
yAxisMin: number;
isMouseDown?: boolean;
mouseDownStep?: number;
hasRenderedPoint?: boolean;
hasRenderedLine?: boolean;
emptyRenderProp?: () => JSX.Element;
}
declare class DraggableLineChartD3 {
selection: ISelection;
params: IDraggableLineChartParams;
xScale: ScalePoint<string>;
yScale: ScaleLinear<number, number>;
constructor(selection: ISelection, params: IDraggableLineChartParams);
setMouseDown: (isMouseDown: boolean, mouseDownStep?: number | undefined) => void;
getIsMouseDown: () => boolean | undefined;
getMouseDownStep: () => number;
getHasRenderedPoint: () => boolean;
getHasRenderedLine: () => boolean;
setHasRenderedPoint: () => void;
setHasRenderedLine: () => void;
shouldShowPreselect: () => boolean;
drag: any;
renderXAxis: () => void;
renderYAxis: () => void;
renderLine: () => void;
renderEmptyRenderProp: (height: number, width: number) => void;
renderPoints: () => void;
reRenderDragBox: ({ dragBox, mouseX, xLeft, xRight, stepWidth, stepCount, }: {
dragBox: any;
mouseX: number;
xLeft: number;
xRight: number;
stepWidth: number;
stepCount: number;
}) => void;
renderHoverTracker: () => void;
renderLineChart: () => void;
updateLineChart: (data: IData) => void;
}
export default DraggableLineChartD3;
//# sourceMappingURL=DraggableLineChartD3.d.ts.map