@tetacom/svg-charts 1.1.21 → 1.1.24

package/fesm2015/tetacom-svg-charts.mjs

@@ -217,8 +217,8 @@ class ChartService {
         config.yAxis = config.yAxis.map(defaultConfig(defaultAxisConfig));
         config.series = config.series.map(defaultConfig(defaultSeriesConfig()));
         config.series = config.series.map((_, index) => {
-            var _a;
-            return Object.assign(Object.assign({}, _), { id: (_a = _.id) !== null && _a !== void 0 ? _a : index });
+            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);
@@ -237,6 +237,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 = (_f = (_e = config.zoom) === null || _e === void 0 ? void 0 : _e.syncChannel) !== null && _f !== void 0 ? _f : id;
         return config;
     }
@@ -373,7 +374,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'));
@@ -833,12 +834,17 @@ class TooltipComponent {
         };
         const defaultFormatter = (tooltips) => {
             let html = '';
+            const format = d3.timeFormat('%d.%m.%Y');
             tooltips.forEach((_) => {
                 var _a, _b, _c;
                 const indicatorStyle = `display:block; width: 10px; height: 2px; background-color: ${(_a = _ === null || _ === void 0 ? void 0 : _.series) === null || _a === void 0 ? void 0 : _a.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: ${(_b = _.point.x) === null || _b === void 0 ? void 0 : _b.toFixed(2)} y: ${(_c = _.point.y) === null || _c === void 0 ? void 0 : _c.toFixed(2)}</span></span></div>`;
+            <span class="font-body-3">
+              x: ${_.point.x instanceof Date ? format(_.point.x) : (_b = _.point.x) === null || _b === void 0 ? void 0 : _b.toFixed(2)}
+              y: ${_.point.y instanceof Date ? format(_.point.y) : (_c = _.point.y) === null || _c === void 0 ? void 0 : _c.toFixed(2)}
+            </span>
+          </span></div>`;
             });
             return transformHtml(html);
         };
@@ -1576,6 +1582,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() {
@@ -1585,18 +1592,15 @@ class BlockSeriesComponent extends SeriesBaseComponent {
         this.displayPoints = this.y.pipe(map((y) => {
             return this.series.data.filter((point, index, arr) => {
                 var _a, _b, _c, _d;
-                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 ||
-                        ((_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.y) >= min ||
-                        ((_b = arr[index + 1]) === null || _b === void 0 ? void 0 : _b.y1) >= min) &&
+                return (point.y >= min ||
+                    point.y1 >= min ||
+                    ((_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.y) >= min ||
+                    ((_b = arr[index + 1]) === null || _b === void 0 ? void 0 : _b.y1) >= min) &&
                     (point.y <= max ||
                         point.y1 <= max ||
                         ((_c = arr[index - 1]) === null || _c === void 0 ? void 0 : _c.y) <= max ||
                         ((_d = arr[index - 1]) === null || _d === void 0 ? void 0 : _d.y1) <= max);
-                return visibleCondition;
             });
         }));
     }
@@ -1616,10 +1620,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 {
@@ -1631,27 +1635,25 @@ 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) => {
                 var _a, _b, _c, _d;
-                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 ||
-                        ((_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.y) >= min ||
-                        ((_b = arr[index + 1]) === null || _b === void 0 ? void 0 : _b.y1) >= min) &&
+                return (point.y >= min ||
+                    point.y1 >= min ||
+                    ((_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.y) >= min ||
+                    ((_b = arr[index + 1]) === null || _b === void 0 ? void 0 : _b.y1) >= min) &&
                     (point.y <= max ||
                         point.y1 <= max ||
                         ((_c = arr[index - 1]) === null || _c === void 0 ? void 0 : _c.y) <= max ||
                         ((_d = arr[index - 1]) === null || _d === void 0 ? void 0 : _d.y1) <= max);
-                return visibleCondition;
             });
         }));
     }
@@ -1671,10 +1673,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 {
@@ -1852,6 +1854,7 @@ class ZoomableDirective {
         this.zoomable = false;
         this.alive = true;
         this.currentTransform = zoomIdentity;
+        this.wheelIdle = true;
         this.zoomed = (event) => {
             var _a, _b, _c;
             if (event.sourceEvent) {
@@ -1860,14 +1863,14 @@ class ZoomableDirective {
                         return;
                     }
                     const origin = this.brushScale.copy().domain(this.zoomAxis.extremes);
-                    let domain = ((_a = this.config.zoom) === null || _a === void 0 ? void 0 : _a.type) === ZoomType.y ?
-                        event.transform.rescaleY(origin).domain() :
-                        event.transform.rescaleX(origin).domain();
+                    let domain = ((_a = this.config.zoom) === null || _a === void 0 ? void 0 : _a.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: (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.zoom) === null || _c === void 0 ? void 0 : _c.syncChannel,
@@ -1876,7 +1879,7 @@ class ZoomableDirective {
                 }
                 this.zoomService.setZoom({
                     event,
-                    target: this.zoomAxis
+                    target: this.zoomAxis,
                 });
                 this.currentTransform = event.transform;
             }
@@ -1890,122 +1893,167 @@ class ZoomableDirective {
     }
     ngAfterViewInit() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-        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);
+        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;
         }
         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 ((_f = this.config.zoom) === null || _f === void 0 ? void 0 : _f.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(((_g = this.config) === null || _g === void 0 ? void 0 : _g.zoom.type) === ZoomType.x ? AxisOrientation.x : AxisOrientation.y, this.config, 0, true);
+        const commonZoomAxis = Axis.createAxis(((_g = this.config) === null || _g === void 0 ? void 0 : _g.zoom.type) === ZoomType.x
+            ? AxisOrientation.x
+            : AxisOrientation.y, this.config, 0, true);
         this.zoomAxis = (_h = this.axis) !== null && _h !== void 0 ? _h : commonZoomAxis;
         if (enable) {
-            const maxZoom = ((_j = this.config.zoom) === null || _j === void 0 ? void 0 : _j.max) ? (this.zoomAxis.extremes[1] - this.zoomAxis.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.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / ((_o = this.config.zoom) === null || _o === void 0 ? void 0 : _o.min) : Infinity;
+            const maxZoom = ((_j = this.config.zoom) === null || _j === void 0 ? void 0 : _j.max)
+                ? (this.zoomAxis.extremes[1] - this.zoomAxis.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.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) /
+                    ((_o = this.config.zoom) === null || _o === void 0 ? void 0 : _o.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 (((_q = (_p = this.config) === null || _p === void 0 ? void 0 : _p.zoom) === null || _q === void 0 ? void 0 : _q.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) => {
                     var _a;
-                    const delta = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.zoom.type) === ZoomType.x ? -event.deltaX : -event.deltaY;
+                    const delta = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.zoom.type) === ZoomType.x
+                        ? -event.deltaX
+                        : -event.deltaY;
                     return delta * 0.002;
                 });
+                const emit = (type, event) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    const origin = this.brushScale.copy().domain(this.zoomAxis.extremes);
+                    let transform = zoomIdentity;
+                    const delta = type === 'end'
+                        ? 0
+                        : ((_a = this.config.zoom) === null || _a === void 0 ? void 0 : _a.type) === ZoomType.y
+                            ? event.deltaY
+                            : event.deltaX;
+                    if (((_b = this.config.zoom) === null || _b === void 0 ? void 0 : _b.type) === ZoomType.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) {
+                        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
+                        ? 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: (_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();
                     if (event.ctrlKey) {
                         return;
                     }
-                    const emit = (type) => {
-                        var _a, _b, _c, _d, _e, _f;
-                        let transform = zoomIdentity;
-                        const delta = type === 'end' ? 0 : ((_a = this.config.zoom) === null || _a === void 0 ? void 0 : _a.type) === ZoomType.y ? event.deltaY : event.deltaX;
-                        if (((_b = this.config.zoom) === null || _b === void 0 ? void 0 : _b.type) === ZoomType.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) {
-                            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 ?
-                            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: (_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.zoom) === null || _f === void 0 ? void 0 : _f.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((_r = this.config) === null || _r === void 0 ? void 0 : _r.zoom.syncChannel).pipe(takeWhile((_) => this.alive), filter((m) => m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent), filter((m) => {
+        this.broadcastService
+            .subscribeToZoom((_r = this.config) === null || _r === void 0 ? void 0 : _r.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) => {
             var _a, _b, _c, _d;
-            return this.zoomAxis.index === ((_b = (_a = m.message) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.index) && this.zoomAxis.orientation === ((_d = (_c = m.message) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.orientation);
+            return (this.zoomAxis.index === ((_b = (_a = m.message) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.index) &&
+                this.zoomAxis.orientation === ((_d = (_c = m.message) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.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 ((((_s = this.config.brush) === null || _s === void 0 ? void 0 : _s.type) === BrushType.x && this.zoomAxis.orientation === AxisOrientation.x) ||
-            (((_t = this.config.brush) === null || _t === void 0 ? void 0 : _t.type) === BrushType.y && this.zoomAxis.orientation === AxisOrientation.y)) {
-            combineLatest([this.broadcastService.subscribeToBrush((_u = this.config) === null || _u === void 0 ? void 0 : _u.zoom.syncChannel), this.chartService.size]).pipe(takeWhile((_) => this.alive), debounceTime(150), filter((data) => Boolean(data[0].message.selection)), tap$1((data) => {
+        if ((((_s = this.config.brush) === null || _s === void 0 ? void 0 : _s.type) === BrushType.x &&
+            this.zoomAxis.orientation === AxisOrientation.x) ||
+            (((_t = this.config.brush) === null || _t === void 0 ? void 0 : _t.type) === BrushType.y &&
+                this.zoomAxis.orientation === AxisOrientation.y)) {
+            combineLatest([
+                this.broadcastService.subscribeToBrush((_u = this.config) === null || _u === void 0 ? void 0 : _u.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() {
@@ -2063,7 +2111,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 });
@@ -2272,10 +2322,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();
@@ -2298,7 +2348,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) => {
             var _a;
             const [event, x, y, config] = data;
@@ -2374,7 +2424,7 @@ class ChartComponent {
     ngOnDestroy() {
         var _a;
         this._alive = false;
-        (_a = this._zoomService.broadcastSubscription) === null || _a === void 0 ? void 0 : _a.forEach((sub) => {
+        (_a = this.zoomService.broadcastSubscription) === null || _a === void 0 ? void 0 : _a.forEach((sub) => {
             sub.unsubscribe();
         });
     }