@tetacom/svg-charts 1.2.28 → 1.3.0

package/fesm2020/tetacom-svg-charts.mjs

@@ -2,12 +2,10 @@ import * as i0 from '@angular/core';
 import { Injectable, Component, Input, EventEmitter, Directive, Output, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, ViewChild, HostBinding, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, lastValueFrom, take, combineLatest, ReplaySubject, tap, takeWhile, combineLatestWith, observeOn, animationFrameScheduler } from 'rxjs';
+import { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, lastValueFrom, take, ReplaySubject, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler } from 'rxjs';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
-import objectHash from 'object-hash';
 import { maxIndex } from 'd3-array';
-import { debounceTime, tap as tap$1 } from 'rxjs/operators';
 import * as i5 from '@tetacom/ng-components';
 import { PositionUtil, Align, VerticalAlign, tetaZoneFull, LetModule } from '@tetacom/ng-components';
 import * as i3 from '@angular/platform-browser';
@@ -138,8 +136,10 @@ const defaultSeriesConfig = () => ({
 
 class ChartService {
     constructor() {
+        // public zoomInstance: Observable<ZoomService>;
+        // public brushInstance: Observable<BrushService>;
         this.config$ = new BehaviorSubject(defaultChartConfig());
-        this.size$ = new BehaviorSubject(new DOMRectReadOnly());
+        this.size$ = new BehaviorSubject(null);
         this.pointerMove$ = new Subject();
         this.tooltips$ = new BehaviorSubject(new Map());
         this.plotBandEvent$ = new Subject();
@@ -149,13 +149,12 @@ class ChartService {
         this.chartContextMenu$ = new Subject();
         this.annotationEvent$ = new Subject();
         this.annotationMove$ = new Subject();
-        this.zoomInstance$ = new Subject();
         this.id = of((Date.now() + Math.random()).toString(36));
         this.config = this.config$.asObservable().pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), map(this.restoreLocalStorage), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
-        this.size = this.size$.asObservable();
+        this.size = this.size$.asObservable().pipe(filter((size) => size != null));
         this.pointerMove = this.pointerMove$.asObservable();
         this.tooltips = this.tooltips$.asObservable();
         this.plotBandEvent = this.plotBandEvent$.asObservable();
@@ -176,7 +175,8 @@ class ChartService {
         this.plotBandContextMenu = this.plotBandEvent$
             .asObservable()
             .pipe(filter((_) => _?.event?.type === 'contextmenu'));
-        this.zoomInstance = this.zoomInstance$.asObservable();
+        // this.zoomInstance = this.zoomInstance$.asObservable();
+        // this.brushInstance = this.brushInstance$.asObservable();
     }
     setConfig(config) {
         this.clearTooltips();
@@ -243,9 +243,13 @@ class ChartService {
     emitChartContextMenu(event) {
         this.chartContextMenu$.next(event);
     }
-    emitZoomInstance(event) {
-        this.zoomInstance$.next(event);
-    }
+    // public emitZoomInstance(event: ZoomService) {
+    //   this.zoomInstance$.next(event);
+    // }
+    //
+    // public emitZoomInstance(event: ZoomService) {
+    //   this.zoomInstance$.next(event);
+    // }
     saveCookie(config) {
         if (!config.name)
             return;
@@ -279,7 +283,7 @@ class ChartService {
             };
         };
         config = Object.assign({}, defaultChartConfig(), config);
-        config.id = id;
+        config.id = config.id ?? id;
         config.xAxis = config.xAxis.map(defaultConfig(defaultAxisConfig));
         config.yAxis = config.yAxis.map(defaultConfig(defaultAxisConfig));
         config.series = config.series.map(defaultConfig(defaultSeriesConfig()));
@@ -344,6 +348,8 @@ class ChartService {
         return config;
     }
 }
+// private zoomInstance$ = new Subject<ZoomService>();
+// private brushInstance$ = new Subject<BrushService>();
 ChartService._hiddenSeriesPostfix = 'hidden_series';
 ChartService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 ChartService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, providedIn: 'root' });
@@ -360,14 +366,31 @@ var AxisOrientation;
     AxisOrientation[AxisOrientation["y"] = 1] = "y";
 })(AxisOrientation || (AxisOrientation = {}));
 
-class ZoomService {
+class BroadcastService {
     constructor() {
-        this.broadcastSubscription = [];
-        this.axisHashMap = new Map();
-        this.scaleHashMap = new Map();
-        this.elementHashMap = new Map();
-        this.zoomHashMap = new Map();
-        this.zoomed$ = new BehaviorSubject({});
+        this.zoomEmitter = new ReplaySubject(1);
+    }
+    broadcastZoom(value) {
+        this.zoomEmitter.next(value);
+    }
+    subscribeToZoom(channel) {
+        return this.zoomEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel));
+    }
+}
+BroadcastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BroadcastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ZoomService {
+    constructor(_broadcast, _chart) {
+        this._broadcast = _broadcast;
+        this._chart = _chart;
+        this.zoomed$ = new BehaviorSubject(null);
         this.zoomed = this.zoomed$.asObservable().pipe(shareReplay({
             bufferSize: 1,
             refCount: true
@@ -376,64 +399,62 @@ class ZoomService {
     fireZoom(zoom) {
         this.zoomed$.next(zoom);
     }
+    broadcastZoom(zoom) {
+        if (this.broadcastChannel?.length) {
+            this._broadcast.broadcastZoom({
+                channel: this.broadcastChannel,
+                message: zoom
+            });
+        }
+    }
     setBroadcastChannel(channel) {
+        if (this.broadcastSub) {
+            this.broadcastSub?.unsubscribe();
+        }
         this.broadcastChannel = channel;
-    }
-    setZoom(from, to, axisIndex = 0, axisOrientation = AxisOrientation.x) {
-        const hash = objectHash.sha1({ index: axisIndex, orientation: axisOrientation });
-        if (!this.zoomHashMap.has(hash)) {
-            return;
+        if (this.broadcastChannel?.length) {
+            this.broadcastSub = combineLatest([this._broadcast.subscribeToZoom(this.broadcastChannel), this._chart.config])
+                .pipe(filter(([zoom, config]) => {
+                return zoom.message?.chartId !== config.id;
+            }))
+                .subscribe(([zoom, config]) => {
+                this.fireZoom(zoom.message);
+            });
         }
-        const currentAxis = this.axisHashMap.get(hash);
-        const currentScale = this.scaleHashMap.get(hash);
-        const currentElement = this.elementHashMap.get(hash);
-        const currentZoom = this.zoomHashMap.get(hash);
-        currentScale.domain(currentAxis.originDomain);
-        if (axisOrientation === AxisOrientation.x) {
-            if (currentAxis.options.scaleType.type === ScaleType.log) {
-                currentScale.domain(currentAxis.options.inverted ? [...currentAxis.originDomain].reverse() : currentAxis.originDomain);
+    }
+    getD3Transform(targetDomain, originalDomain, scale, orientation, inverted) {
+        const zoomScale = Math.abs(originalDomain[1] - originalDomain[0]) / Math.abs(targetDomain[1] - targetDomain[0]);
+        let transform = zoomIdentity.scale(zoomScale);
+        if (orientation === AxisOrientation.x) {
+            if (!!inverted) {
+                transform = transform.translate(-scale(Math.max(...targetDomain)), 0);
             }
-        }
-        if (axisOrientation === AxisOrientation.y) {
-            if (currentAxis.options.scaleType.type === ScaleType.log) {
-                currentScale.domain(currentAxis.options.inverted ? currentAxis.originDomain : [...currentAxis.originDomain].reverse());
+            else {
+                transform = transform.translate(-scale(Math.min(...targetDomain)), 0);
             }
         }
-        const delta = Math.abs(currentScale(to) - currentScale(from));
-        const scale = currentScale.range()[1] / delta;
-        let transform = zoomIdentity.scale(scale);
-        if (currentAxis.orientation === AxisOrientation.x) {
-            if (currentAxis.options.scaleType.type === ScaleType.log) {
-                currentScale.domain(currentAxis.options.inverted ? [...currentScale.domain()].reverse() : currentScale.domain());
+        if (orientation === AxisOrientation.y) {
+            if (!!inverted) {
+                transform = transform.translate(0, -scale(Math.min(...targetDomain)));
             }
-            transform = transform.translate(-currentScale(from), 0);
-        }
-        if (currentAxis.orientation === AxisOrientation.y) {
-            if (currentAxis.options.scaleType.type === ScaleType.log) {
-                currentScale.domain(currentAxis.options.inverted ? currentScale.domain() : [...currentScale.domain()].reverse());
+            else {
+                transform = transform.translate(0, -scale(Math.max(...targetDomain)));
             }
-            transform = transform.translate(0, -currentScale(from));
         }
-        currentElement.transition().call(currentZoom.transform, transform, null, new MouseEvent('setZoom'));
+        return transform;
     }
-    resetZoom(axisIndex = 0, axisOrientation = AxisOrientation.x) {
-        const hash = objectHash.sha1({ index: axisIndex, orientation: axisOrientation });
-        if (!this.zoomHashMap.has(hash)) {
-            return;
-        }
-        const currentElement = this.elementHashMap.get(hash);
-        const currentZoom = this.zoomHashMap.get(hash);
-        currentElement.transition().call(currentZoom.transform, zoomIdentity, null, new MouseEvent('resetZoom'));
+    ngOnDestroy() {
+        this.broadcastSub?.unsubscribe();
     }
 }
-ZoomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ZoomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, deps: [{ token: BroadcastService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Injectable });
 ZoomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: BroadcastService }, { type: ChartService }]; } });
 
 const getTextWidth = (inputText, backupRatio = 0.5, fontSize = 10) => {
     let text = inputText ?? '';
@@ -506,7 +527,7 @@ class ExtremesBuilder {
 class Axis {
     constructor(config) {
         this._extremes = [0, 0];
-        this._originDomain = [];
+        this._originDomain = [0, 0];
         this.defaultFormatters = new Map()
             .set(ScaleType.linear, d3.format(',.5~r'))
             .set(ScaleType.time, d3.timeFormat('%d.%m.%Y'))
@@ -674,22 +695,21 @@ class ScaleService {
                 axis.setScale(scale);
                 axis.setOriginDomain(scale.domain());
                 const hasCache = this.transformCacheX.has(axis.index);
-                const shouldRestore = zoom?.target?.orientation !== AxisOrientation.x ||
-                    zoom.target?.index !== axis.index;
+                const shouldRestore = zoom?.axis?.orientation !== AxisOrientation.x ||
+                    zoom.axis?.index !== axis.index;
                 if (hasCache && shouldRestore) {
                     const restoredTransform = this.transformCacheX.get(axis.index);
                     axis.setScale(restoredTransform.rescaleX(scale));
                 }
             });
-            if (zoom) {
-                const event = zoom.event;
-                if (zoom.target?.orientation === AxisOrientation.x) {
-                    if (xAxisMap.has(zoom.target.index)) {
-                        const x = xAxisMap.get(zoom.target.index);
-                        const rescaled = event.transform.rescaleX(x.scale);
+            if (zoom && zoom.domain) {
+                if (zoom.axis?.orientation === AxisOrientation.x) {
+                    if (xAxisMap.has(zoom.axis.index)) {
+                        const x = xAxisMap.get(zoom.axis.index);
+                        const transform = this.zoomService.getD3Transform(zoom.domain, x.originDomain, x.scale, AxisOrientation.x, x.options.inverted);
+                        const rescaled = transform.rescaleX(x.scale.copy());
                         x.setScale(rescaled);
-                        const axis = xAxisMap.get(zoom.target.index);
-                        this.transformCacheX.set(axis.index, event.transform);
+                        this.transformCacheX.set(x.index, transform);
                     }
                 }
             }
@@ -726,22 +746,21 @@ class ScaleService {
                 axis.setScale(scale);
                 axis.setOriginDomain(scale.domain());
                 const hasCache = this.transformCacheY.has(axis.index);
-                const shouldRestore = zoom?.target?.orientation !== AxisOrientation.y ||
-                    zoom.target?.index !== axis.index;
+                const shouldRestore = zoom?.axis?.orientation !== AxisOrientation.y ||
+                    zoom.axis?.index !== axis.index;
                 if (hasCache && shouldRestore) {
                     const restoredTransform = this.transformCacheY.get(axis.index);
                     axis.setScale(restoredTransform.rescaleY(scale));
                 }
             });
-            if (zoom) {
-                const event = zoom.event;
-                if (zoom.target?.orientation === AxisOrientation.y) {
-                    if (yAxisMap.has(zoom.target.index)) {
-                        const y = yAxisMap.get(zoom.target.index);
-                        const rescaled = event.transform.rescaleY(y.scale);
+            if (zoom && zoom.domain) {
+                if (zoom.axis?.orientation === AxisOrientation.y) {
+                    if (yAxisMap.has(zoom.axis.index)) {
+                        const y = yAxisMap.get(zoom.axis.index);
+                        const transform = this.zoomService.getD3Transform(zoom.domain, y.originDomain, y.scale, AxisOrientation.y, y.options.inverted);
+                        const rescaled = transform.rescaleY(y.scale.copy());
                         y.setScale(rescaled);
-                        const axis = yAxisMap.get(zoom.target.index);
-                        this.transformCacheY.set(axis.index, event.transform);
+                        this.transformCacheY.set(y.index, transform);
                     }
                 }
             }
@@ -764,214 +783,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }]; } });
 
-var BrushType;
-(function (BrushType) {
-    BrushType[BrushType["x"] = 0] = "x";
-    BrushType[BrushType["y"] = 1] = "y";
-    BrushType[BrushType["xy"] = 2] = "xy";
-})(BrushType || (BrushType = {}));
-
-class ZoomMessage {
-    constructor(options) {
-        this.event = options?.event;
-        this.axis = options?.axis;
-        this.domain = options.domain;
-        this.chartId = options?.chartId;
-        this.style = options?.style;
-    }
-}
-class BrushMessage {
-    constructor(options) {
-        this.event = options?.event;
-        this.brushType = options?.brushType;
-        this.selection = options?.selection;
-        this.brushScale = options?.brushScale;
-        this.style = options?.style;
-    }
-}
-
-class BroadcastService {
-    constructor() {
-        this.zoomEmitter = new Subject();
-        this.brushEmitter = new ReplaySubject(1);
-    }
-    broadcastZoom(value) {
-        this.zoomEmitter.next(value);
-    }
-    broadcastBrush(value) {
-        this.brushEmitter.next(value);
-    }
-    subscribeToZoom(channel) {
-        return this.zoomEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel), shareReplay({
-            bufferSize: 1,
-            refCount: true
-        }));
-    }
-    subscribeToBrush(channel) {
-        return this.brushEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel), shareReplay({
-            bufferSize: 1,
-            refCount: true
-        }));
-    }
-}
-BroadcastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-BroadcastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
 class BrushService {
-    constructor(broadcastService, zone) {
-        this.broadcastService = broadcastService;
-        this.zone = zone;
-        this.brushMap = new Map()
-            .set(BrushType.x, d3.brushX())
-            .set(BrushType.y, d3.brushY());
-    }
-    applyBrush(svgElement, config, brushScale) {
-        this.broadcastSubscribtion?.unsubscribe();
-        this.brush?.on('start brush end', null);
-        if (config.brush?.enable) {
-            this.brush = this.brushMap.get(config?.brush?.type ?? BrushType.x);
-            const container = d3.select(svgElement.nativeElement);
-            this.brush.on('start brush end', (_) => {
-                if (_.sourceEvent) {
-                    if (!_.selection)
-                        return;
-                    const [from, to] = _.selection;
-                    if (to - from === 0) {
-                        const selection = this.selection?.map(brushScale) ??
-                            [config.brush?.from, config.brush?.to].map(brushScale);
-                        const halfBrushHeight = (selection[1] - selection[0]) / 2;
-                        const invertedSelection = [
-                            from - halfBrushHeight,
-                            to + halfBrushHeight,
-                        ].map(brushScale.invert);
-                        if (invertedSelection[1] - invertedSelection[0] >
-                            config.brush?.max) {
-                            container.call(this.brush.move, [
-                                Math.floor(invertedSelection[0]),
-                                Math.floor(invertedSelection[0] + config.brush?.max),
-                            ].map(brushScale));
-                            return;
-                        }
-                        if (invertedSelection[1] - invertedSelection[0] <
-                            config.brush?.min) {
-                            container.call(this.brush.move, [
-                                Math.floor(invertedSelection[0]),
-                                Math.ceil(invertedSelection[0] + config.brush?.min),
-                            ].map(brushScale));
-                            return;
-                        }
-                        container.call(this.brush.move, [
-                            from - halfBrushHeight,
-                            to + halfBrushHeight,
-                        ]);
-                        return;
-                    }
-                    if (brushScale.invert(to) - brushScale.invert(from) >
-                        config.brush?.max) {
-                        container.call(this.brush.move, this.selection
-                            ? [
-                                this.selection[0],
-                                this.selection[0] + config.brush?.max,
-                            ].map(brushScale)
-                            : [config.brush?.from, config.brush?.to].map(brushScale));
-                        return;
-                    }
-                    if (brushScale.invert(to) - brushScale.invert(from) <
-                        config.brush?.min) {
-                        container.call(this.brush.move, this.selection
-                            ? [
-                                this.selection[0],
-                                this.selection[0] + config.brush?.min,
-                            ].map(brushScale)
-                            : [config.brush?.from, config.brush?.to].map(brushScale));
-                        return;
-                    }
-                    if (_.sourceEvent instanceof MouseEvent) {
-                        this.selection = _.selection.map(brushScale.invert);
-                    }
-                    const brushMessage = new BrushMessage({
-                        event: _,
-                        selection: [brushScale.invert(from), brushScale.invert(to)],
-                        brushType: config?.brush?.type ?? BrushType.x,
-                        brushScale,
-                    });
-                    this.broadcastService.broadcastBrush({
-                        channel: config?.zoom?.syncChannel,
-                        message: brushMessage,
-                    });
-                }
-            });
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    container.call(this.brush);
-                    let domain = brushScale.domain();
-                    if (config?.brush?.from) {
-                        domain[0] = config.brush.from;
-                    }
-                    if (config?.brush?.to) {
-                        domain[1] = config.brush.to;
-                    }
-                    container.call(this.brush.move, this.selection
-                        ? this.selection.map(brushScale)
-                        : domain.map(brushScale), {});
-                }, 0);
-            });
-            this.broadcastSubscribtion = this.broadcastService
-                .subscribeToZoom(config?.zoom?.syncChannel)
-                .pipe(filter((m) => {
-                return (m.message.event.sourceEvent instanceof MouseEvent ||
-                    m.message.event.sourceEvent instanceof WheelEvent ||
-                    (window.TouchEvent &&
-                        m.message.event.sourceEvent instanceof TouchEvent));
-            }), tap((m) => {
-                const { message: { domain }, } = m;
-                if ((m.message?.axis.index === 0 &&
-                    m.message?.axis.orientation === AxisOrientation.y &&
-                    config.brush?.type === BrushType.y) ||
-                    (m.message?.axis.orientation === AxisOrientation.x &&
-                        config.brush?.type === BrushType.x)) {
-                    container.call(this.brush.move, [
-                        brushScale(domain[0]),
-                        brushScale(domain[1]),
-                    ]);
-                    this.selection = domain;
-                }
-            }), debounceTime(30), tap((m) => {
-                const { message: { domain }, } = m;
-                if (m.message.event.type === 'zoom') {
-                    const brushMessage = new BrushMessage({
-                        event: null,
-                        selection: domain,
-                        brushType: config?.brush?.type ?? BrushType.x,
-                        brushScale,
-                    });
-                    this.broadcastService.broadcastBrush({
-                        channel: config?.zoom?.syncChannel,
-                        message: brushMessage,
-                    });
-                }
-            }))
-                .subscribe();
-        }
+    // private _outBrushDomain = new ReplaySubject<[number, number]>(1);
+    constructor() {
+        // outBrushDomain: Observable<[number, number]>;
+        this._brushDomain = new ReplaySubject(1);
+        this.brushDomain = this._brushDomain.asObservable();
     }
-    clearPreviousSelection() {
-        this.selection = null;
+    setBrush(brush) {
+        this._brushDomain.next(brush);
     }
 }
-BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, deps: [{ token: BroadcastService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 BrushService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: BroadcastService }, { type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return []; } });
+
+var BrushType;
+(function (BrushType) {
+    BrushType[BrushType["x"] = 0] = "x";
+    BrushType[BrushType["y"] = 1] = "y";
+    BrushType[BrushType["xy"] = 2] = "xy";
+})(BrushType || (BrushType = {}));
 
 class SeriesBaseComponent {
     constructor(svc, cdr, scaleService, zoomService, element, zone) {
@@ -1023,7 +860,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
     }
     set series(series) {
         this.__series = series;
-        this.markers = this.__series.data?.filter((_) => _?.marker);
+        this.markers = this.__series.data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined);
     }
     get series() {
         return this.__series;
@@ -1060,7 +897,6 @@ class LinearSeriesBase extends SeriesBaseComponent {
             return this.getTransform(event, x.get(this.series.xAxisIndex).scale, y.get(this.series.yAxisIndex).scale);
         }), tap(() => setTimeout(() => this.cdr.detectChanges())));
         this.path = combineLatest([this.scaleService.scales, this._update]).pipe(map(([data]) => {
-            // console.log(data);
             const { x, y } = data;
             this.x = x.get(this.series.xAxisIndex)?.scale;
             this.y = y.get(this.series.yAxisIndex)?.scale;
@@ -1092,17 +928,9 @@ class LinearSeriesBase extends SeriesBaseComponent {
                 filteredData = filteredData?.filter(filter(min, max));
             }
             return line(filteredData);
-        }), tap((_) => {
-            // console.log(_)
-            setTimeout(() => {
-                if (this.markers?.length > 0) {
-                    // this.addDragEvents();
-                }
-            });
         }));
     }
     ngOnDestroy() {
-        // this.markerListeners?.on('start drag end', null);
         this.svc.setTooltip({
             point: null,
             series: this.series,
@@ -1110,65 +938,6 @@ class LinearSeriesBase extends SeriesBaseComponent {
     }
     ngAfterViewInit() {
     }
-    addDragEvents() {
-        // this.markerListeners?.on('start drag end', null);
-        // const drag = (node, event: d3.D3DragEvent<any, any, any>, d: BasePoint) => {
-        //   if (
-        //     d.marker?.dragType === DragPointType.x ||
-        //     d.marker?.dragType === DragPointType.xy
-        //   ) {
-        //     d.x = this.x.invert(event.x);
-        //   }
-        //
-        //   if (
-        //     d.marker?.dragType === DragPointType.y ||
-        //     d.marker?.dragType === DragPointType.xy
-        //   ) {
-        //     d.y = this.y.invert(event.y);
-        //   }
-        //
-        //   this.svc.emitPoint({
-        //     target: {
-        //       series: this.series,
-        //       point: d,
-        //     },
-        //     event,
-        //   });
-        //
-        //   this.cdr.detectChanges();
-        // };
-        // this.markerListeners = d3
-        //   .drag()
-        //   .subject(function (event, d: BasePoint) {
-        //     const node = d3.select(this);
-        //     return {x: node.attr('cx'), y: node.attr('cy')};
-        //   });
-        // const dragMarkers =
-        //   this.markerListeners.on(
-        //     'start drag end',
-        //     function (event: d3.D3DragEvent<any, any, any>, d: BasePoint) {
-        //       const node = d3.select(this);
-        //
-        //       drag(node, event, d);
-        //     }
-        //   );
-        //
-        // const draggableMarkers = this.series.data?.filter(
-        //   (_) => _?.marker && _?.marker?.draggable
-        // );
-        //
-        // const element = d3
-        //   .select(this.element.nativeElement)
-        //   .selectAll('.draggable-marker')
-        //   .data(draggableMarkers);
-        //
-        // element.call(dragMarkers as any);
-        //
-        // this.svgElement = d3
-        //   .select(this.element.nativeElement)
-        //   .select('.line')
-        //   .node() as SVGGeometryElement;
-    }
     getTransform(event, scaleX, scaleY) {
         if (event.type === 'mouseleave') {
             return null;
@@ -1205,7 +974,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
             }
             const rightId = bisect(this.series.data, x0);
             const range = scaleY.range();
-            const intersect = lineIntersection(pointer, range[0], pointer, range[1], scaleX(this.series.data[rightId - 1]?.x), scaleY(this.series.data[rightId - 1]?.y), scaleX(this.series.data[rightId]?.x), scaleY(this.series.data[rightId]?.y));
+            const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX(this.series.data[rightId - 1]?.x), scaleY(this.series.data[rightId - 1]?.y), scaleX(this.series.data[rightId]?.x), scaleY(this.series.data[rightId]?.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)) {
@@ -1233,7 +1002,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
             }
             const rightId = bisect(this.series.data, y0);
             const range = scaleX.range();
-            const intersect = lineIntersection(range[0], mouse[1], range[1], mouse[1], scaleX(this.series.data[rightId - 1]?.x), scaleY(this.series.data[rightId - 1]?.y), scaleX(this.series.data[rightId]?.x), scaleY(this.series.data[rightId]?.y));
+            const intersect = lineIntersection(range[0], mouse[1], Number.MAX_SAFE_INTEGER, mouse[1], scaleX(this.series.data[rightId - 1]?.x), scaleY(this.series.data[rightId - 1]?.y), scaleX(this.series.data[rightId]?.x), scaleY(this.series.data[rightId]?.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)) {
@@ -1308,6 +1077,7 @@ class DraggablePointDirective {
                 deltaX,
                 deltaY
             })) {
+                this.startPosition = null;
                 return;
             }
             if (this.transformCache) {
@@ -1426,7 +1196,7 @@ class LineSeriesComponent extends LinearSeriesBase {
                     }
                 }
                 if (point.marker.maxX !== null && point.marker.maxX !== undefined) {
-                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.minX) {
+                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.maxX) {
                         return false;
                     }
                 }
@@ -1488,10 +1258,10 @@ class LineSeriesComponent extends LinearSeriesBase {
     }
 }
 LineSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LineSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y!=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <svg:g\n    *ngFor=\"let point of draggablePoints\"\n    [attr.transform]=\"'translate(' + x(point.x)+ ',' +y(point.y) + ')'\">\n    <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n           [dragDirection]=\"point.marker.dragType\"\n           [allowDrag]=\"allowDrag(point)\"\n           #dragPoint=\"tetaDraggablePoint\"\n           (moveStart)=\"moveStart($event, point)\"\n           (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n           (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n           [class.draggable-marker]=\"point?.marker?.draggable\">\n      <svg:circle\n        class=\"marker\"\n        [attr.r]=\"point.marker.style?.radius ?? 5\"\n        [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n        [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n        [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n        [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n        [attr.cx]=\"0\"\n        [attr.cy]=\"0\">\n      </svg:circle>\n      <ng-container *ngIf=\"point.marker.label?.text\">\n        <svg:line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"point.marker.label?.dx\"\n          [attr.y2]=\"point.marker.label?.dy\"\n          [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n          [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n          [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n        </svg:line>\n        <svg:foreignObject\n          [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n          [dragDirection]=\"point.marker.label.dragType\"\n          #labelPoint=\"tetaDraggablePoint\"\n          (moveStart)=\"startLabel($event, point.marker.label)\"\n          (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n          (moveEnd)=\"labelPoint.resetTransform();\"\n          [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n          [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n          [attr.x]=\"point.marker.label?.dx\"\n          [attr.y]=\"point.marker.label?.dy\"\n          class=\"position-absolute\">\n          <div\n            #annotationNode\n            class=\"shadow-2 padding-2\"\n            [style.color]=\"'var(--color-text-90)'\"\n            [style.background-color]=\"'var(--color-background-50)'\"\n            [style.cursor]=\"'move'\"\n            style=\"border-radius: 2px; display: inline-block;\">\n            {{point.marker.label?.text}}\n          </div>\n        </svg:foreignObject>\n      </ng-container>\n    </svg:g>\n  </svg:g>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y!=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <ng-container *ngIf=\"x && y\">\n    <svg:g\n      *ngFor=\"let point of draggablePoints\"\n      [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n      <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n             [dragDirection]=\"point.marker.dragType\"\n             [allowDrag]=\"allowDrag(point)\"\n             #dragPoint=\"tetaDraggablePoint\"\n             (moveStart)=\"moveStart($event, point)\"\n             (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n             (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n             [class.draggable-marker]=\"point?.marker?.draggable\">\n        <svg:circle\n          class=\"marker\"\n          [attr.r]=\"point.marker.style?.radius ?? 5\"\n          [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n          [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n          [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n          [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n          [attr.cx]=\"0\"\n          [attr.cy]=\"0\">\n        </svg:circle>\n        <ng-container *ngIf=\"point.marker.label?.text\">\n          <svg:line\n            [attr.x1]=\"0\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"point.marker.label?.dx\"\n            [attr.y2]=\"point.marker.label?.dy\"\n            [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n            [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n            [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n          </svg:line>\n          <svg:foreignObject\n            [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n            [dragDirection]=\"point.marker.label.dragType\"\n            #labelPoint=\"tetaDraggablePoint\"\n            (moveStart)=\"startLabel($event, point.marker.label)\"\n            (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n            (moveEnd)=\"labelPoint.resetTransform();\"\n            [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n            [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n            [attr.x]=\"point.marker.label?.dx\"\n            [attr.y]=\"point.marker.label?.dy\"\n            class=\"position-absolute\">\n            <div\n              #annotationNode\n              class=\"shadow-2 padding-2\"\n              [style.color]=\"'var(--color-text-90)'\"\n              [style.background-color]=\"'var(--color-background-50)'\"\n              [style.cursor]=\"'move'\"\n              style=\"border-radius: 2px; display: inline-block;\">\n              {{point.marker.label?.text}}\n            </div>\n          </svg:foreignObject>\n        </ng-container>\n      </svg:g>\n    </svg:g>\n  </ng-container>\n\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LineSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y!=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <svg:g\n    *ngFor=\"let point of draggablePoints\"\n    [attr.transform]=\"'translate(' + x(point.x)+ ',' +y(point.y) + ')'\">\n    <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n           [dragDirection]=\"point.marker.dragType\"\n           [allowDrag]=\"allowDrag(point)\"\n           #dragPoint=\"tetaDraggablePoint\"\n           (moveStart)=\"moveStart($event, point)\"\n           (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n           (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n           [class.draggable-marker]=\"point?.marker?.draggable\">\n      <svg:circle\n        class=\"marker\"\n        [attr.r]=\"point.marker.style?.radius ?? 5\"\n        [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n        [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n        [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n        [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n        [attr.cx]=\"0\"\n        [attr.cy]=\"0\">\n      </svg:circle>\n      <ng-container *ngIf=\"point.marker.label?.text\">\n        <svg:line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"point.marker.label?.dx\"\n          [attr.y2]=\"point.marker.label?.dy\"\n          [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n          [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n          [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n        </svg:line>\n        <svg:foreignObject\n          [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n          [dragDirection]=\"point.marker.label.dragType\"\n          #labelPoint=\"tetaDraggablePoint\"\n          (moveStart)=\"startLabel($event, point.marker.label)\"\n          (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n          (moveEnd)=\"labelPoint.resetTransform();\"\n          [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n          [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n          [attr.x]=\"point.marker.label?.dx\"\n          [attr.y]=\"point.marker.label?.dy\"\n          class=\"position-absolute\">\n          <div\n            #annotationNode\n            class=\"shadow-2 padding-2\"\n            [style.color]=\"'var(--color-text-90)'\"\n            [style.background-color]=\"'var(--color-background-50)'\"\n            [style.cursor]=\"'move'\"\n            style=\"border-radius: 2px; display: inline-block;\">\n            {{point.marker.label?.text}}\n          </div>\n        </svg:foreignObject>\n      </ng-container>\n    </svg:g>\n  </svg:g>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
+            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y!=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <ng-container *ngIf=\"x && y\">\n    <svg:g\n      *ngFor=\"let point of draggablePoints\"\n      [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n      <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n             [dragDirection]=\"point.marker.dragType\"\n             [allowDrag]=\"allowDrag(point)\"\n             #dragPoint=\"tetaDraggablePoint\"\n             (moveStart)=\"moveStart($event, point)\"\n             (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n             (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n             [class.draggable-marker]=\"point?.marker?.draggable\">\n        <svg:circle\n          class=\"marker\"\n          [attr.r]=\"point.marker.style?.radius ?? 5\"\n          [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n          [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n          [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n          [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n          [attr.cx]=\"0\"\n          [attr.cy]=\"0\">\n        </svg:circle>\n        <ng-container *ngIf=\"point.marker.label?.text\">\n          <svg:line\n            [attr.x1]=\"0\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"point.marker.label?.dx\"\n            [attr.y2]=\"point.marker.label?.dy\"\n            [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n            [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n            [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n          </svg:line>\n          <svg:foreignObject\n            [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n            [dragDirection]=\"point.marker.label.dragType\"\n            #labelPoint=\"tetaDraggablePoint\"\n            (moveStart)=\"startLabel($event, point.marker.label)\"\n            (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n            (moveEnd)=\"labelPoint.resetTransform();\"\n            [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n            [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n            [attr.x]=\"point.marker.label?.dx\"\n            [attr.y]=\"point.marker.label?.dy\"\n            class=\"position-absolute\">\n            <div\n              #annotationNode\n              class=\"shadow-2 padding-2\"\n              [style.color]=\"'var(--color-text-90)'\"\n              [style.background-color]=\"'var(--color-background-50)'\"\n              [style.cursor]=\"'move'\"\n              style=\"border-radius: 2px; display: inline-block;\">\n              {{point.marker.label?.text}}\n            </div>\n          </svg:foreignObject>\n        </ng-container>\n      </svg:g>\n    </svg:g>\n  </ng-container>\n\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class BarSeriesComponent extends SeriesBaseComponent {
@@ -1960,7 +1730,9 @@ class PlotBandComponent {
         this.element = element;
         this.orientation = AxisOrientation;
         this.getTextPosition = () => {
-            const [min, max] = this.scale.domain();
+            let [min, max] = this.scale.domain();
+            min = min instanceof Date ? min.getTime() : min;
+            max = max instanceof Date ? max.getTime() : max;
             const position = ((this.plotBand.from <= min ? min : this.plotBand.from) + (this.plotBand.to >= max ? max : this.plotBand.to)) / 2;
             return this.scale(position);
         };
@@ -2187,11 +1959,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 args: ['tooltip', { static: false, read: ElementRef }]
             }] } });
 
+class ZoomMessage {
+    constructor(options) {
+        this.eventType = options?.eventType;
+        this.element = options?.element;
+        this.axis = options?.axis;
+        this.domain = options.domain;
+        this.chartId = options?.chartId;
+        this.style = options?.style;
+    }
+}
+class BrushMessage {
+    constructor(options) {
+        this.chartId = options?.chartId;
+        this.selection = options?.selection;
+    }
+}
+
 class ZoomableDirective {
-    constructor(elementRef, zoomService, broadcastService, chartService, zone) {
+    constructor(elementRef, zoomService, chartService, zone) {
         this.elementRef = elementRef;
         this.zoomService = zoomService;
-        this.broadcastService = broadcastService;
         this.chartService = chartService;
         this.zone = zone;
         this.zoomable = false;
@@ -2201,28 +1989,23 @@ class ZoomableDirective {
         this.zoomed = (event) => {
             if (event.sourceEvent) {
                 if (Object.keys(event.sourceEvent).length !== 0) {
-                    if (this.currentTransform === event.transform) {
-                        return;
-                    }
-                    const origin = this.brushScale.copy().domain(this.axis.extremes);
-                    let domain = this.config.zoom?.type === ZoomType.y
+                    const origin = this.axis.scale.copy().domain(this.axis.originDomain);
+                    let domain = this.axis.orientation === AxisOrientation.y
                         ? event.transform.rescaleY(origin).domain()
                         : event.transform.rescaleX(origin).domain();
                     const message = new ZoomMessage({
-                        event,
-                        axis: this.axis,
-                        domain,
-                        chartId: this.config.id,
-                    });
-                    this.broadcastService.broadcastZoom({
-                        channel: this.config?.zoom?.syncChannel,
-                        message,
+                        eventType: event.type,
+                        axis: {
+                            index: this.axis.index,
+                            orientation: this.axis.orientation,
+                        },
+                        element: this.elementRef,
+                        domain: domain,
+                        chartId: this.config.id
                     });
+                    this.zoomService.fireZoom(message);
+                    this.zoomService.broadcastZoom(message);
                 }
-                this.zoomService.fireZoom({
-                    event,
-                    target: this.axis,
-                });
                 this.currentTransform = event.transform;
             }
         };
@@ -2233,160 +2016,77 @@ class ZoomableDirective {
             this.crosshair = this.config?.tooltip?.showCrosshair;
         }
     }
-    ngOnChanges(changes) {
-        if (changes.hasOwnProperty('brushScale') || changes.hasOwnProperty('scale') || changes.hasOwnProperty('axis')) {
-            if (this.hash) {
-                this.zoomService.scaleHashMap.set(this.hash, this.scale);
-                this.zoomService.axisHashMap.set(this.hash, this.axis);
+    ngAfterViewInit() {
+        this.initZoomListeners();
+        this.initZoomSync();
+    }
+    ngOnDestroy() {
+        this.zoom?.on('start zoom end', null);
+        this._element?.on('wheel', null);
+        this.alive = false;
+    }
+    initZoomSync() {
+        this.zoomService.zoomed.pipe(takeWhile(() => this.alive)).subscribe((zoomed) => {
+            if (this._element && this.elementRef !== zoomed?.element
+                && zoomed?.axis?.index === this.axis.index
+                && zoomed?.axis?.orientation === this.axis.orientation) {
+                const scale = this.axis.scale.copy().domain(this.axis.originDomain);
+                let transform;
+                if (zoomed.domain === null) {
+                    transform = zoomIdentity;
+                }
+                else {
+                    transform =
+                        this.zoomService.getD3Transform(zoomed.domain, this.axis.originDomain, scale, this.axis.orientation, this.axis.options.inverted);
+                }
+                if (zoomed.style?.transition) {
+                    this._element.transition().call(this.zoom.transform, transform);
+                }
+                else {
+                    this._element.call(this.zoom.transform, transform);
+                }
+                this.currentTransform = transform;
             }
-        }
+        });
     }
-    ngAfterViewInit() {
+    initZoomListeners() {
         const enable = (this.axis?.options?.zoom && this.axis?.options.visible !== false) ||
             this.config?.zoom?.enable;
         if (!enable) {
             return;
         }
-        if (enable) {
-            this._element = d3.select(this.elementRef.nativeElement);
-            this.hash = objectHash.sha1({ index: this.axis.index, orientation: this.axis.orientation });
-            this.zoom = d3.zoom().extent([
+        this._element = d3.select(this.elementRef.nativeElement);
+        this.zoom = d3.zoom().extent([
+            [0, 0],
+            [this.size.width, this.size.height],
+        ]);
+        if (this.config.zoom?.limitTranslateByData) {
+            this.zoom.translateExtent([
                 [0, 0],
                 [this.size.width, this.size.height],
             ]);
-            if (this.config.zoom?.limitTranslateByData) {
-                this.zoom.translateExtent([
-                    [0, 0],
-                    [this.size.width, this.size.height],
-                ]);
-            }
-            if (this.config.zoom?.wheelDelta) {
-                this.zoom.wheelDelta(this.config.zoom?.wheelDelta);
-            }
-            this.zoomService.axisHashMap.set(this.hash, this.axis);
-            this.zoomService.elementHashMap.set(this.hash, this._element);
-            this.zoomService.scaleHashMap.set(this.hash, this.scale);
-            this.zoomService.zoomHashMap.set(this.hash, this.zoom);
-            this.zoomService.setBroadcastChannel(this.config?.zoom.syncChannel);
-            const maxZoom = this.config.zoom?.max
-                ? (this.axis.extremes[1] - this.axis.extremes[0]) /
-                    this.config.zoom?.max
-                : this.config.zoom?.limitZoomByData
-                    ? 1
-                    : 0;
-            const minZoom = this.config.zoom?.min
-                ? (this.axis.extremes[1] - this.axis.extremes[0]) /
-                    this.config.zoom?.min
-                : Infinity;
-            this.zoom.scaleExtent([maxZoom, minZoom]);
-            this.zoom.on('zoom end', this.zoomed);
-            this._element.call(this.zoom).on('dblclick.zoom', null); // Disable dbclick zoom
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    this.chartService.emitZoomInstance(this.zoomService);
-                });
-            });
-            if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
-                this.runWheelZoom();
-            }
         }
-        // Subscribe to zoom events
-        this.broadcastService.subscribeToZoom(this.config?.zoom.syncChannel).pipe(takeWhile((_) => this.alive), tap$1((m) => {
-            if (this.axis.index === m.message?.axis?.index && this.axis.orientation === m.message?.axis?.orientation) {
-                const currentZoom = d3.zoomTransform(this._element.node());
-                if (currentZoom !== m.message.event.transform && this.config.id === m.message?.chartId) {
-                    this._element.call(this.zoom.transform, m.message.event.transform);
-                }
-            }
-        }), filter((m) => m.message.event.sourceEvent instanceof MouseEvent ||
-            m.message.event.sourceEvent instanceof WheelEvent ||
-            (window.TouchEvent &&
-                m.message.event.sourceEvent instanceof TouchEvent)), filter((m) => {
-            return (this.axis.index === m.message?.axis?.index &&
-                this.axis.orientation === m.message?.axis?.orientation);
-        }), tap$1((m) => {
-            if (this.config.id !== m.message?.chartId) {
-                this.brushScale.domain(this.axis.originDomain);
-                const scale = Math.abs(this.axis.originDomain[1] - this.axis.originDomain[0]) / Math.abs(m.message.domain[1] - m.message.domain[0]);
-                let transform = zoomIdentity.scale(scale);
-                if (this.config?.zoom?.type === ZoomType.x) {
-                    if (this.config.xAxis[0]?.inverted) {
-                        transform = transform.translate(this.brushScale(-m.message.domain[1]), 0);
-                    }
-                    else {
-                        transform = transform.translate(-this.brushScale(m.message.domain[0]), 0);
-                    }
-                }
-                if (this.config?.zoom?.type === ZoomType.y) {
-                    if (this.config.yAxis[0]?.inverted) {
-                        transform = transform.translate(0, -this.brushScale(m.message.domain[0]));
-                    }
-                    else {
-                        transform = transform.translate(0, -this.brushScale(m.message.domain[1]));
-                    }
-                }
-                this._element.call(this.zoom.transform, transform, null, {});
-            }
-        }))
-            .subscribe();
-        // Subscribe to brush events x or y
-        if ((this.config.brush?.type === BrushType.x &&
-            this.axis.orientation === AxisOrientation.x) ||
-            (this.config.brush?.type === BrushType.y &&
-                this.axis.orientation === AxisOrientation.y)) {
-            this.broadcastService.subscribeToBrush(this.config?.zoom.syncChannel)
-                .pipe(combineLatestWith(this.chartService.size), takeWhile((_) => this.alive), filter((data) => {
-                const [m] = data;
-                return Boolean(m.message.selection);
-            }), tap$1((data) => {
-                const [m] = data;
-                const currentTransform = d3.zoomTransform(this._element.node());
-                if (!m.message.event &&
-                    this.currentSelection &&
-                    currentTransform.k !== 1) {
-                    return;
-                }
-                const s = m.message.selection;
-                this.brushScale.domain(this.axis.originDomain);
-                const domain = this.brushScale.domain();
-                const range = this.brushScale.range();
-                const scale = Math.abs(domain[1] - domain[0]) / Math.abs(s[1] - s[0]);
-                let transform = zoomIdentity.scale(scale);
-                if (m.message?.brushType === BrushType.x) {
-                    this.brushScale.range([range[0], this.size.width]);
-                    if (this.config.xAxis[0]?.inverted) {
-                        transform = transform.translate(-this.brushScale(s[0]), 0);
-                    }
-                    else {
-                        transform = transform.translate(-this.brushScale(s[1]), 0);
-                    }
-                }
-                if (m.message?.brushType === BrushType.y) {
-                    this.brushScale.range([range[0], this.size.height]);
-                    if (this.config.yAxis[0]?.inverted) {
-                        transform = transform.translate(0, -this.brushScale(s[0]));
-                    }
-                    else {
-                        transform = transform.translate(0, -this.brushScale(s[1]));
-                    }
-                }
-                if (m.message?.style?.transition) {
-                    this._element.transition().call(this.zoom.transform, transform, null, {});
-                }
-                else {
-                    this._element.call(this.zoom.transform, transform, null, {});
-                }
-                this.currentSelection = m.message.selection;
-            }))
-                .subscribe();
+        if (this.config.zoom?.wheelDelta) {
+            this.zoom.wheelDelta(this.config.zoom?.wheelDelta);
+        }
+        const maxZoom = this.config.zoom?.max
+            ? (this.axis.extremes[1] - this.axis.extremes[0]) /
+                this.config.zoom?.max
+            : this.config.zoom?.limitZoomByData
+                ? 1
+                : 0;
+        const minZoom = this.config.zoom?.min
+            ? (this.axis.extremes[1] - this.axis.extremes[0]) /
+                this.config.zoom?.min
+            : Infinity;
+        this.zoom.scaleExtent([maxZoom, minZoom]);
+        this.zoom.on('zoom end', this.zoomed);
+        this._element.call(this.zoom).on('dblclick.zoom', null); // Disable dbclick zoom
+        if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
+            this.runWheelTranslate();
         }
     }
-    ngOnDestroy() {
-        this.zoom?.on('start zoom end', null);
-        this._element?.on('wheel', null);
-        this.alive = false;
-    }
-    runWheelZoom() {
+    runWheelTranslate() {
         let type = 'start';
         let wheeling;
         this.zoom
@@ -2401,47 +2101,37 @@ class ZoomableDirective {
             return delta * 0.002;
         });
         const emit = (type, event) => {
-            const origin = this.brushScale.copy().domain(this.axis.extremes);
+            const origin = this.axis.scale.copy().domain(this.axis.originDomain);
             let transform = zoomIdentity;
             const delta = type === 'end'
                 ? 0
-                : this.config.zoom?.type === ZoomType.y
+                : this.axis.orientation === AxisOrientation.y
                     ? event.deltaY
                     : event.deltaX;
-            if (this.config.zoom?.type === ZoomType.y) {
+            if (this.axis.orientation === AxisOrientation.y) {
                 transform = transform.translate(0, this.currentTransform.y - delta / 2);
             }
-            if (this.config.zoom?.type === ZoomType.x) {
+            if (this.axis.orientation === AxisOrientation.x) {
                 transform = transform.translate(this.currentTransform.x - delta / 2, 0);
             }
             transform = transform.scale(this.currentTransform.k);
-            let domain = this.config.zoom?.type === ZoomType.y
+            let domain = this.axis.orientation === AxisOrientation.y
                 ? transform.rescaleY(origin).domain()
                 : transform.rescaleX(origin).domain();
             const message = new ZoomMessage({
-                event: {
-                    sourceEvent: event,
-                    transform,
-                    type,
+                eventType: type,
+                element: this.elementRef,
+                axis: {
+                    index: this.axis.index,
+                    orientation: this.axis.orientation
                 },
-                axis: this.axis,
                 domain,
                 chartId: this.config.id,
             });
-            this.zoomService.fireZoom({
-                event: {
-                    sourceEvent: event,
-                    transform,
-                    type,
-                },
-                target: this.axis,
-            });
-            this._element.call(this.zoom.transform, transform);
+            this._element?.call(this.zoom.transform, transform);
+            this.zoomService.fireZoom(message);
+            this.zoomService.broadcastZoom(message);
             this.currentTransform = transform;
-            this.broadcastService.broadcastZoom({
-                channel: this.config?.zoom?.syncChannel,
-                message,
-            });
         };
         this._element.on('wheel', (event) => {
             event.preventDefault();
@@ -2460,23 +2150,19 @@ class ZoomableDirective {
         });
     }
 }
-ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: BroadcastService }, { token: ChartService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size", brushScale: "brushScale", scale: "scale" }, host: { properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, usesOnChanges: true, ngImport: i0 });
+ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ChartService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size" }, host: { properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaZoomable]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: BroadcastService }, { type: ChartService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: ChartService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
                 type: Input
             }], axis: [{
                 type: Input
             }], size: [{
                 type: Input
-            }], brushScale: [{
-                type: Input
-            }], scale: [{
-                type: Input
             }], zoomable: [{
                 type: HostBinding,
                 args: ['class.zoomable']
@@ -2486,32 +2172,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class BrushableDirective {
-    constructor(brushService, chartService, element) {
+    constructor(brushService, chartService, element, zone) {
         this.brushService = brushService;
         this.chartService = chartService;
         this.element = element;
+        this.zone = zone;
+        this.brushMap = new Map()
+            .set(BrushType.x, d3.brushX())
+            .set(BrushType.y, d3.brushY());
+        this._alive = true;
+        this._container = d3.select(this.element.nativeElement);
+    }
+    ngOnInit() {
+        this.brushService.brushDomain.pipe(takeWhile(() => this._alive), filter((brush) => brush.chartId !== this.config.id)).subscribe((brush) => {
+            this._container.call(this.brush.move, [
+                Math.floor(brush.selection[0]),
+                Math.floor(brush.selection[1]),
+            ].map(this.axis.scale));
+        });
+    }
+    ngOnDestroy() {
+        this._alive = false;
+    }
+    ngAfterViewInit() {
     }
-    ngOnInit() { }
-    ngAfterViewInit() { }
     ngOnChanges(changes) {
         if (changes.hasOwnProperty('config')) {
-            this.brushService.clearPreviousSelection();
+            this.clearPreviousSelection();
         }
         if (this.config?.brush?.enable) {
-            this.brushService.applyBrush(this.element, this.config, this.brushScale);
+            this.applyBrush(this.config, this.axis.scale);
+        }
+    }
+    applyBrush(config, brushScale) {
+        this.brush?.on('start brush end', null);
+        if (config.brush?.enable) {
+            this.brush = this.brushMap.get(config?.brush?.type ?? BrushType.x);
+            this.brush.on('start brush end', (_) => {
+                if (_.sourceEvent) {
+                    if (!_.selection)
+                        return;
+                    const [from, to] = _.selection;
+                    if (to - from === 0) {
+                        const selection = this.selection?.map(brushScale) ??
+                            [config.brush?.from, config.brush?.to].map(brushScale);
+                        const halfBrushHeight = (selection[1] - selection[0]) / 2;
+                        const invertedSelection = [
+                            from - halfBrushHeight,
+                            to + halfBrushHeight,
+                        ].map(brushScale.invert);
+                        if (invertedSelection[1] - invertedSelection[0] >
+                            config.brush?.max) {
+                            this._container.call(this.brush.move, [
+                                Math.floor(invertedSelection[0]),
+                                Math.floor(invertedSelection[0] + config.brush?.max),
+                            ].map(brushScale));
+                            return;
+                        }
+                        if (invertedSelection[1] - invertedSelection[0] <
+                            config.brush?.min) {
+                            this._container.call(this.brush.move, [
+                                Math.floor(invertedSelection[0]),
+                                Math.ceil(invertedSelection[0] + config.brush?.min),
+                            ].map(brushScale));
+                            return;
+                        }
+                        this._container.call(this.brush.move, [
+                            from - halfBrushHeight,
+                            to + halfBrushHeight,
+                        ]);
+                        return;
+                    }
+                    if (brushScale.invert(to) - brushScale.invert(from) >
+                        config.brush?.max) {
+                        this._container.call(this.brush.move, this.selection
+                            ? [
+                                this.selection[0],
+                                this.selection[0] + config.brush?.max,
+                            ].map(brushScale)
+                            : [config.brush?.from, config.brush?.to].map(brushScale));
+                        return;
+                    }
+                    if (brushScale.invert(to) - brushScale.invert(from) <
+                        config.brush?.min) {
+                        this._container.call(this.brush.move, this.selection
+                            ? [
+                                this.selection[0],
+                                this.selection[0] + config.brush?.min,
+                            ].map(brushScale)
+                            : [config.brush?.from, config.brush?.to].map(brushScale));
+                        return;
+                    }
+                    if (_.sourceEvent instanceof MouseEvent) {
+                        this.selection = _.selection.map(brushScale.invert);
+                    }
+                    const brushMessage = new BrushMessage({
+                        chartId: this.config.id,
+                        selection: [brushScale.invert(from), brushScale.invert(to)],
+                    });
+                    this.brushService.setBrush(brushMessage);
+                }
+            });
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this._container.call(this.brush);
+                    let domain = brushScale.domain();
+                    if (config?.brush?.from) {
+                        domain[0] = config.brush.from;
+                    }
+                    if (config?.brush?.to) {
+                        domain[1] = config.brush.to;
+                    }
+                    this._container.call(this.brush.move, this.selection
+                        ? this.selection.map(brushScale)
+                        : domain.map(brushScale), {});
+                }, 0);
+            });
         }
     }
+    clearPreviousSelection() {
+        this.selection = null;
+    }
 }
-BrushableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushableDirective, deps: [{ token: BrushService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BrushableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: BrushableDirective, selector: "[tetaBrushable]", inputs: { config: "config", brushScale: "brushScale" }, usesOnChanges: true, ngImport: i0 });
+BrushableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushableDirective, deps: [{ token: BrushService }, { token: ChartService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+BrushableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: BrushableDirective, selector: "[tetaBrushable]", inputs: { config: "config", axis: "axis" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaBrushable]',
                 }]
-        }], ctorParameters: function () { return [{ type: BrushService }, { type: ChartService }, { type: i0.ElementRef }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: BrushService }, { type: ChartService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { config: [{
                 type: Input
-            }], brushScale: [{
+            }], axis: [{
                 type: Input
             }] } });
 
@@ -2597,7 +2389,6 @@ class CrosshairComponent {
         this.transform = this.chartService.pointerMove.pipe(map((event) => {
             const composedPath = event.composedPath();
             const classes = composedPath.map((_) => _.classList?.contains('crosshair')).filter((_) => _);
-            console.log(classes);
             return {
                 x: event.type === 'mouseleave' ? -9999 : event.offsetX,
                 y: event.type === 'mouseleave' ? -9999 : event.offsetY
@@ -2771,10 +2562,10 @@ class ChartContainerComponent {
     }
 }
 ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n\n        </ng-container>\n      </g>\n      <g class=\"x-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n        </ng-container>\n      </g>\n    </svg>\n  </ng-container>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           *ngFor=\"let annotation of data.config.annotations\"\n           [annotation]=\"annotation\"></g>\n      </g>\n      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale", "scale"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "brushScale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  visibleRect: visibleRect | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n\n        </ng-container>\n      </g>\n      <g class=\"x-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n        </ng-container>\n      </g>\n    </svg>\n  </ng-container>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           *ngFor=\"let annotation of data.config.annotations\"\n           [annotation]=\"annotation\"></g>\n      </g>\n      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "axis"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n\n        </ng-container>\n      </g>\n      <g class=\"x-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n        </ng-container>\n      </g>\n    </svg>\n  </ng-container>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           *ngFor=\"let annotation of data.config.annotations\"\n           [annotation]=\"annotation\"></g>\n      </g>\n      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
+            args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  visibleRect: visibleRect | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n\n        </ng-container>\n      </g>\n      <g class=\"x-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n        </ng-container>\n      </g>\n    </svg>\n  </ng-container>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           *ngFor=\"let annotation of data.config.annotations\"\n           [annotation]=\"annotation\"></g>\n      </g>\n      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
 class LegendComponent {
@@ -2809,9 +2600,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class ChartComponent {
-    constructor(chartService, zoomService, scaleService) {
+    constructor(chartService, zoomService, brushService, scaleService) {
         this.chartService = chartService;
         this.zoomService = zoomService;
+        this.brushService = brushService;
         this.scaleService = scaleService;
         this.pointerMove = new EventEmitter();
         this.plotBandsMove = new EventEmitter();
@@ -2825,16 +2617,20 @@ class ChartComponent {
         this.annotationClick = new EventEmitter();
         this.annotationMove = new EventEmitter();
         this.zoomServiceInstance = new EventEmitter();
+        this.brushServiceInstance = new EventEmitter();
         this._alive = true;
         this.svcConfig = this.chartService.config;
         this.hasSeriesData = this.svcConfig.pipe(map((_) => _.series?.length > 0 && _.series?.some((_) => _.data?.length > 0)));
     }
     set config(config) {
         this.chartService.setConfig(config);
+        this.zoomService.setBroadcastChannel(config?.zoom?.syncChannel);
     }
     ngOnChanges(changes) {
     }
     ngOnInit() {
+        this.zoomServiceInstance.emit(this.zoomService);
+        this.brushServiceInstance.emit(this.brushService);
         this.chartService.pointerMove
             .pipe(takeWhile(() => this._alive), withLatestFrom(this.scaleService.scales, this.chartService.config))
             .subscribe((data) => {
@@ -2905,27 +2701,19 @@ class ChartComponent {
             .subscribe((_) => {
             this.annotationMove.emit(_);
         });
-        this.chartService.zoomInstance
-            .pipe(takeWhile(() => this._alive))
-            .subscribe((_) => {
-            this.zoomServiceInstance.emit(_);
-        });
     }
     ngAfterViewInit() {
     }
     ngOnDestroy() {
         this._alive = false;
-        this.zoomService.broadcastSubscription?.forEach((sub) => {
-            sub.unsubscribe();
-        });
     }
 }
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartComponent, 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" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\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      <span *ngIf=\"!ref.hasChildNodes()\">\n        No data\n      </span>\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: BrushService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartComponent, 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" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\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      <span *ngIf=\"!ref.hasChildNodes()\">\n        No data\n      </span>\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-svg-chart', providers: [ChartService, ZoomService, ScaleService, BrushService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\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      <span *ngIf=\"!ref.hasChildNodes()\">\n        No data\n      </span>\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }, { type: ScaleService }]; }, propDecorators: { pointerMove: [{
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }, { type: BrushService }, { type: ScaleService }]; }, propDecorators: { pointerMove: [{
                 type: Output
             }], plotBandsMove: [{
                 type: Output
@@ -2949,6 +2737,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }], zoomServiceInstance: [{
                 type: Output
+            }], brushServiceInstance: [{
+                type: Output
             }], config: [{
                 type: Input
             }] } });