@tetacom/svg-charts 1.2.26 → 1.2.27

package/fesm2020/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 { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, lastValueFrom, take, combineLatest, ReplaySubject, tap, takeWhile, combineLatestWith, observeOn, animationFrameScheduler } from 'rxjs';
@@ -1010,13 +1010,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);
@@ -1026,6 +1019,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
         this.zoomService = zoomService;
         this.element = element;
         this.defaultClipPointsMapping = new Map();
+        this._update = new BehaviorSubject(null);
     }
     set series(series) {
         this.__series = series;
@@ -1065,7 +1059,8 @@ 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]) => {
+            // console.log(data);
             const { x, y } = data;
             this.x = x.get(this.series.xAxisIndex)?.scale;
             this.y = y.get(this.series.yAxisIndex)?.scale;
@@ -1097,16 +1092,17 @@ class LinearSeriesBase extends SeriesBaseComponent {
                 filteredData = filteredData?.filter(filter(min, max));
             }
             return line(filteredData);
-        }), tap(() => {
+        }), tap((_) => {
+            // console.log(_)
             setTimeout(() => {
                 if (this.markers?.length > 0) {
-                    this.addDragEvents();
+                    // this.addDragEvents();
                 }
             });
         }));
     }
     ngOnDestroy() {
-        this.markerListeners?.on('start drag end', null);
+        // this.markerListeners?.on('start drag end', null);
         this.svc.setTooltip({
             point: null,
             series: this.series,
@@ -1115,45 +1111,63 @@ class LinearSeriesBase extends SeriesBaseComponent {
     ngAfterViewInit() {
     }
     addDragEvents() {
-        this.markerListeners?.on('start drag end', null);
-        const drag = (node, event, d) => {
-            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) {
-            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 = this.series.data?.filter((_) => _?.marker && _?.marker?.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) {
         if (event.type === 'mouseleave') {
@@ -1252,6 +1266,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);
@@ -1260,13 +1418,64 @@ 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();
+        this.svc.emitPoint({
+            target: event
+        });
+    }
+    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();
+        this.svc.emitPoint({
+            target: event
+        });
+    }
+    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 {
@@ -1599,7 +1808,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() {
@@ -2752,7 +2961,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,
@@ -2788,6 +2998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         BlockAreaSeriesComponent,
                         AnnotationComponent,
                         CrosshairComponent,
+                        DraggablePointDirective,
                     ],
                     exports: [
                         ChartComponent,