@tetacom/svg-charts 1.2.28 → 1.3.0

package/fesm2015/tetacom-svg-charts.mjs

@@ -3,12 +3,10 @@ import { Injectable, Component, Input, EventEmitter, Directive, Output, HostList
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { __awaiter } from 'tslib';
-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';
@@ -139,8 +137,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();
@@ -150,13 +150,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();
@@ -177,7 +176,8 @@ class ChartService {
         this.plotBandContextMenu = this.plotBandEvent$
             .asObservable()
             .pipe(filter((_) => { var _a; return ((_a = _ === null || _ === void 0 ? void 0 : _.event) === null || _a === void 0 ? void 0 : _a.type) === 'contextmenu'; }));
-        this.zoomInstance = this.zoomInstance$.asObservable();
+        // this.zoomInstance = this.zoomInstance$.asObservable();
+        // this.brushInstance = this.brushInstance$.asObservable();
     }
     setConfig(config) {
         this.clearTooltips();
@@ -246,9 +246,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) {
         var _a;
         if (!config.name)
@@ -276,7 +280,7 @@ class ChartService {
         return config;
     }
     setDefaults(data) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         let [config, id] = data;
         const defaultConfig = (defaultConfig) => {
             return (source) => {
@@ -284,7 +288,7 @@ class ChartService {
             };
         };
         config = Object.assign({}, defaultChartConfig(), config);
-        config.id = id;
+        config.id = (_a = config.id) !== null && _a !== void 0 ? _a : id;
         config.xAxis = config.xAxis.map(defaultConfig(defaultAxisConfig));
         config.yAxis = config.yAxis.map(defaultConfig(defaultAxisConfig));
         config.series = config.series.map(defaultConfig(defaultSeriesConfig()));
@@ -292,10 +296,10 @@ class ChartService {
             var _a, _b;
             return Object.assign(Object.assign({}, _), { data: (_a = _.data) !== null && _a !== void 0 ? _a : [], id: (_b = _.id) !== null && _b !== void 0 ? _b : index });
         });
-        const oppositeYCount = (_a = config.yAxis) === null || _a === void 0 ? void 0 : _a.filter((_) => _.opposite);
-        const oppositeXCount = (_b = config.xAxis) === null || _b === void 0 ? void 0 : _b.filter((_) => _.opposite);
-        const nonOppositeYCount = (_c = config.yAxis) === null || _c === void 0 ? void 0 : _c.filter((_) => !_.opposite);
-        const nonOppositeXCount = (_d = config.xAxis) === null || _d === void 0 ? void 0 : _d.filter((_) => !_.opposite);
+        const oppositeYCount = (_b = config.yAxis) === null || _b === void 0 ? void 0 : _b.filter((_) => _.opposite);
+        const oppositeXCount = (_c = config.xAxis) === null || _c === void 0 ? void 0 : _c.filter((_) => _.opposite);
+        const nonOppositeYCount = (_d = config.yAxis) === null || _d === void 0 ? void 0 : _d.filter((_) => !_.opposite);
+        const nonOppositeXCount = (_e = config.xAxis) === null || _e === void 0 ? void 0 : _e.filter((_) => !_.opposite);
         if ((nonOppositeXCount === null || nonOppositeXCount === void 0 ? void 0 : nonOppositeXCount.length) > 1) {
             config.bounds.bottom = 0;
         }
@@ -310,7 +314,7 @@ class ChartService {
         }
         config.tooltip = Object.assign({}, defaultChartConfig().tooltip, config.tooltip);
         config.zoom = Object.assign({}, defaultChartConfig().zoom, config.zoom);
-        config.zoom.syncChannel = (_f = (_e = config.zoom) === null || _e === void 0 ? void 0 : _e.syncChannel) !== null && _f !== void 0 ? _f : id;
+        config.zoom.syncChannel = (_g = (_f = config.zoom) === null || _f === void 0 ? void 0 : _f.syncChannel) !== null && _g !== void 0 ? _g : id;
         return config;
     }
     setPreparationData(config) {
@@ -338,6 +342,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' });
@@ -354,14 +360,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
@@ -370,64 +393,66 @@ class ZoomService {
     fireZoom(zoom) {
         this.zoomed$.next(zoom);
     }
+    broadcastZoom(zoom) {
+        var _a;
+        if ((_a = this.broadcastChannel) === null || _a === void 0 ? void 0 : _a.length) {
+            this._broadcast.broadcastZoom({
+                channel: this.broadcastChannel,
+                message: zoom
+            });
+        }
+    }
     setBroadcastChannel(channel) {
+        var _a, _b;
+        if (this.broadcastSub) {
+            (_a = this.broadcastSub) === null || _a === void 0 ? void 0 : _a.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 ((_b = this.broadcastChannel) === null || _b === void 0 ? void 0 : _b.length) {
+            this.broadcastSub = combineLatest([this._broadcast.subscribeToZoom(this.broadcastChannel), this._chart.config])
+                .pipe(filter(([zoom, config]) => {
+                var _a;
+                return ((_a = zoom.message) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a;
+        (_a = this.broadcastSub) === null || _a === void 0 ? void 0 : _a.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 !== null && inputText !== void 0 ? inputText : '';
@@ -500,7 +525,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'))
@@ -671,22 +696,21 @@ class ScaleService {
                 axis.setScale(scale);
                 axis.setOriginDomain(scale.domain());
                 const hasCache = this.transformCacheX.has(axis.index);
-                const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.x ||
-                    ((_b = zoom.target) === null || _b === void 0 ? void 0 : _b.index) !== axis.index;
+                const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.axis) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.x ||
+                    ((_b = zoom.axis) === null || _b === void 0 ? void 0 : _b.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 (((_a = zoom.target) === null || _a === void 0 ? void 0 : _a.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 (((_a = zoom.axis) === null || _a === void 0 ? void 0 : _a.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);
                     }
                 }
             }
@@ -724,22 +748,21 @@ class ScaleService {
                 axis.setScale(scale);
                 axis.setOriginDomain(scale.domain());
                 const hasCache = this.transformCacheY.has(axis.index);
-                const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.y ||
-                    ((_b = zoom.target) === null || _b === void 0 ? void 0 : _b.index) !== axis.index;
+                const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.axis) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.y ||
+                    ((_b = zoom.axis) === null || _b === void 0 ? void 0 : _b.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 (((_d = zoom.target) === null || _d === void 0 ? void 0 : _d.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 (((_d = zoom.axis) === null || _d === void 0 ? void 0 : _d.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);
                     }
                 }
             }
@@ -762,218 +785,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 === null || options === void 0 ? void 0 : options.event;
-        this.axis = options === null || options === void 0 ? void 0 : options.axis;
-        this.domain = options.domain;
-        this.chartId = options === null || options === void 0 ? void 0 : options.chartId;
-        this.style = options === null || options === void 0 ? void 0 : options.style;
-    }
-}
-class BrushMessage {
-    constructor(options) {
-        this.event = options === null || options === void 0 ? void 0 : options.event;
-        this.brushType = options === null || options === void 0 ? void 0 : options.brushType;
-        this.selection = options === null || options === void 0 ? void 0 : options.selection;
-        this.brushScale = options === null || options === void 0 ? void 0 : options.brushScale;
-        this.style = options === null || options === void 0 ? void 0 : 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) {
-        var _a, _b, _c, _d, _e, _f;
-        (_a = this.broadcastSubscribtion) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        (_b = this.brush) === null || _b === void 0 ? void 0 : _b.on('start brush end', null);
-        if ((_c = config.brush) === null || _c === void 0 ? void 0 : _c.enable) {
-            this.brush = this.brushMap.get((_e = (_d = config === null || config === void 0 ? void 0 : config.brush) === null || _d === void 0 ? void 0 : _d.type) !== null && _e !== void 0 ? _e : BrushType.x);
-            const container = d3.select(svgElement.nativeElement);
-            this.brush.on('start brush end', (_) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-                if (_.sourceEvent) {
-                    if (!_.selection)
-                        return;
-                    const [from, to] = _.selection;
-                    if (to - from === 0) {
-                        const selection = (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map(brushScale)) !== null && _b !== void 0 ? _b : [(_c = config.brush) === null || _c === void 0 ? void 0 : _c.from, (_d = config.brush) === null || _d === void 0 ? void 0 : _d.to].map(brushScale);
-                        const halfBrushHeight = (selection[1] - selection[0]) / 2;
-                        const invertedSelection = [
-                            from - halfBrushHeight,
-                            to + halfBrushHeight,
-                        ].map(brushScale.invert);
-                        if (invertedSelection[1] - invertedSelection[0] >
-                            ((_e = config.brush) === null || _e === void 0 ? void 0 : _e.max)) {
-                            container.call(this.brush.move, [
-                                Math.floor(invertedSelection[0]),
-                                Math.floor(invertedSelection[0] + ((_f = config.brush) === null || _f === void 0 ? void 0 : _f.max)),
-                            ].map(brushScale));
-                            return;
-                        }
-                        if (invertedSelection[1] - invertedSelection[0] <
-                            ((_g = config.brush) === null || _g === void 0 ? void 0 : _g.min)) {
-                            container.call(this.brush.move, [
-                                Math.floor(invertedSelection[0]),
-                                Math.ceil(invertedSelection[0] + ((_h = config.brush) === null || _h === void 0 ? void 0 : _h.min)),
-                            ].map(brushScale));
-                            return;
-                        }
-                        container.call(this.brush.move, [
-                            from - halfBrushHeight,
-                            to + halfBrushHeight,
-                        ]);
-                        return;
-                    }
-                    if (brushScale.invert(to) - brushScale.invert(from) >
-                        ((_j = config.brush) === null || _j === void 0 ? void 0 : _j.max)) {
-                        container.call(this.brush.move, this.selection
-                            ? [
-                                this.selection[0],
-                                this.selection[0] + ((_k = config.brush) === null || _k === void 0 ? void 0 : _k.max),
-                            ].map(brushScale)
-                            : [(_l = config.brush) === null || _l === void 0 ? void 0 : _l.from, (_m = config.brush) === null || _m === void 0 ? void 0 : _m.to].map(brushScale));
-                        return;
-                    }
-                    if (brushScale.invert(to) - brushScale.invert(from) <
-                        ((_o = config.brush) === null || _o === void 0 ? void 0 : _o.min)) {
-                        container.call(this.brush.move, this.selection
-                            ? [
-                                this.selection[0],
-                                this.selection[0] + ((_p = config.brush) === null || _p === void 0 ? void 0 : _p.min),
-                            ].map(brushScale)
-                            : [(_q = config.brush) === null || _q === void 0 ? void 0 : _q.from, (_r = config.brush) === null || _r === void 0 ? void 0 : _r.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: (_t = (_s = config === null || config === void 0 ? void 0 : config.brush) === null || _s === void 0 ? void 0 : _s.type) !== null && _t !== void 0 ? _t : BrushType.x,
-                        brushScale,
-                    });
-                    this.broadcastService.broadcastBrush({
-                        channel: (_u = config === null || config === void 0 ? void 0 : config.zoom) === null || _u === void 0 ? void 0 : _u.syncChannel,
-                        message: brushMessage,
-                    });
-                }
-            });
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    var _a, _b;
-                    container.call(this.brush);
-                    let domain = brushScale.domain();
-                    if ((_a = config === null || config === void 0 ? void 0 : config.brush) === null || _a === void 0 ? void 0 : _a.from) {
-                        domain[0] = config.brush.from;
-                    }
-                    if ((_b = config === null || config === void 0 ? void 0 : config.brush) === null || _b === void 0 ? void 0 : _b.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((_f = config === null || config === void 0 ? void 0 : config.zoom) === null || _f === void 0 ? void 0 : _f.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) => {
-                var _a, _b, _c, _d, _e;
-                const { message: { domain }, } = m;
-                if ((((_a = m.message) === null || _a === void 0 ? void 0 : _a.axis.index) === 0 &&
-                    ((_b = m.message) === null || _b === void 0 ? void 0 : _b.axis.orientation) === AxisOrientation.y &&
-                    ((_c = config.brush) === null || _c === void 0 ? void 0 : _c.type) === BrushType.y) ||
-                    (((_d = m.message) === null || _d === void 0 ? void 0 : _d.axis.orientation) === AxisOrientation.x &&
-                        ((_e = config.brush) === null || _e === void 0 ? void 0 : _e.type) === BrushType.x)) {
-                    container.call(this.brush.move, [
-                        brushScale(domain[0]),
-                        brushScale(domain[1]),
-                    ]);
-                    this.selection = domain;
-                }
-            }), debounceTime(30), tap((m) => {
-                var _a, _b, _c;
-                const { message: { domain }, } = m;
-                if (m.message.event.type === 'zoom') {
-                    const brushMessage = new BrushMessage({
-                        event: null,
-                        selection: domain,
-                        brushType: (_b = (_a = config === null || config === void 0 ? void 0 : config.brush) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : BrushType.x,
-                        brushScale,
-                    });
-                    this.broadcastService.broadcastBrush({
-                        channel: (_c = config === null || config === void 0 ? void 0 : config.zoom) === null || _c === void 0 ? void 0 : _c.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) {
@@ -1026,7 +863,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
     set series(series) {
         var _a;
         this.__series = series;
-        this.markers = (_a = this.__series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => _ === null || _ === void 0 ? void 0 : _.marker);
+        this.markers = (_a = this.__series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => (_ === null || _ === void 0 ? void 0 : _.marker) && (_ === null || _ === void 0 ? void 0 : _.x) !== undefined && (_ === null || _ === void 0 ? void 0 : _.y) !== undefined);
     }
     get series() {
         return this.__series;
@@ -1064,7 +901,6 @@ class LinearSeriesBase extends SeriesBaseComponent {
         }), tap(() => setTimeout(() => this.cdr.detectChanges())));
         this.path = combineLatest([this.scaleService.scales, this._update]).pipe(map(([data]) => {
             var _a, _b;
-            // console.log(data);
             const { x, y } = data;
             this.x = (_a = x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale;
             this.y = (_b = y.get(this.series.yAxisIndex)) === null || _b === void 0 ? void 0 : _b.scale;
@@ -1096,18 +932,9 @@ class LinearSeriesBase extends SeriesBaseComponent {
                 filteredData = filteredData === null || filteredData === void 0 ? void 0 : filteredData.filter(filter(min, max));
             }
             return line(filteredData);
-        }), tap((_) => {
-            // console.log(_)
-            setTimeout(() => {
-                var _a;
-                if (((_a = this.markers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                    // this.addDragEvents();
-                }
-            });
         }));
     }
     ngOnDestroy() {
-        // this.markerListeners?.on('start drag end', null);
         this.svc.setTooltip({
             point: null,
             series: this.series,
@@ -1115,65 +942,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) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (event.type === 'mouseleave') {
@@ -1211,7 +979,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((_c = this.series.data[rightId - 1]) === null || _c === void 0 ? void 0 : _c.x), scaleY((_d = this.series.data[rightId - 1]) === null || _d === void 0 ? void 0 : _d.y), scaleX((_e = this.series.data[rightId]) === null || _e === void 0 ? void 0 : _e.x), scaleY((_f = this.series.data[rightId]) === null || _f === void 0 ? void 0 : _f.y));
+            const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX((_c = this.series.data[rightId - 1]) === null || _c === void 0 ? void 0 : _c.x), scaleY((_d = this.series.data[rightId - 1]) === null || _d === void 0 ? void 0 : _d.y), scaleX((_e = this.series.data[rightId]) === null || _e === void 0 ? void 0 : _e.x), scaleY((_f = this.series.data[rightId]) === null || _f === void 0 ? void 0 : _f.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)) {
@@ -1239,7 +1007,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((_g = this.series.data[rightId - 1]) === null || _g === void 0 ? void 0 : _g.x), scaleY((_h = this.series.data[rightId - 1]) === null || _h === void 0 ? void 0 : _h.y), scaleX((_j = this.series.data[rightId]) === null || _j === void 0 ? void 0 : _j.x), scaleY((_k = this.series.data[rightId]) === null || _k === void 0 ? void 0 : _k.y));
+            const intersect = lineIntersection(range[0], mouse[1], Number.MAX_SAFE_INTEGER, mouse[1], scaleX((_g = this.series.data[rightId - 1]) === null || _g === void 0 ? void 0 : _g.x), scaleY((_h = this.series.data[rightId - 1]) === null || _h === void 0 ? void 0 : _h.y), scaleX((_j = this.series.data[rightId]) === null || _j === void 0 ? void 0 : _j.x), scaleY((_k = this.series.data[rightId]) === null || _k === void 0 ? void 0 : _k.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)) {
@@ -1314,6 +1082,7 @@ class DraggablePointDirective {
                 deltaX,
                 deltaY
             })) {
+                this.startPosition = null;
                 return;
             }
             if (this.transformCache) {
@@ -1432,7 +1201,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;
                     }
                 }
@@ -1494,10 +1263,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 {
@@ -1974,7 +1743,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);
         };
@@ -2206,11 +1977,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 === null || options === void 0 ? void 0 : options.eventType;
+        this.element = options === null || options === void 0 ? void 0 : options.element;
+        this.axis = options === null || options === void 0 ? void 0 : options.axis;
+        this.domain = options.domain;
+        this.chartId = options === null || options === void 0 ? void 0 : options.chartId;
+        this.style = options === null || options === void 0 ? void 0 : options.style;
+    }
+}
+class BrushMessage {
+    constructor(options) {
+        this.chartId = options === null || options === void 0 ? void 0 : options.chartId;
+        this.selection = options === null || options === void 0 ? void 0 : 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;
@@ -2218,31 +2005,25 @@ class ZoomableDirective {
         this.alive = true;
         this.currentTransform = zoomIdentity;
         this.zoomed = (event) => {
-            var _a, _b, _c;
             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 = ((_a = this.config.zoom) === null || _a === void 0 ? void 0 : _a.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: (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.zoom) === null || _c === void 0 ? void 0 : _c.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;
             }
         };
@@ -2254,166 +2035,80 @@ class ZoomableDirective {
             this.crosshair = (_k = (_j = this.config) === null || _j === void 0 ? void 0 : _j.tooltip) === null || _k === void 0 ? void 0 : _k.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() {
+        var _a, _b;
+        (_a = this.zoom) === null || _a === void 0 ? void 0 : _a.on('start zoom end', null);
+        (_b = this._element) === null || _b === void 0 ? void 0 : _b.on('wheel', null);
+        this.alive = false;
+    }
+    initZoomSync() {
+        this.zoomService.zoomed.pipe(takeWhile(() => this.alive)).subscribe((zoomed) => {
+            var _a, _b, _c;
+            if (this._element && this.elementRef !== (zoomed === null || zoomed === void 0 ? void 0 : zoomed.element)
+                && ((_a = zoomed === null || zoomed === void 0 ? void 0 : zoomed.axis) === null || _a === void 0 ? void 0 : _a.index) === this.axis.index
+                && ((_b = zoomed === null || zoomed === void 0 ? void 0 : zoomed.axis) === null || _b === void 0 ? void 0 : _b.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 ((_c = zoomed.style) === null || _c === void 0 ? void 0 : _c.transition) {
+                    this._element.transition().call(this.zoom.transform, transform);
+                }
+                else {
+                    this._element.call(this.zoom.transform, transform);
+                }
+                this.currentTransform = transform;
             }
-        }
+        });
     }
-    ngAfterViewInit() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    initZoomListeners() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const enable = (((_b = (_a = this.axis) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.zoom) && ((_c = this.axis) === null || _c === void 0 ? void 0 : _c.options.visible) !== false) ||
             ((_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.zoom) === null || _e === void 0 ? void 0 : _e.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 ((_f = this.config.zoom) === null || _f === void 0 ? void 0 : _f.limitTranslateByData) {
+            this.zoom.translateExtent([
                 [0, 0],
                 [this.size.width, this.size.height],
             ]);
-            if ((_f = this.config.zoom) === null || _f === void 0 ? void 0 : _f.limitTranslateByData) {
-                this.zoom.translateExtent([
-                    [0, 0],
-                    [this.size.width, this.size.height],
-                ]);
-            }
-            if ((_g = this.config.zoom) === null || _g === void 0 ? void 0 : _g.wheelDelta) {
-                this.zoom.wheelDelta((_h = this.config.zoom) === null || _h === void 0 ? void 0 : _h.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((_j = this.config) === null || _j === void 0 ? void 0 : _j.zoom.syncChannel);
-            const maxZoom = ((_k = this.config.zoom) === null || _k === void 0 ? void 0 : _k.max)
-                ? (this.axis.extremes[1] - this.axis.extremes[0]) /
-                    ((_l = this.config.zoom) === null || _l === void 0 ? void 0 : _l.max)
-                : ((_m = this.config.zoom) === null || _m === void 0 ? void 0 : _m.limitZoomByData)
-                    ? 1
-                    : 0;
-            const minZoom = ((_o = this.config.zoom) === null || _o === void 0 ? void 0 : _o.min)
-                ? (this.axis.extremes[1] - this.axis.extremes[0]) /
-                    ((_p = this.config.zoom) === null || _p === void 0 ? void 0 : _p.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 (((_r = (_q = this.config) === null || _q === void 0 ? void 0 : _q.zoom) === null || _r === void 0 ? void 0 : _r.zoomBehavior) === ZoomBehaviorType.wheel) {
-                this.runWheelZoom();
-            }
         }
-        // Subscribe to zoom events
-        this.broadcastService.subscribeToZoom((_s = this.config) === null || _s === void 0 ? void 0 : _s.zoom.syncChannel).pipe(takeWhile((_) => this.alive), tap$1((m) => {
-            var _a, _b, _c, _d, _e;
-            if (this.axis.index === ((_b = (_a = m.message) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.index) && this.axis.orientation === ((_d = (_c = m.message) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.orientation)) {
-                const currentZoom = d3.zoomTransform(this._element.node());
-                if (currentZoom !== m.message.event.transform && this.config.id === ((_e = m.message) === null || _e === void 0 ? void 0 : _e.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) => {
-            var _a, _b, _c, _d;
-            return (this.axis.index === ((_b = (_a = m.message) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.index) &&
-                this.axis.orientation === ((_d = (_c = m.message) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.orientation));
-        }), tap$1((m) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            if (this.config.id !== ((_a = m.message) === null || _a === void 0 ? void 0 : _a.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 (((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.zoom) === null || _c === void 0 ? void 0 : _c.type) === ZoomType.x) {
-                    if ((_d = this.config.xAxis[0]) === null || _d === void 0 ? void 0 : _d.inverted) {
-                        transform = transform.translate(this.brushScale(-m.message.domain[1]), 0);
-                    }
-                    else {
-                        transform = transform.translate(-this.brushScale(m.message.domain[0]), 0);
-                    }
-                }
-                if (((_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.zoom) === null || _f === void 0 ? void 0 : _f.type) === ZoomType.y) {
-                    if ((_g = this.config.yAxis[0]) === null || _g === void 0 ? void 0 : _g.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 ((((_t = this.config.brush) === null || _t === void 0 ? void 0 : _t.type) === BrushType.x &&
-            this.axis.orientation === AxisOrientation.x) ||
-            (((_u = this.config.brush) === null || _u === void 0 ? void 0 : _u.type) === BrushType.y &&
-                this.axis.orientation === AxisOrientation.y)) {
-            this.broadcastService.subscribeToBrush((_v = this.config) === null || _v === void 0 ? void 0 : _v.zoom.syncChannel)
-                .pipe(combineLatestWith(this.chartService.size), takeWhile((_) => this.alive), filter((data) => {
-                const [m] = data;
-                return Boolean(m.message.selection);
-            }), tap$1((data) => {
-                var _a, _b, _c, _d, _e, _f;
-                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 (((_a = m.message) === null || _a === void 0 ? void 0 : _a.brushType) === BrushType.x) {
-                    this.brushScale.range([range[0], this.size.width]);
-                    if ((_b = this.config.xAxis[0]) === null || _b === void 0 ? void 0 : _b.inverted) {
-                        transform = transform.translate(-this.brushScale(s[0]), 0);
-                    }
-                    else {
-                        transform = transform.translate(-this.brushScale(s[1]), 0);
-                    }
-                }
-                if (((_c = m.message) === null || _c === void 0 ? void 0 : _c.brushType) === BrushType.y) {
-                    this.brushScale.range([range[0], this.size.height]);
-                    if ((_d = this.config.yAxis[0]) === null || _d === void 0 ? void 0 : _d.inverted) {
-                        transform = transform.translate(0, -this.brushScale(s[0]));
-                    }
-                    else {
-                        transform = transform.translate(0, -this.brushScale(s[1]));
-                    }
-                }
-                if ((_f = (_e = m.message) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.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 ((_g = this.config.zoom) === null || _g === void 0 ? void 0 : _g.wheelDelta) {
+            this.zoom.wheelDelta((_h = this.config.zoom) === null || _h === void 0 ? void 0 : _h.wheelDelta);
+        }
+        const maxZoom = ((_j = this.config.zoom) === null || _j === void 0 ? void 0 : _j.max)
+            ? (this.axis.extremes[1] - this.axis.extremes[0]) /
+                ((_k = this.config.zoom) === null || _k === void 0 ? void 0 : _k.max)
+            : ((_l = this.config.zoom) === null || _l === void 0 ? void 0 : _l.limitZoomByData)
+                ? 1
+                : 0;
+        const minZoom = ((_m = this.config.zoom) === null || _m === void 0 ? void 0 : _m.min)
+            ? (this.axis.extremes[1] - this.axis.extremes[0]) /
+                ((_o = this.config.zoom) === null || _o === void 0 ? void 0 : _o.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 (((_q = (_p = this.config) === null || _p === void 0 ? void 0 : _p.zoom) === null || _q === void 0 ? void 0 : _q.zoomBehavior) === ZoomBehaviorType.wheel) {
+            this.runWheelTranslate();
         }
     }
-    ngOnDestroy() {
-        var _a, _b;
-        (_a = this.zoom) === null || _a === void 0 ? void 0 : _a.on('start zoom end', null);
-        (_b = this._element) === null || _b === void 0 ? void 0 : _b.on('wheel', null);
-        this.alive = false;
-    }
-    runWheelZoom() {
+    runWheelTranslate() {
         let type = 'start';
         let wheeling;
         this.zoom
@@ -2429,48 +2124,38 @@ class ZoomableDirective {
             return delta * 0.002;
         });
         const emit = (type, event) => {
-            var _a, _b, _c, _d, _e, _f;
-            const origin = this.brushScale.copy().domain(this.axis.extremes);
+            var _a;
+            const origin = this.axis.scale.copy().domain(this.axis.originDomain);
             let transform = zoomIdentity;
             const delta = type === 'end'
                 ? 0
-                : ((_a = this.config.zoom) === null || _a === void 0 ? void 0 : _a.type) === ZoomType.y
+                : this.axis.orientation === AxisOrientation.y
                     ? event.deltaY
                     : event.deltaX;
-            if (((_b = this.config.zoom) === null || _b === void 0 ? void 0 : _b.type) === ZoomType.y) {
+            if (this.axis.orientation === AxisOrientation.y) {
                 transform = transform.translate(0, this.currentTransform.y - delta / 2);
             }
-            if (((_c = this.config.zoom) === null || _c === void 0 ? void 0 : _c.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 = ((_d = this.config.zoom) === null || _d === void 0 ? void 0 : _d.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);
+            (_a = this._element) === null || _a === void 0 ? void 0 : _a.call(this.zoom.transform, transform);
+            this.zoomService.fireZoom(message);
+            this.zoomService.broadcastZoom(message);
             this.currentTransform = transform;
-            this.broadcastService.broadcastZoom({
-                channel: (_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.zoom) === null || _f === void 0 ? void 0 : _f.syncChannel,
-                message,
-            });
         };
         this._element.on('wheel', (event) => {
             event.preventDefault();
@@ -2489,23 +2174,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']
@@ -2515,33 +2196,141 @@ 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) {
         var _a, _b;
         if (changes.hasOwnProperty('config')) {
-            this.brushService.clearPreviousSelection();
+            this.clearPreviousSelection();
         }
         if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.brush) === null || _b === void 0 ? void 0 : _b.enable) {
-            this.brushService.applyBrush(this.element, this.config, this.brushScale);
+            this.applyBrush(this.config, this.axis.scale);
+        }
+    }
+    applyBrush(config, brushScale) {
+        var _a, _b, _c, _d;
+        (_a = this.brush) === null || _a === void 0 ? void 0 : _a.on('start brush end', null);
+        if ((_b = config.brush) === null || _b === void 0 ? void 0 : _b.enable) {
+            this.brush = this.brushMap.get((_d = (_c = config === null || config === void 0 ? void 0 : config.brush) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : BrushType.x);
+            this.brush.on('start brush end', (_) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                if (_.sourceEvent) {
+                    if (!_.selection)
+                        return;
+                    const [from, to] = _.selection;
+                    if (to - from === 0) {
+                        const selection = (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map(brushScale)) !== null && _b !== void 0 ? _b : [(_c = config.brush) === null || _c === void 0 ? void 0 : _c.from, (_d = config.brush) === null || _d === void 0 ? void 0 : _d.to].map(brushScale);
+                        const halfBrushHeight = (selection[1] - selection[0]) / 2;
+                        const invertedSelection = [
+                            from - halfBrushHeight,
+                            to + halfBrushHeight,
+                        ].map(brushScale.invert);
+                        if (invertedSelection[1] - invertedSelection[0] >
+                            ((_e = config.brush) === null || _e === void 0 ? void 0 : _e.max)) {
+                            this._container.call(this.brush.move, [
+                                Math.floor(invertedSelection[0]),
+                                Math.floor(invertedSelection[0] + ((_f = config.brush) === null || _f === void 0 ? void 0 : _f.max)),
+                            ].map(brushScale));
+                            return;
+                        }
+                        if (invertedSelection[1] - invertedSelection[0] <
+                            ((_g = config.brush) === null || _g === void 0 ? void 0 : _g.min)) {
+                            this._container.call(this.brush.move, [
+                                Math.floor(invertedSelection[0]),
+                                Math.ceil(invertedSelection[0] + ((_h = config.brush) === null || _h === void 0 ? void 0 : _h.min)),
+                            ].map(brushScale));
+                            return;
+                        }
+                        this._container.call(this.brush.move, [
+                            from - halfBrushHeight,
+                            to + halfBrushHeight,
+                        ]);
+                        return;
+                    }
+                    if (brushScale.invert(to) - brushScale.invert(from) >
+                        ((_j = config.brush) === null || _j === void 0 ? void 0 : _j.max)) {
+                        this._container.call(this.brush.move, this.selection
+                            ? [
+                                this.selection[0],
+                                this.selection[0] + ((_k = config.brush) === null || _k === void 0 ? void 0 : _k.max),
+                            ].map(brushScale)
+                            : [(_l = config.brush) === null || _l === void 0 ? void 0 : _l.from, (_m = config.brush) === null || _m === void 0 ? void 0 : _m.to].map(brushScale));
+                        return;
+                    }
+                    if (brushScale.invert(to) - brushScale.invert(from) <
+                        ((_o = config.brush) === null || _o === void 0 ? void 0 : _o.min)) {
+                        this._container.call(this.brush.move, this.selection
+                            ? [
+                                this.selection[0],
+                                this.selection[0] + ((_p = config.brush) === null || _p === void 0 ? void 0 : _p.min),
+                            ].map(brushScale)
+                            : [(_q = config.brush) === null || _q === void 0 ? void 0 : _q.from, (_r = config.brush) === null || _r === void 0 ? void 0 : _r.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(() => {
+                    var _a, _b;
+                    this._container.call(this.brush);
+                    let domain = brushScale.domain();
+                    if ((_a = config === null || config === void 0 ? void 0 : config.brush) === null || _a === void 0 ? void 0 : _a.from) {
+                        domain[0] = config.brush.from;
+                    }
+                    if ((_b = config === null || config === void 0 ? void 0 : config.brush) === null || _b === void 0 ? void 0 : _b.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
             }] } });
 
@@ -2627,7 +2416,6 @@ class CrosshairComponent {
         this.transform = this.chartService.pointerMove.pipe(map((event) => {
             const composedPath = event.composedPath();
             const classes = composedPath.map((_) => { var _a; return (_a = _.classList) === null || _a === void 0 ? void 0 : _a.contains('crosshair'); }).filter((_) => _);
-            console.log(classes);
             return {
                 x: event.type === 'mouseleave' ? -9999 : event.offsetX,
                 y: event.type === 'mouseleave' ? -9999 : event.offsetY
@@ -2807,10 +2595,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 {
@@ -2846,9 +2634,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();
@@ -2862,16 +2651,21 @@ 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((_) => { var _a, _b; return ((_a = _.series) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = _.series) === null || _b === void 0 ? void 0 : _b.some((_) => { var _a; return ((_a = _.data) === null || _a === void 0 ? void 0 : _a.length) > 0; })); }));
     }
     set config(config) {
+        var _a;
         this.chartService.setConfig(config);
+        this.zoomService.setBroadcastChannel((_a = config === null || config === void 0 ? void 0 : config.zoom) === null || _a === void 0 ? void 0 : _a.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) => {
@@ -2943,28 +2737,19 @@ class ChartComponent {
             .subscribe((_) => {
             this.annotationMove.emit(_);
         });
-        this.chartService.zoomInstance
-            .pipe(takeWhile(() => this._alive))
-            .subscribe((_) => {
-            this.zoomServiceInstance.emit(_);
-        });
     }
     ngAfterViewInit() {
     }
     ngOnDestroy() {
-        var _a;
         this._alive = false;
-        (_a = this.zoomService.broadcastSubscription) === null || _a === void 0 ? void 0 : _a.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
@@ -2988,6 +2773,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }], zoomServiceInstance: [{
                 type: Output
+            }], brushServiceInstance: [{
+                type: Output
             }], config: [{
                 type: Input
             }] } });