@tetacom/svg-charts 1.7.36 → 1.7.38

package/fesm2022/tetacom-svg-charts.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, input, inject, ChangeDetectorRef, ElementRef, computed, Component, ViewChild, Input, ChangeDetectionStrategy, HostListener, HostBinding, Directive, signal, effect, EventEmitter, Output, ViewContainerRef } from '@angular/core';
-import { ReplaySubject, filter, BehaviorSubject, Subject, of, shareReplay, withLatestFrom, map, merge, lastValueFrom, take, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler } from 'rxjs';
+import { ReplaySubject, filter, BehaviorSubject, Subject, of, shareReplay, withLatestFrom, map, merge, lastValueFrom, take, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler, distinctUntilChanged } from 'rxjs';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
 import { maxIndex } from 'd3-array';
@@ -193,6 +193,9 @@ class ChartService {
         this.plotBandEvent$ = new Subject();
         this.plotLineMove$ = new Subject();
         this.pointMove$ = new Subject();
+        this.seriesMove$ = new Subject();
+        this.seriesPathOffsets$ = new BehaviorSubject(new Map());
+        this.selectedSeriesIds$ = new BehaviorSubject([]);
         this.chartClick$ = new Subject();
         this.chartContextMenu$ = new Subject();
         this.annotationEvent$ = new Subject();
@@ -216,6 +219,9 @@ class ChartService {
         this.plotBandEvent = this.plotBandEvent$.asObservable();
         this.plotLineMove = this.plotLineMove$.asObservable();
         this.pointMove = this.pointMove$.asObservable();
+        this.seriesMove = this.seriesMove$.asObservable();
+        this.seriesPathOffsets = this.seriesPathOffsets$.asObservable();
+        this.selectedSeriesIds = this.selectedSeriesIds$.asObservable();
         this.chartClick = this.chartClick$.asObservable();
         this.chartContextMenu = this.chartContextMenu$.asObservable();
         this.annotationClick = this.annotationEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'click'));
@@ -231,6 +237,7 @@ class ChartService {
     }
     setConfig(config) {
         this.clearTooltips();
+        this.clearSeriesPathOffsets();
         this.config$.next(config);
     }
     setSize(size) {
@@ -293,6 +300,39 @@ class ChartService {
     emitPoint(event) {
         this.pointMove$.next(event);
     }
+    emitSeriesMove(event) {
+        this.seriesMove$.next(event);
+    }
+    getSeriesPathOffsets() {
+        return this.seriesPathOffsets$.value;
+    }
+    setSeriesPathOffsets(offsets) {
+        this.seriesPathOffsets$.next(new Map(offsets));
+    }
+    clearSeriesPathOffsets() {
+        this.seriesPathOffsets$.next(new Map());
+    }
+    getSelectedSeriesIds() {
+        return this.selectedSeriesIds$.value;
+    }
+    setSelectedSeriesIds(seriesIds) {
+        const nextSeriesIds = [...(seriesIds ?? [])];
+        if (this.areSeriesIdsEqual(this.selectedSeriesIds$.value, nextSeriesIds)) {
+            return;
+        }
+        this.selectedSeriesIds$.next(nextSeriesIds);
+    }
+    toggleSelectedSeriesId(seriesId) {
+        const selectedIds = this.selectedSeriesIds$.value;
+        if (selectedIds.includes(seriesId)) {
+            this.setSelectedSeriesIds(selectedIds.filter((id) => id !== seriesId));
+            return;
+        }
+        this.setSelectedSeriesIds([...selectedIds, seriesId]);
+    }
+    areSeriesIdsEqual(first, second) {
+        return first.length === second.length && first.every((id, index) => id === second[index]);
+    }
     emitChartClick(event) {
         this.chartClick$.next(event);
     }
@@ -1740,6 +1780,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 +1811,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 */ []));
@@ -1825,6 +1869,13 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
         }
         const mouse = [event?.offsetX, event?.offsetY];
         const tooltipTracking = this.config()?.tooltip?.tracking;
+        const clipOffset = this.getClipOffset();
+        const addOffset = (value, offset) => {
+            return value instanceof Date ? new Date(value.getTime() + offset) : value + offset;
+        };
+        const subtractOffset = (value, offset) => {
+            return value instanceof Date ? value.getTime() - offset : value - offset;
+        };
         const lineIntersection = (p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) => {
             const rV = {};
             const s1_x = p1_x - p0_x;
@@ -1847,9 +1898,10 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
             if (x0 instanceof Date) {
                 x0 = x0.getTime();
             }
+            x0 = subtractOffset(x0, clipOffset.x);
             const rightId = bisect([...this.series().data].sort((a, b) => a.x - b.x), x0);
             const range = scaleY.range();
-            const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX(sortedData[rightId - 1]?.x), scaleY(sortedData[rightId - 1]?.y), scaleX(sortedData[rightId]?.x), scaleY(sortedData[rightId]?.y));
+            const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX(addOffset(sortedData[rightId - 1]?.x, clipOffset.x)), scaleY(addOffset(sortedData[rightId - 1]?.y, clipOffset.y)), scaleX(addOffset(sortedData[rightId]?.x, clipOffset.x)), scaleY(addOffset(sortedData[rightId]?.y, clipOffset.y)));
             const x = scaleX.invert(intersect.x);
             const y = scaleY.invert(intersect.y);
             if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
@@ -1879,9 +1931,10 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
             if (y0 instanceof Date) {
                 y0 = y0.getTime();
             }
+            y0 = subtractOffset(y0, clipOffset.y);
             const rightId = bisect(sortedData, y0);
             const range = scaleX.range();
-            const intersect = lineIntersection(range[0], mouse[1], Number.MAX_SAFE_INTEGER, mouse[1], scaleX(sortedData[rightId - 1]?.x), scaleY(sortedData[rightId - 1]?.y), scaleX(sortedData[rightId]?.x), scaleY(sortedData[rightId]?.y));
+            const intersect = lineIntersection(range[0], mouse[1], Number.MAX_SAFE_INTEGER, mouse[1], scaleX(addOffset(sortedData[rightId - 1]?.x, clipOffset.x)), scaleY(addOffset(sortedData[rightId - 1]?.y, clipOffset.y)), scaleX(addOffset(sortedData[rightId]?.x, clipOffset.x)), scaleY(addOffset(sortedData[rightId]?.y, clipOffset.y)));
             const x = scaleX.invert(intersect.x);
             const y = scaleY.invert(intersect.y);
             if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
@@ -2068,9 +2121,131 @@ 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.selectedSeriesIds = toSignal(this.svc.selectedSeriesIds, { initialValue: [] });
+        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.seriesSelectedForPathDrag = computed(() => {
+            return this.isSeriesSelectedForPathDrag(this.series());
+        }, ...(ngDevMode ? [{ debugName: "seriesSelectedForPathDrag" }] : /* 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 +2272,40 @@ 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.emitSeriesMove('start', event);
+    }
+    seriesMoveProcess(event) {
+        this.seriesDragMoved = this.seriesDragMoved || Math.abs(event.deltaX) > 3 || Math.abs(event.deltaY) > 3;
+        this.updateSeriesOffset(event);
+        this.emitSeriesMove('drag', event);
+    }
+    seriesMoveEnd(event) {
+        this.updateSeriesOffset(event);
+        this.emitSeriesMove('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.svc.toggleSelectedSeriesId(this.series().id);
+    }
     moveStart(event, point) {
         this.start = { x: point.x, y: point.y };
     }
@@ -2139,12 +2348,105 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
         label.dx = this.labelStart.dx + event.deltaX;
         label.dy = this.labelStart.dy + event.deltaY;
     }
+    emitSeriesMove(type, event) {
+        const offsetValue = this.seriesOffsetValue();
+        const seriesList = this.seriesDragGroup.length ? this.seriesDragGroup : [this.series()];
+        this.svc.emitSeriesMove({
+            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 (!this.isSeriesSelectedForPathDrag(currentSeries)) {
+            return [currentSeries];
+        }
+        const selectedIds = this.svc.getSelectedSeriesIds();
+        const selectedSeries = this.config()?.series?.filter((series) => {
+            return (selectedIds.includes(series.id) &&
+                series.draggablePath &&
+                series.visible !== false &&
+                series.enabled !== false &&
+                series.pathDragType === currentSeries.pathDragType &&
+                ((currentSeries.pathDragType === DragPointType.x && series.xAxisIndex === currentSeries.xAxisIndex) ||
+                    (currentSeries.pathDragType === DragPointType.y && series.yAxisIndex === currentSeries.yAxisIndex)));
+        });
+        return selectedSeries?.length ? selectedSeries : [currentSeries];
+    }
+    isSeriesSelectedForPathDrag(series) {
+        return this.selectedSeriesIds().includes(series.id);
+    }
+    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]=\"seriesSelectedForPathDrag()\"\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]=\"seriesSelectedForPathDrag()\"\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]=\"seriesSelectedForPathDrag()\"\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]=\"seriesSelectedForPathDrag()\"\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 {
@@ -3005,6 +3307,9 @@ class ChartComponent {
         this.chartService.setConfig(config);
         this.zoomService.setBroadcastChannel(config?.zoom?.syncChannel);
     }
+    set selectedSeriesIds(seriesIds) {
+        this.chartService.setSelectedSeriesIds(seriesIds ?? []);
+    }
     constructor(chartService, zoomService, brushService, scaleService) {
         this.chartService = chartService;
         this.zoomService = zoomService;
@@ -3016,6 +3321,8 @@ class ChartComponent {
         this.plotBandContextMenu = new EventEmitter();
         this.plotLinesMove = new EventEmitter();
         this.pointMove = new EventEmitter();
+        this.seriesMove = new EventEmitter();
+        this.selectedSeriesIdsChange = new EventEmitter();
         this.chartClick = new EventEmitter();
         this.chartContextMenu = new EventEmitter();
         this.annotationContextMenu = new EventEmitter();
@@ -3075,6 +3382,14 @@ class ChartComponent {
         this.chartService.pointMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.pointMove.emit(_);
         });
+        this.chartService.seriesMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
+            this.seriesMove.emit(_);
+        });
+        this.chartService.selectedSeriesIds
+            .pipe(takeWhile(() => this._alive), distinctUntilChanged((prev, next) => this.areSeriesIdsEqual(prev, next)))
+            .subscribe((_) => {
+            this.selectedSeriesIdsChange.emit(_);
+        });
         this.chartService.chartClick.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.chartClick.emit(_);
         });
@@ -3103,8 +3418,11 @@ class ChartComponent {
     ngOnDestroy() {
         this._alive = false;
     }
+    areSeriesIdsEqual(first, second) {
+        return first.length === second.length && first.every((id, index) => id === second[index]);
+    }
     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", selectedSeriesIds: "selectedSeriesIds" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", seriesMove: "seriesMove", selectedSeriesIdsChange: "selectedSeriesIdsChange", 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 +3439,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Output
             }], pointMove: [{
                 type: Output
+            }], seriesMove: [{
+                type: Output
+            }], selectedSeriesIdsChange: [{
+                type: Output
             }], chartClick: [{
                 type: Output
             }], chartContextMenu: [{
@@ -3139,6 +3461,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Output
             }], config: [{
                 type: Input
+            }], selectedSeriesIds: [{
+                type: Input
             }] } });
 
 class PlotBand {