@tetacom/svg-charts 1.7.2 → 1.7.4

package/chart/chart-container/chart-container.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ElementRef, NgZone, OnDestroy } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Axis } from '../core/axis/axis';
 import { ZoomType } from '../model/enum/zoom-type';
@@ -16,7 +16,6 @@ export declare class ChartContainerComponent implements AfterViewInit, OnDestroy
     private _svc;
     private _scaleService;
     private _elementRef;
-    private _zone;
     config: Observable<IChartConfig>;
     scales: Observable<IScalesMap>;
     size: Observable<DOMRect>;
@@ -26,7 +25,7 @@ export declare class ChartContainerComponent implements AfterViewInit, OnDestroy
     plotBands: Observable<DisplayPlotBand[]>;
     private _observer;
     private filterPositionMap;
-    constructor(_svc: ChartService, _scaleService: ScaleService, _elementRef: ElementRef, _zone: NgZone);
+    constructor(_svc: ChartService, _scaleService: ScaleService, _elementRef: ElementRef);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private sumSize;

package/chart/chart-container/series-controls/series-controls.component.d.ts

@@ -1,11 +1,14 @@
-import { Align } from '@tetacom/ng-components';
+import { Align, TetaSize } from '@tetacom/ng-components';
 import { Series } from '../../model/series';
 import { BasePoint } from '../../model/base-point';
+import { SeriesType } from '../../model/enum/series-type';
 import * as i0 from "@angular/core";
 export declare class SeriesControlsComponent {
     private chartService;
     protected readonly Align: typeof Align;
     series: import("@angular/core").InputSignal<Series<BasePoint>[]>;
+    enabledSeries: import("@angular/core").Signal<Series<BasePoint>[]>;
+    disabledSeries: import("@angular/core").Signal<Series<BasePoint>[]>;
     strokeWidth: {
         id: number;
         value: number;
@@ -14,10 +17,18 @@ export declare class SeriesControlsComponent {
         id: string;
         value: string;
     }[];
+    seriesType: {
+        id: SeriesType;
+        value: string;
+    }[];
     setSeriesEnabled(series: Series<BasePoint>, value: boolean): void;
     setSeriesColor(series: Series<BasePoint>, value: string): void;
     setSeriesStrokeWidth(series: Series<BasePoint>, value: number): void;
     setSeriesStrokeDasharray(series: Series<BasePoint>, value: string): void;
+    setSeriesType(series: Series<BasePoint>, value: SeriesType): void;
+    clear(): void;
+    protected readonly TetaSize: typeof TetaSize;
+    protected readonly SeriesType: typeof SeriesType;
     static ɵfac: i0.ɵɵFactoryDeclaration<SeriesControlsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SeriesControlsComponent, "teta-series-controls", never, { "series": { "alias": "series"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/chart/chart-container/series-host/series-host.component.d.ts

@@ -1,16 +1,15 @@
-import { OnDestroy, OnInit } from '@angular/core';
+import { OnDestroy } from '@angular/core';
 import { Series } from '../../model/series';
 import { BasePoint } from '../../model/base-point';
 import { IChartConfig } from '../../model/i-chart-config';
 import * as i0 from "@angular/core";
-export declare class SeriesHostComponent<T extends BasePoint> implements OnInit, OnDestroy {
+export declare class SeriesHostComponent<T extends BasePoint> implements OnDestroy {
     private viewContainerRef;
     config: import("@angular/core").InputSignal<IChartConfig>;
     series: import("@angular/core").InputSignal<Series<T>>;
-    private _init;
     private _componentRef;
+    private count;
     constructor();
-    ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SeriesHostComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SeriesHostComponent<any>, "[teta-series-host]", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

package/chart/service/chart.service.d.ts

@@ -12,6 +12,7 @@ import * as i0 from "@angular/core";
 export declare class ChartService {
     id: Observable<string>;
     config: Observable<IChartConfig>;
+    initialConfig: Observable<IChartConfig>;
     size: Observable<DOMRect>;
     pointerMove: Observable<PointerEvent>;
     tooltips: Observable<Map<Series<BasePoint>, IDisplayTooltip>>;
@@ -45,6 +46,7 @@ export declare class ChartService {
     setTooltip(tooltip: IDisplayTooltip): void;
     clearTooltips(): void;
     updateSeries(series: Series<BasePoint>, visible?: boolean): Promise<void>;
+    clearSeriesSettings(): Promise<void>;
     emitMoveAnnotation(event: IChartEvent<Annotation>): void;
     emitAnnotation(event: IChartEvent<Annotation>): void;
     emitPlotBand(event: IChartEvent<PlotBand>): void;

package/fesm2022/tetacom-svg-charts.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
 import { Injectable, input, inject, ChangeDetectorRef, ElementRef, computed, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostBinding, HostListener, signal, EventEmitter, Output, ViewContainerRef, effect } from '@angular/core';
-import { ReplaySubject, filter, BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, merge, lastValueFrom, take, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler } from 'rxjs';
+import { ReplaySubject, filter, BehaviorSubject, Subject, of, shareReplay, withLatestFrom, map, merge, lastValueFrom, take, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler } from 'rxjs';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
 import { maxIndex } from 'd3-array';
 import { toSignal } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/platform-browser';
 import { AsyncPipe, NgTemplateOutlet, KeyValuePipe, NgStyle } from '@angular/common';
-import { Align as Align$1, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective, CheckboxComponent, ColorInputComponent, SelectComponent, SelectOptionDirective, SelectValueDirective } from '@tetacom/ng-components';
+import { Align as Align$1, TetaSize, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective, CheckboxComponent, ColorInputComponent, SelectComponent, SelectOptionDirective, SelectValueDirective, ScrollableComponent } from '@tetacom/ng-components';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
@@ -172,7 +172,7 @@ const defaultSeriesConfig = () => ({
     type: SeriesType.line,
     xAxisIndex: 0,
     yAxisIndex: 0,
-    fillType: FillType.default,
+    fillType: FillType.gradient,
     color: 'coral',
     visible: true,
     enabled: true,
@@ -195,7 +195,11 @@ class ChartService {
         this.annotationEvent$ = new Subject();
         this.annotationMove$ = new Subject();
         this.id = of((Date.now() + Math.random()).toString(36));
-        const initialConfig = this.config$.asObservable().pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), map(this.restoreLocalStorage), shareReplay({
+        this.initialConfig = this.config$.asObservable().pipe(shareReplay({
+            bufferSize: 1,
+            refCount: true,
+        }));
+        const initialConfig = this.initialConfig.pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), map(this.restoreLocalStorage), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
@@ -248,9 +252,9 @@ class ChartService {
         if (currentSeriesIndex === -1) {
             return;
         }
-        currentConfig.series = [...currentConfig.series];
-        const seriesLinkCount = currentConfig.series.filter((_) => _.yAxisIndex === currentConfig.series[currentSeriesIndex].yAxisIndex && _.visible === true).length;
-        currentConfig.yAxis[currentConfig.series[currentSeriesIndex].yAxisIndex].visible = seriesLinkCount !== 0;
+        currentConfig.series = currentConfig.series.map((seriesItem) => {
+            return { ...seriesItem };
+        });
         try {
             this.saveCookie(currentConfig);
         }
@@ -258,6 +262,13 @@ class ChartService {
             this.configUpdates$.next({ ...currentConfig });
         }
     }
+    async clearSeriesSettings() {
+        const config = await lastValueFrom(this.initialConfig.pipe(take(1)));
+        if (!config.name)
+            return;
+        localStorage.removeItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`);
+        this.config$.next({ ...config });
+    }
     emitMoveAnnotation(event) {
         this.annotationMove$.next(event);
     }
@@ -288,6 +299,7 @@ class ChartService {
                 visible: _.visible,
                 enabled: _.enabled,
                 color: _.color,
+                type: _.type,
                 strokeDasharray: _.style?.strokeDasharray,
                 strokeWidth: _.style?.strokeWidth,
             };
@@ -306,20 +318,13 @@ class ChartService {
                     serie.visible = found.visible ?? serie.visible;
                     serie.enabled = found.enabled ?? serie.enabled;
                     serie.color = found.color ?? serie.color;
+                    serie.type = parseInt(found.type, 10) ?? serie.type;
                     if (!serie.style) {
                         serie.style = {};
                     }
                     serie.style.strokeWidth = found.strokeWidth ?? serie.style.strokeWidth;
                     serie.style.strokeDasharray = found.strokeDasharray ?? serie.style.strokeDasharray;
                 }
-                const currentSerieIndex = config.series.findIndex((_) => _.id === serie.id);
-                if (currentSerieIndex !== -1) {
-                    const seriesLinkCount = config.series.filter((_) => _.yAxisIndex === config.series[currentSerieIndex].yAxisIndex && _.visible === true).length;
-                    const yAxis = config.yAxis[config.series[currentSerieIndex].yAxisIndex];
-                    if (yAxis) {
-                        yAxis.visible = seriesLinkCount !== 0;
-                    }
-                }
                 return serie;
             });
             return config;
@@ -2228,22 +2233,22 @@ class SeriesHostComponent {
         this.viewContainerRef = inject(ViewContainerRef);
         this.config = input();
         this.series = input();
-        this._init = false;
+        this.count = 0;
         effect(() => {
-            this._componentRef.setInput('config', this.config());
-        });
-        effect(() => {
-            this._componentRef.setInput('series', this.series());
+            if (this.series()) {
+                this.viewContainerRef.clear();
+                this._componentRef?.destroy();
+                if (!Object.prototype.isPrototypeOf.call(SeriesBaseComponent, this.series().component)) {
+                    this.series().component = defaultSeriesTypeMapping.get(this.series().type) || LineSeriesComponent;
+                }
+                this._componentRef = this.viewContainerRef.createComponent(this.series().component);
+                this._componentRef?.setInput('config', this.config());
+                this._componentRef?.setInput('series', this.series());
+            }
         });
     }
-    ngOnInit() {
-        if (!Object.prototype.isPrototypeOf.call(SeriesBaseComponent, this.series().component)) {
-            this.series().component = defaultSeriesTypeMapping.get(this.series().type) || LineSeriesComponent;
-        }
-        this._componentRef = this.viewContainerRef.createComponent(this.series().component);
-    }
     ngOnDestroy() {
-        this._componentRef.destroy();
+        this._componentRef?.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SeriesHostComponent, isStandalone: true, selector: "[teta-series-host]", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2589,6 +2594,12 @@ class SeriesControlsComponent {
         this.chartService = inject(ChartService);
         this.Align = Align$1;
         this.series = input();
+        this.enabledSeries = computed(() => {
+            return this.series()?.filter((item) => item.enabled) ?? [];
+        });
+        this.disabledSeries = computed(() => {
+            return this.series()?.filter((item) => !item.enabled) ?? [];
+        });
         this.strokeWidth = [
             { id: 1, value: 1 },
             { id: 2, value: 2 },
@@ -2601,6 +2612,16 @@ class SeriesControlsComponent {
             { id: '4, 8', value: 'dashed' },
             { id: '2, 2', value: 'dotted' },
         ];
+        this.seriesType = [
+            { id: SeriesType.line, value: 'Line' },
+            { id: SeriesType.area, value: 'Area' },
+            { id: SeriesType.scatter, value: 'Scatter' },
+            { id: SeriesType.block, value: 'Block' },
+            { id: SeriesType.blockArea, value: 'BlockArea' },
+            { id: SeriesType.bar, value: 'Bar' },
+        ];
+        this.TetaSize = TetaSize;
+        this.SeriesType = SeriesType;
     }
     setSeriesEnabled(series, value) {
         series.enabled = value;
@@ -2624,8 +2645,16 @@ class SeriesControlsComponent {
         series.style.strokeDasharray = value;
         this.chartService.updateSeries(series);
     }
+    setSeriesType(series, value) {
+        series.type = value;
+        series.component = defaultSeriesTypeMapping.get(series.type) || LineSeriesComponent;
+        this.chartService.updateSeries(series);
+    }
+    clear() {
+        this.chartService.clearSeriesSettings();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SeriesControlsComponent, isStandalone: true, selector: "teta-series-controls", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-dropdown [align]=\"Align.right\"\n               #dropdown=\"dropdown\"\n               [appendToBody]=\"true\">\n  <button teta-button\n          tetaDropdownHead\n          [class.active]=\"dropdown.open\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    <teta-icon [name]=\"'gear'\"></teta-icon>\n  </button>\n  <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n    <teta-accordion>\n      @for (seriesItem of series(); track $index) {\n        <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n          <teta-accordion-head>\n            <div class=\"row align-center gap-12\">\n              <div class=\"row align-center\" (click)=\"$event.stopPropagation()\">\n                <teta-checkbox [ngModel]=\"seriesItem.enabled\"\n                               (ngModelChange)=\"setSeriesEnabled(seriesItem, $event)\"\n                               [binary]=\"true\"></teta-checkbox>\n                <teta-color-input [ngModel]=\"seriesItem.color\"\n                                  (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n              </div>\n              {{ seriesItem.name }}\n            </div>\n          </teta-accordion-head>\n          <ng-template tetaAccordionContent>\n            <div class=\"column gap-8\">\n              <teta-select [options]=\"strokeWidth\"\n                           [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n                           [valueRef]=\"'id'\"\n                           (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n                           [allowNull]=\"false\">\n                <ng-template tetaSelectOption let-option>\n                  <div style=\"width: 50px;\"\n                       [style.height.px]=\"option.id\"\n                       [style.background-color]=\"seriesItem.color\"></div>\n                </ng-template>\n                <ng-template tetaSelectValue let-value>\n                  <div style=\"width: 50px;\"\n                       [style.height.px]=\"value?.id\"\n                       [style.background-color]=\"seriesItem.color\"></div>\n                </ng-template>\n              </teta-select>\n              <teta-select [options]=\"strokeArray\"\n                           [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n                           [valueRef]=\"'id'\"\n                           (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n                           [allowNull]=\"false\">\n                <ng-template tetaSelectOption let-option>\n                  <div style=\"width: 50px;border:0;border-top: 2px;\"\n                       [style.border-style]=\"option.value\"\n                       [style.border-color]=\"seriesItem.color\"></div>\n                </ng-template>\n                <ng-template tetaSelectValue let-value>\n                  <div style=\"width: 50px;border:0;border-top: 2px;\"\n                       [style.border-style]=\"value?.value\"\n                       [style.border-color]=\"seriesItem.color\"></div>\n                </ng-template>\n              </teta-select>\n            </div>\n          </ng-template>\n        </teta-accordion-item>\n      }\n    </teta-accordion>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: AccordionComponent, selector: "teta-accordion" }, { kind: "component", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: ["showToggle"] }, { kind: "component", type: AccordionItemComponent, selector: "teta-accordion-item", inputs: ["open", "disabled", "divider", "viewType"] }, { kind: "directive", type: AccordionContentDirective, selector: "[tetaAccordionContent]" }, { kind: "component", type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "labelPosition", "allowNull"] }, { kind: "component", type: ColorInputComponent, selector: "teta-color-input", inputs: ["disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "directive", type: SelectOptionDirective, selector: "[tetaSelectOption]" }, { kind: "directive", type: SelectValueDirective, selector: "[tetaSelectValue]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SeriesControlsComponent, isStandalone: true, selector: "teta-series-controls", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-dropdown [align]=\"Align.right\"\n               #dropdown=\"dropdown\"\n               [appendToBody]=\"true\">\n  <button teta-button\n          tetaDropdownHead\n          [class.active]=\"dropdown.open\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    <teta-icon [name]=\"'gear'\"></teta-icon>\n  </button>\n  <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n    @if (disabledSeries().length > 0) {\n      <div class=\"row justify-content-end padding-h-3 padding-top-3\">\n        <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n          <button teta-button\n                  tetaDropdownHead\n                  [square]=\"true\"\n                  [size]=\"TetaSize.S\"\n                  [palette]=\"'primary'\">\n            <teta-icon [name]=\"'add'\"></teta-icon>\n          </button>\n          <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n               (click)=\"$event.stopPropagation();\">\n            @for (seriesItem of disabledSeries(); track seriesItem.id) {\n              <div class=\"list-item list-item_interactive\"\n                   (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n                {{ seriesItem.name }}\n              </div>\n            }\n          </div>\n        </teta-dropdown>\n      </div>\n    }\n    <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n      <teta-accordion>\n        @for (seriesItem of enabledSeries(); track seriesItem.id) {\n          <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n            <teta-accordion-head>\n              <div class=\"row align-center gap-12\">\n                <div class=\"row align-center\" (click)=\"$event.stopPropagation()\">\n                  <teta-checkbox [ngModel]=\"seriesItem.enabled\"\n                                 (ngModelChange)=\"setSeriesEnabled(seriesItem, $event)\"\n                                 [binary]=\"true\"></teta-checkbox>\n                  <teta-color-input [ngModel]=\"seriesItem.color\"\n                                    (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n                </div>\n                {{ seriesItem.name }}\n              </div>\n            </teta-accordion-head>\n            <ng-template tetaAccordionContent>\n              <div class=\"column gap-8\">\n                <teta-select [options]=\"strokeWidth\"\n                             [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n                             [valueRef]=\"'id'\"\n                             (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n                             [allowNull]=\"false\">\n                  <ng-template tetaSelectOption let-option>\n                    <div style=\"width: 50px;\"\n                         [style.height.px]=\"option.id\"\n                         [style.background-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                  <ng-template tetaSelectValue let-value>\n                    <div style=\"width: 50px;\"\n                         [style.height.px]=\"value?.id\"\n                         [style.background-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                </teta-select>\n                <teta-select [options]=\"strokeArray\"\n                             [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n                             [valueRef]=\"'id'\"\n                             (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n                             [allowNull]=\"false\">\n                  <ng-template tetaSelectOption let-option>\n                    <div style=\"width: 50px;border:0;border-top: 2px;\"\n                         [style.border-style]=\"option.value\"\n                         [style.border-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                  <ng-template tetaSelectValue let-value>\n                    <div style=\"width: 50px;border:0;border-top: 2px;\"\n                         [style.border-style]=\"value?.value\"\n                         [style.border-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                </teta-select>\n                <teta-select [options]=\"seriesType\"\n                             [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n                             [valueRef]=\"'id'\"\n                             [textRef]=\"'value'\"\n                             (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n                             [allowNull]=\"false\">\n                </teta-select>\n              </div>\n            </ng-template>\n          </teta-accordion-item>\n        }\n      </teta-accordion>\n    </teta-scrollable>\n    <div class=\"row padding-3 justify-content-end\">\n      <button teta-button\n              [square]=\"true\"\n              [size]=\"TetaSize.S\"\n              [palette]=\"'red'\"\n              (click)=\"clear()\">\n        <teta-icon [name]=\"'delete'\"></teta-icon>\n      </button>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: AccordionComponent, selector: "teta-accordion" }, { kind: "component", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: ["showToggle"] }, { kind: "component", type: AccordionItemComponent, selector: "teta-accordion-item", inputs: ["open", "disabled", "divider", "viewType"] }, { kind: "directive", type: AccordionContentDirective, selector: "[tetaAccordionContent]" }, { kind: "component", type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "labelPosition", "allowNull"] }, { kind: "component", type: ColorInputComponent, selector: "teta-color-input", inputs: ["disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "directive", type: SelectOptionDirective, selector: "[tetaSelectOption]" }, { kind: "directive", type: SelectValueDirective, selector: "[tetaSelectValue]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, decorators: [{
             type: Component,
@@ -2645,15 +2674,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         SelectComponent,
                         SelectOptionDirective,
                         SelectValueDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n               #dropdown=\"dropdown\"\n               [appendToBody]=\"true\">\n  <button teta-button\n          tetaDropdownHead\n          [class.active]=\"dropdown.open\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    <teta-icon [name]=\"'gear'\"></teta-icon>\n  </button>\n  <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n    <teta-accordion>\n      @for (seriesItem of series(); track $index) {\n        <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n          <teta-accordion-head>\n            <div class=\"row align-center gap-12\">\n              <div class=\"row align-center\" (click)=\"$event.stopPropagation()\">\n                <teta-checkbox [ngModel]=\"seriesItem.enabled\"\n                               (ngModelChange)=\"setSeriesEnabled(seriesItem, $event)\"\n                               [binary]=\"true\"></teta-checkbox>\n                <teta-color-input [ngModel]=\"seriesItem.color\"\n                                  (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n              </div>\n              {{ seriesItem.name }}\n            </div>\n          </teta-accordion-head>\n          <ng-template tetaAccordionContent>\n            <div class=\"column gap-8\">\n              <teta-select [options]=\"strokeWidth\"\n                           [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n                           [valueRef]=\"'id'\"\n                           (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n                           [allowNull]=\"false\">\n                <ng-template tetaSelectOption let-option>\n                  <div style=\"width: 50px;\"\n                       [style.height.px]=\"option.id\"\n                       [style.background-color]=\"seriesItem.color\"></div>\n                </ng-template>\n                <ng-template tetaSelectValue let-value>\n                  <div style=\"width: 50px;\"\n                       [style.height.px]=\"value?.id\"\n                       [style.background-color]=\"seriesItem.color\"></div>\n                </ng-template>\n              </teta-select>\n              <teta-select [options]=\"strokeArray\"\n                           [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n                           [valueRef]=\"'id'\"\n                           (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n                           [allowNull]=\"false\">\n                <ng-template tetaSelectOption let-option>\n                  <div style=\"width: 50px;border:0;border-top: 2px;\"\n                       [style.border-style]=\"option.value\"\n                       [style.border-color]=\"seriesItem.color\"></div>\n                </ng-template>\n                <ng-template tetaSelectValue let-value>\n                  <div style=\"width: 50px;border:0;border-top: 2px;\"\n                       [style.border-style]=\"value?.value\"\n                       [style.border-color]=\"seriesItem.color\"></div>\n                </ng-template>\n              </teta-select>\n            </div>\n          </ng-template>\n        </teta-accordion-item>\n      }\n    </teta-accordion>\n  </div>\n</teta-dropdown>\n" }]
+                        ScrollableComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n               #dropdown=\"dropdown\"\n               [appendToBody]=\"true\">\n  <button teta-button\n          tetaDropdownHead\n          [class.active]=\"dropdown.open\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    <teta-icon [name]=\"'gear'\"></teta-icon>\n  </button>\n  <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n    @if (disabledSeries().length > 0) {\n      <div class=\"row justify-content-end padding-h-3 padding-top-3\">\n        <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n          <button teta-button\n                  tetaDropdownHead\n                  [square]=\"true\"\n                  [size]=\"TetaSize.S\"\n                  [palette]=\"'primary'\">\n            <teta-icon [name]=\"'add'\"></teta-icon>\n          </button>\n          <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n               (click)=\"$event.stopPropagation();\">\n            @for (seriesItem of disabledSeries(); track seriesItem.id) {\n              <div class=\"list-item list-item_interactive\"\n                   (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n                {{ seriesItem.name }}\n              </div>\n            }\n          </div>\n        </teta-dropdown>\n      </div>\n    }\n    <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n      <teta-accordion>\n        @for (seriesItem of enabledSeries(); track seriesItem.id) {\n          <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n            <teta-accordion-head>\n              <div class=\"row align-center gap-12\">\n                <div class=\"row align-center\" (click)=\"$event.stopPropagation()\">\n                  <teta-checkbox [ngModel]=\"seriesItem.enabled\"\n                                 (ngModelChange)=\"setSeriesEnabled(seriesItem, $event)\"\n                                 [binary]=\"true\"></teta-checkbox>\n                  <teta-color-input [ngModel]=\"seriesItem.color\"\n                                    (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n                </div>\n                {{ seriesItem.name }}\n              </div>\n            </teta-accordion-head>\n            <ng-template tetaAccordionContent>\n              <div class=\"column gap-8\">\n                <teta-select [options]=\"strokeWidth\"\n                             [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n                             [valueRef]=\"'id'\"\n                             (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n                             [allowNull]=\"false\">\n                  <ng-template tetaSelectOption let-option>\n                    <div style=\"width: 50px;\"\n                         [style.height.px]=\"option.id\"\n                         [style.background-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                  <ng-template tetaSelectValue let-value>\n                    <div style=\"width: 50px;\"\n                         [style.height.px]=\"value?.id\"\n                         [style.background-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                </teta-select>\n                <teta-select [options]=\"strokeArray\"\n                             [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n                             [valueRef]=\"'id'\"\n                             (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n                             [allowNull]=\"false\">\n                  <ng-template tetaSelectOption let-option>\n                    <div style=\"width: 50px;border:0;border-top: 2px;\"\n                         [style.border-style]=\"option.value\"\n                         [style.border-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                  <ng-template tetaSelectValue let-value>\n                    <div style=\"width: 50px;border:0;border-top: 2px;\"\n                         [style.border-style]=\"value?.value\"\n                         [style.border-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                </teta-select>\n                <teta-select [options]=\"seriesType\"\n                             [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n                             [valueRef]=\"'id'\"\n                             [textRef]=\"'value'\"\n                             (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n                             [allowNull]=\"false\">\n                </teta-select>\n              </div>\n            </ng-template>\n          </teta-accordion-item>\n        }\n      </teta-accordion>\n    </teta-scrollable>\n    <div class=\"row padding-3 justify-content-end\">\n      <button teta-button\n              [square]=\"true\"\n              [size]=\"TetaSize.S\"\n              [palette]=\"'red'\"\n              (click)=\"clear()\">\n        <teta-icon [name]=\"'delete'\"></teta-icon>\n      </button>\n    </div>\n  </div>\n</teta-dropdown>\n" }]
         }] });
 
 class ChartContainerComponent {
-    constructor(_svc, _scaleService, _elementRef, _zone) {
+    constructor(_svc, _scaleService, _elementRef) {
         this._svc = _svc;
         this._scaleService = _scaleService;
         this._elementRef = _elementRef;
-        this._zone = _zone;
         this.zoomType = ZoomType;
         this.filterPositionMap = new Map()
             .set(true, (axis) => (_) => _.options.opposite && _.options.visible && axis.index <= _.index)
@@ -2791,7 +2820,7 @@ class ChartContainerComponent {
     mouseLeave(event) {
         this._svc.setPointerMove(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: ScaleService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: ScaleService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ChartContainerComponent, isStandalone: true, selector: "teta-chart-container", ngImport: i0, template: "@if ({\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  plotBands: plotBands | async,\n  visibleRect: visibleRect | async,\n};\n  as data) {\n  @if (data.config?.tooltip?.enable) {\n    <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        @for (item of data.scales.y | keyvalue; track item.value.index) {\n          @if (item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-y-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n                  [attr.y]=\"0\"\n                  [attr.height]=\"data.visibleRect.height\"\n                  [attr.width]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n      <g class=\"x-axis-container\">\n        @for (item of data.scales.x | keyvalue; track item.value.index) {\n          @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-x-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"0\"\n                  [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n                  [attr.width]=\"data.visibleRect.width\"\n                  [attr.height]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n    </svg>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      @if (data.config.gridLines?.enable !== false) {\n        <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n      }\n      <g class=\"x-axis-plotband-container\">\n        @for (plotBand of data.plotBands; track $index) {\n          <g teta-plot-band\n             [plotBand]=\"plotBand.plotBand\"\n             [scale]=\"plotBand.axis.scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"plotBand.axis\"></g>\n        }\n      </g>\n      <g class=\"series-container\">\n        @for (series of data.config.series; track series) {\n          @if (series.visible && series.enabled) {\n            <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n          }\n        }\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        @for (axis of data.config.xAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.x.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.x.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        @for (axis of data.config.yAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.y.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.y.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"annotations\">\n        @for (annotation of data.config.annotations; track annotation) {\n          <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n        }\n      </g>\n      @if (data.config.tooltip?.showCrosshair) {\n        <g class=\"crosshair\">\n          <g teta-crosshair [size]=\"data.visibleRect\"></g>\n        </g>\n      }\n    </svg>\n    @if (data.config.controls?.enable) {\n      <teta-series-controls [series]=\"data.config.series\"\n                            class=\"position-absolute\"\n                            style=\"transform: translateX(-100%)\"\n                            [style.top.px]=\"data.visibleRect.y + 12\"\n                            [style.left.px]=\"data.visibleRect.width + data.visibleRect.x -12\">\n      </teta-series-controls>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["visibleRect", "annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "axis"] }, { kind: "component", type: SeriesControlsComponent, selector: "teta-series-controls", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartContainerComponent, decorators: [{
@@ -2812,7 +2841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         BrushableDirective,
                         SeriesControlsComponent,
                     ], template: "@if ({\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  plotBands: plotBands | async,\n  visibleRect: visibleRect | async,\n};\n  as data) {\n  @if (data.config?.tooltip?.enable) {\n    <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        @for (item of data.scales.y | keyvalue; track item.value.index) {\n          @if (item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-y-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n                  [attr.y]=\"0\"\n                  [attr.height]=\"data.visibleRect.height\"\n                  [attr.width]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n      <g class=\"x-axis-container\">\n        @for (item of data.scales.x | keyvalue; track item.value.index) {\n          @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-x-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"0\"\n                  [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n                  [attr.width]=\"data.visibleRect.width\"\n                  [attr.height]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n    </svg>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      @if (data.config.gridLines?.enable !== false) {\n        <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n      }\n      <g class=\"x-axis-plotband-container\">\n        @for (plotBand of data.plotBands; track $index) {\n          <g teta-plot-band\n             [plotBand]=\"plotBand.plotBand\"\n             [scale]=\"plotBand.axis.scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"plotBand.axis\"></g>\n        }\n      </g>\n      <g class=\"series-container\">\n        @for (series of data.config.series; track series) {\n          @if (series.visible && series.enabled) {\n            <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n          }\n        }\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        @for (axis of data.config.xAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.x.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.x.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        @for (axis of data.config.yAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.y.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.y.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"annotations\">\n        @for (annotation of data.config.annotations; track annotation) {\n          <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n        }\n      </g>\n      @if (data.config.tooltip?.showCrosshair) {\n        <g class=\"crosshair\">\n          <g teta-crosshair [size]=\"data.visibleRect\"></g>\n        </g>\n      }\n    </svg>\n    @if (data.config.controls?.enable) {\n      <teta-series-controls [series]=\"data.config.series\"\n                            class=\"position-absolute\"\n                            style=\"transform: translateX(-100%)\"\n                            [style.top.px]=\"data.visibleRect.y + 12\"\n                            [style.left.px]=\"data.visibleRect.width + data.visibleRect.x -12\">\n      </teta-series-controls>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: ScaleService }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+        }], ctorParameters: () => [{ type: ChartService }, { type: ScaleService }, { type: i0.ElementRef }] });
 
 class LegendComponent {
     constructor(chartService) {