|
|
|
/// <reference types="lodash" />
|
|
|
|
import VueChartwerkPodMixin from './VueChartwerkPodMixin';
|
|
|
|
import { PodState } from './state';
|
|
|
|
import { Grid } from './components/grid';
|
|
|
|
import { Margin, TimeSerie, Options, TickOrientation, TimeFormat, BrushOrientation, AxisFormat, CrosshairOrientation, SvgElementAttributes, KeyEvent, PanOrientation, yAxisOrientation, ScrollPanOrientation, ScrollPanDirection, AxisOption } from './types';
|
|
|
|
import { palette } from './colors';
|
|
|
|
import * as d3 from 'd3';
|
|
|
|
declare abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
|
|
|
|
protected readonly el: HTMLElement;
|
|
|
|
protected d3Node?: d3.Selection<HTMLElement, unknown, null, undefined>;
|
|
|
|
protected customOverlay?: d3.Selection<SVGRectElement, unknown, null, undefined>;
|
|
|
|
protected crosshair?: d3.Selection<SVGGElement, unknown, null, undefined>;
|
|
|
|
protected brush?: d3.BrushBehavior<unknown>;
|
|
|
|
protected zoom?: any;
|
|
|
|
protected svg?: d3.Selection<SVGElement, unknown, null, undefined>;
|
|
|
|
protected state: PodState<T, O>;
|
|
|
|
protected pan?: d3.ZoomBehavior<Element, unknown>;
|
|
|
|
protected clipPath?: any;
|
|
|
|
protected isPanning: boolean;
|
|
|
|
protected isBrushing: boolean;
|
|
|
|
protected brushStartSelection: [number, number] | null;
|
|
|
|
protected initScaleX?: d3.ScaleLinear<any, any>;
|
|
|
|
protected initScaleY?: d3.ScaleLinear<any, any>;
|
|
|
|
protected initScaleY1?: d3.ScaleLinear<any, any>;
|
|
|
|
protected xAxisElement?: d3.Selection<SVGGElement, unknown, null, undefined>;
|
|
|
|
protected yAxisElement?: d3.Selection<SVGGElement, unknown, null, undefined>;
|
|
|
|
protected y1AxisElement?: d3.Selection<SVGGElement, unknown, null, undefined>;
|
|
|
|
protected yAxisTicksColors?: string[];
|
|
|
|
private _clipPathUID;
|
|
|
|
protected series: T[];
|
|
|
|
protected options: O;
|
|
|
|
protected readonly d3: typeof d3;
|
|
|
|
protected deltaYTransform: number;
|
|
|
|
protected debouncedRender: import("lodash").DebouncedFunc<any>;
|
|
|
|
protected chartContainer: d3.Selection<SVGGElement, unknown, null, undefined>;
|
|
|
|
protected metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>;
|
|
|
|
protected grid: Grid;
|
|
|
|
constructor(_d3: typeof d3, el: HTMLElement, _series: T[], _options: O);
|
|
|
|
protected addEventListeners(): void;
|
|
|
|
protected removeEventListeners(): void;
|
|
|
|
render(): void;
|
|
|
|
updateData(series?: T[], options?: O, shouldRerender?: boolean): void;
|
|
|
|
forceRerender(): void;
|
|
|
|
protected updateOptions(newOptions: O): void;
|
|
|
|
protected updateSeries(newSeries: T[]): void;
|
|
|
|
protected abstract renderMetrics(): void;
|
|
|
|
protected abstract onMouseOver(): void;
|
|
|
|
protected abstract onMouseOut(): void;
|
|
|
|
protected abstract onMouseMove(): void;
|
|
|
|
abstract renderSharedCrosshair(values: {
|
|
|
|
x?: number;
|
|
|
|
y?: number;
|
|
|
|
}): void;
|
|
|
|
abstract hideSharedCrosshair(): void;
|
|
|
|
protected initPodState(): void;
|
|
|
|
protected initComponents(): void;
|
|
|
|
protected renderMetricsContainer(): void;
|
|
|
|
protected createSvg(): void;
|
|
|
|
protected renderGrid(): void;
|
|
|
|
protected renderAxes(): void;
|
|
|
|
protected renderXAxis(): void;
|
|
|
|
protected renderYAxis(): void;
|
|
|
|
protected renderY1Axis(): void;
|
|
|
|
protected renderCrosshair(): void;
|
|
|
|
protected addEvents(): void;
|
|
|
|
protected initBrush(): void;
|
|
|
|
protected filterByKeyEvent(key: KeyEvent): () => boolean;
|
|
|
|
protected isD3EventKeyEqualOption(event: d3.D3ZoomEvent<any, any>, optionsKeyEvent: KeyEvent): boolean;
|
|
|
|
protected initPan(): void;
|
|
|
|
protected renderClipPath(): void;
|
|
|
|
protected renderLegend(): void;
|
|
|
|
protected renderYLabel(): void;
|
|
|
|
protected renderXLabel(): void;
|
|
|
|
protected renderNoDataPointsMessage(): void;
|
|
|
|
private disableScrollForward;
|
|
|
|
private disableScrollBackward;
|
|
|
|
protected onPanning(): void;
|
|
|
|
rescaleMetricAndAxis(event: d3.D3ZoomEvent<any, any>): void;
|
|
|
|
protected onPanningRescale(event: d3.D3ZoomEvent<any, any>): void;
|
|
|
|
rescaleAxisX(transformX: number): void;
|
|
|
|
rescaleAxisY(transformY: number): void;
|
|
|
|
protected onScrollPanningRescale(event: d3.D3ZoomEvent<any, any>): void;
|
|
|
|
protected onPanningEnd(): void;
|
|
|
|
protected onBrush(): void;
|
|
|
|
protected getSelectionAttrs(selection: number[][]): SvgElementAttributes | undefined;
|
|
|
|
protected onBrushStart(): void;
|
|
|
|
protected onBrushEnd(): void;
|
|
|
|
protected zoomOut(): void;
|
|
|
|
get absXScale(): d3.ScaleLinear<number, number>;
|
|
|
|
get absYScale(): d3.ScaleLinear<number, number>;
|
|
|
|
get xScale(): d3.ScaleLinear<number, number>;
|
|
|
|
get yScale(): d3.ScaleLinear<number, number>;
|
|
|
|
protected get y1Scale(): d3.ScaleLinear<number, number>;
|
|
|
|
getd3TimeRangeEvery(count: number): d3.TimeInterval;
|
|
|
|
get serieTimestampRange(): number | undefined;
|
|
|
|
getAxisTicksFormatter(axisOptions: AxisOption): (d: any, i: number) => any;
|
|
|
|
get timeInterval(): number;
|
|
|
|
get xTickTransform(): string;
|
|
|
|
get extraMargin(): Margin;
|
|
|
|
get width(): number;
|
|
|
|
get height(): number;
|
|
|
|
get legendRowPositionY(): number;
|
|
|
|
get margin(): Margin;
|
|
|
|
formattedBound(alias: string, target: string): string;
|
|
|
|
protected clearState(): void;
|
|
|
|
protected getSerieColor(idx: number): string;
|
|
|
|
protected get seriesTargetsWithBounds(): any[];
|
|
|
|
protected get visibleSeries(): any[];
|
|
|
|
protected get rectClipId(): string;
|
|
|
|
isOutOfChart(): boolean;
|
|
|
|
}
|
|
|
|
export { ChartwerkPod, VueChartwerkPodMixin, Margin, TimeSerie, Options, TickOrientation, TimeFormat, BrushOrientation, PanOrientation, AxisFormat, yAxisOrientation, CrosshairOrientation, ScrollPanOrientation, ScrollPanDirection, KeyEvent, palette };
|