@tetacom/svg-charts 1.1.21 → 1.1.24

package/fesm2020/tetacom-svg-charts.mjs

@@ -218,6 +218,7 @@ class ChartService {
         config.series = config.series.map((_, index) => {
             return {
                 ..._,
+                data: _.data ?? [],
                 id: _.id ?? index,
             };
         });
@@ -238,6 +239,7 @@ class ChartService {
             config.bounds.right = 0;
         }
         config.tooltip = Object.assign({}, defaultChartConfig().tooltip, config.tooltip);
+        config.zoom = Object.assign({}, defaultChartConfig().zoom, config.zoom);
         config.zoom.syncChannel = config.zoom?.syncChannel ?? id;
         return config;
     }
@@ -381,7 +383,7 @@ class Axis {
         this._extremes = [0, 0];
         this.defaultFormatters = new Map()
             .set(ScaleType.linear, d3.format(',.2f'))
-            .set(ScaleType.time, d3.timeFormat('%B %d, %Y'))
+            .set(ScaleType.time, d3.timeFormat('%d.%m.%Y'))
             .set(ScaleType.log, d3.format(',.2f'))
             .set(ScaleType.pow, d3.format(',.2f'))
             .set(ScaleType.sqrt, d3.format(',.2f'));
@@ -831,11 +833,16 @@ class TooltipComponent {
         };
         const defaultFormatter = (tooltips) => {
             let html = '';
+            const format = d3.timeFormat('%d.%m.%Y');
             tooltips.forEach((_) => {
                 const indicatorStyle = `display:block; width: 10px; height: 2px; background-color: ${_?.series?.color}`;
                 html += `<div class="display-flex align-center"><span class="margin-right-1" style="${indicatorStyle}"></span>
           <span class="font-title-3">${_.series.name}
-          <span class="font-body-3">x: ${_.point.x?.toFixed(2)} y: ${_.point.y?.toFixed(2)}</span></span></div>`;
+            <span class="font-body-3">
+              x: ${_.point.x instanceof Date ? format(_.point.x) : _.point.x?.toFixed(2)}
+              y: ${_.point.y instanceof Date ? format(_.point.y) : _.point.y?.toFixed(2)}
+            </span>
+          </span></div>`;
             });
             return transformHtml(html);
         };
@@ -1563,6 +1570,7 @@ class BlockSeriesComponent extends SeriesBaseComponent {
         this.zoomService = zoomService;
         this.element = element;
         this.fillType = FillType;
+        this.Math = Math;
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
@@ -1571,18 +1579,15 @@ class BlockSeriesComponent extends SeriesBaseComponent {
         this.y = this.scaleService.yScaleMap.pipe(map((_) => _.get(this.series.yAxisIndex)));
         this.displayPoints = this.y.pipe(map((y) => {
             return this.series.data.filter((point, index, arr) => {
-                const height = Math.abs(y(point.y1) - y(point.y));
                 const [min, max] = y.domain();
-                const visibleCondition = height > defaultVisiblePixels &&
-                    (point.y >= min ||
-                        point.y1 >= min ||
-                        arr[index + 1]?.y >= min ||
-                        arr[index + 1]?.y1 >= min) &&
+                return (point.y >= min ||
+                    point.y1 >= min ||
+                    arr[index + 1]?.y >= min ||
+                    arr[index + 1]?.y1 >= min) &&
                     (point.y <= max ||
                         point.y1 <= max ||
                         arr[index - 1]?.y <= max ||
                         arr[index - 1]?.y1 <= max);
-                return visibleCondition;
             });
         }));
     }
@@ -1602,10 +1607,10 @@ class BlockSeriesComponent extends SeriesBaseComponent {
     }
 }
 BlockSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BlockSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BlockSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BlockSeriesComponent, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        x=\"0\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"data.y(point.y1) - data.y(point.y)\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\"\n        width=\"100%\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BlockSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BlockSeriesComponent, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        x=\"0\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\"\n        width=\"100%\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BlockSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-block-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        x=\"0\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"data.y(point.y1) - data.y(point.y)\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\"\n        width=\"100%\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""] }]
+            args: [{ selector: 'svg:svg[teta-block-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        x=\"0\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\"\n        width=\"100%\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class BlockAreaSeriesComponent extends SeriesBaseComponent {
@@ -1617,26 +1622,24 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
         this.zoomService = zoomService;
         this.element = element;
         this.fillType = FillType;
+        this.Math = Math;
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
-        const defaultVisiblePixels = 3;
+        const defaultVisiblePixels = 0;
         this.x = this.scaleService.xScaleMap.pipe(map((_) => _.get(this.series.xAxisIndex)));
         this.y = this.scaleService.yScaleMap.pipe(map((_) => _.get(this.series.yAxisIndex)));
         this.displayPoints = this.y.pipe(map((y) => {
             return this.series.data.filter((point, index, arr) => {
-                const height = Math.abs(y(point.y1) - y(point.y));
                 const [min, max] = y.domain();
-                const visibleCondition = height > defaultVisiblePixels &&
-                    (point.y >= min ||
-                        point.y1 >= min ||
-                        arr[index + 1]?.y >= min ||
-                        arr[index + 1]?.y1 >= min) &&
+                return (point.y >= min ||
+                    point.y1 >= min ||
+                    arr[index + 1]?.y >= min ||
+                    arr[index + 1]?.y1 >= min) &&
                     (point.y <= max ||
                         point.y1 <= max ||
                         arr[index - 1]?.y <= max ||
                         arr[index - 1]?.y1 <= max);
-                return visibleCondition;
             });
         }));
     }
@@ -1656,10 +1659,10 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
     }
 }
 BlockAreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BlockAreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BlockAreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BlockAreaSeriesComponent, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        *ngIf=\"!!config.inverted\"\n        [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"data.y(point.y1) - data.y(point.y)\"\n        [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:rect\n        *ngIf=\"!config.inverted\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"data.y(0)\"\n        [attr.height]=\"data.y(0) - data.y(point.y)\"\n        [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BlockAreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BlockAreaSeriesComponent, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        *ngIf=\"!!config.inverted\"\n        [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n        [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:rect\n        *ngIf=\"!config.inverted\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"data.y(0)\"\n        [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n        [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        *ngIf=\"!!config.inverted\"\n        [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"data.y(point.y1) - data.y(point.y)\"\n        [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:rect\n        *ngIf=\"!config.inverted\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"data.y(0)\"\n        [attr.height]=\"data.y(0) - data.y(point.y)\"\n        [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""] }]
+            args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        *ngIf=\"!!config.inverted\"\n        [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n        [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:rect\n        *ngIf=\"!config.inverted\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"data.y(0)\"\n        [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n        [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class AreaSeriesComponent extends LinearSeriesBase {
@@ -1837,6 +1840,7 @@ class ZoomableDirective {
         this.zoomable = false;
         this.alive = true;
         this.currentTransform = zoomIdentity;
+        this.wheelIdle = true;
         this.zoomed = (event) => {
             if (event.sourceEvent) {
                 if (Object.keys(event.sourceEvent).length !== 0) {
@@ -1844,14 +1848,14 @@ class ZoomableDirective {
                         return;
                     }
                     const origin = this.brushScale.copy().domain(this.zoomAxis.extremes);
-                    let domain = this.config.zoom?.type === ZoomType.y ?
-                        event.transform.rescaleY(origin).domain() :
-                        event.transform.rescaleX(origin).domain();
+                    let domain = this.config.zoom?.type === ZoomType.y
+                        ? event.transform.rescaleY(origin).domain()
+                        : event.transform.rescaleX(origin).domain();
                     const message = new ZoomMessage({
                         event,
                         axis: this.zoomAxis,
                         brushDomain: domain,
-                        chartId: this.config.id
+                        chartId: this.config.id,
                     });
                     this.broadcastService.broadcastZoom({
                         channel: this.config?.zoom?.syncChannel,
@@ -1860,7 +1864,7 @@ class ZoomableDirective {
                 }
                 this.zoomService.setZoom({
                     event,
-                    target: this.zoomAxis
+                    target: this.zoomAxis,
                 });
                 this.currentTransform = event.transform;
             }
@@ -1872,119 +1876,164 @@ class ZoomableDirective {
         }
     }
     ngAfterViewInit() {
-        const enable = this.axis?.options?.zoom && this.axis?.options.visible !== false || this.config?.zoom?.enable;
+        const enable = (this.axis?.options?.zoom && this.axis?.options.visible !== false) ||
+            this.config?.zoom?.enable;
         if (!enable) {
             return;
         }
         this._element = d3.select(this.elementRef.nativeElement);
-        this.zoom = d3
-            .zoom()
-            .extent([
+        this.zoom = d3.zoom().extent([
             [0, 0],
             [this.size.width, this.size.height],
         ]);
         if (this.config.zoom?.limitTranslateByData) {
-            this.zoom.translateExtent([[0, 0], [this.size.width, this.size.height]]);
+            this.zoom.translateExtent([
+                [0, 0],
+                [this.size.width, this.size.height],
+            ]);
         }
-        const commonZoomAxis = Axis.createAxis(this.config?.zoom.type === ZoomType.x ? AxisOrientation.x : AxisOrientation.y, this.config, 0, true);
+        const commonZoomAxis = Axis.createAxis(this.config?.zoom.type === ZoomType.x
+            ? AxisOrientation.x
+            : AxisOrientation.y, this.config, 0, true);
         this.zoomAxis = this.axis ?? commonZoomAxis;
         if (enable) {
-            const maxZoom = this.config.zoom?.max ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / this.config.zoom?.max : this.config.zoom?.limitZoomByData ? 1 : 0;
-            const minZoom = this.config.zoom?.min ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / this.config.zoom?.min : Infinity;
+            const maxZoom = this.config.zoom?.max
+                ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) /
+                    this.config.zoom?.max
+                : this.config.zoom?.limitZoomByData
+                    ? 1
+                    : 0;
+            const minZoom = this.config.zoom?.min
+                ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) /
+                    this.config.zoom?.min
+                : Infinity;
             this.zoom.scaleExtent([maxZoom, minZoom]);
             this.zoom.on('start zoom end', this.zoomed);
             this._element.call(this.zoom).on('dblclick.zoom', null);
             if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
-                let wheeling;
                 let type = 'start';
-                const origin = this.brushScale.copy().domain(this.zoomAxis.extremes);
+                let wheeling;
                 this.zoom
-                    .filter((event) => event.ctrlKey && event.type === 'wheel')
+                    .filter((event) => (event.ctrlKey && event.type === 'wheel') ||
+                    Boolean(window.TouchEvent))
                     .wheelDelta((event) => {
-                    const delta = this.config?.zoom.type === ZoomType.x ? -event.deltaX : -event.deltaY;
+                    const delta = this.config?.zoom.type === ZoomType.x
+                        ? -event.deltaX
+                        : -event.deltaY;
                     return delta * 0.002;
                 });
+                const emit = (type, event) => {
+                    const origin = this.brushScale.copy().domain(this.zoomAxis.extremes);
+                    let transform = zoomIdentity;
+                    const delta = type === 'end'
+                        ? 0
+                        : this.config.zoom?.type === ZoomType.y
+                            ? event.deltaY
+                            : event.deltaX;
+                    if (this.config.zoom?.type === ZoomType.y) {
+                        transform = transform.translate(0, this.currentTransform.y - delta / 2);
+                    }
+                    if (this.config.zoom?.type === ZoomType.x) {
+                        transform = transform.translate(this.currentTransform.x - delta / 2, 0);
+                    }
+                    transform = transform.scale(this.currentTransform.k);
+                    let domain = this.config.zoom?.type === ZoomType.y
+                        ? transform.rescaleY(origin).domain()
+                        : transform.rescaleX(origin).domain();
+                    const message = new ZoomMessage({
+                        event: {
+                            sourceEvent: event,
+                            transform,
+                            type,
+                        },
+                        axis: this.zoomAxis,
+                        brushDomain: domain,
+                        chartId: this.config.id,
+                    });
+                    this.zoomService.setZoom({
+                        event: {
+                            sourceEvent: event,
+                            transform,
+                            type,
+                        },
+                        target: this.zoomAxis,
+                    });
+                    this._element.call(this.zoom.transform, transform);
+                    this.currentTransform = transform;
+                    this.broadcastService.broadcastZoom({
+                        channel: this.config?.zoom?.syncChannel,
+                        message,
+                    });
+                };
                 this._element.on('wheel', (event) => {
                     event.preventDefault();
                     if (event.ctrlKey) {
                         return;
                     }
-                    const emit = (type) => {
-                        let transform = zoomIdentity;
-                        const delta = type === 'end' ? 0 : this.config.zoom?.type === ZoomType.y ? event.deltaY : event.deltaX;
-                        if (this.config.zoom?.type === ZoomType.y) {
-                            transform = transform.translate(0, this.currentTransform.y - delta / 2);
-                        }
-                        if (this.config.zoom?.type === ZoomType.x) {
-                            transform = transform.translate(this.currentTransform.x - delta / 2, 0);
-                        }
-                        transform = transform.scale(this.currentTransform.k);
-                        let domain = this.config.zoom?.type === ZoomType.y ?
-                            transform.rescaleY(origin).domain() :
-                            transform.rescaleX(origin).domain();
-                        const message = new ZoomMessage({
-                            event: {
-                                sourceEvent: event,
-                                transform,
-                                type
-                            },
-                            axis: this.zoomAxis,
-                            brushDomain: domain,
-                            chartId: this.config.id
-                        });
-                        this.zoomService.setZoom({
-                            event: {
-                                sourceEvent: event,
-                                transform,
-                                type
-                            },
-                            target: this.zoomAxis
-                        });
-                        this.broadcastService.broadcastZoom({
-                            channel: this.config?.zoom?.syncChannel,
-                            message,
-                        });
-                        this._element.call(this.zoom.transform, transform);
-                        this.currentTransform = transform;
-                    };
                     this.zone.runOutsideAngular(() => {
                         clearTimeout(wheeling);
-                        emit(type);
+                        emit(type, event);
                         type = 'zoom';
+                        this.wheelIdle = false;
                         wheeling = setTimeout(() => {
                             type = 'end';
-                            emit(type);
+                            emit(type, event);
+                            this.wheelIdle = true;
                             type = 'start';
-                        }, 300);
+                        }, 150);
                     });
                 });
             }
         }
         // Subscribe to zoom events
-        this.broadcastService.subscribeToZoom(this.config?.zoom.syncChannel).pipe(takeWhile((_) => this.alive), filter((m) => m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent), filter((m) => {
-            return this.zoomAxis.index === m.message?.axis?.index && this.zoomAxis.orientation === m.message?.axis?.orientation;
+        this.broadcastService
+            .subscribeToZoom(this.config?.zoom.syncChannel)
+            .pipe(takeWhile((_) => this.alive), filter((m) => m.message.event.sourceEvent instanceof MouseEvent ||
+            m.message.event.sourceEvent instanceof WheelEvent ||
+            (window.TouchEvent &&
+                m.message.event.sourceEvent instanceof TouchEvent)), filter((m) => {
+            return (this.zoomAxis.index === m.message?.axis?.index &&
+                this.zoomAxis.orientation === m.message?.axis?.orientation);
         }), tap$1((m) => {
             if (this.config.id !== m.message.chartId) {
+                this.wheelIdle = false;
+                if (m.message.event.type === 'end') {
+                    this.wheelIdle = true;
+                }
                 this._element.call(this.zoom.transform, m.message.event.transform, null, {});
             }
             else {
-                if (m.message.axis.isFake && !this.zoomAxis.isFake || !m.message.axis.isFake && this.zoomAxis.isFake) {
+                if ((m.message.axis.isFake && !this.zoomAxis.isFake) ||
+                    (!m.message.axis.isFake && this.zoomAxis.isFake)) {
                     this._element.call(this.zoom.transform, m.message.event.transform);
                 }
             }
-        })).subscribe();
+        }))
+            .subscribe();
         // Subscribe to brush events x or y
-        if ((this.config.brush?.type === BrushType.x && this.zoomAxis.orientation === AxisOrientation.x) ||
-            (this.config.brush?.type === BrushType.y && this.zoomAxis.orientation === AxisOrientation.y)) {
-            combineLatest([this.broadcastService.subscribeToBrush(this.config?.zoom.syncChannel), this.chartService.size]).pipe(takeWhile((_) => this.alive), debounceTime(150), filter((data) => Boolean(data[0].message.selection)), tap$1((data) => {
+        if ((this.config.brush?.type === BrushType.x &&
+            this.zoomAxis.orientation === AxisOrientation.x) ||
+            (this.config.brush?.type === BrushType.y &&
+                this.zoomAxis.orientation === AxisOrientation.y)) {
+            combineLatest([
+                this.broadcastService.subscribeToBrush(this.config?.zoom.syncChannel),
+                this.chartService.size,
+            ])
+                .pipe(takeWhile((_) => this.alive), debounceTime(150), filter((data) => Boolean(data[0].message.selection)), tap$1((data) => {
                 const [m] = data;
+                if (!this.wheelIdle) {
+                    return;
+                }
                 const currentTransform = d3.zoomTransform(this._element.node());
-                if (!m.message.event && this.currentSelection && currentTransform.k !== 1) {
+                if (!m.message.event &&
+                    this.currentSelection &&
+                    currentTransform.k !== 1) {
                     return;
                 }
-                this.currentSelection = m.message.selection;
                 this.updateZoom(m);
-            })).subscribe();
+                this.currentSelection = m.message.selection;
+            }))
+                .subscribe();
         }
     }
     ngOnDestroy() {
@@ -2040,7 +2089,9 @@ class BrushableDirective {
         if (changes.hasOwnProperty('config')) {
             this.brushService.clearPreviousSelection();
         }
-        this.brushService.applyBrush(this.element, this.config, this.brushScale);
+        if (this.config.brush.enable) {
+            this.brushService.applyBrush(this.element, this.config, this.brushScale);
+        }
     }
 }
 BrushableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushableDirective, deps: [{ token: BrushService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2245,10 +2296,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }] } });
 
 class ChartComponent {
-    constructor(chartService, _zoomService, _scaleService) {
+    constructor(chartService, zoomService, scaleService) {
         this.chartService = chartService;
-        this._zoomService = _zoomService;
-        this._scaleService = _scaleService;
+        this.zoomService = zoomService;
+        this.scaleService = scaleService;
         this.pointerMove = new EventEmitter();
         this.plotBandsMove = new EventEmitter();
         this.plotBandClick = new EventEmitter();
@@ -2271,7 +2322,7 @@ class ChartComponent {
     }
     ngOnInit() {
         this.chartService.pointerMove
-            .pipe(takeWhile(() => this._alive), withLatestFrom(this._scaleService.xScaleMap, this._scaleService.yScaleMap, this.chartService.config))
+            .pipe(takeWhile(() => this._alive), withLatestFrom(this.scaleService.xScaleMap, this.scaleService.yScaleMap, this.chartService.config))
             .subscribe((data) => {
             const [event, x, y, config] = data;
             const tooltipTracking = config?.tooltip?.tracking;
@@ -2345,7 +2396,7 @@ class ChartComponent {
     }
     ngOnDestroy() {
         this._alive = false;
-        this._zoomService.broadcastSubscription?.forEach((sub) => {
+        this.zoomService.broadcastSubscription?.forEach((sub) => {
             sub.unsubscribe();
         });
     }