@tetacom/svg-charts 1.2.25 → 1.2.28

package/fesm2015/tetacom-svg-charts.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, ElementRef, ViewChild, Directive, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
+import { Injectable, Component, Input, EventEmitter, Directive, Output, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, ViewChild, HostBinding, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { __awaiter } from 'tslib';
@@ -1012,13 +1012,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }] } });
 
-var DragPointType;
-(function (DragPointType) {
-    DragPointType[DragPointType["x"] = 0] = "x";
-    DragPointType[DragPointType["y"] = 1] = "y";
-    DragPointType[DragPointType["xy"] = 2] = "xy";
-})(DragPointType || (DragPointType = {}));
-
 class LinearSeriesBase extends SeriesBaseComponent {
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
@@ -1028,6 +1021,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
         this.zoomService = zoomService;
         this.element = element;
         this.defaultClipPointsMapping = new Map();
+        this._update = new BehaviorSubject(null);
     }
     set series(series) {
         var _a;
@@ -1068,8 +1062,9 @@ class LinearSeriesBase extends SeriesBaseComponent {
             const [event, { x, y }] = data;
             return this.getTransform(event, x.get(this.series.xAxisIndex).scale, y.get(this.series.yAxisIndex).scale);
         }), tap(() => setTimeout(() => this.cdr.detectChanges())));
-        this.path = this.scaleService.scales.pipe(map((data) => {
+        this.path = combineLatest([this.scaleService.scales, this._update]).pipe(map(([data]) => {
             var _a, _b;
+            // console.log(data);
             const { x, y } = data;
             this.x = (_a = x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale;
             this.y = (_b = y.get(this.series.yAxisIndex)) === null || _b === void 0 ? void 0 : _b.scale;
@@ -1101,18 +1096,18 @@ class LinearSeriesBase extends SeriesBaseComponent {
                 filteredData = filteredData === null || filteredData === void 0 ? void 0 : filteredData.filter(filter(min, max));
             }
             return line(filteredData);
-        }), tap(() => {
+        }), tap((_) => {
+            // console.log(_)
             setTimeout(() => {
                 var _a;
                 if (((_a = this.markers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                    this.addDragEvents();
+                    // this.addDragEvents();
                 }
             });
         }));
     }
     ngOnDestroy() {
-        var _a;
-        (_a = this.markerListeners) === null || _a === void 0 ? void 0 : _a.on('start drag end', null);
+        // this.markerListeners?.on('start drag end', null);
         this.svc.setTooltip({
             point: null,
             series: this.series,
@@ -1121,47 +1116,63 @@ class LinearSeriesBase extends SeriesBaseComponent {
     ngAfterViewInit() {
     }
     addDragEvents() {
-        var _a, _b;
-        (_a = this.markerListeners) === null || _a === void 0 ? void 0 : _a.on('start drag end', null);
-        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();
-        };
-        this.markerListeners = d3
-            .drag()
-            .subject(function (event, d) {
-            const node = d3.select(this);
-            return { x: node.attr('cx'), y: node.attr('cy') };
-        });
-        const dragMarkers = this.markerListeners.on('start drag end', function (event, d) {
-            const node = d3.select(this);
-            drag(node, event, d);
-        });
-        const draggableMarkers = (_b = this.series.data) === null || _b === void 0 ? void 0 : _b.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();
+        // this.markerListeners?.on('start drag end', null);
+        // const drag = (node, event: d3.D3DragEvent<any, any, any>, d: BasePoint) => {
+        //   if (
+        //     d.marker?.dragType === DragPointType.x ||
+        //     d.marker?.dragType === DragPointType.xy
+        //   ) {
+        //     d.x = this.x.invert(event.x);
+        //   }
+        //
+        //   if (
+        //     d.marker?.dragType === DragPointType.y ||
+        //     d.marker?.dragType === DragPointType.xy
+        //   ) {
+        //     d.y = this.y.invert(event.y);
+        //   }
+        //
+        //   this.svc.emitPoint({
+        //     target: {
+        //       series: this.series,
+        //       point: d,
+        //     },
+        //     event,
+        //   });
+        //
+        //   this.cdr.detectChanges();
+        // };
+        // this.markerListeners = d3
+        //   .drag()
+        //   .subject(function (event, d: BasePoint) {
+        //     const node = d3.select(this);
+        //     return {x: node.attr('cx'), y: node.attr('cy')};
+        //   });
+        // const dragMarkers =
+        //   this.markerListeners.on(
+        //     'start drag end',
+        //     function (event: d3.D3DragEvent<any, any, any>, d: BasePoint) {
+        //       const node = d3.select(this);
+        //
+        //       drag(node, event, d);
+        //     }
+        //   );
+        //
+        // const draggableMarkers = this.series.data?.filter(
+        //   (_) => _?.marker && _?.marker?.draggable
+        // );
+        //
+        // const element = d3
+        //   .select(this.element.nativeElement)
+        //   .selectAll('.draggable-marker')
+        //   .data(draggableMarkers);
+        //
+        // element.call(dragMarkers as any);
+        //
+        // this.svgElement = d3
+        //   .select(this.element.nativeElement)
+        //   .select('.line')
+        //   .node() as SVGGeometryElement;
     }
     getTransform(event, scaleX, scaleY) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -1261,6 +1272,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }] } });
 
+var DragPointType;
+(function (DragPointType) {
+    DragPointType[DragPointType["x"] = 0] = "x";
+    DragPointType[DragPointType["y"] = 1] = "y";
+    DragPointType[DragPointType["xy"] = 2] = "xy";
+})(DragPointType || (DragPointType = {}));
+
+class DraggablePointDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        this.moveStart = new EventEmitter();
+        this.moveProcess = new EventEmitter();
+        this.moveEnd = new EventEmitter();
+    }
+    mouseDown(event) {
+        if (!this.tetaDraggablePoint) {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        this.startPosition = {
+            x: event.x,
+            y: event.y
+        };
+        this.moveStart.emit(this.startPosition);
+    }
+    mouseUp(event) {
+        if (this.startPosition !== null && this.startPosition !== undefined) {
+            let deltaX = event.x - this.startPosition.x;
+            let deltaY = event.y - this.startPosition.y;
+            if (this.dragDirection === DragPointType.x) {
+                deltaY = 0;
+            }
+            if (this.dragDirection === DragPointType.y) {
+                deltaX = 0;
+            }
+            if (this.allowDrag && !this.allowDrag({
+                x: event.x,
+                y: event.y,
+                deltaX,
+                deltaY
+            })) {
+                return;
+            }
+            if (this.transformCache) {
+                this.transformCache.x = this.transformCache.x + deltaX;
+                this.transformCache.y = this.transformCache.y + deltaY;
+            }
+            else {
+                this.transformCache = {
+                    x: deltaX,
+                    y: deltaY
+                };
+            }
+            this.moveEnd.emit({
+                x: event.x,
+                y: event.y,
+                deltaX,
+                deltaY
+            });
+        }
+        this.startPosition = null;
+    }
+    mouseMove(event) {
+        if (this.startPosition) {
+            let deltaX = event.x - this.startPosition.x;
+            let deltaY = event.y - this.startPosition.y;
+            if (this.transformCache) {
+                deltaX = this.transformCache.x + deltaX;
+                deltaY = this.transformCache.y + deltaY;
+            }
+            if (this.allowDrag && !this.allowDrag({
+                x: event.x,
+                y: event.y,
+                deltaX,
+                deltaY
+            })) {
+                return;
+            }
+            if (this.dragDirection === DragPointType.x) {
+                deltaY = 0;
+            }
+            if (this.dragDirection === DragPointType.y) {
+                deltaX = 0;
+            }
+            this.setTransform(deltaX, deltaY);
+            event.stopPropagation();
+            event.preventDefault();
+            this.moveProcess.emit({
+                x: event.x,
+                y: event.y,
+                deltaX,
+                deltaY
+            });
+        }
+    }
+    setTransform(x, y) {
+        this._elementRef.nativeElement.style.transform = `translate(${x}px, ${y}px)`;
+    }
+    resetTransform() {
+        this.setTransform(0, 0);
+        this.transformCache = null;
+    }
+}
+DraggablePointDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggablePointDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DraggablePointDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: { tetaDraggablePoint: "tetaDraggablePoint", dragDirection: "dragDirection", allowDrag: "allowDrag" }, outputs: { moveStart: "moveStart", moveProcess: "moveProcess", moveEnd: "moveEnd" }, host: { listeners: { "mousedown": "mouseDown($event)", "touchstart": "mouseDown($event)", "window:mouseup": "mouseUp($event)", "window:touchend": "mouseUp($event)", "window:mousemove": "mouseMove($event)", "window:touchmove": "mouseMove($event)" } }, exportAs: ["tetaDraggablePoint"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggablePointDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaDraggablePoint]',
+                    exportAs: 'tetaDraggablePoint'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { tetaDraggablePoint: [{
+                type: Input
+            }], dragDirection: [{
+                type: Input
+            }], allowDrag: [{
+                type: Input
+            }], moveStart: [{
+                type: Output
+            }], moveProcess: [{
+                type: Output
+            }], moveEnd: [{
+                type: Output
+            }], mouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], mouseUp: [{
+                type: HostListener,
+                args: ['window:mouseup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:touchend', ['$event']]
+            }], mouseMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:touchmove', ['$event']]
+            }] } });
+
 class LineSeriesComponent extends LinearSeriesBase {
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
@@ -1269,13 +1424,80 @@ class LineSeriesComponent extends LinearSeriesBase {
         this.scaleService = scaleService;
         this.zoomService = zoomService;
         this.element = element;
+        this.allowDrag = (point) => {
+            return (newPoint) => {
+                if (point.marker.minX !== null && point.marker.minX !== undefined) {
+                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) < point.marker.minX) {
+                        return false;
+                    }
+                }
+                if (point.marker.maxX !== null && point.marker.maxX !== undefined) {
+                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.minX) {
+                        return false;
+                    }
+                }
+                if (point.marker.minY !== null && point.marker.minY !== undefined) {
+                    if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) < point.marker.minY) {
+                        return false;
+                    }
+                }
+                if (point.marker.maxY !== null && point.marker.maxY !== undefined) {
+                    if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) > point.marker.maxY) {
+                        return false;
+                    }
+                }
+                return true;
+            };
+        };
+    }
+    moveStart(event, point) {
+        this.start = { x: point.x, y: point.y };
+    }
+    moveEnd(event, point) {
+        point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
+        point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
+        this._update.next();
+        const emitEvent = {
+            type: 'end',
+            sourceEvent: event
+        };
+        this.svc.emitPoint({
+            target: {
+                series: this.series,
+                point: point,
+            },
+            event: emitEvent,
+        });
+    }
+    moveProcess(event, point) {
+        point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
+        point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
+        this._update.next();
+        const emitEvent = {
+            type: 'drag',
+            sourceEvent: event
+        };
+        this.svc.emitPoint({
+            target: {
+                series: this.series,
+                point: point,
+            },
+            event: emitEvent,
+        });
+    }
+    startLabel(event, label) {
+        this.labelStart = { dx: label.dx, dy: label.dy };
+    }
+    moveLabel(event, label) {
+        label.dx = this.labelStart.dx + event.deltaX;
+        label.dy = this.labelStart.dy + event.deltaY;
     }
 }
 LineSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.0", version: "14.0.2", 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 !=null && t?.y!=null\"\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=\"markers as draggablePoints\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of draggablePoints\"\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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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 !=null && t?.y!=null\"\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=\"markers as draggablePoints\">\n  <svg:g\n    *ngFor=\"let point of draggablePoints\"\n    [attr.transform]=\"'translate(' + x(point.x)+ ',' +y(point.y) + ')'\">\n    <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n           [dragDirection]=\"point.marker.dragType\"\n           [allowDrag]=\"allowDrag(point)\"\n           #dragPoint=\"tetaDraggablePoint\"\n           (moveStart)=\"moveStart($event, point)\"\n           (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n           (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n           [class.draggable-marker]=\"point?.marker?.draggable\">\n      <svg:circle\n        class=\"marker\"\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]=\"0\"\n        [attr.cy]=\"0\">\n      </svg:circle>\n      <ng-container *ngIf=\"point.marker.label?.text\">\n        <svg:line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"point.marker.label?.dx\"\n          [attr.y2]=\"point.marker.label?.dy\"\n          [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n          [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n          [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n        </svg:line>\n        <svg:foreignObject\n          [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n          [dragDirection]=\"point.marker.label.dragType\"\n          #labelPoint=\"tetaDraggablePoint\"\n          (moveStart)=\"startLabel($event, point.marker.label)\"\n          (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n          (moveEnd)=\"labelPoint.resetTransform();\"\n          [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n          [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n          [attr.x]=\"point.marker.label?.dx\"\n          [attr.y]=\"point.marker.label?.dy\"\n          class=\"position-absolute\">\n          <div\n            #annotationNode\n            class=\"shadow-2 padding-2\"\n            [style.color]=\"'var(--color-text-90)'\"\n            [style.background-color]=\"'var(--color-background-50)'\"\n            [style.cursor]=\"'move'\"\n            style=\"border-radius: 2px; display: inline-block;\">\n            {{point.marker.label?.text}}\n          </div>\n        </svg:foreignObject>\n      </ng-container>\n    </svg:g>\n  </svg:g>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LineSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, 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 !=null && t?.y!=null\"\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=\"markers as draggablePoints\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of draggablePoints\"\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"] }]
+            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, 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 !=null && t?.y!=null\"\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=\"markers as draggablePoints\">\n  <svg:g\n    *ngFor=\"let point of draggablePoints\"\n    [attr.transform]=\"'translate(' + x(point.x)+ ',' +y(point.y) + ')'\">\n    <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n           [dragDirection]=\"point.marker.dragType\"\n           [allowDrag]=\"allowDrag(point)\"\n           #dragPoint=\"tetaDraggablePoint\"\n           (moveStart)=\"moveStart($event, point)\"\n           (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n           (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n           [class.draggable-marker]=\"point?.marker?.draggable\">\n      <svg:circle\n        class=\"marker\"\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]=\"0\"\n        [attr.cy]=\"0\">\n      </svg:circle>\n      <ng-container *ngIf=\"point.marker.label?.text\">\n        <svg:line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"point.marker.label?.dx\"\n          [attr.y2]=\"point.marker.label?.dy\"\n          [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n          [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n          [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n        </svg:line>\n        <svg:foreignObject\n          [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n          [dragDirection]=\"point.marker.label.dragType\"\n          #labelPoint=\"tetaDraggablePoint\"\n          (moveStart)=\"startLabel($event, point.marker.label)\"\n          (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n          (moveEnd)=\"labelPoint.resetTransform();\"\n          [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n          [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n          [attr.x]=\"point.marker.label?.dx\"\n          [attr.y]=\"point.marker.label?.dy\"\n          class=\"position-absolute\">\n          <div\n            #annotationNode\n            class=\"shadow-2 padding-2\"\n            [style.color]=\"'var(--color-text-90)'\"\n            [style.background-color]=\"'var(--color-background-50)'\"\n            [style.cursor]=\"'move'\"\n            style=\"border-radius: 2px; display: inline-block;\">\n            {{point.marker.label?.text}}\n          </div>\n        </svg:foreignObject>\n      </ng-container>\n    </svg:g>\n  </svg:g>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class BarSeriesComponent extends SeriesBaseComponent {
@@ -1615,7 +1837,7 @@ class XAxisComponent {
         this.ticks = this.x.pipe(withLatestFrom(this._svc.size), map((_) => {
             const [x, size] = _;
             const tickSize = x.ticks().map((_) => getTextWidth(this.axis.options.tickFormat ? this.axis.options.tickFormat(_) : this.axis.defaultFormatter()(_), 0.45, 11));
-            return x.ticks(size.width / parseInt(d3.max(tickSize), 10) / 3);
+            return x.ticks(size.width / parseInt(d3.max(tickSize), 10) / 10);
         }));
     }
     getLabelTransform() {
@@ -2585,10 +2807,10 @@ class ChartContainerComponent {
     }
 }
 ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | 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  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.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.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.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>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></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.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.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.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\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      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></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}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale", "scale"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "brushScale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | 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  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.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.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.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>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></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.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.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.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\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      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></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}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale", "scale"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "brushScale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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  scales: scales | 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  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.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.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.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>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></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.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.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.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\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      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></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}:host .crosshair{cursor:crosshair}\n"] }]
+            args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | 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  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.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.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.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>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></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.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.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.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\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      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></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}:host .crosshair{cursor:crosshair}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
 class LegendComponent {
@@ -2794,7 +3016,8 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         BlockSeriesComponent,
         BlockAreaSeriesComponent,
         AnnotationComponent,
-        CrosshairComponent], imports: [CommonModule, LetModule], exports: [ChartComponent,
+        CrosshairComponent,
+        DraggablePointDirective], imports: [CommonModule, LetModule], exports: [ChartComponent,
         LegendComponent,
         SeriesBaseComponent,
         LineSeriesComponent,
@@ -2830,6 +3053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         BlockAreaSeriesComponent,
                         AnnotationComponent,
                         CrosshairComponent,
+                        DraggablePointDirective,
                     ],
                     exports: [
                         ChartComponent,