You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
4.5 KiB
210 lines
4.5 KiB
import * as d3 from 'd3'; |
|
|
|
export type Margin = { top: number, right: number, bottom: number, left: number }; |
|
export type Timestamp = number; |
|
|
|
export type Serie = { |
|
target: string, |
|
datapoints: [Timestamp, number][], |
|
idx?: number, |
|
alias?: string, |
|
visible?: boolean, |
|
color?: string, |
|
class?: string, |
|
yOrientation?: yAxisOrientation, |
|
}; |
|
// TODO: move some options to line-chart |
|
|
|
export type Events = { |
|
zoomIn?: (range: AxisRange[]) => void, |
|
panning?: (event: { ranges: AxisRange[], d3Event: any }) => void, |
|
panningEnd?: (range: AxisRange[]) => void, |
|
zoomOut?: (centers: {x: number, y: number}) => void, |
|
mouseMove?: (evt: any) => void, |
|
mouseClick?: (evt: any) => void, |
|
mouseOut?: () => void, |
|
onLegendClick?: (idx: number) => void, |
|
onLegendLabelClick?: (idx: number) => void, |
|
contextMenu?: (evt: any) => void, // the same name as in d3.events |
|
sharedCrosshairMove?: (event: any) => void, |
|
renderStart?: () => void, |
|
renderEnd?: () => void, |
|
componentRenderEnd?: (part: RenderComponent) => void, |
|
} |
|
|
|
export type Options = { |
|
margin?: Margin; |
|
// obsolete property, use events instead |
|
eventsCallbacks?: Events; |
|
events?: Events; |
|
axis?: AxesOptions; |
|
grid?: GridOptions; |
|
crosshair?: CrosshairOptions; |
|
zoomEvents?: ZoomEvents; |
|
renderTicksfromTimestamps?: boolean; |
|
renderLegend?: boolean; |
|
}; |
|
|
|
export type GridOptions = { |
|
x?: { |
|
enabled?: boolean; |
|
ticksCount?: number; |
|
}, |
|
y?: { |
|
enabled?: boolean; |
|
ticksCount?: number; |
|
}, |
|
} |
|
|
|
export type AxesOptions = { |
|
x?: AxisOption, |
|
y?: AxisOption, |
|
y1?: AxisOption |
|
} |
|
|
|
export type AxisOption = { |
|
isActive?: boolean; |
|
ticksCount?: number; |
|
format?: AxisFormat; |
|
range?: [number, number]; |
|
invert?: boolean; |
|
label?: string; |
|
valueFormatter?: (value: number, i: number) => string; |
|
colorFormatter?: (value: number, i: number) => string; |
|
} |
|
|
|
export type CrosshairOptions = { |
|
orientation?: CrosshairOrientation; |
|
color?: string; |
|
} |
|
|
|
export type AxisRange = [number, number] | undefined; |
|
export type VueOptions = Omit<Options, 'eventsCallbacks'>; |
|
|
|
export enum TimeFormat { |
|
SECOND = 'second', |
|
MINUTE = 'minute', |
|
HOUR = 'hour', |
|
DAY = 'day', |
|
MONTH = 'month', |
|
YEAR = 'year' |
|
} |
|
|
|
export enum BrushOrientation { |
|
VERTICAL = 'vertical', |
|
HORIZONTAL = 'horizontal', |
|
RECTANGLE = 'rectangle', |
|
SQUARE = 'square' |
|
} |
|
|
|
export enum PanOrientation { |
|
VERTICAL = 'vertical', |
|
HORIZONTAL = 'horizontal', |
|
BOTH = 'both', |
|
} |
|
|
|
export enum ScrollPanOrientation { |
|
VERTICAL = 'vertical', |
|
HORIZONTAL = 'horizontal', |
|
} |
|
|
|
export enum ScrollPanDirection { |
|
FORWARD = 'forward', |
|
BACKWARD = 'backward', |
|
BOTH = 'both', |
|
} |
|
|
|
export enum AxisFormat { |
|
TIME = 'time', |
|
NUMERIC = 'numeric', |
|
STRING = 'string', |
|
CUSTOM = 'custom' |
|
} |
|
|
|
export enum CrosshairOrientation { |
|
VERTICAL = 'vertical', |
|
HORIZONTAL = 'horizontal', |
|
BOTH = 'both' |
|
} |
|
|
|
export type SvgElementAttributes = { |
|
x: number, |
|
y: number, |
|
width: number, |
|
height: number |
|
} |
|
|
|
export enum KeyEvent { |
|
MAIN = 'main', |
|
SHIFT = 'shift' |
|
} |
|
|
|
// allow series values to affect a specific axis |
|
export enum xAxisOrientation { |
|
TOP = 'top', |
|
BOTTOM = 'bottom', |
|
BOTH = 'both' |
|
} |
|
export enum yAxisOrientation { |
|
LEFT = 'left', |
|
RIGHT = 'right', |
|
} |
|
export type SvgElParams = { |
|
height: number; |
|
width: number; |
|
xScale: d3.ScaleLinear<number, number>; |
|
yScale: d3.ScaleLinear<number, number>; |
|
} |
|
|
|
export type ZoomEvents = { |
|
mouse?: { |
|
zoom?: MouseZoomEvent; |
|
pan?: MousePanEvent; |
|
doubleClick?: DoubleClickEvent; |
|
}, |
|
scroll?: { |
|
zoom?: ScrollZoomEvent; |
|
pan?: ScrollPanEvent; |
|
} |
|
} |
|
|
|
export type MouseZoomEvent = { // same as brush |
|
isActive?: boolean; |
|
keyEvent?: KeyEvent; // main(or base, or smth) / shift / alt / etc |
|
orientation?: BrushOrientation; // to BrushOrientation: vertical, horizaontal, square, rectange |
|
} |
|
|
|
export type MousePanEvent = { // same as brush |
|
isActive?: boolean; |
|
keyEvent?: KeyEvent; // main(or base, or smth) / shift / alt / etc |
|
orientation?: PanOrientation; |
|
} |
|
|
|
export type DoubleClickEvent = { |
|
isActive: boolean; |
|
keyEvent?: KeyEvent; |
|
} |
|
|
|
export type ScrollZoomEvent = { |
|
isActive?: boolean; |
|
keyEvent?: KeyEvent; |
|
orientation?: PanOrientation; // TODO: rename |
|
} |
|
|
|
export type ScrollPanEvent = { |
|
isActive?: boolean; |
|
keyEvent?: KeyEvent; |
|
panStep?: number; |
|
orientation?: ScrollPanOrientation; |
|
direction?: ScrollPanDirection; |
|
} |
|
|
|
export enum RenderComponent { |
|
CLIP_PATH = 'clipPath', |
|
OVERLAY = 'overlay', |
|
AXES = 'axes', |
|
GRID = 'grid', |
|
CROSSHAIR = 'crosshair', |
|
METRICS_CONTAINER = 'metricsContainer', |
|
LEGEND = 'legend', |
|
} |