@tetacom/svg-charts 1.7.3 → 1.7.6

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, ScrollableComponent } 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,11 +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);
         }
@@ -260,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);
     }
@@ -290,6 +299,7 @@ class ChartService {
                 visible: _.visible,
                 enabled: _.enabled,
                 color: _.color,
+                type: _.type,
                 strokeDasharray: _.style?.strokeDasharray,
                 strokeWidth: _.style?.strokeWidth,
             };
@@ -308,22 +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;
@@ -1194,45 +1195,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class XAxisComponent {
-    constructor(scaleService, _svc) {
-        this.scaleService = scaleService;
-        this._svc = _svc;
-        this.update$ = new BehaviorSubject(null);
-        this._alive = true;
-        this.x = this.scaleService.scales.pipe(map((_) => {
-            return _.x.get(this.axis.index)?.scale;
-        }));
-        this.ticks = combineLatest([this.x, this.update$]).pipe(withLatestFrom(this._svc.size), map((_) => {
-            const [[x], size] = _;
-            const tickSize = x
+    constructor() {
+        this.scaleService = inject(ScaleService);
+        this.xScales = toSignal(this.scaleService.scales.pipe(map((_) => _.x)));
+        this.axis = input();
+        this.size = input();
+        this.x = computed(() => {
+            return this.xScales().get(this.axis().index)?.scale;
+        });
+        this.ticks = computed(() => {
+            const tickSize = this.x()
                 .ticks()
-                .map((_) => getTextWidth(this.axis.options.tickFormat ? this.axis.options.tickFormat(_) : this.axis.defaultFormatter()(_), 0.45, 11));
-            return x.ticks(size.width / parseInt(d3.max(tickSize), 10) / 5);
-        }));
-    }
-    getLabelTransform() {
-        return `translate(${this.size.width / 2}, ${this.axis.options.opposite ? -32 : 32})`;
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this._alive = false;
-    }
-    ngOnChanges(changes) {
-        if (changes.hasOwnProperty('axis')) {
-            this.update$.next();
-        }
+                .map((_) => getTextWidth(this.axis().options.tickFormat ? this.axis().options.tickFormat(_) : this.axis().defaultFormatter()(_), 0.45, 11));
+            return this.x().ticks(this.size().width / parseInt(d3.max(tickSize), 10) / 5);
+        });
+        this.getLabelTransform = computed(() => {
+            return `translate(${this.size().width / 2}, ${this.axis().options.opposite ? -32 : 32})`;
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: XAxisComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: XAxisComponent, isStandalone: true, selector: "[teta-x-axis]", inputs: { axis: "axis", size: "size" }, usesOnChanges: true, ngImport: i0, template: "@if ({ x: x | async, ticks: ticks | async }; as data) {\n  @for (tick of data.ticks; track $index) {\n    <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n      <text\n        fill=\"var(--color-text-70)\"\n        [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\"\n        [attr.y]=\"axis.options.opposite ? 0 : 9\"\n      >\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: XAxisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: XAxisComponent, isStandalone: true, selector: "[teta-x-axis]", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ({\n  x: x(),\n  ticks: ticks(),\n  axis: axis()\n}; as data) {\n  @for (tick of data.ticks; track $index) {\n    <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n      <text\n        fill=\"var(--color-text-70)\"\n        [attr.dy]=\"data.axis.options.opposite ? '-0.71em' : '0.71em'\"\n        [attr.y]=\"data.axis.options.opposite ? 0 : 9\"\n      >\n        {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.y2]=\"data.axis.options.opposite ? -6 : 6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n      {{ data.axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: XAxisComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-x-axis]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if ({ x: x | async, ticks: ticks | async }; as data) {\n  @for (tick of data.ticks; track $index) {\n    <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n      <text\n        fill=\"var(--color-text-70)\"\n        [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\"\n        [attr.y]=\"axis.options.opposite ? 0 : 9\"\n      >\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
-        }], ctorParameters: () => [{ type: ScaleService }, { type: ChartService }], propDecorators: { axis: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
+            args: [{ selector: '[teta-x-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({\n  x: x(),\n  ticks: ticks(),\n  axis: axis()\n}; as data) {\n  @for (tick of data.ticks; track $index) {\n    <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n      <text\n        fill=\"var(--color-text-70)\"\n        [attr.dy]=\"data.axis.options.opposite ? '-0.71em' : '0.71em'\"\n        [attr.y]=\"data.axis.options.opposite ? 0 : 9\"\n      >\n        {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.y2]=\"data.axis.options.opposite ? -6 : 6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n      {{ data.axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
+        }] });
 
 class ZoomableDirective {
     mouseenter() {
@@ -1466,32 +1453,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class YAxisComponent {
-    constructor(scaleService) {
-        this.scaleService = scaleService;
-        this._alive = true;
-        this.y = this.scaleService.scales.pipe(map((_) => {
-            return _.y.get(this.axis.index)?.scale;
-        }));
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this._alive = false;
-    }
-    ngAfterViewInit() { }
-    getLabelTransform() {
-        return `translate(${this.axis.options.opposite ? this.axis.selfSize : -this.axis.selfSize}, ${this.size.height / 2}) rotate(-90)`;
+    constructor() {
+        this.scaleService = inject(ScaleService);
+        this.yScales = toSignal(this.scaleService.scales.pipe(map((_) => _.y)));
+        this.axis = input();
+        this.size = input();
+        this.y = computed(() => {
+            return this.yScales().get(this.axis().index)?.scale;
+        });
+        this.getLabelTransform = computed(() => {
+            return `translate(${this.axis().options.opposite ? this.axis().selfSize : -this.axis().selfSize}, ${this.size().height / 2}) rotate(-90)`;
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: YAxisComponent, deps: [{ token: ScaleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: YAxisComponent, isStandalone: true, selector: "[teta-y-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "@if (y | async; as scale) {\n  @for (tick of scale.ticks(); track $index) {\n    <svg:g\n      [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\"\n      [attr.transform]=\"'translate(0, ' + scale(tick) + ')'\"\n    >\n      <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text\n      [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\"\n      text-anchor=\"middle\"\n      [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\"\n    >\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: YAxisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: YAxisComponent, isStandalone: true, selector: "[teta-y-axis]", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ({\n  y: y(),\n  axis: axis()\n}; as data) {\n  @for (tick of data.y.ticks(); track $index) {\n    <svg:g\n      [attr.text-anchor]=\"data.axis.options.opposite ? 'start' : 'end'\"\n      [attr.transform]=\"'translate(0, ' + data.y(tick) + ')'\"\n    >\n      <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"data.axis.options.opposite ? 10 : -9\">\n        {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.x2]=\"data.axis.options.opposite ? 6 : -6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text\n      [attr.dy]=\"data.axis.options.opposite ? '-4px' : '4px'\"\n      text-anchor=\"middle\"\n      [attr.dominant-baseline]=\"data.axis.options.opposite ? 'auto' : 'hanging'\"\n    >\n      {{ data.axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: YAxisComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-y-axis]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if (y | async; as scale) {\n  @for (tick of scale.ticks(); track $index) {\n    <svg:g\n      [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\"\n      [attr.transform]=\"'translate(0, ' + scale(tick) + ')'\"\n    >\n      <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text\n      [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\"\n      text-anchor=\"middle\"\n      [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\"\n    >\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"] }]
-        }], ctorParameters: () => [{ type: ScaleService }], propDecorators: { axis: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
+            args: [{ selector: '[teta-y-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({\n  y: y(),\n  axis: axis()\n}; as data) {\n  @for (tick of data.y.ticks(); track $index) {\n    <svg:g\n      [attr.text-anchor]=\"data.axis.options.opposite ? 'start' : 'end'\"\n      [attr.transform]=\"'translate(0, ' + data.y(tick) + ')'\"\n    >\n      <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"data.axis.options.opposite ? 10 : -9\">\n        {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.x2]=\"data.axis.options.opposite ? 6 : -6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text\n      [attr.dy]=\"data.axis.options.opposite ? '-4px' : '4px'\"\n      text-anchor=\"middle\"\n      [attr.dominant-baseline]=\"data.axis.options.opposite ? 'auto' : 'hanging'\"\n    >\n      {{ data.axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"] }]
+        }] });
 
 class PlotBand {
     constructor(options) {
@@ -2232,22 +2212,25 @@ class SeriesHostComponent {
         this.viewContainerRef = inject(ViewContainerRef);
         this.config = input();
         this.series = input();
-        this._init = false;
-        effect(() => {
-            this._componentRef.setInput('config', this.config());
-        });
+        this.count = 0;
         effect(() => {
-            this._componentRef.setInput('series', this.series());
+            if (this.series()) {
+                if (!Object.prototype.isPrototypeOf.call(SeriesBaseComponent, this.series().component)) {
+                    this.series().component = defaultSeriesTypeMapping.get(this.series().type) || LineSeriesComponent;
+                }
+                if (this.series().component !== this.seriesComponent) {
+                    this.viewContainerRef.clear();
+                    this._componentRef?.destroy();
+                    this._componentRef = this.viewContainerRef.createComponent(this.series().component);
+                    this.seriesComponent = 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 }); }
@@ -2593,6 +2576,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 },
@@ -2605,6 +2594,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;
@@ -2628,8 +2627,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-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\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    </teta-scrollable>\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 }); }
+    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,
@@ -2650,15 +2657,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         SelectOptionDirective,
                         SelectValueDirective,
                         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    <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\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    </teta-scrollable>\n  </div>\n</teta-dropdown>\n" }]
+                    ], 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)
@@ -2796,8 +2802,8 @@ 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.ɵ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 }); }
+    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 $index) {\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: [{
             type: Component,
@@ -2816,8 +2822,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         CrosshairComponent,
                         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 }] });
+                    ], 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 $index) {\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 }] });
 
 class LegendComponent {
     constructor(chartService) {