@tetacom/svg-charts 1.1.10 → 1.1.13

package/fesm2015/tetacom-svg-charts.mjs

@@ -2,14 +2,12 @@ import * as i0 from '@angular/core';
 import { Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, HostListener, ChangeDetectorRef, Directive, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { BehaviorSubject, Subject, map, shareReplay, filter, combineLatest, withLatestFrom, ReplaySubject, tap, takeWhile } from 'rxjs';
+import { BehaviorSubject, Subject, map, shareReplay, filter, combineLatest, withLatestFrom, ReplaySubject, animationFrameScheduler, tap, takeWhile } from 'rxjs';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
 import { maxIndex } from 'd3-array';
-import { throttleTime, tap as tap$1 } from 'rxjs/operators';
+import { throttleTime, debounceTime, tap as tap$1 } from 'rxjs/operators';
 import * as i3 from '@angular/platform-browser';
-import * as d3annotation from 'd3-svg-annotation';
-import { annotationBadge, annotationLabel, annotationCallout, annotationCalloutCircle, annotationCalloutCurve, annotationCalloutElbow, annotationCalloutRect, annotationCustomType, annotationXYThreshold } from 'd3-svg-annotation';
 
 var ZoomType;
 (function (ZoomType) {
@@ -54,7 +52,9 @@ const defaultChartConfig = () => ({
     xAxis: [],
     yAxis: [],
     series: [],
-    gridLines: true,
+    gridLines: {
+        enable: true
+    }
 });
 
 var ScaleType;
@@ -110,16 +110,21 @@ class ChartService {
     constructor() {
         this.config$ = new BehaviorSubject(defaultChartConfig());
         this.size$ = new BehaviorSubject(new DOMRectReadOnly());
-        this.pointerMove$ = new BehaviorSubject(null);
+        this.pointerMove$ = new Subject();
         this.tooltips$ = new BehaviorSubject(new Map());
         this.plotBandEvent$ = new Subject();
         this.plotLineMove$ = new Subject();
         this.pointMove$ = new Subject();
         this.chartClick$ = new Subject();
         this.chartContextMenu$ = new Subject();
+        this.annotationEvent$ = new Subject();
+        this.annotationMove$ = new Subject();
         this.config = this.config$
             .asObservable()
-            .pipe(map(this.setDefaults), map(this.setPreparationData), shareReplay(1));
+            .pipe(map(this.setDefaults), map(this.setPreparationData), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
         this.size = this.size$.asObservable();
         this.pointerMove = this.pointerMove$.asObservable();
         this.tooltips = this.tooltips$.asObservable();
@@ -128,6 +133,9 @@ class ChartService {
         this.pointMove = this.pointMove$.asObservable();
         this.chartClick = this.chartClick$.asObservable();
         this.chartContextMenu = this.chartContextMenu$.asObservable();
+        this.annotationClick = this.annotationEvent$.asObservable().pipe(filter((_) => { var _a; return ((_a = _ === null || _ === void 0 ? void 0 : _.event) === null || _a === void 0 ? void 0 : _a.type) === 'click'; }));
+        this.annotationContextMenu = this.annotationEvent$.asObservable().pipe(filter((_) => { var _a; return ((_a = _ === null || _ === void 0 ? void 0 : _.event) === null || _a === void 0 ? void 0 : _a.type) === 'contextmenu'; }));
+        this.annotationMove = this.annotationMove$.asObservable();
         this.plotBandClick = this.plotBandEvent$
             .asObservable()
             .pipe(filter((_) => { var _a; return ((_a = _ === null || _ === void 0 ? void 0 : _.event) === null || _a === void 0 ? void 0 : _a.type) === 'click'; }));
@@ -158,6 +166,12 @@ class ChartService {
     clearTooltips() {
         this.tooltips$.next(new Map());
     }
+    emitMoveAnnotation(event) {
+        this.annotationMove$.next(event);
+    }
+    emitAnnotation(event) {
+        this.annotationEvent$.next(event);
+    }
     emitPlotband(event) {
         this.plotBandEvent$.next(event);
     }
@@ -231,7 +245,10 @@ class ZoomService {
     constructor() {
         this.broadcastSubscription = [];
         this.zoomed$ = new BehaviorSubject(null);
-        this.zoomed = this.zoomed$.asObservable().pipe(shareReplay(1));
+        this.zoomed = this.zoomed$.asObservable().pipe(shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
     }
     setZoom(zoom) {
         this.zoomed$.next(zoom);
@@ -505,7 +522,10 @@ class ScaleService {
                 }
             }
             return map;
-        }), shareReplay(1));
+        }), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
         this.yScaleMap = combineLatest([
             this.chartService.size,
             this.chartService.config,
@@ -560,7 +580,10 @@ class ScaleService {
                 }
             }
             return map;
-        }), shareReplay(1));
+        }), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
     }
 }
 ScaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScaleService, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -607,10 +630,16 @@ class BroadcastService {
         this.brushEmitter.next(value);
     }
     subscribeToZoom(channel) {
-        return this.zoomEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel), shareReplay(1));
+        return this.zoomEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
     }
     subscribeToBrush(channel) {
-        return this.brushEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel), shareReplay(1));
+        return this.brushEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
     }
 }
 BroadcastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BroadcastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -623,59 +652,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class BrushService {
-    constructor(broadcastService) {
+    constructor(broadcastService, zone) {
         this.broadcastService = broadcastService;
+        this.zone = zone;
         this.brushMap = new Map()
             .set(BrushType.x, d3.brushX())
             .set(BrushType.y, d3.brushY());
     }
     applyBrush(svgElement, config, brushScale) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         (_a = this.broadcastSubscribtion) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        if ((_b = config.brush) === null || _b === void 0 ? void 0 : _b.enable) {
-            this.brush = this.brushMap.get((_d = (_c = config === null || config === void 0 ? void 0 : config.brush) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : BrushType.x);
+        (_b = this.brush) === null || _b === void 0 ? void 0 : _b.on('start brush end', null);
+        if ((_c = config.brush) === null || _c === void 0 ? void 0 : _c.enable) {
+            this.brush = this.brushMap.get((_e = (_d = config === null || config === void 0 ? void 0 : config.brush) === null || _d === void 0 ? void 0 : _d.type) !== null && _e !== void 0 ? _e : BrushType.x);
             const container = d3.select(svgElement.nativeElement);
             this.brush.on('start brush end', (_) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
                 if (_.sourceEvent) {
                     if (!_.selection)
                         return;
                     const [from, to] = _.selection;
-                    if (_.type === 'end' && _.sourceEvent instanceof MouseEvent) {
+                    if (to - from === 0) {
+                        const selection = (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map(brushScale)) !== null && _b !== void 0 ? _b : [(_c = config.brush) === null || _c === void 0 ? void 0 : _c.from, (_d = config.brush) === null || _d === void 0 ? void 0 : _d.to].map(brushScale);
+                        const halfBrushHeight = (selection[1] - selection[0]) / 2;
+                        const invertedSelection = [from - halfBrushHeight, to + halfBrushHeight].map(brushScale.invert);
+                        if (invertedSelection[1] - invertedSelection[0] > ((_e = config.brush) === null || _e === void 0 ? void 0 : _e.max)) {
+                            container.call(this.brush.move, [invertedSelection[0], invertedSelection[0] + ((_f = config.brush) === null || _f === void 0 ? void 0 : _f.max)].map(brushScale));
+                            return;
+                        }
+                        if (invertedSelection[1] - invertedSelection[0] < ((_g = config.brush) === null || _g === void 0 ? void 0 : _g.min)) {
+                            container.call(this.brush.move, [invertedSelection[0], invertedSelection[0] + ((_h = config.brush) === null || _h === void 0 ? void 0 : _h.min)].map(brushScale));
+                            return;
+                        }
+                        container.call(this.brush.move, [from - halfBrushHeight, to + halfBrushHeight]);
+                        return;
+                    }
+                    if (brushScale.invert(to) - brushScale.invert(from) > ((_j = config.brush) === null || _j === void 0 ? void 0 : _j.max)) {
+                        container.call(this.brush.move, this.selection ? [this.selection[0], this.selection[0] + ((_k = config.brush) === null || _k === void 0 ? void 0 : _k.max)].map(brushScale) : [(_l = config.brush) === null || _l === void 0 ? void 0 : _l.from, (_m = config.brush) === null || _m === void 0 ? void 0 : _m.to].map(brushScale));
+                        return;
+                    }
+                    if (brushScale.invert(to) - brushScale.invert(from) < ((_o = config.brush) === null || _o === void 0 ? void 0 : _o.min)) {
+                        container.call(this.brush.move, this.selection ? [this.selection[0], this.selection[0] + ((_p = config.brush) === null || _p === void 0 ? void 0 : _p.min)].map(brushScale) : [(_q = config.brush) === null || _q === void 0 ? void 0 : _q.from, (_r = config.brush) === null || _r === void 0 ? void 0 : _r.to].map(brushScale));
+                        return;
+                    }
+                    if (_.sourceEvent instanceof MouseEvent) {
                         this.selection = _.selection.map(brushScale.invert);
                     }
                     const brushMessage = new BrushMessage({
                         event: _,
                         selection: [brushScale.invert(from), brushScale.invert(to)],
-                        brushType: (_b = (_a = config === null || config === void 0 ? void 0 : config.brush) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : BrushType.x,
-                        brushScale,
+                        brushType: (_t = (_s = config === null || config === void 0 ? void 0 : config.brush) === null || _s === void 0 ? void 0 : _s.type) !== null && _t !== void 0 ? _t : BrushType.x,
+                        brushScale
                     });
                     this.broadcastService.broadcastBrush({
-                        channel: (_c = config === null || config === void 0 ? void 0 : config.zoom) === null || _c === void 0 ? void 0 : _c.syncChannel,
+                        channel: (_u = config === null || config === void 0 ? void 0 : config.zoom) === null || _u === void 0 ? void 0 : _u.syncChannel,
                         message: brushMessage,
                     });
                 }
             });
-            setTimeout(() => {
-                var _a, _b;
-                container.call(this.brush);
-                let domain = brushScale.domain();
-                if ((_a = config === null || config === void 0 ? void 0 : config.brush) === null || _a === void 0 ? void 0 : _a.from) {
-                    domain[0] = config.brush.from;
-                }
-                if ((_b = config === null || config === void 0 ? void 0 : config.brush) === null || _b === void 0 ? void 0 : _b.to) {
-                    domain[1] = config.brush.to;
-                }
-                container.call(this.brush.move, this.selection ? this.selection.map(brushScale) : domain.map(brushScale), {});
-            }, 0);
-            this.broadcastSubscribtion = this.broadcastService.subscribeToZoom((_e = config === null || config === void 0 ? void 0 : config.zoom) === null || _e === void 0 ? void 0 : _e.syncChannel).pipe(filter((m) => {
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    var _a, _b;
+                    container.call(this.brush);
+                    let domain = brushScale.domain();
+                    if ((_a = config === null || config === void 0 ? void 0 : config.brush) === null || _a === void 0 ? void 0 : _a.from) {
+                        domain[0] = config.brush.from;
+                    }
+                    if ((_b = config === null || config === void 0 ? void 0 : config.brush) === null || _b === void 0 ? void 0 : _b.to) {
+                        domain[1] = config.brush.to;
+                    }
+                    container.call(this.brush.move, this.selection ? this.selection.map(brushScale) : domain.map(brushScale), {});
+                }, 0);
+            });
+            this.broadcastSubscribtion = this.broadcastService.subscribeToZoom((_f = config === null || config === void 0 ? void 0 : config.zoom) === null || _f === void 0 ? void 0 : _f.syncChannel).pipe(filter((m) => {
                 return m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent;
-            }), throttleTime(50, undefined, { trailing: true }), tap((m) => {
+            }), throttleTime(0, animationFrameScheduler, { trailing: true }), tap((m) => {
+                var _a, _b, _c;
                 const { message: { brushDomain } } = m;
                 container.call(this.brush.move, [
                     brushScale(brushDomain[0]),
                     brushScale(brushDomain[1]),
                 ]);
+                if (m.message.event.type === 'end') {
+                    const brushMessage = new BrushMessage({
+                        event: null,
+                        selection: brushDomain,
+                        brushType: (_b = (_a = config === null || config === void 0 ? void 0 : config.brush) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : BrushType.x,
+                        brushScale,
+                    });
+                    this.broadcastService.broadcastBrush({
+                        channel: (_c = config === null || config === void 0 ? void 0 : config.zoom) === null || _c === void 0 ? void 0 : _c.syncChannel,
+                        message: brushMessage,
+                    });
+                }
                 this.selection = brushDomain;
             })).subscribe();
         }
@@ -684,14 +753,14 @@ class BrushService {
         this.selection = null;
     }
 }
-BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, deps: [{ token: BroadcastService }], target: i0.ɵɵFactoryTarget.Injectable });
+BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, deps: [{ token: BroadcastService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 BrushService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: BroadcastService }]; } });
+        }], ctorParameters: function () { return [{ type: BroadcastService }, { type: i0.NgZone }]; } });
 
 class TooltipComponent {
     constructor(svc, cdr, zoomService, sanitizer, _zone) {
@@ -711,7 +780,7 @@ class TooltipComponent {
             });
         }));
         this.position = this.svc.pointerMove.pipe(filter((event) => !!event), map((_) => {
-            return this.getPoisition(_);
+            return this.getPosition(_);
         }), tap(() => this.cdr.detectChanges()));
         const transformHtml = (html) => {
             return this.sanitizer.bypassSecurityTrustHtml(html);
@@ -739,7 +808,7 @@ class TooltipComponent {
             return formatted;
         }));
     }
-    getPoisition(event) {
+    getPosition(event) {
         const centerX = this.size.width / 2;
         const centerY = this.size.height / 2;
         const padding = { x: 10, y: 10 };
@@ -757,10 +826,10 @@ class TooltipComponent {
     }
 }
 TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, ngImport: i0, template: "<ng-container *ngIf=\"position | async as p\">\n\n  <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2 padding-2 border-radius-1\"\n       *ngIf=\"displayTooltips | async as tool\"\n       [style.position]=\"'fixed'\"\n       [style.opacity]=\"display | async\"\n       style=\"pointer-events: none; min-width: 200px;\"\n       [style.left]=\"p.left\"\n       [style.top]=\"p.top\"\n       [style.bottom]=\"p.bottom\"\n       [style.right]=\"p.right\"\n       [innerHTML]=\"tool\">\n  </div>\n</ng-container>\n\n", styles: [":host{position:absolute;z-index:2}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, ngImport: i0, template: "<ng-container *ngIf=\"position | async as p\">\n  <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2 padding-2 border-radius-1\"\n       *ngIf=\"displayTooltips | async as tool\"\n       [style.position]=\"'fixed'\"\n       [style.opacity]=\"display | async\"\n       style=\"pointer-events: none; min-width: 200px;\"\n       [style.left]=\"p.left\"\n       [style.top]=\"p.top\"\n       [style.bottom]=\"p.bottom\"\n       [style.right]=\"p.right\"\n       [innerHTML]=\"tool\">\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;z-index:2}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"position | async as p\">\n\n  <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2 padding-2 border-radius-1\"\n       *ngIf=\"displayTooltips | async as tool\"\n       [style.position]=\"'fixed'\"\n       [style.opacity]=\"display | async\"\n       style=\"pointer-events: none; min-width: 200px;\"\n       [style.left]=\"p.left\"\n       [style.top]=\"p.top\"\n       [style.bottom]=\"p.bottom\"\n       [style.right]=\"p.right\"\n       [innerHTML]=\"tool\">\n  </div>\n</ng-container>\n\n", styles: [":host{position:absolute;z-index:2}\n"] }]
+            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"position | async as p\">\n  <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2 padding-2 border-radius-1\"\n       *ngIf=\"displayTooltips | async as tool\"\n       [style.position]=\"'fixed'\"\n       [style.opacity]=\"display | async\"\n       style=\"pointer-events: none; min-width: 200px;\"\n       [style.left]=\"p.left\"\n       [style.top]=\"p.top\"\n       [style.bottom]=\"p.bottom\"\n       [style.right]=\"p.right\"\n       [innerHTML]=\"tool\">\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;z-index:2}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }]; }, propDecorators: { size: [{
                 type: Input
             }], config: [{
@@ -889,16 +958,18 @@ class GridlinesComponent {
     }
 }
 GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size", xScaleMap: "xScaleMap", yScaleMap: "yScaleMap" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let tick of tickYValues\">\n  <svg:line [attr.x1]=\"0\" stroke=\"red\"\n            [attr.y1]=\"yScaleMap.get(0)(tick)\"\n            [attr.x2]=\"size?.width\"\n            [attr.y2]=\"yScaleMap.get(0)(tick)\"></svg:line>\n</ng-container>\n\n<ng-container *ngFor=\"let tick of tickXValues\">\n  <svg:line [attr.x1]=\"xScaleMap.get(0)(tick)\"\n            stroke=\"red\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"xScaleMap.get(0)(tick)\"\n            [attr.y2]=\"size?.height\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size", xScaleMap: "xScaleMap", yScaleMap: "yScaleMap", config: "config" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"config.gridLines?.showY !== false\" >\n  <ng-container *ngFor=\"let tick of tickYValues\">\n    <svg:line [attr.x1]=\"0\" stroke=\"red\"\n              [attr.y1]=\"yScaleMap.get(0)(tick)\"\n              [attr.x2]=\"size?.width\"\n              [attr.y2]=\"yScaleMap.get(0)(tick)\"></svg:line>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"config.gridLines?.showX !== false\" >\n  <ng-container *ngFor=\"let tick of tickXValues\">\n    <svg:line [attr.x1]=\"xScaleMap.get(0)(tick)\"\n              stroke=\"red\"\n              [attr.y1]=\"0\"\n              [attr.x2]=\"xScaleMap.get(0)(tick)\"\n              [attr.y2]=\"size?.height\"></svg:line>\n  </ng-container>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let tick of tickYValues\">\n  <svg:line [attr.x1]=\"0\" stroke=\"red\"\n            [attr.y1]=\"yScaleMap.get(0)(tick)\"\n            [attr.x2]=\"size?.width\"\n            [attr.y2]=\"yScaleMap.get(0)(tick)\"></svg:line>\n</ng-container>\n\n<ng-container *ngFor=\"let tick of tickXValues\">\n  <svg:line [attr.x1]=\"xScaleMap.get(0)(tick)\"\n            stroke=\"red\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"xScaleMap.get(0)(tick)\"\n            [attr.y2]=\"size?.height\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"] }]
+            args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"config.gridLines?.showY !== false\" >\n  <ng-container *ngFor=\"let tick of tickYValues\">\n    <svg:line [attr.x1]=\"0\" stroke=\"red\"\n              [attr.y1]=\"yScaleMap.get(0)(tick)\"\n              [attr.x2]=\"size?.width\"\n              [attr.y2]=\"yScaleMap.get(0)(tick)\"></svg:line>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"config.gridLines?.showX !== false\" >\n  <ng-container *ngFor=\"let tick of tickXValues\">\n    <svg:line [attr.x1]=\"xScaleMap.get(0)(tick)\"\n              stroke=\"red\"\n              [attr.y1]=\"0\"\n              [attr.x2]=\"xScaleMap.get(0)(tick)\"\n              [attr.y2]=\"size?.height\"></svg:line>\n  </ng-container>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { size: [{
                 type: Input
             }], xScaleMap: [{
                 type: Input
             }], yScaleMap: [{
                 type: Input
+            }], config: [{
+                type: Input
             }] } });
 
 class PlotBandComponent {
@@ -934,7 +1005,7 @@ class PlotBandComponent {
         const grabElements = d3
             .select(this.element.nativeElement)
             .selectAll('.grabber');
-        const drag = d3
+        this.dragElements = d3
             .drag()
             .subject(() => {
             if (this.axis.orientation === AxisOrientation.x) {
@@ -943,7 +1014,8 @@ class PlotBandComponent {
             if (this.axis.orientation === AxisOrientation.y) {
                 return { y: plotbandElement.attr('y') };
             }
-        })
+        });
+        const drag = this.dragElements
             .on('start drag end', (event, d) => {
             let bandSize = parseFloat(plotbandElement.attr(this.axis.orientation === AxisOrientation.x ? 'width' : 'height'));
             d.from = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
@@ -955,8 +1027,9 @@ class PlotBandComponent {
             this.cdr.detectChanges();
         });
         let grabberKey;
-        const resize = d3
-            .drag()
+        this.resizeElements = d3
+            .drag();
+        const resize = this.resizeElements
             .on('start drag end', (event, d) => {
             requestAnimationFrame(() => {
                 var _a, _b, _c, _d;
@@ -1003,6 +1076,10 @@ class PlotBandComponent {
             grabElements.call(resize);
         }
     }
+    ngOnDestroy() {
+        this.dragElements.on('start drag end', null);
+        this.resizeElements.on('start drag end', null);
+    }
     get bandSize() {
         return Math.abs(this.scale(this.plotBand.to) - this.scale(this.plotBand.from));
     }
@@ -1064,7 +1141,7 @@ class PlotlineComponent {
         const grabElement = d3
             .select(this.element.nativeElement)
             .selectAll('.grabber');
-        const drag = d3
+        this.dragElements = d3
             .drag()
             .subject(() => {
             if (this.axis.orientation === AxisOrientation.y) {
@@ -1073,7 +1150,8 @@ class PlotlineComponent {
             if (this.axis.orientation === AxisOrientation.x) {
                 return { x: plotlineElement.attr('x1') };
             }
-        })
+        });
+        const drag = this.dragElements
             .on('start drag end', (event, d) => {
             d.value = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
             this.emit({
@@ -1088,6 +1166,9 @@ class PlotlineComponent {
             grabElement.call(drag);
         }
     }
+    ngOnDestroy() {
+        this.dragElements.on('start drag end', null);
+    }
     emit(event) {
         this.chartService.emitPlotline(event);
     }
@@ -1116,61 +1197,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }] } });
 
-class AnnotationComponent {
-    constructor() { }
-    ngOnInit() { }
-    ngAfterViewInit() {
-        this._node = d3.select(this.node.nativeElement);
-        this.drawAnnotations();
-    }
-    drawAnnotations() {
-        var _a;
-        if (!this.node)
-            return;
-        const annotations = (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.map((annotation) => {
-            var _a, _b, _c;
-            const x = this.xScaleMap.get(annotation.xAxisIndex);
-            const y = this.yScaleMap.get(annotation.yAxisIndex);
-            return {
-                note: annotation.note,
-                connector: annotation.connector,
-                x: x((_a = annotation.point) === null || _a === void 0 ? void 0 : _a.x),
-                y: y((_b = annotation.point) === null || _b === void 0 ? void 0 : _b.y),
-                dx: annotation.dx,
-                dy: annotation.dy,
-                type: (_c = annotation.type) !== null && _c !== void 0 ? _c : d3annotation.annotationLabel,
-                className: annotation.className,
-            };
-        });
-        this._makeAnnotations = d3annotation
-            .annotation()
-            .annotations(annotations !== null && annotations !== void 0 ? annotations : [])
-            .editMode(false);
-        this._node.call(this._makeAnnotations);
-    }
-    ngOnChanges(changes) {
-        if (changes.hasOwnProperty('xScaleMap') &&
-            changes.hasOwnProperty('yScaleMap')) {
-            this.drawAnnotations();
-        }
-    }
-}
-AnnotationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AnnotationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnnotationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AnnotationComponent, selector: "[teta-annotation]", inputs: { annotations: "annotations", xScaleMap: "xScaleMap", yScaleMap: "yScaleMap" }, viewQueries: [{ propertyName: "node", first: true, predicate: ["svg"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<svg:g #svg></svg:g>\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AnnotationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[teta-annotation]', template: "<svg:g #svg></svg:g>\n", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { annotations: [{
-                type: Input
-            }], xScaleMap: [{
-                type: Input
-            }], yScaleMap: [{
-                type: Input
-            }], node: [{
-                type: ViewChild,
-                args: ['svg']
-            }] } });
-
 class SeriesBaseComponent {
     constructor(svc, cdr, scaleService, zoomService, element) {
         this.svc = svc;
@@ -1179,6 +1205,12 @@ class SeriesBaseComponent {
         this.zoomService = zoomService;
         this.element = element;
     }
+    set config(config) {
+        this._config = config;
+    }
+    get config() {
+        return this._config;
+    }
     set series(series) {
         this._series = series;
     }
@@ -1189,7 +1221,7 @@ class SeriesBaseComponent {
     }
 }
 SeriesBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesBaseComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SeriesBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SeriesBaseComponent, selector: "ng-component", inputs: { config: "config", series: "series", size: "size", rect: "rect" }, ngImport: i0, template: '', isInline: true });
+SeriesBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SeriesBaseComponent, selector: "ng-component", inputs: { config: "config", series: "series" }, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesBaseComponent, decorators: [{
             type: Component,
             args: [{
@@ -1199,10 +1231,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }], series: [{
                 type: Input
-            }], size: [{
-                type: Input
-            }], rect: [{
-                type: Input
             }] } });
 
 var DragPointType;
@@ -1212,7 +1240,7 @@ var DragPointType;
     DragPointType[DragPointType["xy"] = 2] = "xy";
 })(DragPointType || (DragPointType = {}));
 
-class LineSeriesComponent extends SeriesBaseComponent {
+class LinearSeriesBase extends SeriesBaseComponent {
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -1246,6 +1274,14 @@ class LineSeriesComponent extends SeriesBaseComponent {
             return line(this.series.data);
         }));
     }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.markers) === null || _a === void 0 ? void 0 : _a.on('start drag end', null);
+        this.svc.setTooltip({
+            point: null,
+            series: this.series,
+        });
+    }
     ngAfterViewInit() {
         var _a;
         const drag = (node, event, d) => {
@@ -1267,13 +1303,13 @@ class LineSeriesComponent extends SeriesBaseComponent {
             });
             this.cdr.detectChanges();
         };
-        const dragMarkers = d3
+        this.markers = d3
             .drag()
             .subject(function (event, d) {
             const node = d3.select(this);
             return { x: node.attr('cx'), y: node.attr('cy') };
-        })
-            .on('start drag end', function (event, d) {
+        });
+        const dragMarkers = this.markers.on('start drag end', function (event, d) {
             const node = d3.select(this);
             drag(node, event, d);
         });
@@ -1378,6 +1414,25 @@ class LineSeriesComponent extends SeriesBaseComponent {
         }
     }
 }
+LinearSeriesBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LinearSeriesBase, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+LinearSeriesBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: LinearSeriesBase, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LinearSeriesBase, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
+
+class LineSeriesComponent extends LinearSeriesBase {
+    constructor(svc, cdr, scaleService, zoomService, element) {
+        super(svc, cdr, scaleService, zoomService, element);
+        this.svc = svc;
+        this.cdr = cdr;
+        this.scaleService = scaleService;
+        this.zoomService = zoomService;
+        this.element = element;
+    }
+}
 LineSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LineSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t.x !== undefined && t.y!== undefined\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n\n<ng-container *ngIf=\"getMarkers() as markers\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of markers\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LineSeriesComponent, decorators: [{
@@ -1481,7 +1536,7 @@ class BlockSeriesComponent extends SeriesBaseComponent {
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
-        const defaultVisiblePixels = 1;
+        const defaultVisiblePixels = 0;
         this.x = this.scaleService.xScaleMap.pipe(map((_) => _.get(this.series.xAxisIndex)));
         this.y = this.scaleService.yScaleMap.pipe(map((_) => _.get(this.series.yAxisIndex)));
         this.displayPoints = this.y.pipe(map((y) => {
@@ -1579,7 +1634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        *ngIf=\"!!config.inverted\"\n        [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"data.y(point.y1) - data.y(point.y)\"\n        [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:rect\n        *ngIf=\"!config.inverted\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"data.y(0)\"\n        [attr.height]=\"data.y(0) - data.y(point.y)\"\n        [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
-class AreaSeriesComponent extends SeriesBaseComponent {
+class AreaSeriesComponent extends LinearSeriesBase {
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -1592,15 +1647,14 @@ class AreaSeriesComponent extends SeriesBaseComponent {
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
-        this.transform = this.svc.pointerMove.pipe(withLatestFrom(this.scaleService.xScaleMap, this.scaleService.yScaleMap), map((data) => {
-            const [event, x, y] = data;
-            return this.getTransform(event, x, y);
-        }), tap(() => this.cdr.detectChanges()));
-        this.path = combineLatest([
+        super.ngOnInit();
+        this.areaPath = combineLatest([
             this.scaleService.xScaleMap,
             this.scaleService.yScaleMap,
-        ]).pipe(withLatestFrom(this.scaleService.xAxisMap, this.scaleService.yAxisMap), map((data) => {
-            const [[x, y], xAxisMap, yAxisMap] = data;
+        ]).pipe(map((data) => {
+            const [x, y] = data;
+            this.x = x.get(this.series.xAxisIndex);
+            this.y = y.get(this.series.yAxisIndex);
             this.x = x.get(this.series.xAxisIndex);
             this.y = y.get(this.series.yAxisIndex);
             const area = d3
@@ -1616,138 +1670,12 @@ class AreaSeriesComponent extends SeriesBaseComponent {
             return area(this.series.data);
         }));
     }
-    ngAfterViewInit() {
-        var _a;
-        const drag = (node, event, d) => {
-            var _a, _b, _c, _d;
-            if (((_a = d.marker) === null || _a === void 0 ? void 0 : _a.dragType) === DragPointType.x ||
-                ((_b = d.marker) === null || _b === void 0 ? void 0 : _b.dragType) === DragPointType.xy) {
-                d.x = this.x.invert(event.x);
-            }
-            if (((_c = d.marker) === null || _c === void 0 ? void 0 : _c.dragType) === DragPointType.y ||
-                ((_d = d.marker) === null || _d === void 0 ? void 0 : _d.dragType) === DragPointType.xy) {
-                d.y = this.y.invert(event.y);
-            }
-            this.svc.emitPoint({
-                target: {
-                    series: this.series,
-                    point: d,
-                },
-                event,
-            });
-            this.cdr.detectChanges();
-        };
-        const dragMarkers = d3
-            .drag()
-            .subject(function (event, d) {
-            const node = d3.select(this);
-            return { x: node.attr('cx'), y: node.attr('cy') };
-        })
-            .on('start drag end', function (event, d) {
-            const node = d3.select(this);
-            drag(node, event, d);
-        });
-        const draggableMarkers = (_a = this.series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => { var _a; return (_ === null || _ === void 0 ? void 0 : _.marker) && ((_a = _ === null || _ === void 0 ? void 0 : _.marker) === null || _a === void 0 ? void 0 : _a.draggable); });
-        const element = d3
-            .select(this.element.nativeElement)
-            .selectAll('.draggable-marker')
-            .data(draggableMarkers);
-        element.call(dragMarkers);
-        this.svgElement = d3
-            .select(this.element.nativeElement)
-            .select('.line')
-            .node();
-    }
-    getMarkers() {
-        var _a;
-        return (_a = this.series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => _ === null || _ === void 0 ? void 0 : _.marker);
-    }
-    getTransform(event, x, y) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const mouse = [event === null || event === void 0 ? void 0 : event.offsetX, event === null || event === void 0 ? void 0 : event.offsetY];
-        const foundX = x.get(this.series.xAxisIndex);
-        const foundY = y.get(this.series.yAxisIndex);
-        const tooltipTracking = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.tooltip) === null || _b === void 0 ? void 0 : _b.tracking;
-        const lineIntersection = (p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) => {
-            const rV = {};
-            let s1_x, s1_y, s2_x, s2_y;
-            s1_x = p1_x - p0_x;
-            s1_y = p1_y - p0_y;
-            s2_x = p3_x - p2_x;
-            s2_y = p3_y - p2_y;
-            let s, t;
-            s =
-                (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) /
-                    (-s2_x * s1_y + s1_x * s2_y);
-            t =
-                (s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) /
-                    (-s2_x * s1_y + s1_x * s2_y);
-            if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
-                // Collision detected
-                rV.x = p0_x + t * s1_x;
-                rV.y = p0_y + t * s1_y;
-            }
-            return rV;
-        };
-        if (tooltipTracking === TooltipTracking.x) {
-            const bisect = d3.bisector((_) => _.x).right;
-            const pointer = mouse[0];
-            const x0 = foundX.invert(pointer);
-            const filtered = this.series.data.filter((_) => _.y !== null && _.x !== null);
-            const rightId = bisect(filtered, x0);
-            const range = foundY.range();
-            const intersect = lineIntersection(pointer, range[0], pointer, range[1], foundX((_c = filtered[rightId - 1]) === null || _c === void 0 ? void 0 : _c.x), foundY((_d = filtered[rightId - 1]) === null || _d === void 0 ? void 0 : _d.y), foundX((_e = filtered[rightId]) === null || _e === void 0 ? void 0 : _e.x), foundY((_f = filtered[rightId]) === null || _f === void 0 ? void 0 : _f.y));
-            const x = foundX.invert(intersect.x);
-            const y = foundY.invert(intersect.y);
-            if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
-                this.svc.setTooltip({
-                    point: { x: foundX.invert(intersect.x), y: foundY.invert(intersect.y) },
-                    series: this.series,
-                });
-            }
-            else {
-                this.svc.setTooltip({
-                    point: null,
-                    series: this.series,
-                });
-            }
-            return {
-                x: intersect.x,
-                y: intersect.y,
-            };
-        }
-        if (tooltipTracking === TooltipTracking.y) {
-            const bisect = d3.bisector((_) => _.y).right;
-            const y0 = foundY.invert(mouse[1]);
-            const rightId = bisect(this.series.data, y0);
-            const range = foundX.range();
-            const intersect = lineIntersection(range[0], mouse[1], range[1], mouse[1], foundX((_g = this.series.data[rightId - 1]) === null || _g === void 0 ? void 0 : _g.x), foundY((_h = this.series.data[rightId - 1]) === null || _h === void 0 ? void 0 : _h.y), foundX((_j = this.series.data[rightId]) === null || _j === void 0 ? void 0 : _j.x), foundY((_k = this.series.data[rightId]) === null || _k === void 0 ? void 0 : _k.y));
-            const x = foundX.invert(intersect.x);
-            const y = foundY.invert(intersect.y);
-            if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
-                this.svc.setTooltip({
-                    point: { x: foundX.invert(intersect.x), y: foundY.invert(intersect.y) },
-                    series: this.series,
-                });
-            }
-            else {
-                this.svc.setTooltip({
-                    point: null,
-                    series: this.series,
-                });
-            }
-            return {
-                x: intersect.x,
-                y: intersect.y,
-            };
-        }
-    }
 }
 AreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AreaSeriesComponent, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style.fill ?? series.color\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t.x !== undefined && t.y!== undefined\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n\n<ng-container *ngIf=\"getMarkers() as markers\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of markers\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AreaSeriesComponent, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  *ngIf=\"series?.fillType === fillType.gradient\"\n  [attr.d]=\"areaPath | async\"\n  [attr.stroke-width]=\"0\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style.fill ?? series.color\">\n</svg:path>\n<svg:path\n  class=\"area\"\n  fill=\"none\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t.x !== undefined && t.y!== undefined\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"getMarkers() as markers\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of markers\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AreaSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style.fill ?? series.color\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t.x !== undefined && t.y!== undefined\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n\n<ng-container *ngIf=\"getMarkers() as markers\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of markers\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [""] }]
+            args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  *ngIf=\"series?.fillType === fillType.gradient\"\n  [attr.d]=\"areaPath | async\"\n  [attr.stroke-width]=\"0\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style.fill ?? series.color\">\n</svg:path>\n<svg:path\n  class=\"area\"\n  fill=\"none\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t.x !== undefined && t.y!== undefined\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"getMarkers() as markers\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of markers\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 const defaultSeriesTypeMapping = new Map()
@@ -1759,16 +1687,9 @@ const defaultSeriesTypeMapping = new Map()
     .set(SeriesType.blockArea, BlockAreaSeriesComponent);
 
 class SeriesHostComponent {
-    constructor(viewContainerRef, chartService) {
+    constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
-        this.chartService = chartService;
         this._init = false;
-        this.chartService.size
-            .pipe(tap(() => {
-            var _a;
-            (_a = this._componentRef) === null || _a === void 0 ? void 0 : _a.injector.get(ChangeDetectorRef).detectChanges();
-        }))
-            .subscribe();
     }
     ngOnInit() {
         if (!SeriesBaseComponent.isPrototypeOf(this.series.component)) {
@@ -1778,24 +1699,21 @@ class SeriesHostComponent {
         this._componentRef = this.viewContainerRef.createComponent(this.series.component);
         this._componentRef.instance.config = this.config;
         this._componentRef.instance.series = this.series;
-        this._componentRef.instance.size = this.size;
-        this._componentRef.instance.rect = this.rect;
         this._init = true;
     }
-    ngOnDestroy() { }
+    ngOnDestroy() {
+        this._componentRef.destroy();
+    }
     ngOnChanges(changes) {
-        if (this._init && changes.hasOwnProperty('series')) {
+        if (this._init && (changes.hasOwnProperty('series') || changes.hasOwnProperty('config'))) {
             this._componentRef.instance.config = this.config;
             this._componentRef.instance.series = this.series;
-            this._componentRef.instance.size = this.size;
-            this._componentRef.instance.rect = this.rect;
-            this._componentRef.injector.get(ChangeDetectorRef).markForCheck();
             this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
         }
     }
 }
-SeriesHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesHostComponent, deps: [{ token: i0.ViewContainerRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-SeriesHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: { config: "config", series: "series", size: "size", rect: "rect" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SeriesHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+SeriesHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: { config: "config", series: "series" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesHostComponent, decorators: [{
             type: Component,
             args: [{
@@ -1803,23 +1721,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: ChartService }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { config: [{
                 type: Input
             }], series: [{
                 type: Input
-            }], size: [{
-                type: Input
-            }], rect: [{
+            }] } });
+
+class AnnotationComponent {
+    constructor(scaleService, cdr, chartService) {
+        this.scaleService = scaleService;
+        this.cdr = cdr;
+        this.chartService = chartService;
+        this.x = this.scaleService.xScaleMap.pipe(map((_) => { var _a; return _.get((_a = this.annotation.xAxisIndex) !== null && _a !== void 0 ? _a : 0); }));
+        this.y = this.scaleService.yScaleMap.pipe(map((_) => { var _a; return _.get((_a = this.annotation.yAxisIndex) !== null && _a !== void 0 ? _a : 0); }));
+        this.drag = d3.drag();
+    }
+    set annotation(annotation) {
+        this._annotation = annotation;
+    }
+    get annotation() {
+        return this._annotation;
+    }
+    set node(node) {
+        this._node = node;
+        this.init();
+        this.cdr.detectChanges();
+    }
+    get node() {
+        return this._node;
+    }
+    click(event) {
+        this.chartService.emitAnnotation({
+            event,
+            target: this.annotation
+        });
+    }
+    contextMenu(event) {
+        this.chartService.emitAnnotation({
+            event,
+            target: this.annotation
+        });
+    }
+    ngOnDestroy() {
+        this.drag.on('drag end', null);
+    }
+    init() {
+        d3.select(this.node.nativeElement).datum(this.annotation);
+        if (this.annotation.draggable) {
+            this.drag.on('drag end', (event, d) => {
+                d.dx += event.dx;
+                d.dy += event.dy;
+                this.cdr.detectChanges();
+                this.chartService.emitMoveAnnotation({
+                    event,
+                    target: d
+                });
+            });
+            d3.select(this.node.nativeElement).call(this.drag);
+        }
+    }
+}
+AnnotationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AnnotationComponent, deps: [{ token: ScaleService }, { token: i0.ChangeDetectorRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
+AnnotationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AnnotationComponent, selector: "[teta-annotation]", inputs: { annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <svg:circle\n    [attr.r]=\"annotation.style?.radius ?? 5\"\n    [attr.cx]=\"data.x(annotation.point.x)\"\n    [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n    [attr.cy]=\"data.y(annotation.point.y)\">\n  </svg:circle>\n  <svg:line\n    [attr.x1]=\"data.x(annotation.point.x)\"\n    [attr.y1]=\"data.y(annotation.point.y)\"\n    [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n    [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n    [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n    [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n    [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n  >\n  </svg:line>\n  <svg:foreignObject\n    class=\"position-absolute\"\n    [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n    [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n    [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n    [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n    <div\n      #annotationNode\n      [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n      [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n      class=\"color-text-10 padding-h-2\"\n      style=\"border-radius: 2px; display: inline-block;\">\n      <ng-container *ngIf=\"annotation.template;else default\">\n        <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n      </ng-container>\n    </div>\n  </svg:foreignObject>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AnnotationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[teta-annotation]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <svg:circle\n    [attr.r]=\"annotation.style?.radius ?? 5\"\n    [attr.cx]=\"data.x(annotation.point.x)\"\n    [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n    [attr.cy]=\"data.y(annotation.point.y)\">\n  </svg:circle>\n  <svg:line\n    [attr.x1]=\"data.x(annotation.point.x)\"\n    [attr.y1]=\"data.y(annotation.point.y)\"\n    [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n    [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n    [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n    [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n    [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n  >\n  </svg:line>\n  <svg:foreignObject\n    class=\"position-absolute\"\n    [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n    [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n    [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n    [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n    <div\n      #annotationNode\n      [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n      [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n      class=\"color-text-10 padding-h-2\"\n      style=\"border-radius: 2px; display: inline-block;\">\n      <ng-container *ngIf=\"annotation.template;else default\">\n        <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n      </ng-container>\n    </div>\n  </svg:foreignObject>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: ScaleService }, { type: i0.ChangeDetectorRef }, { type: ChartService }]; }, propDecorators: { annotation: [{
                 type: Input
+            }], node: [{
+                type: ViewChild,
+                args: ['annotationNode', { static: false }]
+            }], click: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], contextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
             }] } });
 
 class ZoomableDirective {
-    constructor(elementRef, zoomService, broadcastService) {
+    constructor(elementRef, zoomService, broadcastService, zone) {
         this.elementRef = elementRef;
         this.zoomService = zoomService;
         this.broadcastService = broadcastService;
+        this.zone = zone;
         this.zoomable = false;
         this.alive = true;
+        this.currentTransform = zoomIdentity;
+        this.zoomed = (event) => {
+            var _a, _b, _c;
+            if (event.sourceEvent) {
+                if (Object.keys(event.sourceEvent).length !== 0) {
+                    if (this.currentTransform === event.transform && event.type !== 'end') {
+                        return;
+                    }
+                    const origin = this.brushScale.copy().domain(this.zoomAxis.extremes);
+                    let domain = ((_a = this.config.zoom) === null || _a === void 0 ? void 0 : _a.type) === ZoomType.y ?
+                        event.transform.rescaleY(origin).domain() :
+                        event.transform.rescaleX(origin).domain();
+                    const message = new ZoomMessage({
+                        event,
+                        axis: this.zoomAxis,
+                        brushDomain: domain
+                    });
+                    this.broadcastService.broadcastZoom({
+                        channel: (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.zoom) === null || _c === void 0 ? void 0 : _c.syncChannel,
+                        message,
+                    });
+                }
+                this.zoomService.setZoom({
+                    event,
+                    target: this.zoomAxis
+                });
+                this.currentTransform = event.transform;
+            }
+        };
     }
     ngOnInit() {
         var _a, _b, _c, _d;
@@ -1828,47 +1844,30 @@ class ZoomableDirective {
         }
     }
     ngAfterViewInit() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const enable = ((_b = (_a = this.axis) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.zoom) || ((_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.zoom) === null || _d === void 0 ? void 0 : _d.enable);
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        const enable = ((_b = (_a = this.axis) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.zoom) && ((_c = this.axis) === null || _c === void 0 ? void 0 : _c.options.visible) || ((_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.zoom) === null || _e === void 0 ? void 0 : _e.enable);
         if (!enable) {
             return;
         }
         this._element = d3.select(this.elementRef.nativeElement);
         this.zoom = d3
             .zoom()
-            .scaleExtent([0, Infinity])
             .extent([
             [0, 0],
             [this.size.width, this.size.height],
         ]);
-        const commonZoomAxis = Axis.createAxis(((_e = this.config) === null || _e === void 0 ? void 0 : _e.zoom.type) === ZoomType.x ? AxisOrientation.x : AxisOrientation.y, this.config, 0, true);
-        this.zoomAxis = (_f = this.axis) !== null && _f !== void 0 ? _f : commonZoomAxis;
-        const zoomed = (event) => {
-            var _a, _b, _c;
-            if (enable) {
-                if (event.sourceEvent) {
-                    this.zoomService.setZoom({
-                        event,
-                        target: this.zoomAxis
-                    });
-                    const message = new ZoomMessage({
-                        event,
-                        axis: this.zoomAxis,
-                        brushDomain: ((_a = this.config.brush) === null || _a === void 0 ? void 0 : _a.type) === BrushType.x
-                            ? this.brushScale.domain()
-                            : this.brushScale.domain(),
-                    });
-                    this.broadcastService.broadcastZoom({
-                        channel: (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.zoom) === null || _c === void 0 ? void 0 : _c.syncChannel,
-                        message,
-                    });
-                }
-            }
-        };
-        this.zoom.on('start zoom end', zoomed);
-        this._element.call(this.zoom);
+        const commonZoomAxis = Axis.createAxis(((_f = this.config) === null || _f === void 0 ? void 0 : _f.zoom.type) === ZoomType.x ? AxisOrientation.x : AxisOrientation.y, this.config, 0, true);
+        this.zoomAxis = (_g = this.axis) !== null && _g !== void 0 ? _g : commonZoomAxis;
+        if (enable) {
+            const maxZoom = ((_h = this.config.zoom) === null || _h === void 0 ? void 0 : _h.max) ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / ((_j = this.config.zoom) === null || _j === void 0 ? void 0 : _j.max) : 0;
+            const minZoom = ((_k = this.config.zoom) === null || _k === void 0 ? void 0 : _k.min) ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / ((_l = this.config.zoom) === null || _l === void 0 ? void 0 : _l.min) : Infinity;
+            this.zoom.scaleExtent([maxZoom, minZoom]);
+            console.log(this.zoom.scaleExtent());
+            this.zoom.on('start zoom end', this.zoomed);
+            this._element.call(this.zoom);
+        }
         // Subscribe to zoom events
-        this.broadcastService.subscribeToZoom((_g = this.config) === null || _g === void 0 ? void 0 : _g.zoom.syncChannel).pipe(takeWhile((_) => this.alive), filter((m) => m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent), throttleTime(50, undefined, { trailing: true }), filter((m) => {
+        this.broadcastService.subscribeToZoom((_m = this.config) === null || _m === void 0 ? void 0 : _m.zoom.syncChannel).pipe(filter((m) => m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent), debounceTime(30), filter((m) => {
             var _a, _b, _c, _d;
             return this.zoomAxis.index === ((_b = (_a = m.message) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.index) && this.zoomAxis.orientation === ((_d = (_c = m.message) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.orientation);
         }), tap$1((m) => {
@@ -1876,40 +1875,53 @@ class ZoomableDirective {
             if (currentTransform !== m.message.event.transform) {
                 this._element.call(this.zoom.transform, m.message.event.transform, null, {});
             }
-        })).subscribe();
+        }), takeWhile((_) => this.alive)).subscribe();
         // Subscribe to brush events x or y
-        if ((((_h = this.config.brush) === null || _h === void 0 ? void 0 : _h.type) === BrushType.x && this.zoomAxis.orientation === AxisOrientation.x) || (((_j = this.config.brush) === null || _j === void 0 ? void 0 : _j.type) === BrushType.y && this.zoomAxis.orientation === AxisOrientation.y)) {
-            this.broadcastService.subscribeToBrush((_k = this.config) === null || _k === void 0 ? void 0 : _k.zoom.syncChannel).pipe(takeWhile((_) => this.alive), throttleTime(50, undefined, { trailing: true }), filter((m) => Boolean(m.message.selection)), tap$1((m) => {
-                var _a, _b;
-                const s = m.message.selection;
-                this.brushScale.domain(m.message.brushScale.domain());
-                const domain = this.brushScale.domain();
-                const scale = (domain[1] - domain[0]) / (s[1] - s[0]);
-                let transform = zoomIdentity.scale(scale);
-                if (((_a = m.message) === null || _a === void 0 ? void 0 : _a.brushType) === BrushType.x) {
-                    transform = transform.translate(-this.brushScale(s[0]), 0);
-                }
-                if (((_b = m.message) === null || _b === void 0 ? void 0 : _b.brushType) === BrushType.y) {
-                    transform = transform.translate(0, -this.brushScale(s[0]));
+        if ((((_o = this.config.brush) === null || _o === void 0 ? void 0 : _o.type) === BrushType.x && this.zoomAxis.orientation === AxisOrientation.x) ||
+            (((_p = this.config.brush) === null || _p === void 0 ? void 0 : _p.type) === BrushType.y && this.zoomAxis.orientation === AxisOrientation.y)) {
+            this.broadcastService.subscribeToBrush((_q = this.config) === null || _q === void 0 ? void 0 : _q.zoom.syncChannel).pipe(debounceTime(30), filter((m) => Boolean(m.message.selection)), tap$1((m) => {
+                const currentTransform = d3.zoomTransform(this.elementRef.nativeElement);
+                if (!m.message.event && this.currentSelection && currentTransform.k !== 1) {
+                    return;
                 }
-                this._element.call(this.zoom.transform, transform, null, {});
-            })).subscribe();
+                this.currentSelection = m.message.selection;
+                this.zone.runOutsideAngular(() => {
+                    setTimeout(() => {
+                        this.updateZoom(m);
+                    }, 100);
+                });
+            }), takeWhile((_) => this.alive)).subscribe();
         }
     }
-    ngOnChanges(changes) {
-    }
     ngOnDestroy() {
+        var _a;
+        (_a = this.zoom) === null || _a === void 0 ? void 0 : _a.on('start zoom end', null);
         this.alive = false;
     }
+    updateZoom(m) {
+        var _a, _b;
+        const s = m.message.selection;
+        this.brushScale.domain(this.zoomAxis.extremes);
+        const domain = this.brushScale.domain();
+        const scale = (domain[1] - domain[0]) / (s[1] - s[0]);
+        let transform = zoomIdentity.scale(scale);
+        if (((_a = m.message) === null || _a === void 0 ? void 0 : _a.brushType) === BrushType.x) {
+            transform = transform.translate(-this.brushScale(s[0]), 0);
+        }
+        if (((_b = m.message) === null || _b === void 0 ? void 0 : _b.brushType) === BrushType.y) {
+            transform = transform.translate(0, -this.brushScale(s[0]));
+        }
+        this._element.transition().duration(150).call(this.zoom.transform, transform, null, {});
+    }
 }
-ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: BroadcastService }], target: i0.ɵɵFactoryTarget.Directive });
-ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size", brushScale: "brushScale" }, host: { properties: { "class.zoomable": "this.zoomable" } }, usesOnChanges: true, ngImport: i0 });
+ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: BroadcastService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size", brushScale: "brushScale" }, host: { properties: { "class.zoomable": "this.zoomable" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaZoomable]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: BroadcastService }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: BroadcastService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
                 type: Input
             }], axis: [{
                 type: Input
@@ -1929,7 +1941,8 @@ class BrushableDirective {
         this.element = element;
     }
     ngOnInit() { }
-    ngAfterViewInit() { }
+    ngAfterViewInit() {
+    }
     ngOnChanges(changes) {
         if (changes.hasOwnProperty('config')) {
             this.brushService.clearPreviousSelection();
@@ -1980,7 +1993,10 @@ class ChartContainerComponent {
             return ((_a = config.brush) === null || _a === void 0 ? void 0 : _a.type) === BrushType.x
                 ? x.get(0)
                 : y.get(0);
-        }), shareReplay(1));
+        }), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
         this.visibleRect = combineLatest([
             this.size,
             this.xAxisMap,
@@ -2027,7 +2043,8 @@ class ChartContainerComponent {
         });
         this._observer.observe(this._elementRef.nativeElement);
     }
-    ngAfterViewInit() {
+    ngOnDestroy() {
+        this._observer.disconnect();
     }
     getTranslate(axis, size) {
         return combineLatest([this.xAxisMap, this.yAxisMap]).pipe(map((data) => {
@@ -2099,10 +2116,10 @@ class ChartContainerComponent {
     }
 }
 ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  xAxisMap: xAxisMap | async,\n  yAxisMap: yAxisMap | async,\n  xScaleMap: xScaleMap | async,\n  yScaleMap: yScaleMap | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n\n  <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n    <g class=\"y-axis-container\">\n      <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue; trackBy: identify\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-y-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.yScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n            [attr.y]=\"0\"\n            [attr.height]=\"data.size.height\"\n            [attr.width]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n\n      </ng-container>\n    </g>\n    <g class=\"x-axis-container\">\n      <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue; trackBy: identify\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-x-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.xScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"0\"\n            [attr.y]=\"0\"\n            [attr.width]=\"data.size.width\"\n            [attr.height]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n      </ng-container>\n    </g>\n  </svg>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      [size]=\"data.size\"\n      [brushScale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.transform]=\"'translate('+ data.visibleRect.x +', '+ data.visibleRect.y +')'\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      (contextmenu)=\"contextMenu($event, data.xScaleMap, data.yScaleMap)\"\n      (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines !== false\"\n         [size]=\"data.size\"\n         [xScaleMap]=\"data.xScaleMap\"\n         [yScaleMap]=\"data.yScaleMap\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           [xScaleMap]=\"data.xScaleMap\"\n           [yScaleMap]=\"data.yScaleMap\"\n           [annotations]=\"data.config.annotations\"></g>\n      </g>\n      <g class=\"series-container\">\n        <g teta-series-host\n           *ngFor=\"let series of data.config.series\"\n           [config]=\"data.config\"\n           [series]=\"series\"\n           [size]=\"data.size\"></g>\n      </g>\n\n    </svg>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}\n"], components: [{ type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "scale", "size"] }, { type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "scale", "size"] }, { type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size", "xScaleMap", "yScaleMap"] }, { type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotations", "xScaleMap", "yScaleMap"] }, { type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series", "size", "rect"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale"] }, { type: BrushableDirective, selector: "svg:svg[tetaBrushable]", inputs: ["config", "size", "brushScale"] }], pipes: { "async": i4.AsyncPipe, "keyvalue": i4.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  xAxisMap: xAxisMap | async,\n  yAxisMap: yAxisMap | async,\n  xScaleMap: xScaleMap | async,\n  yScaleMap: yScaleMap | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n\n  <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n    <g class=\"y-axis-container\">\n      <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue;\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-y-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.yScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n            [attr.y]=\"0\"\n            [attr.height]=\"data.size.height\"\n            [attr.width]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n\n      </ng-container>\n    </g>\n    <g class=\"x-axis-container\">\n      <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue;\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-x-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.xScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"0\"\n            [attr.y]=\"0\"\n            [attr.width]=\"data.size.width\"\n            [attr.height]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n      </ng-container>\n    </g>\n  </svg>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      [size]=\"data.size\"\n      [brushScale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.transform]=\"'translate('+ data.visibleRect.x +', '+ data.visibleRect.y +')'\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      (contextmenu)=\"contextMenu($event, data.xScaleMap, data.yScaleMap)\"\n      (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"\n         [config]=\"data.config\"\n         [xScaleMap]=\"data.xScaleMap\"\n         [yScaleMap]=\"data.yScaleMap\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <g teta-series-host\n           *ngFor=\"let series of data.config.series\"\n           [config]=\"data.config\"\n           [series]=\"series\"></g>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n            *ngFor=\"let annotation of data.config.annotations\"\n            [annotation]=\"annotation\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}\n"], components: [{ type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "scale", "size"] }, { type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "scale", "size"] }, { type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size", "xScaleMap", "yScaleMap", "config"] }, { type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotation"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale"] }, { type: BrushableDirective, selector: "svg:svg[tetaBrushable]", inputs: ["config", "size", "brushScale"] }], pipes: { "async": i4.AsyncPipe, "keyvalue": i4.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  xAxisMap: xAxisMap | async,\n  yAxisMap: yAxisMap | async,\n  xScaleMap: xScaleMap | async,\n  yScaleMap: yScaleMap | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n\n  <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n    <g class=\"y-axis-container\">\n      <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue; trackBy: identify\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-y-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.yScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n            [attr.y]=\"0\"\n            [attr.height]=\"data.size.height\"\n            [attr.width]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n\n      </ng-container>\n    </g>\n    <g class=\"x-axis-container\">\n      <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue; trackBy: identify\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-x-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.xScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"0\"\n            [attr.y]=\"0\"\n            [attr.width]=\"data.size.width\"\n            [attr.height]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n      </ng-container>\n    </g>\n  </svg>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      [size]=\"data.size\"\n      [brushScale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.transform]=\"'translate('+ data.visibleRect.x +', '+ data.visibleRect.y +')'\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      (contextmenu)=\"contextMenu($event, data.xScaleMap, data.yScaleMap)\"\n      (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines !== false\"\n         [size]=\"data.size\"\n         [xScaleMap]=\"data.xScaleMap\"\n         [yScaleMap]=\"data.yScaleMap\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           [xScaleMap]=\"data.xScaleMap\"\n           [yScaleMap]=\"data.yScaleMap\"\n           [annotations]=\"data.config.annotations\"></g>\n      </g>\n      <g class=\"series-container\">\n        <g teta-series-host\n           *ngFor=\"let series of data.config.series\"\n           [config]=\"data.config\"\n           [series]=\"series\"\n           [size]=\"data.size\"></g>\n      </g>\n\n    </svg>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}\n"] }]
+            args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  xAxisMap: xAxisMap | async,\n  yAxisMap: yAxisMap | async,\n  xScaleMap: xScaleMap | async,\n  yScaleMap: yScaleMap | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n\n  <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n    <g class=\"y-axis-container\">\n      <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue;\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-y-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.yScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n            [attr.y]=\"0\"\n            [attr.height]=\"data.size.height\"\n            [attr.width]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n\n      </ng-container>\n    </g>\n    <g class=\"x-axis-container\">\n      <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue;\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-x-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.xScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"0\"\n            [attr.y]=\"0\"\n            [attr.width]=\"data.size.width\"\n            [attr.height]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n      </ng-container>\n    </g>\n  </svg>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      [size]=\"data.size\"\n      [brushScale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.transform]=\"'translate('+ data.visibleRect.x +', '+ data.visibleRect.y +')'\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      (contextmenu)=\"contextMenu($event, data.xScaleMap, data.yScaleMap)\"\n      (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"\n         [config]=\"data.config\"\n         [xScaleMap]=\"data.xScaleMap\"\n         [yScaleMap]=\"data.yScaleMap\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <g teta-series-host\n           *ngFor=\"let series of data.config.series\"\n           [config]=\"data.config\"\n           [series]=\"series\"></g>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n            *ngFor=\"let annotation of data.config.annotations\"\n            [annotation]=\"annotation\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class LegendComponent {
@@ -2133,9 +2150,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }] } });
 
 class ChartComponent {
-    constructor(_svc, _zoomService) {
-        this._svc = _svc;
+    constructor(chartService, _zoomService, _scaleService) {
+        this.chartService = chartService;
         this._zoomService = _zoomService;
+        this._scaleService = _scaleService;
+        this.pointerMove = new EventEmitter();
         this.plotBandsMove = new EventEmitter();
         this.plotBandClick = new EventEmitter();
         this.plotBandContextMenu = new EventEmitter();
@@ -2143,45 +2162,90 @@ class ChartComponent {
         this.pointMove = new EventEmitter();
         this.chartClick = new EventEmitter();
         this.chartContextMenu = new EventEmitter();
+        this.annotationContextMenu = new EventEmitter();
+        this.annotationClick = new EventEmitter();
+        this.annotationMove = new EventEmitter();
         this._alive = true;
-        this.svcConfig = this._svc.config;
+        this.svcConfig = this.chartService.config;
         this.hasSeriesData = this.svcConfig.pipe(map((_) => { var _a, _b; return ((_a = _.series) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = _.series) === null || _b === void 0 ? void 0 : _b.some((_) => { var _a; return ((_a = _.data) === null || _a === void 0 ? void 0 : _a.length) > 0; })); }));
     }
     set config(config) {
-        this._svc.setConfig(config);
+        this.chartService.setConfig(config);
     }
     ngOnChanges(changes) {
     }
     ngOnInit() {
-        this._svc.plotBandEvent
+        this.chartService.pointerMove
+            .pipe(takeWhile(() => this._alive), withLatestFrom(this._scaleService.xScaleMap, this._scaleService.yScaleMap, this.chartService.config))
+            .subscribe((data) => {
+            var _a;
+            const [event, x, y, config] = data;
+            const tooltipTracking = (_a = config === null || config === void 0 ? void 0 : config.tooltip) === null || _a === void 0 ? void 0 : _a.tracking;
+            if (tooltipTracking === TooltipTracking.y) {
+                const result = new Map();
+                y.forEach((value, key) => {
+                    result.set(key, value.invert(event.offsetY));
+                });
+                this.pointerMove.emit({
+                    event: event,
+                    target: result
+                });
+            }
+            else {
+                const result = new Map();
+                x.forEach((value, key) => {
+                    result.set(key, value.invert(event.offsetX));
+                });
+                this.pointerMove.emit({
+                    event: event,
+                    target: result
+                });
+            }
+        });
+        this.chartService.plotBandEvent
             .pipe(takeWhile(() => this._alive))
             .subscribe((_) => {
             this.plotBandsMove.emit(_);
         });
-        this._svc.plotLineMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
+        this.chartService.plotLineMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.plotLinesMove.emit(_);
         });
-        this._svc.pointMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
+        this.chartService.pointMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.pointMove.emit(_);
         });
-        this._svc.chartClick
+        this.chartService.chartClick
             .pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.chartClick.emit(_);
         });
-        this._svc.chartContextMenu
+        this.chartService.chartContextMenu
             .pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.chartContextMenu.emit(_);
         });
-        this._svc.plotBandClick
+        this.chartService.plotBandClick
             .pipe(takeWhile(() => this._alive))
             .subscribe((_) => {
             this.plotBandClick.emit(_);
         });
-        this._svc.plotBandContextMenu
+        this.chartService.plotBandContextMenu
             .pipe(takeWhile(() => this._alive))
             .subscribe((_) => {
             this.plotBandContextMenu.emit(_);
         });
+        this.chartService.annotationContextMenu
+            .pipe(takeWhile(() => this._alive))
+            .subscribe((_) => {
+            this.annotationContextMenu.emit(_);
+        });
+        this.chartService.annotationClick
+            .pipe(takeWhile(() => this._alive))
+            .subscribe((_) => {
+            this.annotationClick.emit(_);
+        });
+        this.chartService.annotationMove
+            .pipe(takeWhile(() => this._alive))
+            .subscribe((_) => {
+            this.annotationMove.emit(_);
+        });
     }
     ngAfterViewInit() {
     }
@@ -2193,12 +2257,14 @@ class ChartComponent {
         });
     }
 }
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], components: [{ type: ChartContainerComponent, selector: "teta-chart-container" }, { type: LegendComponent, selector: "teta-legend", inputs: ["series"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], components: [{ type: ChartContainerComponent, selector: "teta-chart-container" }, { type: LegendComponent, selector: "teta-legend", inputs: ["series"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-svg-chart', providers: [ChartService, ZoomService, ScaleService, BrushService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }]; }, propDecorators: { plotBandsMove: [{
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }, { type: ScaleService }]; }, propDecorators: { pointerMove: [{
+                type: Output
+            }], plotBandsMove: [{
                 type: Output
             }], plotBandClick: [{
                 type: Output
@@ -2212,6 +2278,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Output
             }], chartContextMenu: [{
                 type: Output
+            }], annotationContextMenu: [{
+                type: Output
+            }], annotationClick: [{
+                type: Output
+            }], annotationMove: [{
+                type: Output
             }], config: [{
                 type: Input
             }] } });
@@ -2224,6 +2296,7 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ChartContainerComponent,
         LegendComponent,
         SeriesBaseComponent,
+        LinearSeriesBase,
         LineSeriesComponent,
         GridlinesComponent,
         XAxisComponent,
@@ -2257,6 +2330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                         ChartContainerComponent,
                         LegendComponent,
                         SeriesBaseComponent,
+                        LinearSeriesBase,
                         LineSeriesComponent,
                         GridlinesComponent,
                         XAxisComponent,
@@ -2318,18 +2392,6 @@ class PlotLine {
     }
 }
 
-const annotationMap = [
-    annotationBadge,
-    annotationLabel,
-    annotationCallout,
-    annotationCalloutCircle,
-    annotationCalloutCurve,
-    annotationCalloutElbow,
-    annotationCalloutRect,
-    annotationCustomType,
-    annotationXYThreshold,
-];
-
 /*
  * Public API Surface of chart
  */