@tetacom/svg-charts 1.7.37 → 1.7.39

package/fesm2022/tetacom-svg-charts.mjs

@@ -1,11 +1,11 @@
 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, takeWhile, tap, observeOn, animationFrameScheduler, distinctUntilChanged } from 'rxjs';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
 import { maxIndex } from 'd3-array';
 import { toSignal } from '@angular/core/rxjs-interop';
-import * as i3 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { NgTemplateOutlet, AsyncPipe, KeyValuePipe, NgStyle } from '@angular/common';
 import { DialogService, Align as Align$1, TetaSize, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective, ColorInputComponent, SelectComponent, SelectOptionDirective, SelectValueDirective, ScrollableComponent, InputComponent } from '@tetacom/ng-components';
 import * as i1 from '@angular/forms';
@@ -193,8 +193,9 @@ class ChartService {
         this.plotBandEvent$ = new Subject();
         this.plotLineMove$ = new Subject();
         this.pointMove$ = new Subject();
-        this.seriesOffsetMove$ = 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();
@@ -218,8 +219,9 @@ class ChartService {
         this.plotBandEvent = this.plotBandEvent$.asObservable();
         this.plotLineMove = this.plotLineMove$.asObservable();
         this.pointMove = this.pointMove$.asObservable();
-        this.seriesOffsetMove = this.seriesOffsetMove$.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'));
@@ -235,6 +237,7 @@ class ChartService {
     }
     setConfig(config) {
         this.clearTooltips();
+        this.clearSeriesPathOffsets();
         this.config$.next(config);
     }
     setSize(size) {
@@ -297,8 +300,8 @@ class ChartService {
     emitPoint(event) {
         this.pointMove$.next(event);
     }
-    emitSeriesOffset(event) {
-        this.seriesOffsetMove$.next(event);
+    emitSeriesMove(event) {
+        this.seriesMove$.next(event);
     }
     getSeriesPathOffsets() {
         return this.seriesPathOffsets$.value;
@@ -306,6 +309,30 @@ class ChartService {
     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);
     }
@@ -1169,29 +1196,24 @@ class PositionUtil {
 }
 
 class TooltipComponent {
-    constructor(svc, cdr, zoomService, sanitizer, _zone, _elementRef) {
-        this.svc = svc;
-        this.cdr = cdr;
-        this.zoomService = zoomService;
-        this.sanitizer = sanitizer;
-        this._zone = _zone;
-        this._elementRef = _elementRef;
+    constructor() {
+        this.svc = inject(ChartService);
+        this.sanitizer = inject(DomSanitizer);
+        this.pointerMove = toSignal(this.svc.pointerMove);
+        this.display = computed(() => (this.pointerMove()?.type === 'mousemove' ? 1 : 0), ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+        this.position = computed(() => {
+            const event = this.pointerMove();
+            if (!this.display() || !event) {
+                return null;
+            }
+            return this.getPosition(event);
+        }, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
         this.tooltips = this.svc.tooltips.pipe(map((_) => [..._.values()]));
     }
     getImplicit(t) {
         return { $implicit: t };
     }
     ngOnInit() {
-        this.display = this.svc.pointerMove.pipe(map((event) => {
-            return event.type === 'mousemove' ? 1 : 0;
-        }), tap(() => {
-            setTimeout(() => {
-                this.cdr.detectChanges();
-            });
-        }));
-        this.position = this.svc.pointerMove.pipe(filter((event) => !!event), map((_) => {
-            return this.getPosition(_);
-        }), tap(() => this.cdr.detectChanges()));
         const transformHtml = (html) => {
             return this.sanitizer.bypassSecurityTrustHtml(html);
         };
@@ -1216,8 +1238,7 @@ class TooltipComponent {
             if (tooltipList?.length < 1) {
                 return '';
             }
-            const formatted = formatter ? transformHtml(formatter(tooltipList)) : defaultFormatter(tooltipList);
-            return formatted;
+            return formatter ? transformHtml(formatter(tooltipList)) : defaultFormatter(tooltipList);
         }));
     }
     getPosition(event) {
@@ -1239,13 +1260,13 @@ class TooltipComponent {
         const format = d3.format(',.5~r');
         return format(input);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TooltipComponent, isStandalone: true, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if ({ p: position | async }; as data) {\n  @if (tooltips | async; as t) {\n    @if (t.length > 0) {\n      <div\n        class=\"chart-tooltip color-text-90 bg-global-bgcard shadow-2\"\n        #tooltip\n        [style.position]=\"'fixed'\"\n        [style.opacity]=\"display | async\"\n        [hidden]=\"!data.p\"\n        style=\"pointer-events: none; min-width: 200px\"\n        [style.left.px]=\"data.p?.left\"\n        [style.top.px]=\"data.p?.top\"\n        [style.bottom.px]=\"data.p?.bottom\"\n        [style.right.px]=\"data.p?.right\"\n      >\n        @if (config.tooltip?.template) {\n          <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: getImplicit(t)\"></ng-container>\n        }\n        @if (config.tooltip?.format) {\n          <div [innerHTML]=\"displayTooltips | async\"></div>\n        } @else {\n          @if (!config.tooltip?.template) {\n            <div class=\"padding-2 border-radius-1\">\n              @for (tooltip of t; track $index) {\n                <div class=\"display-flex align-center\">\n                  <span\n                    class=\"display-block margin-right-1\"\n                    [style.width.px]=\"10\"\n                    [style.height.px]=\"2\"\n                    [style.background-color]=\"tooltip.series?.color\"\n                  >\n                  </span>\n                  <span class=\"font-title-3\">\n                    {{ tooltip.series?.name }}\n                    <span class=\"font-body-3\">\n                      x: {{ format(tooltip.point?.x) }} y: {{ format(tooltip.point?.y) }}\n                    </span>\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n}\n", styles: [":host{position:absolute;z-index:2}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TooltipComponent, isStandalone: true, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if ({ p: position() }; as data) {\n  @if (tooltips | async; as t) {\n    @if (t.length > 0) {\n      <div\n        class=\"chart-tooltip color-text-90 bg-global-bgcard shadow-2\"\n        #tooltip\n        [style.position]=\"'fixed'\"\n        [style.opacity]=\"display()\"\n        [hidden]=\"!data.p\"\n        style=\"pointer-events: none; min-width: 200px\"\n        [style.left.px]=\"data.p?.left\"\n        [style.top.px]=\"data.p?.top\"\n        [style.bottom.px]=\"data.p?.bottom\"\n        [style.right.px]=\"data.p?.right\"\n      >\n        @if (config.tooltip?.template) {\n          <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: getImplicit(t)\"></ng-container>\n        }\n        @if (config.tooltip?.format) {\n          <div [innerHTML]=\"displayTooltips | async\"></div>\n        } @else {\n          @if (!config.tooltip?.template) {\n            <div class=\"padding-2 border-radius-1\">\n              @for (tooltip of t; track $index) {\n                <div class=\"display-flex align-center\">\n                  <span\n                    class=\"display-block margin-right-1\"\n                    [style.width.px]=\"10\"\n                    [style.height.px]=\"2\"\n                    [style.background-color]=\"tooltip.series?.color\"\n                  >\n                  </span>\n                  <span class=\"font-title-3\">\n                    {{ tooltip.series?.name }}\n                    <span class=\"font-body-3\">\n                      x: {{ format(tooltip.point?.x) }} y: {{ format(tooltip.point?.y) }}\n                    </span>\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n}\n", styles: [":host{position:absolute;z-index:2}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgTemplateOutlet], template: "@if ({ p: position | async }; as data) {\n  @if (tooltips | async; as t) {\n    @if (t.length > 0) {\n      <div\n        class=\"chart-tooltip color-text-90 bg-global-bgcard shadow-2\"\n        #tooltip\n        [style.position]=\"'fixed'\"\n        [style.opacity]=\"display | async\"\n        [hidden]=\"!data.p\"\n        style=\"pointer-events: none; min-width: 200px\"\n        [style.left.px]=\"data.p?.left\"\n        [style.top.px]=\"data.p?.top\"\n        [style.bottom.px]=\"data.p?.bottom\"\n        [style.right.px]=\"data.p?.right\"\n      >\n        @if (config.tooltip?.template) {\n          <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: getImplicit(t)\"></ng-container>\n        }\n        @if (config.tooltip?.format) {\n          <div [innerHTML]=\"displayTooltips | async\"></div>\n        } @else {\n          @if (!config.tooltip?.template) {\n            <div class=\"padding-2 border-radius-1\">\n              @for (tooltip of t; track $index) {\n                <div class=\"display-flex align-center\">\n                  <span\n                    class=\"display-block margin-right-1\"\n                    [style.width.px]=\"10\"\n                    [style.height.px]=\"2\"\n                    [style.background-color]=\"tooltip.series?.color\"\n                  >\n                  </span>\n                  <span class=\"font-title-3\">\n                    {{ tooltip.series?.name }}\n                    <span class=\"font-body-3\">\n                      x: {{ format(tooltip.point?.x) }} y: {{ format(tooltip.point?.y) }}\n                    </span>\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n}\n", styles: [":host{position:absolute;z-index:2}\n"] }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { size: [{
+            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgTemplateOutlet], template: "@if ({ p: position() }; as data) {\n  @if (tooltips | async; as t) {\n    @if (t.length > 0) {\n      <div\n        class=\"chart-tooltip color-text-90 bg-global-bgcard shadow-2\"\n        #tooltip\n        [style.position]=\"'fixed'\"\n        [style.opacity]=\"display()\"\n        [hidden]=\"!data.p\"\n        style=\"pointer-events: none; min-width: 200px\"\n        [style.left.px]=\"data.p?.left\"\n        [style.top.px]=\"data.p?.top\"\n        [style.bottom.px]=\"data.p?.bottom\"\n        [style.right.px]=\"data.p?.right\"\n      >\n        @if (config.tooltip?.template) {\n          <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: getImplicit(t)\"></ng-container>\n        }\n        @if (config.tooltip?.format) {\n          <div [innerHTML]=\"displayTooltips | async\"></div>\n        } @else {\n          @if (!config.tooltip?.template) {\n            <div class=\"padding-2 border-radius-1\">\n              @for (tooltip of t; track $index) {\n                <div class=\"display-flex align-center\">\n                  <span\n                    class=\"display-block margin-right-1\"\n                    [style.width.px]=\"10\"\n                    [style.height.px]=\"2\"\n                    [style.background-color]=\"tooltip.series?.color\"\n                  >\n                  </span>\n                  <span class=\"font-title-3\">\n                    {{ tooltip.series?.name }}\n                    <span class=\"font-body-3\">\n                      x: {{ format(tooltip.point?.x) }} y: {{ format(tooltip.point?.y) }}\n                    </span>\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n}\n", styles: [":host{position:absolute;z-index:2}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{
                 type: Input
             }], config: [{
                 type: Input
@@ -1767,9 +1788,17 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
         this.markers = computed(() => {
             return this.series().data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined && _?.x !== null && _?.y !== null);
         }, ...(ngDevMode ? [{ debugName: "markers" }] : /* istanbul ignore next */ []));
+        this.sortedTooltipData = computed(() => {
+            this.update();
+            const data = [...this.series().data];
+            const tooltipTracking = this.config()?.tooltip?.tracking;
+            return data.sort(tooltipTracking === TooltipTracking.y ? (a, b) => a.y - b.y : (a, b) => a.x - b.x);
+        }, ...(ngDevMode ? [{ debugName: "sortedTooltipData" }] : /* istanbul ignore next */ []));
         this.path = computed(() => {
             this.update();
-            if (!this.x() || !this.y()) {
+            const x = this.x();
+            const y = this.y();
+            if (!x || !y) {
                 return '';
             }
             const filter = this.defaultClipPointsMapping.get(this.series().clipPointsDirection);
@@ -1781,18 +1810,18 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
                 point.y !== undefined &&
                 !isNaN(point.x) &&
                 !isNaN(point.y))
-                .x((point) => this.x()(point.x))
-                .y((point) => this.y()(point.y));
+                .x((point) => x(point.x))
+                .y((point) => y(point.y));
             let filteredData = this.series().data;
             const clipOffset = this.getClipOffset();
             if (this.series().clipPointsDirection === ClipPointsDirection.x) {
-                let [min, max] = this.x().domain();
+                let [min, max] = x.domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
                 filteredData = filteredData?.filter(filter(min - clipOffset.x, max - clipOffset.x));
             }
             if (this.series().clipPointsDirection === ClipPointsDirection.y) {
-                let [min, max] = this.y().domain();
+                let [min, max] = y.domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
                 filteredData = filteredData?.filter(filter(min - clipOffset.y, max - clipOffset.y));
@@ -1842,6 +1871,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;
@@ -1857,16 +1893,17 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
             return rV;
         };
         if (tooltipTracking === TooltipTracking.x) {
-            const sortedData = [...this.series().data].sort((a, b) => a.x - b.x);
+            const sortedData = this.sortedTooltipData();
             const bisect = d3.bisector((_) => _.x).right;
             const pointer = mouse[0];
             let x0 = scaleX.invert(pointer);
             if (x0 instanceof Date) {
                 x0 = x0.getTime();
             }
-            const rightId = bisect([...this.series().data].sort((a, b) => a.x - b.x), x0);
+            x0 = subtractOffset(x0, clipOffset.x);
+            const rightId = bisect(sortedData, 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)) {
@@ -1890,15 +1927,16 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
             };
         }
         if (tooltipTracking === TooltipTracking.y) {
-            const sortedData = [...this.series().data].sort((a, b) => a.y - b.y);
+            const sortedData = this.sortedTooltipData();
             const bisect = d3.bisector((_) => _.y).right;
             let y0 = scaleY.invert(mouse[1]);
             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)) {
@@ -2191,12 +2229,16 @@ 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);
@@ -2238,16 +2280,16 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
         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);
+        this.emitSeriesMove('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);
+        this.emitSeriesMove('drag', event);
     }
     seriesMoveEnd(event) {
         this.updateSeriesOffset(event);
-        this.emitSeriesOffset('end', event);
+        this.emitSeriesMove('end', event);
     }
     seriesPathClick(event) {
         if (this.seriesDragMoved) {
@@ -2264,8 +2306,7 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
         }
         event.stopPropagation();
         event.preventDefault();
-        this.series().selectedForPathDrag = !this.series().selectedForPathDrag;
-        this.cdr.markForCheck();
+        this.svc.toggleSelectedSeriesId(this.series().id);
     }
     moveStart(event, point) {
         this.start = { x: point.x, y: point.y };
@@ -2309,10 +2350,10 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
         label.dx = this.labelStart.dx + event.deltaX;
         label.dy = this.labelStart.dy + event.deltaY;
     }
-    emitSeriesOffset(type, event) {
+    emitSeriesMove(type, event) {
         const offsetValue = this.seriesOffsetValue();
         const seriesList = this.seriesDragGroup.length ? this.seriesDragGroup : [this.series()];
-        this.svc.emitSeriesOffset({
+        this.svc.emitSeriesMove({
             event: {
                 type,
                 sourceEvent: event,
@@ -2375,19 +2416,24 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
     }
     getPathDragSeriesGroup() {
         const currentSeries = this.series();
-        if (!currentSeries.selectedForPathDrag) {
+        if (!this.isSeriesSelectedForPathDrag(currentSeries)) {
             return [currentSeries];
         }
+        const selectedIds = this.svc.getSelectedSeriesIds();
         const selectedSeries = this.config()?.series?.filter((series) => {
-            return (series.selectedForPathDrag &&
+            return (selectedIds.includes(series.id) &&
                 series.draggablePath &&
                 series.visible !== false &&
                 series.enabled !== false &&
-                series.xAxisIndex === currentSeries.xAxisIndex &&
-                series.yAxisIndex === currentSeries.yAxisIndex);
+                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;
@@ -2398,24 +2444,27 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
         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: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 }); }
+    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: x(), y: y() }; as scales) {\n      @if (scales.x && scales.y) {\n        @for (point of draggablePoints; track point) {\n          <svg:g [attr.transform]=\"'translate(' + scales.x(point.x) + ',' + scales.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}\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, 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"] }]
+            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: x(), y: y() }; as scales) {\n      @if (scales.x && scales.y) {\n        @for (point of draggablePoints; track point) {\n          <svg:g [attr.transform]=\"'translate(' + scales.x(point.x) + ',' + scales.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}\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 {
     constructor() {
         super(...arguments);
         this.x1 = computed(() => {
-            const x = this.xScales().get(this.series().xAxisIndex)?.scale;
+            const series = this.series();
+            const x = this.xScales().get(series.xAxisIndex)?.scale;
             const range = x.range();
-            const domain = this.series().data.map((_) => _.x);
+            const domain = series.data.map((_) => _.x);
             return d3.scaleBand().range([0, range[1]]).domain(domain).padding(0.1);
         }, ...(ngDevMode ? [{ debugName: "x1" }] : /* istanbul ignore next */ []));
         this.barSeriesCount = computed(() => {
-            const count = this.config().series.filter((_) => _.type === SeriesType.bar && _.xAxisIndex === this.series().xAxisIndex);
+            const config = this.config();
+            const series = this.series();
+            const count = config.series.filter((_) => _.type === SeriesType.bar && _.xAxisIndex === series.xAxisIndex);
             return count.length;
         }, ...(ngDevMode ? [{ debugName: "barSeriesCount" }] : /* istanbul ignore next */ []));
         this.Math = Math;
@@ -2445,12 +2494,14 @@ class BlockSeriesComponent extends SeriesBaseComponent {
     constructor() {
         super(...arguments);
         this.displayPoints = computed(() => {
-            const domain = this.config().inverted ? this.y().domain() : this.x().domain();
+            const config = this.config();
+            const series = this.series();
+            const domain = config.inverted ? this.y().domain() : this.x().domain();
             const [min, max] = domain;
-            return this.series().data.filter((point, index, arr) => {
+            return series.data.filter((point, index, arr) => {
                 const next = arr[index + 1];
                 const secondNext = arr[index + 2];
-                if (this.config().inverted) {
+                if (config.inverted) {
                     if (point.y1 === null || point.y1 === undefined) {
                         point.y1 = next?.y ?? point.y;
                     }
@@ -2487,12 +2538,14 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
     constructor() {
         super(...arguments);
         this.displayPoints = computed(() => {
-            const domain = this.config().inverted ? this.y().domain() : this.x().domain();
+            const config = this.config();
+            const series = this.series();
+            const domain = config.inverted ? this.y().domain() : this.x().domain();
             const [min, max] = domain;
-            return this.series().data.filter((point, index, arr) => {
+            return series.data.filter((point, index, arr) => {
                 const next = arr[index + 1];
                 const secondNext = arr[index + 2];
-                if (this.config().inverted) {
+                if (config.inverted) {
                     if (point.y1 === null || point.y1 === undefined) {
                         point.y1 = next?.y ?? point.y;
                     }
@@ -2529,34 +2582,38 @@ class AreaSeriesComponent extends LinearSeriesBaseComponent {
     constructor() {
         super(...arguments);
         this.areaPath = computed(() => {
-            if (!this.x() || !this.y()) {
+            const x = this.x();
+            const y = this.y();
+            const config = this.config();
+            const series = this.series();
+            if (!x || !y) {
                 return '';
             }
             const area = d3
                 .area()
                 .defined((point) => point.x !== null && point.y !== null && !isNaN(point.x) && !isNaN(point.y));
-            if (this.config().inverted) {
+            if (config.inverted) {
                 area
-                    .x1((_) => (_.x1 !== null && _.x1 !== undefined ? this.x()(_.x1) : this.x()(0)))
-                    .x0((_) => this.x()(_.x))
-                    .y((_) => this.y()(_.y));
+                    .x1((_) => (_.x1 !== null && _.x1 !== undefined ? x(_.x1) : x(0)))
+                    .x0((_) => x(_.x))
+                    .y((_) => y(_.y));
             }
             else {
                 area
-                    .y1((_) => (_.y1 !== null && _.y1 !== undefined ? this.y()(_.y1) : this.y()(0)))
-                    .y0((_) => this.y()(_.y))
-                    .x((_) => this.x()(_.x));
-            }
-            const filter = this.defaultClipPointsMapping.get(this.series().clipPointsDirection);
-            let filteredData = this.series().data;
-            if (this.series().clipPointsDirection === ClipPointsDirection.x) {
-                let [min, max] = this.x().domain();
+                    .y1((_) => (_.y1 !== null && _.y1 !== undefined ? y(_.y1) : y(0)))
+                    .y0((_) => y(_.y))
+                    .x((_) => x(_.x));
+            }
+            const filter = this.defaultClipPointsMapping.get(series.clipPointsDirection);
+            let filteredData = series.data;
+            if (series.clipPointsDirection === ClipPointsDirection.x) {
+                let [min, max] = x.domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
                 filteredData = filteredData?.filter(filter(min, max));
             }
-            if (this.series().clipPointsDirection === ClipPointsDirection.y) {
-                let [min, max] = this.y().domain();
+            if (series.clipPointsDirection === ClipPointsDirection.y) {
+                let [min, max] = y.domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
                 filteredData = filteredData?.filter(filter(min, max));
@@ -2567,11 +2624,11 @@ class AreaSeriesComponent extends LinearSeriesBaseComponent {
         this.FillDirection = FillDirection;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AreaSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AreaSeriesComponent, isStandalone: true, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "@if (series()?.fillType === FillType.gradient) {\n  <svg:defs>\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '0%' : '100%'\"\n                        [attr.x2]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.8\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n}\n<svg:path class=\"area\"\n          [attr.d]=\"areaPath()\"\n          [attr.stroke-width]=\"0\"\n          [attr.fill-opacity]=\"series().style?.fillOpacity\"\n          [attr.fill]=\"series().fillType === FillType.gradient ? 'url(#gradient-fill-' + id + ')' : (series().style?.fill ?? series().color)\"></svg:path>\n<svg:path class=\"area\"\n          fill=\"none\"\n          [attr.d]=\"path()\"\n          [attr.stroke]=\"series().color\"\n          [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n          [attr.stroke-width]=\"series().style?.strokeWidth\"></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  @for (point of draggablePoints; track point) {\n    <svg:circle class=\"marker\"\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    ></svg:circle>\n  }\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AreaSeriesComponent, isStandalone: true, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "@if (series()?.fillType === FillType.gradient) {\n  <svg:defs>\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '0%' : '100%'\"\n                        [attr.x2]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.8\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n}\n<svg:path class=\"area\"\n          [attr.d]=\"areaPath()\"\n          [attr.stroke-width]=\"0\"\n          [attr.fill-opacity]=\"series().style?.fillOpacity\"\n          [attr.fill]=\"series().fillType === FillType.gradient ? 'url(#gradient-fill-' + id + ')' : (series().style?.fill ?? series().color)\"></svg:path>\n<svg:path class=\"area\"\n          fill=\"none\"\n          [attr.d]=\"path()\"\n          [attr.stroke]=\"series().color\"\n          [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n          [attr.stroke-width]=\"series().style?.strokeWidth\"></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 ({ points: markers(), x: x(), y: y() }; as data) {\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:circle class=\"marker\"\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]=\"data.x(point.x)\"\n                  [attr.cy]=\"data.y(point.y)\"\n      ></svg:circle>\n    }\n  }\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AreaSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (series()?.fillType === FillType.gradient) {\n  <svg:defs>\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '0%' : '100%'\"\n                        [attr.x2]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.8\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n}\n<svg:path class=\"area\"\n          [attr.d]=\"areaPath()\"\n          [attr.stroke-width]=\"0\"\n          [attr.fill-opacity]=\"series().style?.fillOpacity\"\n          [attr.fill]=\"series().fillType === FillType.gradient ? 'url(#gradient-fill-' + id + ')' : (series().style?.fill ?? series().color)\"></svg:path>\n<svg:path class=\"area\"\n          fill=\"none\"\n          [attr.d]=\"path()\"\n          [attr.stroke]=\"series().color\"\n          [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n          [attr.stroke-width]=\"series().style?.strokeWidth\"></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  @for (point of draggablePoints; track point) {\n    <svg:circle class=\"marker\"\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    ></svg:circle>\n  }\n}\n" }]
+            args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (series()?.fillType === FillType.gradient) {\n  <svg:defs>\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '0%' : '100%'\"\n                        [attr.x2]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.8\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n}\n<svg:path class=\"area\"\n          [attr.d]=\"areaPath()\"\n          [attr.stroke-width]=\"0\"\n          [attr.fill-opacity]=\"series().style?.fillOpacity\"\n          [attr.fill]=\"series().fillType === FillType.gradient ? 'url(#gradient-fill-' + id + ')' : (series().style?.fill ?? series().color)\"></svg:path>\n<svg:path class=\"area\"\n          fill=\"none\"\n          [attr.d]=\"path()\"\n          [attr.stroke]=\"series().color\"\n          [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n          [attr.stroke-width]=\"series().style?.strokeWidth\"></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 ({ points: markers(), x: x(), y: y() }; as data) {\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:circle class=\"marker\"\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]=\"data.x(point.x)\"\n                  [attr.cy]=\"data.y(point.y)\"\n      ></svg:circle>\n    }\n  }\n}\n" }]
         }] });
 
 const defaultSeriesTypeMapping = new Map()
@@ -3263,6 +3320,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;
@@ -3274,7 +3334,8 @@ class ChartComponent {
         this.plotBandContextMenu = new EventEmitter();
         this.plotLinesMove = new EventEmitter();
         this.pointMove = new EventEmitter();
-        this.seriesOffsetMove = new EventEmitter();
+        this.seriesMove = new EventEmitter();
+        this.selectedSeriesIdsChange = new EventEmitter();
         this.chartClick = new EventEmitter();
         this.chartContextMenu = new EventEmitter();
         this.annotationContextMenu = new EventEmitter();
@@ -3334,8 +3395,13 @@ 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.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(_);
@@ -3365,8 +3431,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", 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 }); }
+    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,
@@ -3383,7 +3452,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Output
             }], pointMove: [{
                 type: Output
-            }], seriesOffsetMove: [{
+            }], seriesMove: [{
+                type: Output
+            }], selectedSeriesIdsChange: [{
                 type: Output
             }], chartClick: [{
                 type: Output
@@ -3403,6 +3474,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Output
             }], config: [{
                 type: Input
+            }], selectedSeriesIds: [{
+                type: Input
             }] } });
 
 class PlotBand {
@@ -3427,8 +3500,9 @@ class BlockHorizontalSeriesComponent extends SeriesBaseComponent {
     constructor() {
         super(...arguments);
         this.displayPoints = computed(() => {
+            const x = this.x();
+            const [min, max] = x.domain();
             return this.series().data.filter((point, index, arr) => {
-                const [min, max] = this.x().domain();
                 return ((point.x >= min || point.x1 >= min || arr[index + 1]?.x >= min || arr[index + 1]?.x1 >= min) &&
                     (point.x <= max || point.x1 <= max || arr[index - 1]?.x <= max || arr[index - 1]?.x1 <= max));
             });