|
|
|
import * as d3 from 'd3';
|
|
|
|
|
|
|
|
export type Margin = { top: number, right: number, bottom: number, left: number };
|
|
|
|
export type Timestamp = number;
|
|
|
|
|
|
|
|
// TODO: Pods can render not only "time" series
|
|
|
|
export type TimeSerie = {
|
|
|
|
target: string,
|
|
|
|
datapoints: [Timestamp, number][],
|
|
|
|
alias?: string,
|
|
|
|
visible?: boolean,
|
|
|
|
color?: string,
|
|
|
|
yOrientation?: yAxisOrientation,
|
|
|
|
};
|
|
|
|
// TODO: move some options to line-chart
|
|
|
|
export type Options = {
|
|
|
|
margin?: Margin;
|
|
|
|
confidence?: number;
|
|
|
|
eventsCallbacks?: {
|
|
|
|
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,
|
|
|
|
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,
|
|
|
|
};
|
|
|
|
axis?: {
|
|
|
|
x?: AxisOption,
|
|
|
|
y?: AxisOption,
|
|
|
|
y1?: AxisOption
|
|
|
|
};
|
|
|
|
grid?: GridOptions;
|
|
|
|
crosshair?: {
|
|
|
|
orientation?: CrosshairOrientation;
|
|
|
|
color?: string;
|
|
|
|
}
|
|
|
|
timeInterval?: {
|
|
|
|
timeFormat?: TimeFormat;
|
|
|
|
count?: number;
|
|
|
|
};
|
|
|
|
tickFormat?: {
|
|
|
|
xAxis?: string;
|
|
|
|
xTickOrientation?: TickOrientation;
|
|
|
|
};
|
|
|
|
labelFormat?: {
|
|
|
|
xAxis?: string;
|
|
|
|
yAxis?: string;
|
|
|
|
};
|
|
|
|
bounds?: {
|
|
|
|
upper: string;
|
|
|
|
lower: string;
|
|
|
|
};
|
|
|
|
timeRange?: {
|
|
|
|
from: number,
|
|
|
|
to: number
|
|
|
|
};
|
|
|
|
zoomEvents?: {
|
|
|
|
mouse?: {
|
|
|
|
zoom?: { // same as brush
|
|
|
|
isActive: boolean;
|
|
|
|
keyEvent?: KeyEvent; // main(or base, or smth) / shift / alt / etc
|
|
|
|
orientation?: BrushOrientation; // to BrushOrientation: vertical, horizaontal, square, rectange
|
|
|
|
},
|
|
|
|
pan?: {
|
|
|
|
isActive: boolean;
|
|
|
|
keyEvent?: KeyEvent; // main(or base, or smth) / shift / alt / etc
|
|
|
|
orientation?: PanOrientation;
|
|
|
|
},
|
|
|
|
doubleClick?: {
|
|
|
|
isActive: boolean;
|
|
|
|
keyEvent?: KeyEvent;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
scroll?: {
|
|
|
|
zoom?: {
|
|
|
|
isActive: boolean;
|
|
|
|
keyEvent?: KeyEvent;
|
|
|
|
orientation?: PanOrientation; // TODO: rename
|
|
|
|
},
|
|
|
|
pan?: {
|
|
|
|
isActive: boolean;
|
|
|
|
keyEvent?: KeyEvent;
|
|
|
|
panStep?: number;
|
|
|
|
orientation?: ScrollPanOrientation;
|
|
|
|
direction?: ScrollPanDirection;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
renderTicksfromTimestamps?: boolean;
|
|
|
|
renderLegend?: boolean;
|
|
|
|
};
|
|
|
|
export type GridOptions = {
|
|
|
|
x?: {
|
|
|
|
enabled?: boolean;
|
|
|
|
ticksCount?: number;
|
|
|
|
},
|
|
|
|
y?: {
|
|
|
|
enabled?: boolean;
|
|
|
|
ticksCount?: number;
|
|
|
|
},
|
|
|
|
}
|
|
|
|
export type AxisOption = {
|
|
|
|
isActive?: boolean;
|
|
|
|
ticksCount?: number;
|
|
|
|
format?: AxisFormat;
|
|
|
|
range?: [number, number];
|
|
|
|
invert?: boolean;
|
|
|
|
valueFormatter?: (value: number, i: number) => string;
|
|
|
|
colorFormatter?: (value: number, i: number) => string;
|
|
|
|
}
|
|
|
|
export type AxisRange = [number, number] | undefined;
|
|
|
|
export type VueOptions = Omit<Options, 'eventsCallbacks'>;
|
|
|
|
export enum TickOrientation {
|
|
|
|
VERTICAL = 'vertical',
|
|
|
|
HORIZONTAL = 'horizontal',
|
|
|
|
DIAGONAL = 'diagonal'
|
|
|
|
}
|
|
|
|
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',
|
|
|
|
BOTH = 'both'
|
|
|
|
}
|
|
|
|
export type SvgElParams = {
|
|
|
|
height: number,
|
|
|
|
width: number,
|
|
|
|
xScale: d3.ScaleLinear<number, number>,
|
|
|
|
yScale: d3.ScaleLinear<number, number>,
|
|
|
|
}
|