rm dist

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .vscode
+dist

dist/VueChartwerkPodMixin.d.ts

@@ -1,48 +0,0 @@
-declare const _default: {
-    props: {
-        id: {
-            type: StringConstructor;
-            required: boolean;
-        };
-        series: {
-            type: ArrayConstructor;
-            required: boolean;
-            default: () => any[];
-        };
-        options: {
-            type: ObjectConstructor;
-            required: boolean;
-            default: () => {};
-        };
-    };
-    watch: {
-        id(): void;
-        series(): void;
-        options(): void;
-    };
-    mounted(): void;
-    destroyed(): void;
-    methods: {
-        render(): void;
-        renderSharedCrosshair(values: {
-            x?: number;
-            y?: number;
-        }): void;
-        hideSharedCrosshair(): void;
-        onPanningRescale(event: any): void;
-        renderChart(): void;
-        appendEvents(): void;
-        zoomIn(range: any): void;
-        zoomOut(centers: any): void;
-        mouseMove(evt: any): void;
-        mouseOut(): void;
-        onLegendClick(idx: any): void;
-        panningEnd(range: any): void;
-        panning(range: any): void;
-        contextMenu(evt: any): void;
-        sharedCrosshairMove(event: any): void;
-        renderStart(): void;
-        renderEnd(): void;
-    };
-};
-export default _default;

dist/colors.d.ts

@@ -1 +0,0 @@
-export declare const palette: string[];

dist/components/grid.d.ts

@@ -1,14 +0,0 @@
-import { GridOptions, SvgElParams } from '../types';
-import * as d3 from 'd3';
-export declare class Grid {
-    private _d3;
-    private _svgEl;
-    private _svgElParams;
-    protected gridOptions: GridOptions;
-    constructor(_d3: typeof d3, _svgEl: d3.Selection<SVGElement, unknown, null, undefined>, _svgElParams: SvgElParams, _gridOptions: GridOptions);
-    protected setOptionDefaults(gridOptions: GridOptions): GridOptions;
-    render(): void;
-    renderGridLinesX(): void;
-    renderGridLinesY(): void;
-    updateStylesOfTicks(): void;
-}

dist/index.d.ts

@@ -1,112 +0,0 @@
-/// <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 };

dist/state.d.ts

@@ -1,55 +0,0 @@
-import { TimeSerie, Options, yAxisOrientation } from './types';
-import * as d3 from 'd3';
-export declare class PodState<T extends TimeSerie, O extends Options> {
-    protected _d3: typeof d3;
-    protected boxParams: {
-        height: number;
-        width: number;
-    };
-    protected series: T[];
-    protected options: O;
-    private _xValueRange;
-    private _yValueRange;
-    private _y1ValueRange;
-    private _transform;
-    private _xScale;
-    private _yScale;
-    private _y1Scale;
-    constructor(_d3: typeof d3, boxParams: {
-        height: number;
-        width: number;
-    }, series: T[], options: O);
-    protected setInitialRanges(): void;
-    protected initScales(): void;
-    protected setYScale(): void;
-    protected setXScale(): void;
-    protected setY1Scale(): void;
-    clearState(): void;
-    get yScale(): d3.ScaleLinear<number, number>;
-    get xScale(): d3.ScaleLinear<number, number>;
-    get y1Scale(): d3.ScaleLinear<number, number>;
-    get xValueRange(): [number, number] | undefined;
-    get yValueRange(): [number, number] | undefined;
-    get y1ValueRange(): [number, number] | undefined;
-    get transform(): {
-        x?: number;
-        y?: number;
-        k?: number | string;
-    };
-    set xValueRange(range: [number, number]);
-    set yValueRange(range: [number, number]);
-    set y1ValueRange(range: [number, number]);
-    set transform(transform: {
-        x?: number;
-        y?: number;
-        k?: number | string;
-    });
-    getMinValueY(): number;
-    getMaxValueY(): number;
-    getMinValueX(): number;
-    getMaxValueX(): number;
-    getMinValueY1(): number;
-    getMaxValueY1(): number;
-    get isSeriesUnavailable(): boolean;
-    protected filterSerieByYAxisOrientation(serie: T, orientation: yAxisOrientation): boolean;
-}

dist/types.d.ts

@@ -1,194 +0,0 @@
-export declare type Margin = {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-};
-export declare type Timestamp = number;
-export declare type TimeSerie = {
-    target: string;
-    datapoints: [Timestamp, number][];
-    alias?: string;
-    visible?: boolean;
-    color?: string;
-    yOrientation?: yAxisOrientation;
-};
-export declare 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;
-        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?: {
-                isActive: boolean;
-                keyEvent?: KeyEvent;
-                orientation?: BrushOrientation;
-            };
-            pan?: {
-                isActive: boolean;
-                keyEvent?: KeyEvent;
-                orientation?: PanOrientation;
-            };
-            doubleClick?: {
-                isActive: boolean;
-                keyEvent?: KeyEvent;
-            };
-        };
-        scroll?: {
-            zoom?: {
-                isActive: boolean;
-                keyEvent?: KeyEvent;
-                orientation?: PanOrientation;
-            };
-            pan?: {
-                isActive: boolean;
-                keyEvent?: KeyEvent;
-                panStep?: number;
-                orientation?: ScrollPanOrientation;
-                direction?: ScrollPanDirection;
-            };
-        };
-    };
-    renderTicksfromTimestamps?: boolean;
-    renderLegend?: boolean;
-};
-export declare type GridOptions = {
-    x?: {
-        enabled?: boolean;
-        ticksCount?: number;
-    };
-    y?: {
-        enabled?: boolean;
-        ticksCount?: number;
-    };
-};
-export declare 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 declare type AxisRange = [number, number] | undefined;
-export declare type VueOptions = Omit<Options, 'eventsCallbacks'>;
-export declare enum TickOrientation {
-    VERTICAL = "vertical",
-    HORIZONTAL = "horizontal",
-    DIAGONAL = "diagonal"
-}
-export declare enum TimeFormat {
-    SECOND = "second",
-    MINUTE = "minute",
-    HOUR = "hour",
-    DAY = "day",
-    MONTH = "month",
-    YEAR = "year"
-}
-export declare enum BrushOrientation {
-    VERTICAL = "vertical",
-    HORIZONTAL = "horizontal",
-    RECTANGLE = "rectangle",
-    SQUARE = "square"
-}
-export declare enum PanOrientation {
-    VERTICAL = "vertical",
-    HORIZONTAL = "horizontal",
-    BOTH = "both"
-}
-export declare enum ScrollPanOrientation {
-    VERTICAL = "vertical",
-    HORIZONTAL = "horizontal"
-}
-export declare enum ScrollPanDirection {
-    FORWARD = "forward",
-    BACKWARD = "backward",
-    BOTH = "both"
-}
-export declare enum AxisFormat {
-    TIME = "time",
-    NUMERIC = "numeric",
-    STRING = "string",
-    CUSTOM = "custom"
-}
-export declare enum CrosshairOrientation {
-    VERTICAL = "vertical",
-    HORIZONTAL = "horizontal",
-    BOTH = "both"
-}
-export declare type SvgElementAttributes = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
-export declare enum KeyEvent {
-    MAIN = "main",
-    SHIFT = "shift"
-}
-export declare enum xAxisOrientation {
-    TOP = "top",
-    BOTTOM = "bottom",
-    BOTH = "both"
-}
-export declare enum yAxisOrientation {
-    LEFT = "left",
-    RIGHT = "right",
-    BOTH = "both"
-}
-export declare type SvgElParams = {
-    height: number;
-    width: number;
-    xScale: d3.ScaleLinear<number, number>;
-    yScale: d3.ScaleLinear<number, number>;
-};

dist/utils.d.ts

@@ -1 +0,0 @@
-export declare function uid(): string;

src/index.ts

@@ -20,12 +20,10 @@ import {
   ScrollPanOrientation,
   ScrollPanDirection,
   AxisOption,
-  SvgElParams,
 } from './types';
 import { uid } from './utils';
 import { palette } from './colors';
 
-// we import only d3 types here
 import * as d3 from 'd3';
 
 import defaultsDeep from 'lodash/defaultsDeep';
@@ -44,7 +42,6 @@ const DEFAULT_MARGIN: Margin = { top: 30, right: 20, bottom: 20, left: 30 };
 const DEFAULT_TICK_COUNT = 4;
 const DEFAULT_TICK_SIZE = 2;
 const MILISECONDS_IN_MINUTE = 60 * 1000;
-const DEFAULT_AXIS_RANGE = [0, 1];
 const DEFAULT_SCROLL_PAN_STEP = 50;
 const DEFAULT_OPTIONS: Options = {
   confidence: 0,
@@ -147,8 +144,6 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
   protected grid: Grid;
 
   constructor(
-    // maybe it's not the best idea
-    _d3: typeof d3,
     protected readonly el: HTMLElement,
     _series: T[] = [],
     _options: O
@@ -160,9 +155,8 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     defaultsDeep(options, DEFAULT_OPTIONS);
     this.options = options;
     this.series = cloneDeep(_series);
-    this.d3 = _d3;
 
-    this.d3Node = this.d3.select(this.el);
+    this.d3Node = d3.select(this.el);
     this.addEventListeners();
 
     this.createSvg();
@@ -315,7 +309,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
       .attr('id', 'x-axis-container')
       .style('pointer-events', 'none')
       .call(
-        this.d3.axisBottom(this.xScale)
+        d3.axisBottom(this.xScale)
           .ticks(this.options.axis.x.ticksCount)
           .tickSize(DEFAULT_TICK_SIZE)
           .tickFormat(this.getAxisTicksFormatter(this.options.axis.x))
@@ -336,7 +330,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
       .style('pointer-events', 'none')
       // TODO: number of ticks shouldn't be hardcoded
       .call(
-        this.d3.axisLeft(this.yScale)
+        d3.axisLeft(this.yScale)
           .ticks(this.options.axis.y.ticksCount)
           .tickSize(DEFAULT_TICK_SIZE)
           .tickFormat(this.getAxisTicksFormatter(this.options.axis.y))
@@ -346,7 +340,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
       if(ticks === undefined || ticks[index] === undefined) {
         return;
       }
-      this.d3.select(ticks[index]).attr('color', color);
+      d3.select(ticks[index]).attr('color', color);
     });
   }
 
@@ -362,7 +356,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
       .style('pointer-events', 'none')
       // TODO: number of ticks shouldn't be hardcoded
       .call(
-        this.d3.axisRight(this.y1Scale)
+        d3.axisRight(this.y1Scale)
           .ticks(DEFAULT_TICK_COUNT)
           .tickSize(DEFAULT_TICK_SIZE)
           .tickFormat(this.getAxisTicksFormatter(this.options.axis.y1))
@@ -432,17 +426,17 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     }
     switch(this.options.zoomEvents.mouse.zoom.orientation) {
       case BrushOrientation.VERTICAL:
-        this.brush = this.d3.brushY();
+        this.brush = d3.brushY();
         break;
       case BrushOrientation.HORIZONTAL:
-        this.brush = this.d3.brushX();
+        this.brush = d3.brushX();
         break;
       case BrushOrientation.SQUARE:
       case BrushOrientation.RECTANGLE:
-        this.brush = this.d3.brush();
+        this.brush = d3.brush();
         break;
       default:
-        this.brush = this.d3.brushX();
+        this.brush = d3.brushX();
     }
     const keyEvent = this.options.zoomEvents.mouse.zoom.keyEvent;
     this.brush.extent([
@@ -463,9 +457,9 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     // TODO: refactor
     switch(key) {
       case KeyEvent.MAIN:
-        return () => !this.d3.event.shiftKey;
+        return () => !d3.event.shiftKey;
       case KeyEvent.SHIFT:
-        return () => this.d3.event.shiftKey;
+        return () => d3.event.shiftKey;
       default:
         throw new Error(`Unknown type of KeyEvent: ${key}`);
     }
@@ -506,7 +500,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     if(this.options.axis.y1.isActive === true) {
       this.initScaleY1 = this.y1Scale.copy();
     }
-    this.pan = this.d3.zoom()
+    this.pan = d3.zoom()
       .on('zoom', this.onPanning.bind(this))
       .on('end', this.onPanningEnd.bind(this));
 
@@ -626,7 +620,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
   }
 
   protected onPanning(): void {
-    const event = this.d3.event;
+    const event = d3.event;
     if(event.sourceEvent === null || event.sourceEvent === undefined) {
       return;
     }
@@ -708,19 +702,19 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
   // TODO: refactor, divide between classes
   rescaleAxisX(transformX: number): void {
     this.state.transform = { x: transformX };
-    const rescaleX = this.d3.event.transform.rescaleX(this.initScaleX);
+    const rescaleX = d3.event.transform.rescaleX(this.initScaleX);
-    this.xAxisElement.call(this.d3.axisBottom(this.xScale).scale(rescaleX));
+    this.xAxisElement.call(d3.axisBottom(this.xScale).scale(rescaleX));
     this.state.xValueRange = [rescaleX.invert(0), rescaleX.invert(this.width)];
   }
 
   rescaleAxisY(transformY: number): void {
     this.state.transform = { y: transformY };
-    const rescaleY = this.d3.event.transform.rescaleY(this.initScaleY);
+    const rescaleY = d3.event.transform.rescaleY(this.initScaleY);
-    this.yAxisElement.call(this.d3.axisLeft(this.yScale).scale(rescaleY));
+    this.yAxisElement.call(d3.axisLeft(this.yScale).scale(rescaleY));
     this.state.yValueRange = [rescaleY.invert(0), rescaleY.invert(this.height)];
     if(this.y1AxisElement) {
-      const rescaleY1 = this.d3.event.transform.rescaleY(this.initScaleY1);
+      const rescaleY1 = d3.event.transform.rescaleY(this.initScaleY1);
-      this.y1AxisElement.call(this.d3.axisLeft(this.y1Scale).scale(rescaleY1));
+      this.y1AxisElement.call(d3.axisLeft(this.y1Scale).scale(rescaleY1));
       this.state.y1ValueRange = [rescaleY1.invert(0), rescaleY1.invert(this.height)];
       // TODO: y1 axis jumps on panning
       this.y1AxisElement.selectAll('line').attr('x2', 2);
@@ -778,7 +772,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
   }
 
   protected onBrush(): void {
-    const selection = this.d3.event.selection;
+    const selection = d3.event.selection;
     if(this.options.zoomEvents.mouse.zoom.orientation !== BrushOrientation.SQUARE || selection === null) {
       return;
     }
@@ -816,15 +810,15 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
   protected onBrushStart(): void {
     // TODO: move to state
     this.isBrushing === true;
-    const selection = this.d3.event.selection;
+    const selection = d3.event.selection;
     if(selection !== null && selection.length > 0) {
-      this.brushStartSelection = this.d3.event.selection[0];
+      this.brushStartSelection = d3.event.selection[0];
     }
     this.onMouseOut();
   }
 
   protected onBrushEnd(): void {
-    const extent = this.d3.event.selection;
+    const extent = d3.event.selection;
     this.isBrushing === false;
     if(extent === undefined || extent === null || extent.length < 2) {
       console.warn('Chartwerk Core: skip brush end (no extent)');
@@ -902,14 +896,14 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
   // TODO: move to State
   get absXScale(): d3.ScaleLinear<number, number> {
     const domain = [0, Math.abs(this.state.getMaxValueX() - this.state.getMinValueX())];
-    return this.d3.scaleLinear()
+    return d3.scaleLinear()
       .domain(domain)
       .range([0, this.width]);
   }
 
   get absYScale(): d3.ScaleLinear<number, number> {
     const domain = [0, Math.abs(this.state.getMaxValueY() - this.state.getMinValueY())];
-    return this.d3.scaleLinear()
+    return d3.scaleLinear()
       .domain(domain)
       .range([0, this.height]);
   }
@@ -928,23 +922,23 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
 
   getd3TimeRangeEvery(count: number): d3.TimeInterval {
     if(this.options.timeInterval === undefined || this.options.timeInterval.timeFormat === undefined) {
-      return this.d3.timeMinute.every(count);
+      return d3.timeMinute.every(count);
     }
     switch(this.options.timeInterval.timeFormat) {
       case TimeFormat.SECOND:
-        return this.d3.utcSecond.every(count);
+        return d3.utcSecond.every(count);
       case TimeFormat.MINUTE:
-        return this.d3.utcMinute.every(count);
+        return d3.utcMinute.every(count);
       case TimeFormat.HOUR:
-        return this.d3.utcHour.every(count);
+        return d3.utcHour.every(count);
       case TimeFormat.DAY:
-        return this.d3.utcDay.every(count);
+        return d3.utcDay.every(count);
       case TimeFormat.MONTH:
-        return this.d3.utcMonth.every(count);
+        return d3.utcMonth.every(count);
       case TimeFormat.YEAR:
-        return this.d3.utcYear.every(count);
+        return d3.utcYear.every(count);
       default:
-        return this.d3.utcMinute.every(count);
+        return d3.utcMinute.every(count);
     }
   }
 
@@ -965,7 +959,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     switch(axisOptions.format) {
       case AxisFormat.TIME:
         // TODO: customize time format?
-        return this.d3.timeFormat('%m/%d %H:%M');
+        return d3.timeFormat('%m/%d %H:%M');
       case AxisFormat.NUMERIC:
         return (d) => d;
       case AxisFormat.STRING:
@@ -1114,7 +1108,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
   }
 
   isOutOfChart(): boolean {
-    const event = this.d3.mouse(this.chartContainer.node());
+    const event = d3.mouse(this.chartContainer.node());
     const eventX = event[0];
     const eventY = event[1];
     if(