@tetacom/svg-charts 1.7.36 → 1.7.37

package/fesm2022/tetacom-svg-charts.mjs

@@ -193,6 +193,8 @@ class ChartService {
         this.plotBandEvent$ = new Subject();
         this.plotLineMove$ = new Subject();
         this.pointMove$ = new Subject();
+        this.seriesOffsetMove$ = new Subject();
+        this.seriesPathOffsets$ = new BehaviorSubject(new Map());
         this.chartClick$ = new Subject();
         this.chartContextMenu$ = new Subject();
         this.annotationEvent$ = new Subject();
@@ -216,6 +218,8 @@ class ChartService {
         this.plotBandEvent = this.plotBandEvent$.asObservable();
         this.plotLineMove = this.plotLineMove$.asObservable();
         this.pointMove = this.pointMove$.asObservable();
+        this.seriesOffsetMove = this.seriesOffsetMove$.asObservable();
+        this.seriesPathOffsets = this.seriesPathOffsets$.asObservable();
         this.chartClick = this.chartClick$.asObservable();
         this.chartContextMenu = this.chartContextMenu$.asObservable();
         this.annotationClick = this.annotationEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'click'));
@@ -293,6 +297,15 @@ class ChartService {
     emitPoint(event) {
         this.pointMove$.next(event);
     }
+    emitSeriesOffset(event) {
+        this.seriesOffsetMove$.next(event);
+    }
+    getSeriesPathOffsets() {
+        return this.seriesPathOffsets$.value;
+    }
+    setSeriesPathOffsets(offsets) {
+        this.seriesPathOffsets$.next(new Map(offsets));
+    }
     emitChartClick(event) {
         this.chartClick$.next(event);
     }
@@ -1740,6 +1753,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 class LinearSeriesBaseComponent extends SeriesBaseComponent {
+    getClipOffset() {
+        return { x: 0, y: 0 };
+    }
     constructor() {
         super();
         this.pointerMove = toSignal(this.svc.pointerMove);
@@ -1768,17 +1784,18 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
                 .x((point) => this.x()(point.x))
                 .y((point) => this.y()(point.y));
             let filteredData = this.series().data;
+            const clipOffset = this.getClipOffset();
             if (this.series().clipPointsDirection === ClipPointsDirection.x) {
                 let [min, max] = this.x().domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
-                filteredData = filteredData?.filter(filter(min, max));
+                filteredData = filteredData?.filter(filter(min - clipOffset.x, max - clipOffset.x));
             }
             if (this.series().clipPointsDirection === ClipPointsDirection.y) {
                 let [min, max] = this.y().domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
-                filteredData = filteredData?.filter(filter(min, max));
+                filteredData = filteredData?.filter(filter(min - clipOffset.y, max - clipOffset.y));
             }
             return line(filteredData);
         }, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
@@ -2068,9 +2085,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['window:touchmove', ['$event']]
             }] } });
 
+class DraggableSeriesDirective {
+    constructor() {
+        this.dragDirection = DragPointType.xy;
+        this.moveStart = new EventEmitter();
+        this.moveProcess = new EventEmitter();
+        this.moveEnd = new EventEmitter();
+    }
+    pointerDown(event) {
+        if (!this.tetaDraggableSeries) {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        this.startPosition = {
+            x: event.clientX,
+            y: event.clientY,
+        };
+        this.moveStart.emit({
+            x: event.clientX,
+            y: event.clientY,
+            deltaX: 0,
+            deltaY: 0,
+        });
+    }
+    pointerMove(event) {
+        if (!this.startPosition) {
+            return;
+        }
+        const nextOffset = this.getNextOffset(event);
+        event.stopPropagation();
+        event.preventDefault();
+        this.moveProcess.emit({
+            x: event.clientX,
+            y: event.clientY,
+            deltaX: nextOffset.x,
+            deltaY: nextOffset.y,
+        });
+    }
+    pointerUp(event) {
+        if (!this.startPosition) {
+            return;
+        }
+        const nextOffset = this.getNextOffset(event);
+        this.moveEnd.emit({
+            x: event.clientX,
+            y: event.clientY,
+            deltaX: nextOffset.x,
+            deltaY: nextOffset.y,
+        });
+        this.startPosition = null;
+    }
+    resetTransform() {
+        this.startPosition = null;
+    }
+    getNextOffset(event) {
+        let deltaX = event.clientX - this.startPosition.x;
+        let deltaY = event.clientY - this.startPosition.y;
+        if (this.dragDirection === DragPointType.x) {
+            deltaY = 0;
+        }
+        if (this.dragDirection === DragPointType.y) {
+            deltaX = 0;
+        }
+        return {
+            x: deltaX,
+            y: deltaY,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DraggableSeriesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DraggableSeriesDirective, isStandalone: true, selector: "[tetaDraggableSeries]", inputs: { tetaDraggableSeries: "tetaDraggableSeries", dragDirection: "dragDirection" }, outputs: { moveStart: "moveStart", moveProcess: "moveProcess", moveEnd: "moveEnd" }, host: { listeners: { "pointerdown": "pointerDown($event)", "window:pointermove": "pointerMove($event)", "window:pointerup": "pointerUp($event)", "window:pointercancel": "pointerUp($event)" } }, exportAs: ["tetaDraggableSeries"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DraggableSeriesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaDraggableSeries]',
+                    exportAs: 'tetaDraggableSeries',
+                    standalone: true,
+                }]
+        }], propDecorators: { tetaDraggableSeries: [{
+                type: Input
+            }], dragDirection: [{
+                type: Input
+            }], moveStart: [{
+                type: Output
+            }], moveProcess: [{
+                type: Output
+            }], moveEnd: [{
+                type: Output
+            }], pointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }], pointerMove: [{
+                type: HostListener,
+                args: ['window:pointermove', ['$event']]
+            }], pointerUp: [{
+                type: HostListener,
+                args: ['window:pointerup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:pointercancel', ['$event']]
+            }] } });
+
 class LineSeriesComponent extends LinearSeriesBaseComponent {
     constructor() {
         super(...arguments);
+        this.seriesPathOffsets = toSignal(this.svc.seriesPathOffsets, { initialValue: new Map() });
+        this.seriesDragStartOffsets = new Map();
+        this.seriesDragGroup = [];
+        this.seriesDragMoved = false;
+        this.seriesOffsetValue = computed(() => {
+            return this.seriesPathOffsets().get(this.series().id) ?? { x: 0, y: 0 };
+        }, ...(ngDevMode ? [{ debugName: "seriesOffsetValue" }] : /* istanbul ignore next */ []));
+        this.seriesPathTransform = computed(() => {
+            const offset = this.seriesOffsetValue();
+            const offsetX = this.getOffsetPixels(this.x(), offset.x);
+            const offsetY = this.getOffsetPixels(this.y(), offset.y);
+            if (!offsetX && !offsetY) {
+                return null;
+            }
+            return `translate(${offsetX}, ${offsetY})`;
+        }, ...(ngDevMode ? [{ debugName: "seriesPathTransform" }] : /* istanbul ignore next */ []));
         this.allowDrag = (point) => {
             return (newPoint) => {
                 if (point.marker.minX !== null && point.marker.minX !== undefined) {
@@ -2097,6 +2232,41 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
             };
         };
     }
+    seriesMoveStart(event) {
+        this.seriesDragMoved = false;
+        this.seriesDragGroup = this.getPathDragSeriesGroup();
+        this.seriesDragStartOffsets = new Map(this.seriesDragGroup.map((series) => {
+            return [series.id, this.svc.getSeriesPathOffsets().get(series.id) ?? { x: 0, y: 0 }];
+        }));
+        this.emitSeriesOffset('start', event);
+    }
+    seriesMoveProcess(event) {
+        this.seriesDragMoved = this.seriesDragMoved || Math.abs(event.deltaX) > 3 || Math.abs(event.deltaY) > 3;
+        this.updateSeriesOffset(event);
+        this.emitSeriesOffset('drag', event);
+    }
+    seriesMoveEnd(event) {
+        this.updateSeriesOffset(event);
+        this.emitSeriesOffset('end', event);
+    }
+    seriesPathClick(event) {
+        if (this.seriesDragMoved) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.seriesDragMoved = false;
+            return;
+        }
+        if (!event.ctrlKey && !event.metaKey) {
+            return;
+        }
+        if (!this.series().draggablePath) {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        this.series().selectedForPathDrag = !this.series().selectedForPathDrag;
+        this.cdr.markForCheck();
+    }
     moveStart(event, point) {
         this.start = { x: point.x, y: point.y };
     }
@@ -2139,12 +2309,100 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
         label.dx = this.labelStart.dx + event.deltaX;
         label.dy = this.labelStart.dy + event.deltaY;
     }
+    emitSeriesOffset(type, event) {
+        const offsetValue = this.seriesOffsetValue();
+        const seriesList = this.seriesDragGroup.length ? this.seriesDragGroup : [this.series()];
+        this.svc.emitSeriesOffset({
+            event: {
+                type,
+                sourceEvent: event,
+            },
+            target: {
+                series: this.series(),
+                seriesList,
+                seriesIds: seriesList.map((series) => series.id),
+                offsets: seriesList.map((series) => {
+                    const seriesOffsetValue = this.svc.getSeriesPathOffsets().get(series.id) ?? { x: 0, y: 0 };
+                    return {
+                        series,
+                        seriesId: series.id,
+                        offsetPx: {
+                            x: this.getOffsetPixels(this.x(), seriesOffsetValue.x),
+                            y: this.getOffsetPixels(this.y(), seriesOffsetValue.y),
+                        },
+                        offsetValue: seriesOffsetValue,
+                    };
+                }),
+                offsetPx: {
+                    x: this.getOffsetPixels(this.x(), offsetValue.x),
+                    y: this.getOffsetPixels(this.y(), offsetValue.y),
+                },
+                offsetValue: {
+                    x: offsetValue.x,
+                    y: offsetValue.y,
+                },
+            },
+        });
+    }
+    updateSeriesOffset(event) {
+        const dragOffset = {
+            x: this.getScaleOffset(this.x(), event.deltaX),
+            y: this.getScaleOffset(this.y(), event.deltaY),
+        };
+        const offsets = new Map(this.svc.getSeriesPathOffsets());
+        const seriesList = this.seriesDragGroup.length ? this.seriesDragGroup : [this.series()];
+        seriesList.forEach((series) => {
+            const startOffset = this.seriesDragStartOffsets.get(series.id) ?? { x: 0, y: 0 };
+            offsets.set(series.id, {
+                x: startOffset.x + dragOffset.x,
+                y: startOffset.y + dragOffset.y,
+            });
+        });
+        this.svc.setSeriesPathOffsets(offsets);
+    }
+    getScaleOffset(scale, offsetPx) {
+        if (!scale?.invert || !scale?.domain) {
+            return 0;
+        }
+        const [domainStart] = scale.domain();
+        const startValue = domainStart instanceof Date ? domainStart.getTime() : domainStart;
+        const nextValue = scale.invert(scale(domainStart) + offsetPx);
+        const normalizedNextValue = nextValue instanceof Date ? nextValue.getTime() : nextValue;
+        return normalizedNextValue - startValue;
+    }
+    getClipOffset() {
+        return this.seriesOffsetValue();
+    }
+    getPathDragSeriesGroup() {
+        const currentSeries = this.series();
+        if (!currentSeries.selectedForPathDrag) {
+            return [currentSeries];
+        }
+        const selectedSeries = this.config()?.series?.filter((series) => {
+            return (series.selectedForPathDrag &&
+                series.draggablePath &&
+                series.visible !== false &&
+                series.enabled !== false &&
+                series.xAxisIndex === currentSeries.xAxisIndex &&
+                series.yAxisIndex === currentSeries.yAxisIndex);
+        });
+        return selectedSeries?.length ? selectedSeries : [currentSeries];
+    }
+    getOffsetPixels(scale, offsetValue) {
+        if (!scale || !scale?.domain || offsetValue === null || offsetValue === undefined) {
+            return 0;
+        }
+        const [domainStart] = scale.domain();
+        const startValue = domainStart instanceof Date ? domainStart.getTime() : domainStart;
+        const nextValue = domainStart instanceof Date ? new Date(startValue + offsetValue) : startValue + offsetValue;
+        return scale(nextValue) - scale(domainStart);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LineSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LineSeriesComponent, isStandalone: true, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "@if (series(); as series) {\n  <svg:path\n    class=\"line\"\n    [attr.d]=\"path()\"\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  @if (transform(); as t) {\n    @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle r=\"3\"\n                  [attr.fill]=\"series.color\"\n                  [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"></svg:circle>\n    }\n  }\n  @if (markers(); as draggablePoints) {\n    @if (x() && y()) {\n      @for (point of draggablePoints; track point) {\n        <svg:g [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 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\"></svg:circle>\n            @if (point.marker.label?.text) {\n              <svg:line [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\"></svg:line>\n              <svg:foreignObject [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 #annotationNode\n                     class=\"shadow-2 padding-2\"\n                     [style.color]=\"'var(--color-text-90)'\"\n                     [style.background-color]=\"'var(--color-global-bgcard)'\"\n                     [style.cursor]=\"'move'\"\n                     style=\"border-radius: 2px; display: inline-block\">\n                  {{ point.marker.label?.text }}\n                </div>\n              </svg:foreignObject>\n            }\n          </svg:g>\n        </svg:g>\n      }\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LineSeriesComponent, isStandalone: true, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "@if (series(); as series) {\n  <svg:g\n    [tetaDraggableSeries]=\"series.draggablePath\"\n    [dragDirection]=\"series.pathDragType\"\n    [attr.transform]=\"seriesPathTransform()\"\n    [class.draggable-path]=\"series.draggablePath\"\n    [class.selected-path]=\"series.selectedForPathDrag\"\n    (click)=\"seriesPathClick($event)\"\n    (moveStart)=\"seriesMoveStart($event)\"\n    (moveProcess)=\"seriesMoveProcess($event)\"\n    (moveEnd)=\"seriesMoveEnd($event)\"\n  >\n    <svg:path\n      class=\"line\"\n      [class.line-selected]=\"series.selectedForPathDrag\"\n      [attr.d]=\"path()\"\n      [attr.stroke]=\"series.color\"\n      [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n      [attr.stroke-width]=\"series.style?.strokeWidth\"\n      [style.--series-color]=\"series.color\"\n      fill=\"none\"\n    ></svg:path>\n    @if (series.draggablePath) {\n      <svg:path\n        class=\"line-hitbox\"\n        [attr.d]=\"path()\"\n        fill=\"none\"\n        stroke=\"transparent\"\n        stroke-width=\"14\"\n        pointer-events=\"stroke\"\n      ></svg:path>\n    }\n  </svg:g>\n  @if (transform(); as t) {\n    @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle\n        r=\"3\"\n        [attr.fill]=\"series.color\"\n        [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"\n      ></svg:circle>\n    }\n  }\n  @if (markers(); as draggablePoints) {\n    @if (x() && y()) {\n      @for (point of draggablePoints; track point) {\n        <svg:g [attr.transform]=\"'translate(' + x()(point.x) + ',' + y()(point.y) + ')'\">\n          <svg:g\n            [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          >\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            @if (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              >\n                <div\n                  #annotationNode\n                  class=\"shadow-2 padding-2\"\n                  [style.color]=\"'var(--color-text-90)'\"\n                  [style.background-color]=\"'var(--color-global-bgcard)'\"\n                  [style.cursor]=\"'move'\"\n                  style=\"border-radius: 2px; display: inline-block\"\n                >\n                  {{ point.marker.label?.text }}\n                </div>\n              </svg:foreignObject>\n            }\n          </svg:g>\n        </svg:g>\n      }\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.draggable-path,.selected-path,.selected-path:active{cursor:ew-resize}.line-selected{filter:drop-shadow(0 0 3px var(--series-color))}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }, { kind: "directive", type: DraggableSeriesDirective, selector: "[tetaDraggableSeries]", inputs: ["tetaDraggableSeries", "dragDirection"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggableSeries"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LineSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, DraggablePointDirective], template: "@if (series(); as series) {\n  <svg:path\n    class=\"line\"\n    [attr.d]=\"path()\"\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  @if (transform(); as t) {\n    @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle r=\"3\"\n                  [attr.fill]=\"series.color\"\n                  [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"></svg:circle>\n    }\n  }\n  @if (markers(); as draggablePoints) {\n    @if (x() && y()) {\n      @for (point of draggablePoints; track point) {\n        <svg:g [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 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\"></svg:circle>\n            @if (point.marker.label?.text) {\n              <svg:line [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\"></svg:line>\n              <svg:foreignObject [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 #annotationNode\n                     class=\"shadow-2 padding-2\"\n                     [style.color]=\"'var(--color-text-90)'\"\n                     [style.background-color]=\"'var(--color-global-bgcard)'\"\n                     [style.cursor]=\"'move'\"\n                     style=\"border-radius: 2px; display: inline-block\">\n                  {{ point.marker.label?.text }}\n                </div>\n              </svg:foreignObject>\n            }\n          </svg:g>\n        </svg:g>\n      }\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, imports: [AsyncPipe, DraggablePointDirective, DraggableSeriesDirective], template: "@if (series(); as series) {\n  <svg:g\n    [tetaDraggableSeries]=\"series.draggablePath\"\n    [dragDirection]=\"series.pathDragType\"\n    [attr.transform]=\"seriesPathTransform()\"\n    [class.draggable-path]=\"series.draggablePath\"\n    [class.selected-path]=\"series.selectedForPathDrag\"\n    (click)=\"seriesPathClick($event)\"\n    (moveStart)=\"seriesMoveStart($event)\"\n    (moveProcess)=\"seriesMoveProcess($event)\"\n    (moveEnd)=\"seriesMoveEnd($event)\"\n  >\n    <svg:path\n      class=\"line\"\n      [class.line-selected]=\"series.selectedForPathDrag\"\n      [attr.d]=\"path()\"\n      [attr.stroke]=\"series.color\"\n      [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n      [attr.stroke-width]=\"series.style?.strokeWidth\"\n      [style.--series-color]=\"series.color\"\n      fill=\"none\"\n    ></svg:path>\n    @if (series.draggablePath) {\n      <svg:path\n        class=\"line-hitbox\"\n        [attr.d]=\"path()\"\n        fill=\"none\"\n        stroke=\"transparent\"\n        stroke-width=\"14\"\n        pointer-events=\"stroke\"\n      ></svg:path>\n    }\n  </svg:g>\n  @if (transform(); as t) {\n    @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle\n        r=\"3\"\n        [attr.fill]=\"series.color\"\n        [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"\n      ></svg:circle>\n    }\n  }\n  @if (markers(); as draggablePoints) {\n    @if (x() && y()) {\n      @for (point of draggablePoints; track point) {\n        <svg:g [attr.transform]=\"'translate(' + x()(point.x) + ',' + y()(point.y) + ')'\">\n          <svg:g\n            [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          >\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            @if (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              >\n                <div\n                  #annotationNode\n                  class=\"shadow-2 padding-2\"\n                  [style.color]=\"'var(--color-text-90)'\"\n                  [style.background-color]=\"'var(--color-global-bgcard)'\"\n                  [style.cursor]=\"'move'\"\n                  style=\"border-radius: 2px; display: inline-block\"\n                >\n                  {{ point.marker.label?.text }}\n                </div>\n              </svg:foreignObject>\n            }\n          </svg:g>\n        </svg:g>\n      }\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.draggable-path,.selected-path,.selected-path:active{cursor:ew-resize}.line-selected{filter:drop-shadow(0 0 3px var(--series-color))}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
         }] });
 
 class BarSeriesComponent extends SeriesBaseComponent {
@@ -3016,6 +3274,7 @@ class ChartComponent {
         this.plotBandContextMenu = new EventEmitter();
         this.plotLinesMove = new EventEmitter();
         this.pointMove = new EventEmitter();
+        this.seriesOffsetMove = new EventEmitter();
         this.chartClick = new EventEmitter();
         this.chartContextMenu = new EventEmitter();
         this.annotationContextMenu = new EventEmitter();
@@ -3075,6 +3334,9 @@ class ChartComponent {
         this.chartService.pointMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.pointMove.emit(_);
         });
+        this.chartService.seriesOffsetMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
+            this.seriesOffsetMove.emit(_);
+        });
         this.chartService.chartClick.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.chartClick.emit(_);
         });
@@ -3104,7 +3366,7 @@ class ChartComponent {
         this._alive = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: BrushService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartComponent, isStandalone: true, 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", zoomServiceInstance: "zoomServiceInstance", brushServiceInstance: "brushServiceInstance", configUpdated: "configUpdated" }, providers: [ChartService, ZoomService, ScaleService, BrushService], ngImport: i0, template: "@if ({ hasSeriesData: hasSeriesData | async, svcConfig: svcConfig | async }; as data) {\n  @if (data.hasSeriesData === true) {\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    @if (data.svcConfig.legend?.enable === true) {\n      <teta-legend [series]=\"data.svcConfig.series\"></teta-legend>\n    }\n  } @else {\n    <div class=\"column column_auto justify-content-center\">\n      <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n        <div #ref><ng-content></ng-content></div>\n        @if (!ref.hasChildNodes()) {\n          <span> No data </span>\n        }\n      </span>\n    </div>\n  }\n}\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartComponent, isStandalone: true, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", seriesOffsetMove: "seriesOffsetMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove", zoomServiceInstance: "zoomServiceInstance", brushServiceInstance: "brushServiceInstance", configUpdated: "configUpdated" }, providers: [ChartService, ZoomService, ScaleService, BrushService], ngImport: i0, template: "@if ({ hasSeriesData: hasSeriesData | async, svcConfig: svcConfig | async }; as data) {\n  @if (data.hasSeriesData === true) {\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    @if (data.svcConfig.legend?.enable === true) {\n      <teta-legend [series]=\"data.svcConfig.series\"></teta-legend>\n    }\n  } @else {\n    <div class=\"column column_auto justify-content-center\">\n      <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n        <div #ref><ng-content></ng-content></div>\n        @if (!ref.hasChildNodes()) {\n          <span> No data </span>\n        }\n      </span>\n    </div>\n  }\n}\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
@@ -3121,6 +3383,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Output
             }], pointMove: [{
                 type: Output
+            }], seriesOffsetMove: [{
+                type: Output
             }], chartClick: [{
                 type: Output
             }], chartContextMenu: [{