@tetacom/svg-charts 1.7.0 → 1.7.2

package/fesm2022/tetacom-svg-charts.mjs

@@ -1,11 +1,15 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, ElementRef, ChangeDetectionStrategy, ViewChild, Directive, HostBinding, HostListener, EventEmitter, Output, ChangeDetectorRef } from '@angular/core';
-import { ReplaySubject, filter, BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, lastValueFrom, take, combineLatest, tap, takeWhile, Observable, pipe, observeOn, animationFrameScheduler } from 'rxjs';
+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 * 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 * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
 class BroadcastService {
     constructor() {
@@ -114,6 +118,9 @@ const defaultChartConfig = () => ({
     legend: {
         enable: true,
     },
+    controls: {
+        enable: true,
+    },
     tooltip: {
         enable: true,
         showMarkers: true,
@@ -168,13 +175,15 @@ const defaultSeriesConfig = () => ({
     fillType: FillType.default,
     color: 'coral',
     visible: true,
+    enabled: true,
     clipPointsDirection: ClipPointsDirection.x,
 });
 
 class ChartService {
-    static { this._hiddenSeriesPostfix = 'hidden_series'; }
+    static { this._hiddenSeriesPostfix = 'series_config'; }
     constructor() {
         this.config$ = new BehaviorSubject(defaultChartConfig());
+        this.configUpdates$ = new Subject();
         this.size$ = new BehaviorSubject(null);
         this.pointerMove$ = new Subject();
         this.tooltips$ = new BehaviorSubject(new Map());
@@ -186,7 +195,11 @@ class ChartService {
         this.annotationEvent$ = new Subject();
         this.annotationMove$ = new Subject();
         this.id = of((Date.now() + Math.random()).toString(36));
-        this.config = this.config$.asObservable().pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), map(this.restoreLocalStorage), shareReplay({
+        const initialConfig = this.config$.asObservable().pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), map(this.restoreLocalStorage), shareReplay({
+            bufferSize: 1,
+            refCount: true,
+        }));
+        this.config = merge(initialConfig, this.configUpdates$).pipe(shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
@@ -205,8 +218,6 @@ class ChartService {
         this.annotationMove = this.annotationMove$.asObservable();
         this.plotBandClick = this.plotBandEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'click'));
         this.plotBandContextMenu = this.plotBandEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'contextmenu'));
-        // this.zoomInstance = this.zoomInstance$.asObservable();
-        // this.brushInstance = this.brushInstance$.asObservable();
     }
     setConfig(config) {
         this.clearTooltips();
@@ -231,26 +242,20 @@ class ChartService {
     clearTooltips() {
         this.tooltips$.next(new Map());
     }
-    async toggleVisibilitySeries(seriesIndex, visible) {
-        if (seriesIndex?.length === 0) {
+    async updateSeries(series, visible) {
+        const currentConfig = await lastValueFrom(this.config.pipe(take(1)));
+        const currentSeriesIndex = currentConfig.series.findIndex((_) => _.id === series.id);
+        if (currentSeriesIndex === -1) {
             return;
         }
-        const currentConfig = await lastValueFrom(this.config.pipe(take(1)));
-        seriesIndex.forEach((serieIndex) => {
-            const currentSerieIndex = currentConfig.series.findIndex((_) => _.id === serieIndex);
-            if (currentSerieIndex === -1) {
-                return;
-            }
-            currentConfig.series[currentSerieIndex].visible =
-                visible !== undefined ? visible : !currentConfig.series[currentSerieIndex].visible;
-            const seriesLinkCount = currentConfig.series.filter((_) => _.yAxisIndex === currentConfig.series[currentSerieIndex].yAxisIndex && _.visible === true).length;
-            currentConfig.yAxis[currentConfig.series[currentSerieIndex].yAxisIndex].visible = seriesLinkCount !== 0;
-        });
+        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;
         try {
             this.saveCookie(currentConfig);
         }
         finally {
-            this.config$.next(currentConfig);
+            this.configUpdates$.next({ ...currentConfig });
         }
     }
     emitMoveAnnotation(event) {
@@ -259,10 +264,10 @@ class ChartService {
     emitAnnotation(event) {
         this.annotationEvent$.next(event);
     }
-    emitPlotband(event) {
+    emitPlotBand(event) {
         this.plotBandEvent$.next(event);
     }
-    emitPlotline(event) {
+    emitPlotLine(event) {
         this.plotLineMove$.next(event);
     }
     emitPoint(event) {
@@ -274,31 +279,46 @@ class ChartService {
     emitChartContextMenu(event) {
         this.chartContextMenu$.next(event);
     }
-    // public emitZoomInstance(event: ZoomService) {
-    //   this.zoomInstance$.next(event);
-    // }
-    //
-    // public emitZoomInstance(event: ZoomService) {
-    //   this.zoomInstance$.next(event);
-    // }
     saveCookie(config) {
         if (!config.name)
             return;
-        const hiddenSeries = config.series?.filter((_) => !_.visible).map((_) => _.id);
-        localStorage.setItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`, JSON.stringify(hiddenSeries));
+        const series = config.series?.map((_) => {
+            return {
+                id: _.id,
+                visible: _.visible,
+                enabled: _.enabled,
+                color: _.color,
+                strokeDasharray: _.style?.strokeDasharray,
+                strokeWidth: _.style?.strokeWidth,
+            };
+        });
+        localStorage.setItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`, JSON.stringify(series));
     }
     restoreLocalStorage(config) {
         if (!config.name)
             return config;
-        const hiddenSeries = localStorage.getItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`);
-        if (hiddenSeries) {
-            const json = JSON.parse(hiddenSeries);
+        const seriesConfig = localStorage.getItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`);
+        if (seriesConfig) {
+            const json = JSON.parse(seriesConfig);
             config.series = config.series.map((serie, index) => {
-                serie.visible = !json.includes(serie.id);
+                const found = json.find((_) => _.id === serie.id);
+                if (found) {
+                    serie.visible = found.visible ?? serie.visible;
+                    serie.enabled = found.enabled ?? serie.enabled;
+                    serie.color = found.color ?? serie.color;
+                    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;
-                    config.yAxis[config.series[currentSerieIndex].yAxisIndex].visible = seriesLinkCount !== 0;
+                    const yAxis = config.yAxis[config.series[currentSerieIndex].yAxisIndex];
+                    if (yAxis) {
+                        yAxis.visible = seriesLinkCount !== 0;
+                    }
                 }
                 return serie;
             });
@@ -877,29 +897,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }], ctorParameters: () => [{ type: ChartService }, { type: ZoomService }] });
 
 class SeriesBaseComponent {
-    set config(config) {
-        this._config = config;
-    }
-    get config() {
-        return this._config;
-    }
-    set series(series) {
-        this._series = series;
+    constructor() {
+        this.config = input();
+        this.series = input();
+        this.svc = inject(ChartService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.scaleService = inject(ScaleService);
+        this.zoomService = inject(ZoomService);
+        this.element = inject(ElementRef);
+        this.id = (Date.now() + Math.random()).toString(36);
+        this.xScales = toSignal(this.scaleService.scales.pipe(map((_) => _.x)));
+        this.yScales = toSignal(this.scaleService.scales.pipe(map((_) => _.y)));
+        this.x = computed(() => {
+            return this.xScales().get(this.series().xAxisIndex)?.scale;
+        });
+        this.y = computed(() => {
+            return this.yScales().get(this.series().yAxisIndex)?.scale;
+        });
     }
-    get series() {
-        return this._series;
+    mouseenter(point) {
+        this.svc.setTooltip({
+            point: point,
+            series: this.series(),
+        });
     }
-    constructor(svc, cdr, scaleService, zoomService, element, zone) {
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.zone = zone;
+    mouseleave(point) {
+        this.svc.setTooltip({
+            point: null,
+            series: this.series(),
+        });
     }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesBaseComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SeriesBaseComponent, isStandalone: true, selector: "ng-component", inputs: { config: "config", series: "series" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SeriesBaseComponent, isStandalone: true, selector: "ng-component", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesBaseComponent, decorators: [{
             type: Component,
@@ -907,11 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     template: '',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { config: [{
-                type: Input
-            }], series: [{
-                type: Input
-            }] } });
+        }] });
 
 var BrushType;
 (function (BrushType) {
@@ -1194,11 +1219,11 @@ class XAxisComponent {
         }
     }
     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 tick) {\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.ɵ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 }); }
 }
 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 tick) {\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"] }]
+            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: [{
@@ -1453,11 +1478,11 @@ class YAxisComponent {
         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 tick) {\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.ɵ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 }); }
 }
 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 tick) {\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"] }]
+            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: [{
@@ -1526,7 +1551,7 @@ class PlotBandComponent {
         };
     }
     emit(event) {
-        this.chartService.emitPlotband(event);
+        this.chartService.emitPlotBand(event);
     }
     ngAfterViewInit() {
         const plotbandElement = d3.select(this.element.nativeElement).select('.plotband');
@@ -1651,34 +1676,59 @@ class GridlinesComponent {
     }
     ngAfterViewInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: GridlinesComponent, isStandalone: true, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "@if (\n  { xValues: tickXValues | async, yValues: tickYValues | async, x: x | async, y: y | async, config: config | async };\n  as data\n) {\n  @if (data.y && data.config.gridLines?.showY !== false) {\n    @for (tick of data.yValues; track tick) {\n      <svg:line\n        [attr.x1]=\"0\"\n        [attr.y1]=\"data.y(tick) || 1\"\n        [attr.x2]=\"size?.width\"\n        [attr.y2]=\"data.y(tick) || 1\"\n      ></svg:line>\n    }\n  }\n  @if (data.x && data.config.gridLines?.showX !== false) {\n    @for (tick of data.xValues; track tick) {\n      <svg:line\n        [attr.x1]=\"data.x(tick) || 1\"\n        [attr.y1]=\"0\"\n        [attr.x2]=\"data.x(tick) || 1\"\n        [attr.y2]=\"size?.height\"\n      ></svg:line>\n    }\n  }\n}\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: GridlinesComponent, isStandalone: true, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "@if (\n  { xValues: tickXValues | async, yValues: tickYValues | async, x: x | async, y: y | async, config: config | async };\n  as data\n) {\n  @if (data.y && data.config.gridLines?.showY !== false) {\n    @for (tick of data.yValues; track $index) {\n      <svg:line\n        [attr.x1]=\"0\"\n        [attr.y1]=\"data.y(tick) || 1\"\n        [attr.x2]=\"size?.width\"\n        [attr.y2]=\"data.y(tick) || 1\"\n      ></svg:line>\n    }\n  }\n  @if (data.x && data.config.gridLines?.showX !== false) {\n    @for (tick of data.xValues; track $index) {\n      <svg:line\n        [attr.x1]=\"data.x(tick) || 1\"\n        [attr.y1]=\"0\"\n        [attr.x2]=\"data.x(tick) || 1\"\n        [attr.y2]=\"size?.height\"\n      ></svg:line>\n    }\n  }\n}\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GridlinesComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if (\n  { xValues: tickXValues | async, yValues: tickYValues | async, x: x | async, y: y | async, config: config | async };\n  as data\n) {\n  @if (data.y && data.config.gridLines?.showY !== false) {\n    @for (tick of data.yValues; track tick) {\n      <svg:line\n        [attr.x1]=\"0\"\n        [attr.y1]=\"data.y(tick) || 1\"\n        [attr.x2]=\"size?.width\"\n        [attr.y2]=\"data.y(tick) || 1\"\n      ></svg:line>\n    }\n  }\n  @if (data.x && data.config.gridLines?.showX !== false) {\n    @for (tick of data.xValues; track tick) {\n      <svg:line\n        [attr.x1]=\"data.x(tick) || 1\"\n        [attr.y1]=\"0\"\n        [attr.x2]=\"data.x(tick) || 1\"\n        [attr.y2]=\"size?.height\"\n      ></svg:line>\n    }\n  }\n}\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"] }]
+            args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if (\n  { xValues: tickXValues | async, yValues: tickYValues | async, x: x | async, y: y | async, config: config | async };\n  as data\n) {\n  @if (data.y && data.config.gridLines?.showY !== false) {\n    @for (tick of data.yValues; track $index) {\n      <svg:line\n        [attr.x1]=\"0\"\n        [attr.y1]=\"data.y(tick) || 1\"\n        [attr.x2]=\"size?.width\"\n        [attr.y2]=\"data.y(tick) || 1\"\n      ></svg:line>\n    }\n  }\n  @if (data.x && data.config.gridLines?.showX !== false) {\n    @for (tick of data.xValues; track $index) {\n      <svg:line\n        [attr.x1]=\"data.x(tick) || 1\"\n        [attr.y1]=\"0\"\n        [attr.x2]=\"data.x(tick) || 1\"\n        [attr.y2]=\"size?.height\"\n      ></svg:line>\n    }\n  }\n}\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"] }]
         }], ctorParameters: () => [{ type: ScaleService }, { type: ChartService }], propDecorators: { size: [{
                 type: Input
             }] } });
 
-class LinearSeriesBase extends SeriesBaseComponent {
-    set series(series) {
-        this.__series = series;
-        this.markers = this.__series.data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined && _?.x !== null && _?.y !== null);
-    }
-    get series() {
-        return this.__series;
-    }
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
+class LinearSeriesBaseComponent extends SeriesBaseComponent {
+    constructor() {
+        super();
+        this.pointerMove = toSignal(this.svc.pointerMove);
+        this.transform = computed(() => {
+            const event = this.pointerMove();
+            return this.getTransform(event, this.x(), this.y());
+        });
         this.defaultClipPointsMapping = new Map();
-        this._update = new BehaviorSubject(null);
-    }
-    ngOnInit() {
+        this.markers = computed(() => {
+            return this.series().data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined && _?.x !== null && _?.y !== null);
+        });
+        this.path = computed(() => {
+            this.update();
+            if (!this.x() || !this.y()) {
+                return '';
+            }
+            const filter = this.defaultClipPointsMapping.get(this.series().clipPointsDirection);
+            const line = d3
+                .line()
+                .defined((point) => point.x !== null &&
+                point.y !== null &&
+                point.x !== undefined &&
+                point.y !== undefined &&
+                !isNaN(point.x) &&
+                !isNaN(point.y))
+                .x((point) => this.x()(point.x))
+                .y((point) => this.y()(point.y));
+            let filteredData = this.series().data;
+            if (this.series().clipPointsDirection === ClipPointsDirection.x) {
+                let [min, max] = this.x().domain();
+                min = min instanceof Date ? min.getTime() : min;
+                max = max instanceof Date ? max.getTime() : max;
+                filteredData = filteredData?.filter(filter(min, max));
+            }
+            if (this.series().clipPointsDirection === ClipPointsDirection.y) {
+                let [min, max] = this.y().domain();
+                min = min instanceof Date ? min.getTime() : min;
+                max = max instanceof Date ? max.getTime() : max;
+                filteredData = filteredData?.filter(filter(min, max));
+            }
+            return line(filteredData);
+        });
+        this.update = signal(null);
         const filterX = (min, max) => (point, idx, arr) => {
             const bigger = min > max ? min : max;
             const smaller = min > max ? max : min;
@@ -1705,69 +1755,31 @@ class LinearSeriesBase extends SeriesBaseComponent {
         };
         this.defaultClipPointsMapping.set(ClipPointsDirection.x, filterX);
         this.defaultClipPointsMapping.set(ClipPointsDirection.y, filterY);
-        this.transform = this.svc.pointerMove.pipe(withLatestFrom(this.scaleService.scales), map((data) => {
-            const [event, { x, y }] = data;
-            return this.getTransform(event, x.get(this.series.xAxisIndex).scale, y.get(this.series.yAxisIndex).scale);
-        }), tap(() => setTimeout(() => this.cdr.detectChanges())));
-        this.path = combineLatest([this.scaleService.scales, this._update]).pipe(map(([data]) => {
-            const { x, y } = data;
-            this.x = x.get(this.series.xAxisIndex)?.scale;
-            this.y = y.get(this.series.yAxisIndex)?.scale;
-            if (!this.x || !this.y) {
-                return '';
-            }
-            const filter = this.defaultClipPointsMapping.get(this.series.clipPointsDirection);
-            const line = d3
-                .line()
-                .defined((point) => point.x !== null &&
-                point.y !== null &&
-                point.x !== undefined &&
-                point.y !== undefined &&
-                !isNaN(point.x) &&
-                !isNaN(point.y))
-                .x((point) => this.x(point.x))
-                .y((point) => this.y(point.y));
-            let filteredData = this.series.data;
-            if (this.series.clipPointsDirection === ClipPointsDirection.x) {
-                let [min, max] = this.x.domain();
-                min = min instanceof Date ? min.getTime() : min;
-                max = max instanceof Date ? max.getTime() : max;
-                filteredData = filteredData?.filter(filter(min, max));
-            }
-            if (this.series.clipPointsDirection === ClipPointsDirection.y) {
-                let [min, max] = this.y.domain();
-                min = min instanceof Date ? min.getTime() : min;
-                max = max instanceof Date ? max.getTime() : max;
-                filteredData = filteredData?.filter(filter(min, max));
-            }
-            return line(filteredData);
-        }));
     }
     ngOnDestroy() {
         this.svc.setTooltip({
             point: null,
-            series: this.series,
+            series: this.series(),
         });
     }
-    ngAfterViewInit() { }
     getTransform(event, scaleX, scaleY) {
-        if (event.type === 'mouseleave') {
+        if (!scaleX || !scaleY) {
+            return null;
+        }
+        if (event && event.type === 'mouseleave') {
             return null;
         }
         const mouse = [event?.offsetX, event?.offsetY];
-        const tooltipTracking = this.config?.tooltip?.tracking;
+        const tooltipTracking = this.config()?.tooltip?.tracking;
         const lineIntersection = (p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) => {
             const rV = {};
-            let s1_x, s1_y, s2_x, s2_y;
-            s1_x = p1_x - p0_x;
-            s1_y = p1_y - p0_y;
-            s2_x = p3_x - p2_x;
-            s2_y = p3_y - p2_y;
-            let s, t;
-            s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) / (-s2_x * s1_y + s1_x * s2_y);
-            t = (s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) / (-s2_x * s1_y + s1_x * s2_y);
+            const s1_x = p1_x - p0_x;
+            const s1_y = p1_y - p0_y;
+            const s2_x = p3_x - p2_x;
+            const s2_y = p3_y - p2_y;
+            const s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) / (-s2_x * s1_y + s1_x * s2_y);
+            const t = (s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) / (-s2_x * s1_y + s1_x * s2_y);
             if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
-                // Collision detected
                 rV.x = p0_x + t * s1_x;
                 rV.y = p0_y + t * s1_y;
             }
@@ -1780,9 +1792,9 @@ class LinearSeriesBase extends SeriesBaseComponent {
             if (x0 instanceof Date) {
                 x0 = x0.getTime();
             }
-            const rightId = bisect(this.series.data, x0);
+            const rightId = bisect(this.series().data, x0);
             const range = scaleY.range();
-            const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX(this.series.data[rightId - 1]?.x), scaleY(this.series.data[rightId - 1]?.y), scaleX(this.series.data[rightId]?.x), scaleY(this.series.data[rightId]?.y));
+            const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX(this.series().data[rightId - 1]?.x), scaleY(this.series().data[rightId - 1]?.y), scaleX(this.series().data[rightId]?.x), scaleY(this.series().data[rightId]?.y));
             const x = scaleX.invert(intersect.x);
             const y = scaleY.invert(intersect.y);
             if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
@@ -1791,13 +1803,13 @@ class LinearSeriesBase extends SeriesBaseComponent {
                         x: scaleX.invert(intersect.x),
                         y: scaleY.invert(intersect.y),
                     },
-                    series: this.series,
+                    series: this.series(),
                 });
             }
             else {
                 this.svc.setTooltip({
                     point: null,
-                    series: this.series,
+                    series: this.series(),
                 });
             }
             return {
@@ -1811,9 +1823,9 @@ class LinearSeriesBase extends SeriesBaseComponent {
             if (y0 instanceof Date) {
                 y0 = y0.getTime();
             }
-            const rightId = bisect(this.series.data, y0);
+            const rightId = bisect(this.series().data, y0);
             const range = scaleX.range();
-            const intersect = lineIntersection(range[0], mouse[1], Number.MAX_SAFE_INTEGER, mouse[1], scaleX(this.series.data[rightId - 1]?.x), scaleY(this.series.data[rightId - 1]?.y), scaleX(this.series.data[rightId]?.x), scaleY(this.series.data[rightId]?.y));
+            const intersect = lineIntersection(range[0], mouse[1], Number.MAX_SAFE_INTEGER, mouse[1], scaleX(this.series().data[rightId - 1]?.x), scaleY(this.series().data[rightId - 1]?.y), scaleX(this.series().data[rightId]?.x), scaleY(this.series().data[rightId]?.y));
             const x = scaleX.invert(intersect.x);
             const y = scaleY.invert(intersect.y);
             if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
@@ -1822,13 +1834,13 @@ class LinearSeriesBase extends SeriesBaseComponent {
                         x: scaleX.invert(intersect.x),
                         y: scaleY.invert(intersect.y),
                     },
-                    series: this.series,
+                    series: this.series(),
                 });
             }
             else {
                 this.svc.setTooltip({
                     point: null,
-                    series: this.series,
+                    series: this.series(),
                 });
             }
             return {
@@ -1838,18 +1850,16 @@ class LinearSeriesBase extends SeriesBaseComponent {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LinearSeriesBase, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: LinearSeriesBase, isStandalone: true, selector: "ng-component", inputs: { series: "series" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LinearSeriesBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: LinearSeriesBaseComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LinearSeriesBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LinearSeriesBaseComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }], propDecorators: { series: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 var DragPointType;
 (function (DragPointType) {
@@ -1999,33 +2009,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 args: ['window:touchmove', ['$event']]
             }] } });
 
-class LineSeriesComponent extends LinearSeriesBase {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
+class LineSeriesComponent extends LinearSeriesBaseComponent {
+    constructor() {
+        super(...arguments);
         this.allowDrag = (point) => {
             return (newPoint) => {
                 if (point.marker.minX !== null && point.marker.minX !== undefined) {
-                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) < point.marker.minX) {
+                    if (this.x().invert(this.x()(this.start.x) + newPoint.deltaX) < point.marker.minX) {
                         return false;
                     }
                 }
                 if (point.marker.maxX !== null && point.marker.maxX !== undefined) {
-                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.maxX) {
+                    if (this.x().invert(this.x()(this.start.x) + newPoint.deltaX) > point.marker.maxX) {
                         return false;
                     }
                 }
                 if (point.marker.minY !== null && point.marker.minY !== undefined) {
-                    if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) < point.marker.minY) {
+                    if (this.y().invert(this.y()(this.start.y) + newPoint.deltaY) < point.marker.minY) {
                         return false;
                     }
                 }
                 if (point.marker.maxY !== null && point.marker.maxY !== undefined) {
-                    if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) > point.marker.maxY) {
+                    if (this.y().invert(this.y()(this.start.y) + newPoint.deltaY) > point.marker.maxY) {
                         return false;
                     }
                 }
@@ -2037,32 +2042,32 @@ class LineSeriesComponent extends LinearSeriesBase {
         this.start = { x: point.x, y: point.y };
     }
     moveEnd(event, point) {
-        point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
-        point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
-        this._update.next();
+        point.x = this.x().invert(this.x()(this.start.x) + event.deltaX);
+        point.y = this.y().invert(this.y()(this.start.y) + event.deltaY);
+        this.update.set({});
         const emitEvent = {
             type: 'end',
             sourceEvent: event,
         };
         this.svc.emitPoint({
             target: {
-                series: this.series,
+                series: this.series(),
                 point: point,
             },
             event: emitEvent,
         });
     }
     moveProcess(event, point) {
-        point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
-        point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
-        this._update.next();
+        point.x = this.x().invert(this.x()(this.start.x) + event.deltaX);
+        point.y = this.y().invert(this.y()(this.start.y) + event.deltaY);
+        this.update.set({});
         const emitEvent = {
             type: 'drag',
             sourceEvent: event,
         };
         this.svc.emitPoint({
             target: {
-                series: this.series,
+                series: this.series(),
                 point: point,
             },
             event: emitEvent,
@@ -2075,235 +2080,140 @@ class LineSeriesComponent extends LinearSeriesBase {
         label.dx = this.labelStart.dx + event.deltaX;
         label.dy = this.labelStart.dy + event.deltaY;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LineSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LineSeriesComponent, isStandalone: true, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\"\n></svg:path>\n@if (transform | async; as t) {\n  @if (t?.x != null && t?.y != null) {\n    <svg:circle r=\"3\" [attr.fill]=\"series.color\" [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"></svg:circle>\n  }\n}\n@if (markers; as draggablePoints) {\n  @if (x && y) {\n    @for (point of draggablePoints; track point) {\n      <svg:g [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n        <svg:g\n          [tetaDraggablePoint]=\"point.marker.draggable\"\n          [dragDirection]=\"point.marker.dragType\"\n          [allowDrag]=\"allowDrag(point)\"\n          #dragPoint=\"tetaDraggablePoint\"\n          (moveStart)=\"moveStart($event, point)\"\n          (moveEnd)=\"moveEnd($event, point); dragPoint.resetTransform()\"\n          (moveProcess)=\"moveProcess($event, point); dragPoint.resetTransform()\"\n          [class.draggable-marker]=\"point?.marker?.draggable\"\n        >\n          <svg:circle\n            class=\"marker\"\n            [attr.r]=\"point.marker.style?.radius ?? 5\"\n            [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n            [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n            [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n            [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n            [attr.cx]=\"0\"\n            [attr.cy]=\"0\"\n          ></svg:circle>\n          @if (point.marker.label?.text) {\n            <svg:line\n              [attr.x1]=\"0\"\n              [attr.y1]=\"0\"\n              [attr.x2]=\"point.marker.label?.dx\"\n              [attr.y2]=\"point.marker.label?.dy\"\n              [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n              [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n              [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\"\n            ></svg:line>\n            <svg:foreignObject\n              [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n              [dragDirection]=\"point.marker.label.dragType\"\n              #labelPoint=\"tetaDraggablePoint\"\n              (moveStart)=\"startLabel($event, point.marker.label)\"\n              (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform()\"\n              (moveEnd)=\"labelPoint.resetTransform()\"\n              [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n              [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n              [attr.x]=\"point.marker.label?.dx\"\n              [attr.y]=\"point.marker.label?.dy\"\n              class=\"position-absolute\"\n            >\n              <div\n                #annotationNode\n                class=\"shadow-2 padding-2\"\n                [style.color]=\"'var(--color-text-90)'\"\n                [style.background-color]=\"'var(--color-global-bgcard)'\"\n                [style.cursor]=\"'move'\"\n                style=\"border-radius: 2px; display: inline-block\"\n              >\n                {{ point.marker.label?.text }}\n              </div>\n            </svg:foreignObject>\n          }\n        </svg:g>\n      </svg:g>\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LineSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LineSeriesComponent, isStandalone: true, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "@if (series(); as series) {\n  <svg:path\n    class=\"line\"\n    [attr.d]=\"path()\"\n    [attr.stroke]=\"series.color\"\n    [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n    [attr.stroke-width]=\"series.style?.strokeWidth\"\n    fill=\"none\"\n  ></svg:path>\n  @if (transform(); as t) {\n    @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle r=\"3\"\n                  [attr.fill]=\"series.color\"\n                  [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"></svg:circle>\n    }\n  }\n  @if (markers(); as draggablePoints) {\n    @if (x() && y()) {\n      @for (point of draggablePoints; track point) {\n        <svg:g [attr.transform]=\"'translate(' + x()(point.x) + ',' + y()(point.y) + ')'\">\n          <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n                 [dragDirection]=\"point.marker.dragType\"\n                 [allowDrag]=\"allowDrag(point)\"\n                 #dragPoint=\"tetaDraggablePoint\"\n                 (moveStart)=\"moveStart($event, point)\"\n                 (moveEnd)=\"moveEnd($event, point); dragPoint.resetTransform()\"\n                 (moveProcess)=\"moveProcess($event, point); dragPoint.resetTransform()\"\n                 [class.draggable-marker]=\"point?.marker?.draggable\">\n            <svg:circle class=\"marker\"\n                        [attr.r]=\"point.marker.style?.radius ?? 5\"\n                        [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n                        [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n                        [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n                        [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n                        [attr.cx]=\"0\"\n                        [attr.cy]=\"0\"></svg:circle>\n            @if (point.marker.label?.text) {\n              <svg:line [attr.x1]=\"0\"\n                        [attr.y1]=\"0\"\n                        [attr.x2]=\"point.marker.label?.dx\"\n                        [attr.y2]=\"point.marker.label?.dy\"\n                        [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n                        [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n                        [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\"></svg:line>\n              <svg:foreignObject [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n                                 [dragDirection]=\"point.marker.label.dragType\"\n                                 #labelPoint=\"tetaDraggablePoint\"\n                                 (moveStart)=\"startLabel($event, point.marker.label)\"\n                                 (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform()\"\n                                 (moveEnd)=\"labelPoint.resetTransform()\"\n                                 [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n                                 [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n                                 [attr.x]=\"point.marker.label?.dx\"\n                                 [attr.y]=\"point.marker.label?.dy\"\n                                 class=\"position-absolute\">\n                <div #annotationNode\n                     class=\"shadow-2 padding-2\"\n                     [style.color]=\"'var(--color-text-90)'\"\n                     [style.background-color]=\"'var(--color-global-bgcard)'\"\n                     [style.cursor]=\"'move'\"\n                     style=\"border-radius: 2px; display: inline-block\">\n                  {{ point.marker.label?.text }}\n                </div>\n              </svg:foreignObject>\n            }\n          </svg:g>\n        </svg:g>\n      }\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LineSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, DraggablePointDirective], template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\"\n></svg:path>\n@if (transform | async; as t) {\n  @if (t?.x != null && t?.y != null) {\n    <svg:circle r=\"3\" [attr.fill]=\"series.color\" [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"></svg:circle>\n  }\n}\n@if (markers; as draggablePoints) {\n  @if (x && y) {\n    @for (point of draggablePoints; track point) {\n      <svg:g [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n        <svg:g\n          [tetaDraggablePoint]=\"point.marker.draggable\"\n          [dragDirection]=\"point.marker.dragType\"\n          [allowDrag]=\"allowDrag(point)\"\n          #dragPoint=\"tetaDraggablePoint\"\n          (moveStart)=\"moveStart($event, point)\"\n          (moveEnd)=\"moveEnd($event, point); dragPoint.resetTransform()\"\n          (moveProcess)=\"moveProcess($event, point); dragPoint.resetTransform()\"\n          [class.draggable-marker]=\"point?.marker?.draggable\"\n        >\n          <svg:circle\n            class=\"marker\"\n            [attr.r]=\"point.marker.style?.radius ?? 5\"\n            [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n            [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n            [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n            [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n            [attr.cx]=\"0\"\n            [attr.cy]=\"0\"\n          ></svg:circle>\n          @if (point.marker.label?.text) {\n            <svg:line\n              [attr.x1]=\"0\"\n              [attr.y1]=\"0\"\n              [attr.x2]=\"point.marker.label?.dx\"\n              [attr.y2]=\"point.marker.label?.dy\"\n              [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n              [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n              [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\"\n            ></svg:line>\n            <svg:foreignObject\n              [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n              [dragDirection]=\"point.marker.label.dragType\"\n              #labelPoint=\"tetaDraggablePoint\"\n              (moveStart)=\"startLabel($event, point.marker.label)\"\n              (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform()\"\n              (moveEnd)=\"labelPoint.resetTransform()\"\n              [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n              [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n              [attr.x]=\"point.marker.label?.dx\"\n              [attr.y]=\"point.marker.label?.dy\"\n              class=\"position-absolute\"\n            >\n              <div\n                #annotationNode\n                class=\"shadow-2 padding-2\"\n                [style.color]=\"'var(--color-text-90)'\"\n                [style.background-color]=\"'var(--color-global-bgcard)'\"\n                [style.cursor]=\"'move'\"\n                style=\"border-radius: 2px; display: inline-block\"\n              >\n                {{ point.marker.label?.text }}\n              </div>\n            </svg:foreignObject>\n          }\n        </svg:g>\n      </svg:g>\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
+            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, DraggablePointDirective], template: "@if (series(); as series) {\n  <svg:path\n    class=\"line\"\n    [attr.d]=\"path()\"\n    [attr.stroke]=\"series.color\"\n    [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n    [attr.stroke-width]=\"series.style?.strokeWidth\"\n    fill=\"none\"\n  ></svg:path>\n  @if (transform(); as t) {\n    @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle r=\"3\"\n                  [attr.fill]=\"series.color\"\n                  [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"></svg:circle>\n    }\n  }\n  @if (markers(); as draggablePoints) {\n    @if (x() && y()) {\n      @for (point of draggablePoints; track point) {\n        <svg:g [attr.transform]=\"'translate(' + x()(point.x) + ',' + y()(point.y) + ')'\">\n          <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n                 [dragDirection]=\"point.marker.dragType\"\n                 [allowDrag]=\"allowDrag(point)\"\n                 #dragPoint=\"tetaDraggablePoint\"\n                 (moveStart)=\"moveStart($event, point)\"\n                 (moveEnd)=\"moveEnd($event, point); dragPoint.resetTransform()\"\n                 (moveProcess)=\"moveProcess($event, point); dragPoint.resetTransform()\"\n                 [class.draggable-marker]=\"point?.marker?.draggable\">\n            <svg:circle class=\"marker\"\n                        [attr.r]=\"point.marker.style?.radius ?? 5\"\n                        [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n                        [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n                        [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n                        [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n                        [attr.cx]=\"0\"\n                        [attr.cy]=\"0\"></svg:circle>\n            @if (point.marker.label?.text) {\n              <svg:line [attr.x1]=\"0\"\n                        [attr.y1]=\"0\"\n                        [attr.x2]=\"point.marker.label?.dx\"\n                        [attr.y2]=\"point.marker.label?.dy\"\n                        [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n                        [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n                        [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\"></svg:line>\n              <svg:foreignObject [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n                                 [dragDirection]=\"point.marker.label.dragType\"\n                                 #labelPoint=\"tetaDraggablePoint\"\n                                 (moveStart)=\"startLabel($event, point.marker.label)\"\n                                 (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform()\"\n                                 (moveEnd)=\"labelPoint.resetTransform()\"\n                                 [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n                                 [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n                                 [attr.x]=\"point.marker.label?.dx\"\n                                 [attr.y]=\"point.marker.label?.dy\"\n                                 class=\"position-absolute\">\n                <div #annotationNode\n                     class=\"shadow-2 padding-2\"\n                     [style.color]=\"'var(--color-text-90)'\"\n                     [style.background-color]=\"'var(--color-global-bgcard)'\"\n                     [style.cursor]=\"'move'\"\n                     style=\"border-radius: 2px; display: inline-block\">\n                  {{ point.marker.label?.text }}\n                </div>\n              </svg:foreignObject>\n            }\n          </svg:g>\n        </svg:g>\n      }\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
+        }] });
 
 class BarSeriesComponent extends SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.Math = Math;
-    }
-    ngOnInit() {
-        this.barSeriesCount = this.svc.config.pipe(map((_) => {
-            const count = _.series.filter((_) => _.type === SeriesType.bar && _.xAxisIndex === this.series.xAxisIndex);
-            return count.length;
-        }));
-        this.x1 = this.scaleService.scales.pipe(map((_) => {
-            const x = _.x.get(this.series.xAxisIndex)?.scale;
+    constructor() {
+        super(...arguments);
+        this.x1 = computed(() => {
+            const x = this.xScales().get(this.series().xAxisIndex)?.scale;
             const range = x.range();
-            const domain = this.series.data.map((_) => _.x);
+            const domain = this.series().data.map((_) => _.x);
             return d3.scaleBand().range([0, range[1]]).domain(domain).padding(0.1);
-        }));
-        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
-        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
-    }
-    mouseenter(point) {
-        this.svc.setTooltip({
-            point: point,
-            series: this.series,
         });
-    }
-    mouseleave(point) {
-        this.svc.setTooltip({
-            point: null,
-            series: this.series,
+        this.barSeriesCount = computed(() => {
+            const count = this.config().series.filter((_) => _.type === SeriesType.bar && _.xAxisIndex === this.series().xAxisIndex);
+            return count.length;
         });
+        this.Math = Math;
+        this.Number = Number;
     }
-    ngOnChanges(changes) { }
     isNumber(value) {
         return typeof value === 'number';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BarSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BarSeriesComponent, isStandalone: true, selector: "svg:svg[teta-bar-series]", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ({ x: x | async, x1: x1 | async, y: y | async, barSeriesCount: barSeriesCount | async }; as data) {\n  @if (data.x && data.y) {\n    @if (data.barSeriesCount > 1) {\n      @for (point of series.data; track point) {\n        <svg:rect\n          (mouseenter)=\"mouseenter(point)\"\n          (mouseleave)=\"mouseleave(point)\"\n          [attr.x]=\"\n            data.x(point.x) + ((isNumber(series.id) ? series.id : 0) * data.x1.bandwidth()) / data.barSeriesCount\n          \"\n          [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n          [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n          [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n          [attr.fill]=\"series.color\"\n        ></svg:rect>\n      }\n    }\n    @if (data.barSeriesCount === 1) {\n      @for (point of series.data; track point) {\n        <svg:rect\n          (mouseenter)=\"mouseenter(point)\"\n          (mouseleave)=\"mouseleave(point)\"\n          [attr.x]=\"data.x(point.x)\"\n          [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n          [attr.width]=\"data.x1.bandwidth()\"\n          [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n          [attr.fill]=\"point.color ?? series.color\"\n        ></svg:rect>\n      }\n    }\n  }\n}\n", styles: [""], 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: BarSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BarSeriesComponent, isStandalone: true, selector: "svg:svg[teta-bar-series]", usesInheritance: true, ngImport: i0, template: "@if ({ x: x(), x1: x1(), y: y(), barSeriesCount: barSeriesCount() }; as data) {\n  @if (data.x && data.y) {\n    @if (data.barSeriesCount > 1) {\n      @for (point of series().data; track point) {\n        <svg:rect\n          (mouseenter)=\"mouseenter(point)\"\n          (mouseleave)=\"mouseleave(point)\"\n          [attr.x]=\"\n            data.x(point.x) + ((isNumber(series().id) ? Number(series().id) : 0) * data.x1.bandwidth()) / data.barSeriesCount\n          \"\n          [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n          [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n          [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n          [attr.fill]=\"series().color\"\n        ></svg:rect>\n      }\n    }\n    @if (data.barSeriesCount === 1) {\n      @for (point of series().data; track point) {\n        <svg:rect\n          (mouseenter)=\"mouseenter(point)\"\n          (mouseleave)=\"mouseleave(point)\"\n          [attr.x]=\"data.x(point.x)\"\n          [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n          [attr.width]=\"data.x1.bandwidth()\"\n          [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n          [attr.fill]=\"point.color ?? series().color\"\n        ></svg:rect>\n      }\n    }\n  }\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BarSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-bar-series]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if ({ x: x | async, x1: x1 | async, y: y | async, barSeriesCount: barSeriesCount | async }; as data) {\n  @if (data.x && data.y) {\n    @if (data.barSeriesCount > 1) {\n      @for (point of series.data; track point) {\n        <svg:rect\n          (mouseenter)=\"mouseenter(point)\"\n          (mouseleave)=\"mouseleave(point)\"\n          [attr.x]=\"\n            data.x(point.x) + ((isNumber(series.id) ? series.id : 0) * data.x1.bandwidth()) / data.barSeriesCount\n          \"\n          [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n          [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n          [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n          [attr.fill]=\"series.color\"\n        ></svg:rect>\n      }\n    }\n    @if (data.barSeriesCount === 1) {\n      @for (point of series.data; track point) {\n        <svg:rect\n          (mouseenter)=\"mouseenter(point)\"\n          (mouseleave)=\"mouseleave(point)\"\n          [attr.x]=\"data.x(point.x)\"\n          [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n          [attr.width]=\"data.x1.bandwidth()\"\n          [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n          [attr.fill]=\"point.color ?? series.color\"\n        ></svg:rect>\n      }\n    }\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
+            args: [{ selector: 'svg:svg[teta-bar-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ x: x(), x1: x1(), y: y(), barSeriesCount: barSeriesCount() }; as data) {\n  @if (data.x && data.y) {\n    @if (data.barSeriesCount > 1) {\n      @for (point of series().data; track point) {\n        <svg:rect\n          (mouseenter)=\"mouseenter(point)\"\n          (mouseleave)=\"mouseleave(point)\"\n          [attr.x]=\"\n            data.x(point.x) + ((isNumber(series().id) ? Number(series().id) : 0) * data.x1.bandwidth()) / data.barSeriesCount\n          \"\n          [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n          [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n          [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n          [attr.fill]=\"series().color\"\n        ></svg:rect>\n      }\n    }\n    @if (data.barSeriesCount === 1) {\n      @for (point of series().data; track point) {\n        <svg:rect\n          (mouseenter)=\"mouseenter(point)\"\n          (mouseleave)=\"mouseleave(point)\"\n          [attr.x]=\"data.x(point.x)\"\n          [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n          [attr.width]=\"data.x1.bandwidth()\"\n          [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n          [attr.fill]=\"point.color ?? series().color\"\n        ></svg:rect>\n      }\n    }\n  }\n}\n" }]
+        }] });
 
 class ScatterSeriesComponent extends SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-    }
-    ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
-        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
-    }
-    ngAfterViewInit() { }
-    mouseenter(point) {
-        this.svc.setTooltip({
-            point: point,
-            series: this.series,
-        });
-    }
-    mouseleave(point) {
-        this.svc.setTooltip({
-            point: null,
-            series: this.series,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScatterSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScatterSeriesComponent, isStandalone: true, selector: "svg:svg[teta-scatter-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y | async, x: x | async }; as scales) {\n  @if (scales.x && scales.y) {\n    @for (point of series.data; track point) {\n      <svg:circle\n        class=\"line\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.cx]=\"scales.x(point.x)\"\n        [attr.cy]=\"scales.y(point.y)\"\n        [attr.r]=\"series.style?.radius ?? 1\"\n        [attr.stroke]=\"point.color ?? series.color\"\n        [attr.fill]=\"point.color ?? series.color\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n      ></svg:circle>\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\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: ScatterSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScatterSeriesComponent, isStandalone: true, selector: "svg:svg[teta-scatter-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y(), x: x() }; as scales) {\n  @if (scales.x && scales.y) {\n    @for (point of series().data; track point) {\n      <svg:circle\n        class=\"line\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.cx]=\"scales.x(point.x)\"\n        [attr.cy]=\"scales.y(point.y)\"\n        [attr.r]=\"series().style?.radius ?? 1\"\n        [attr.stroke]=\"point.color ?? series().color\"\n        [attr.fill]=\"point.color ?? series().color\"\n        [attr.stroke-width]=\"series().style?.strokeWidth\"\n      ></svg:circle>\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScatterSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-scatter-series]', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ y: y | async, x: x | async }; as scales) {\n  @if (scales.x && scales.y) {\n    @for (point of series.data; track point) {\n      <svg:circle\n        class=\"line\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.cx]=\"scales.x(point.x)\"\n        [attr.cy]=\"scales.y(point.y)\"\n        [attr.r]=\"series.style?.radius ?? 1\"\n        [attr.stroke]=\"point.color ?? series.color\"\n        [attr.fill]=\"point.color ?? series.color\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n      ></svg:circle>\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
+            args: [{ selector: 'svg:svg[teta-scatter-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ y: y(), x: x() }; as scales) {\n  @if (scales.x && scales.y) {\n    @for (point of series().data; track point) {\n      <svg:circle\n        class=\"line\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.cx]=\"scales.x(point.x)\"\n        [attr.cy]=\"scales.y(point.y)\"\n        [attr.r]=\"series().style?.radius ?? 1\"\n        [attr.stroke]=\"point.color ?? series().color\"\n        [attr.fill]=\"point.color ?? series().color\"\n        [attr.stroke-width]=\"series().style?.strokeWidth\"\n      ></svg:circle>\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
+        }] });
 
 class BlockSeriesComponent extends SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.fillType = FillType;
-        this.Math = Math;
-        this.id = (Date.now() + Math.random()).toString(36);
-    }
-    ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
-        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
-        this.displayPoints = this.y.pipe(filter((y) => y), map((y) => {
-            return this.series.data.filter((point, index, arr) => {
-                const [min, max] = y.domain();
+    constructor() {
+        super(...arguments);
+        this.displayPoints = computed(() => {
+            return this.series().data.filter((point, index, arr) => {
+                const [min, max] = this.y().domain();
                 return ((point.y >= min || point.y1 >= min || arr[index + 1]?.y >= min || arr[index + 1]?.y1 >= min) &&
                     (point.y <= max || point.y1 <= max || arr[index - 1]?.y <= max || arr[index - 1]?.y1 <= max));
             });
-        }));
-    }
-    mouseenter(point) {
-        this.svc.setTooltip({
-            point: point,
-            series: this.series,
-        });
-    }
-    mouseleave(point) {
-        this.svc.setTooltip({
-            point: null,
-            series: this.series,
         });
+        this.Math = Math;
+        this.FillType = FillType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BlockSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y | async, x: x | async, points: displayPoints | async }; as data) {\n  @if (series?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient\n        [id]=\"'gradient-fill-' + id\"\n        gradientUnits=\"userSpaceOnUse\"\n        x1=\"0%\"\n        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n        y2=\"0%\"\n      >\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          x=\"0\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.fill]=\"\n            series.fillType === fillType.gradient\n              ? 'url(#gradient-fill-' + id + ')'\n              : point.iconId\n                ? 'url(#pattern' + point.iconId + ')'\n                : (point.color ?? series.style?.fill ?? series.color)\n          \"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          width=\"100%\"\n        ></svg:rect>\n        @if (point.text && data.y(point.y1) - data.y(point.y) > 8) {\n          <svg:text\n            x=\"50%\"\n            [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n            alignment-baseline=\"middle\"\n            text-anchor=\"middle\"\n          >\n            {{ point.text }}\n          </svg:text>\n        }\n        <svg:line\n          x1=\"0\"\n          x2=\"100%\"\n          [attr.y1]=\"data.y(point.y)\"\n          [attr.y2]=\"data.y(point.y)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series.style?.stroke ?? series.color)\"\n        ></svg:line>\n        <svg:line\n          x1=\"0\"\n          x2=\"100%\"\n          [attr.y1]=\"data.y(point.y1)\"\n          [attr.y2]=\"data.y(point.y1)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series.style?.stroke ?? series.color)\"\n        ></svg:line>\n      </svg:g>\n    }\n  }\n}\n", styles: [""], 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: BlockSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BlockSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n  @if (series()?.fillType === FillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient\n        [id]=\"'gradient-fill-' + id\"\n        gradientUnits=\"userSpaceOnUse\"\n        x1=\"0%\"\n        [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n        [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n        y2=\"0%\"\n      >\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          x=\"0\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.fill]=\"\n            series().fillType === FillType.gradient\n              ? 'url(#gradient-fill-' + id + ')'\n              : point.iconId\n                ? 'url(#pattern' + point.iconId + ')'\n                : (point.color ?? series().style?.fill ?? series().color)\n          \"\n          [attr.fill-opacity]=\"series().style?.fillOpacity\"\n          width=\"100%\"\n        ></svg:rect>\n        @if (point.text && data.y(point.y1) - data.y(point.y) > 8) {\n          <svg:text\n            x=\"50%\"\n            [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n            alignment-baseline=\"middle\"\n            text-anchor=\"middle\"\n          >\n            {{ point.text }}\n          </svg:text>\n        }\n        <svg:line\n          x1=\"0\"\n          x2=\"100%\"\n          [attr.y1]=\"data.y(point.y)\"\n          [attr.y2]=\"data.y(point.y)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n        ></svg:line>\n        <svg:line\n          x1=\"0\"\n          x2=\"100%\"\n          [attr.y1]=\"data.y(point.y1)\"\n          [attr.y2]=\"data.y(point.y1)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n        ></svg:line>\n      </svg:g>\n    }\n  }\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-block-series]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if ({ y: y | async, x: x | async, points: displayPoints | async }; as data) {\n  @if (series?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient\n        [id]=\"'gradient-fill-' + id\"\n        gradientUnits=\"userSpaceOnUse\"\n        x1=\"0%\"\n        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n        y2=\"0%\"\n      >\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          x=\"0\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.fill]=\"\n            series.fillType === fillType.gradient\n              ? 'url(#gradient-fill-' + id + ')'\n              : point.iconId\n                ? 'url(#pattern' + point.iconId + ')'\n                : (point.color ?? series.style?.fill ?? series.color)\n          \"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          width=\"100%\"\n        ></svg:rect>\n        @if (point.text && data.y(point.y1) - data.y(point.y) > 8) {\n          <svg:text\n            x=\"50%\"\n            [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n            alignment-baseline=\"middle\"\n            text-anchor=\"middle\"\n          >\n            {{ point.text }}\n          </svg:text>\n        }\n        <svg:line\n          x1=\"0\"\n          x2=\"100%\"\n          [attr.y1]=\"data.y(point.y)\"\n          [attr.y2]=\"data.y(point.y)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series.style?.stroke ?? series.color)\"\n        ></svg:line>\n        <svg:line\n          x1=\"0\"\n          x2=\"100%\"\n          [attr.y1]=\"data.y(point.y1)\"\n          [attr.y2]=\"data.y(point.y1)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series.style?.stroke ?? series.color)\"\n        ></svg:line>\n      </svg:g>\n    }\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
+            args: [{ selector: 'svg:svg[teta-block-series]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n  @if (series()?.fillType === FillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient\n        [id]=\"'gradient-fill-' + id\"\n        gradientUnits=\"userSpaceOnUse\"\n        x1=\"0%\"\n        [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n        [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n        y2=\"0%\"\n      >\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          x=\"0\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.fill]=\"\n            series().fillType === FillType.gradient\n              ? 'url(#gradient-fill-' + id + ')'\n              : point.iconId\n                ? 'url(#pattern' + point.iconId + ')'\n                : (point.color ?? series().style?.fill ?? series().color)\n          \"\n          [attr.fill-opacity]=\"series().style?.fillOpacity\"\n          width=\"100%\"\n        ></svg:rect>\n        @if (point.text && data.y(point.y1) - data.y(point.y) > 8) {\n          <svg:text\n            x=\"50%\"\n            [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n            alignment-baseline=\"middle\"\n            text-anchor=\"middle\"\n          >\n            {{ point.text }}\n          </svg:text>\n        }\n        <svg:line\n          x1=\"0\"\n          x2=\"100%\"\n          [attr.y1]=\"data.y(point.y)\"\n          [attr.y2]=\"data.y(point.y)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n        ></svg:line>\n        <svg:line\n          x1=\"0\"\n          x2=\"100%\"\n          [attr.y1]=\"data.y(point.y1)\"\n          [attr.y2]=\"data.y(point.y1)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n        ></svg:line>\n      </svg:g>\n    }\n  }\n}\n" }]
+        }] });
 
 class BlockAreaSeriesComponent extends SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.fillType = FillType;
-        this.Math = Math;
-        this.id = (Date.now() + Math.random()).toString(36);
-    }
-    ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
-        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
-        this.displayPoints = this.y.pipe(filter((y) => y), map((y) => {
-            return this.series.data.filter((point, index, arr) => {
-                const [min, max] = y.domain();
+    constructor() {
+        super(...arguments);
+        this.displayPoints = computed(() => {
+            return this.series().data.filter((point, index, arr) => {
+                const [min, max] = this.y().domain();
                 return ((point.y >= min || point.y1 >= min || arr[index + 1]?.y >= min || arr[index + 1]?.y1 >= min) &&
                     (point.y <= max || point.y1 <= max || arr[index - 1]?.y <= max || arr[index - 1]?.y1 <= max));
             });
-        }));
-    }
-    ngAfterViewInit() { }
-    mouseenter(point) {
-        this.svc.setTooltip({
-            point: point,
-            series: this.series,
-        });
-    }
-    mouseleave(point) {
-        this.svc.setTooltip({
-            point: null,
-            series: this.series,
         });
+        this.fillType = FillType;
+        this.Math = Math;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockAreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BlockAreaSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y | async, x: x | async, points: displayPoints | async }; as data) {\n  @if (series?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient\n        [id]=\"'gradient-fill-' + id\"\n        gradientUnits=\"userSpaceOnUse\"\n        x1=\"0%\"\n        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n        y2=\"0%\"\n      >\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        @if (!!config.inverted) {\n          <svg:rect\n            [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n            [attr.y]=\"data.y(point.y)\"\n            [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n            [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n            [attr.stroke]=\"point.iconId ? '' : (point.color ?? series.style?.stroke ?? series.color)\"\n            [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n            [attr.stroke-width]=\"series.style?.strokeWidth\"\n            [attr.fill]=\"\n              series.fillType === fillType.gradient\n                ? 'url(#gradient-fill-' + id + ')'\n                : point.iconId\n                  ? 'url(#pattern' + point.iconId + ')'\n                  : (point.color ?? series.style?.fill ?? series.color)\n            \"\n            [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          ></svg:rect>\n        } @else {\n          <svg:rect\n            [attr.x]=\"data.x(point.x)\"\n            [attr.y]=\"data.y(0)\"\n            [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n            [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n            [attr.stroke]=\"point.iconId ? '' : (point.color ?? series.color)\"\n            [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n            [attr.stroke-width]=\"series.style?.strokeWidth\"\n            [attr.fill]=\"\n              series.fillType === fillType.gradient\n                ? 'url(#gradient-fill-' + id + ')'\n                : point.iconId\n                  ? 'url(#pattern' + point.iconId + ')'\n                  : (point.color ?? series.color)\n            \"\n            [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          ></svg:rect>\n        }\n        @if (point.text) {\n          <svg:text\n            x=\"50%\"\n            fill=\"var(--color-text-50)\"\n            [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n            alignment-baseline=\"middle\"\n            text-anchor=\"middle\"\n          >\n            {{ point.text }}\n          </svg:text>\n        }\n      </svg:g>\n    }\n  }\n}\n", styles: [""], 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: BlockAreaSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BlockAreaSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n  @if (series()?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                          gradientUnits=\"userSpaceOnUse\"\n                          x1=\"0%\"\n                          [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n                          [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n                          y2=\"0%\">\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\"\n                  stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        @if (!!config().inverted) {\n          <svg:rect [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n                    [attr.y]=\"data.y(point.y)\"\n                    [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n                    [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n                    [attr.stroke]=\"point.iconId ? '' : (point.color ?? series().style?.stroke ?? series().color)\"\n                    [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n                    [attr.stroke-width]=\"series().style?.strokeWidth\"\n                    [attr.fill]=\"\n              series().fillType === fillType.gradient\n                ? 'url(#gradient-fill-' + id + ')'\n                : point.iconId\n                  ? 'url(#pattern' + point.iconId + ')'\n                  : (point.color ?? series().style?.fill ?? series().color)\n            \"\n                    [attr.fill-opacity]=\"series().style?.fillOpacity\"></svg:rect>\n        } @else {\n          <svg:rect [attr.x]=\"data.x(point.x)\"\n                    [attr.y]=\"data.y(0)\"\n                    [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n                    [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n                    [attr.stroke]=\"point.iconId ? '' : (point.color ?? series().color)\"\n                    [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n                    [attr.stroke-width]=\"series().style?.strokeWidth\"\n                    [attr.fill]=\"\n              series().fillType === fillType.gradient\n                ? 'url(#gradient-fill-' + id + ')'\n                : point.iconId\n                  ? 'url(#pattern' + point.iconId + ')'\n                  : (point.color ?? series().color)\n            \"\n                    [attr.fill-opacity]=\"series().style?.fillOpacity\"></svg:rect>\n        }\n        @if (point.text) {\n          <svg:text x=\"50%\"\n                    fill=\"var(--color-text-50)\"\n                    [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                    alignment-baseline=\"middle\"\n                    text-anchor=\"middle\">\n            {{ point.text }}\n          </svg:text>\n        }\n      </svg:g>\n    }\n  }\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if ({ y: y | async, x: x | async, points: displayPoints | async }; as data) {\n  @if (series?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient\n        [id]=\"'gradient-fill-' + id\"\n        gradientUnits=\"userSpaceOnUse\"\n        x1=\"0%\"\n        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n        y2=\"0%\"\n      >\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        @if (!!config.inverted) {\n          <svg:rect\n            [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n            [attr.y]=\"data.y(point.y)\"\n            [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n            [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n            [attr.stroke]=\"point.iconId ? '' : (point.color ?? series.style?.stroke ?? series.color)\"\n            [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n            [attr.stroke-width]=\"series.style?.strokeWidth\"\n            [attr.fill]=\"\n              series.fillType === fillType.gradient\n                ? 'url(#gradient-fill-' + id + ')'\n                : point.iconId\n                  ? 'url(#pattern' + point.iconId + ')'\n                  : (point.color ?? series.style?.fill ?? series.color)\n            \"\n            [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          ></svg:rect>\n        } @else {\n          <svg:rect\n            [attr.x]=\"data.x(point.x)\"\n            [attr.y]=\"data.y(0)\"\n            [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n            [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n            [attr.stroke]=\"point.iconId ? '' : (point.color ?? series.color)\"\n            [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n            [attr.stroke-width]=\"series.style?.strokeWidth\"\n            [attr.fill]=\"\n              series.fillType === fillType.gradient\n                ? 'url(#gradient-fill-' + id + ')'\n                : point.iconId\n                  ? 'url(#pattern' + point.iconId + ')'\n                  : (point.color ?? series.color)\n            \"\n            [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          ></svg:rect>\n        }\n        @if (point.text) {\n          <svg:text\n            x=\"50%\"\n            fill=\"var(--color-text-50)\"\n            [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n            alignment-baseline=\"middle\"\n            text-anchor=\"middle\"\n          >\n            {{ point.text }}\n          </svg:text>\n        }\n      </svg:g>\n    }\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
+            args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n  @if (series()?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                          gradientUnits=\"userSpaceOnUse\"\n                          x1=\"0%\"\n                          [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n                          [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n                          y2=\"0%\">\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\"\n                  stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        @if (!!config().inverted) {\n          <svg:rect [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n                    [attr.y]=\"data.y(point.y)\"\n                    [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n                    [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n                    [attr.stroke]=\"point.iconId ? '' : (point.color ?? series().style?.stroke ?? series().color)\"\n                    [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n                    [attr.stroke-width]=\"series().style?.strokeWidth\"\n                    [attr.fill]=\"\n              series().fillType === fillType.gradient\n                ? 'url(#gradient-fill-' + id + ')'\n                : point.iconId\n                  ? 'url(#pattern' + point.iconId + ')'\n                  : (point.color ?? series().style?.fill ?? series().color)\n            \"\n                    [attr.fill-opacity]=\"series().style?.fillOpacity\"></svg:rect>\n        } @else {\n          <svg:rect [attr.x]=\"data.x(point.x)\"\n                    [attr.y]=\"data.y(0)\"\n                    [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n                    [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n                    [attr.stroke]=\"point.iconId ? '' : (point.color ?? series().color)\"\n                    [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n                    [attr.stroke-width]=\"series().style?.strokeWidth\"\n                    [attr.fill]=\"\n              series().fillType === fillType.gradient\n                ? 'url(#gradient-fill-' + id + ')'\n                : point.iconId\n                  ? 'url(#pattern' + point.iconId + ')'\n                  : (point.color ?? series().color)\n            \"\n                    [attr.fill-opacity]=\"series().style?.fillOpacity\"></svg:rect>\n        }\n        @if (point.text) {\n          <svg:text x=\"50%\"\n                    fill=\"var(--color-text-50)\"\n                    [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                    alignment-baseline=\"middle\"\n                    text-anchor=\"middle\">\n            {{ point.text }}\n          </svg:text>\n        }\n      </svg:g>\n    }\n  }\n}\n" }]
+        }] });
 
-class AreaSeriesComponent extends LinearSeriesBase {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.fillDirection = FillDirection;
-        this.fillType = FillType;
-        this.id = (Date.now() + Math.random()).toString(36);
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.areaPath = this.scaleService.scales.pipe(map((data) => {
-            const { x, y } = data;
-            this.x = x.get(this.series.xAxisIndex)?.scale;
-            this.y = y.get(this.series.yAxisIndex)?.scale;
-            if (!this.x || !this.y) {
+class AreaSeriesComponent extends LinearSeriesBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.areaPath = computed(() => {
+            if (!this.x() || !this.y()) {
                 return '';
             }
             const area = d3
                 .area()
                 .defined((point) => point.x !== null && point.y !== null && !isNaN(point.x) && !isNaN(point.y));
-            area
-                .x1((_) => (_.x1 !== null && _.x1 !== undefined ? this.x(_.x1) : this.x(0)))
-                .x0((_) => this.x(_.x))
-                .y((_) => this.y(_.y));
-            const filter = this.defaultClipPointsMapping.get(this.series.clipPointsDirection);
-            let filteredData = this.series.data;
-            if (this.series.clipPointsDirection === ClipPointsDirection.x) {
-                let [min, max] = this.x.domain();
+            if (this.config().inverted) {
+                area
+                    .x1((_) => (_.x1 !== null && _.x1 !== undefined ? this.x()(_.x1) : this.x()(0)))
+                    .x0((_) => this.x()(_.x))
+                    .y((_) => this.y()(_.y));
+            }
+            else {
+                area
+                    .y1((_) => (_.y1 !== null && _.y1 !== undefined ? this.y()(_.y1) : this.y()(0)))
+                    .y0((_) => this.y()(_.y))
+                    .x((_) => this.x()(_.x));
+            }
+            const filter = this.defaultClipPointsMapping.get(this.series().clipPointsDirection);
+            let filteredData = this.series().data;
+            if (this.series().clipPointsDirection === ClipPointsDirection.x) {
+                let [min, max] = this.x().domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
                 filteredData = filteredData?.filter(filter(min, max));
             }
-            if (this.series.clipPointsDirection === ClipPointsDirection.y) {
-                let [min, max] = this.y.domain();
+            if (this.series().clipPointsDirection === ClipPointsDirection.y) {
+                let [min, max] = this.y().domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
                 filteredData = filteredData?.filter(filter(min, max));
             }
             return area(filteredData);
-        }));
+        });
+        this.FillType = FillType;
+        this.FillDirection = FillDirection;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AreaSeriesComponent, isStandalone: true, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "@if (series?.fillType === fillType.gradient) {\n  <svg:defs>\n    <svg:linearGradient\n      [id]=\"'gradient-fill-' + id\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"0%\"\n      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n      y2=\"0%\"\n    >\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n}\n<svg:path\n  class=\"area\"\n  [attr.d]=\"areaPath | async\"\n  [attr.stroke-width]=\"0\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"\n    series.fillType === fillType.gradient ? 'url(#gradient-fill-' + id + ')' : (series.style?.fill ?? series.color)\n  \"\n></svg:path>\n<svg:path\n  class=\"area\"\n  fill=\"none\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n></svg:path>\n@if (transform | async; as t) {\n  @if (t?.x != null && t?.y != null) {\n    <svg:circle r=\"3\" [attr.fill]=\"series.color\" [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"></svg:circle>\n  }\n}\n@if (markers; as draggablePoints) {\n  @for (point of draggablePoints; track point) {\n    <svg:circle\n      class=\"marker\"\n      [class.draggable-marker]=\"point?.marker?.draggable\"\n      [attr.r]=\"point.marker.style?.radius ?? 5\"\n      [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n      [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n      [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n      [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n      [attr.cx]=\"x(point.x)\"\n      [attr.cy]=\"y(point.y)\"\n    ></svg:circle>\n  }\n}\n", styles: [""], 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: AreaSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AreaSeriesComponent, isStandalone: true, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "@if (series()?.fillType === FillType.gradient) {\n  <svg:defs>\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '0%' : '100%'\"\n                        [attr.x2]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.8\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n}\n<svg:path class=\"area\"\n          [attr.d]=\"areaPath()\"\n          [attr.stroke-width]=\"0\"\n          [attr.fill-opacity]=\"series().style?.fillOpacity\"\n          [attr.fill]=\"series().fillType === FillType.gradient ? 'url(#gradient-fill-' + id + ')' : (series().style?.fill ?? series().color)\"></svg:path>\n<svg:path class=\"area\"\n          fill=\"none\"\n          [attr.d]=\"path()\"\n          [attr.stroke]=\"series().color\"\n          [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n          [attr.stroke-width]=\"series().style?.strokeWidth\"></svg:path>\n@if (transform(); as t) {\n  @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n    <svg:circle r=\"3\"\n                [attr.fill]=\"series().color\"\n                [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"></svg:circle>\n  }\n}\n@if (markers(); as draggablePoints) {\n  @for (point of draggablePoints; track point) {\n    <svg:circle class=\"marker\"\n                [class.draggable-marker]=\"point?.marker?.draggable\"\n                [attr.r]=\"point.marker.style?.radius ?? 5\"\n                [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n                [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n                [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n                [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n                [attr.cx]=\"x()(point.x)\"\n                [attr.cy]=\"y()(point.y)\"\n    ></svg:circle>\n  }\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AreaSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-area-series]', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (series?.fillType === fillType.gradient) {\n  <svg:defs>\n    <svg:linearGradient\n      [id]=\"'gradient-fill-' + id\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"0%\"\n      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n      y2=\"0%\"\n    >\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n}\n<svg:path\n  class=\"area\"\n  [attr.d]=\"areaPath | async\"\n  [attr.stroke-width]=\"0\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"\n    series.fillType === fillType.gradient ? 'url(#gradient-fill-' + id + ')' : (series.style?.fill ?? series.color)\n  \"\n></svg:path>\n<svg:path\n  class=\"area\"\n  fill=\"none\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n></svg:path>\n@if (transform | async; as t) {\n  @if (t?.x != null && t?.y != null) {\n    <svg:circle r=\"3\" [attr.fill]=\"series.color\" [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"></svg:circle>\n  }\n}\n@if (markers; as draggablePoints) {\n  @for (point of draggablePoints; track point) {\n    <svg:circle\n      class=\"marker\"\n      [class.draggable-marker]=\"point?.marker?.draggable\"\n      [attr.r]=\"point.marker.style?.radius ?? 5\"\n      [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n      [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n      [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n      [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n      [attr.cx]=\"x(point.x)\"\n      [attr.cy]=\"y(point.y)\"\n    ></svg:circle>\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
+            args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (series()?.fillType === FillType.gradient) {\n  <svg:defs>\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '0%' : '100%'\"\n                        [attr.x2]=\"config()?.inverted || series()?.fillDirection === FillDirection.y ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series().color\" stop-opacity=\"0.8\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n}\n<svg:path class=\"area\"\n          [attr.d]=\"areaPath()\"\n          [attr.stroke-width]=\"0\"\n          [attr.fill-opacity]=\"series().style?.fillOpacity\"\n          [attr.fill]=\"series().fillType === FillType.gradient ? 'url(#gradient-fill-' + id + ')' : (series().style?.fill ?? series().color)\"></svg:path>\n<svg:path class=\"area\"\n          fill=\"none\"\n          [attr.d]=\"path()\"\n          [attr.stroke]=\"series().color\"\n          [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n          [attr.stroke-width]=\"series().style?.strokeWidth\"></svg:path>\n@if (transform(); as t) {\n  @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n    <svg:circle r=\"3\"\n                [attr.fill]=\"series().color\"\n                [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"></svg:circle>\n  }\n}\n@if (markers(); as draggablePoints) {\n  @for (point of draggablePoints; track point) {\n    <svg:circle class=\"marker\"\n                [class.draggable-marker]=\"point?.marker?.draggable\"\n                [attr.r]=\"point.marker.style?.radius ?? 5\"\n                [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n                [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n                [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n                [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n                [attr.cx]=\"x()(point.x)\"\n                [attr.cy]=\"y()(point.y)\"\n    ></svg:circle>\n  }\n}\n" }]
+        }] });
 
 const defaultSeriesTypeMapping = new Map()
     .set(SeriesType.line, LineSeriesComponent)
@@ -2314,31 +2224,29 @@ const defaultSeriesTypeMapping = new Map()
     .set(SeriesType.blockArea, BlockAreaSeriesComponent);
 
 class SeriesHostComponent {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
+    constructor() {
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.config = input();
+        this.series = input();
         this._init = false;
+        effect(() => {
+            this._componentRef.setInput('config', this.config());
+        });
+        effect(() => {
+            this._componentRef.setInput('series', this.series());
+        });
     }
     ngOnInit() {
-        if (!SeriesBaseComponent.isPrototypeOf(this.series.component)) {
-            this.series.component = defaultSeriesTypeMapping.get(this.series.type) || LineSeriesComponent;
+        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.instance.config = this.config;
-        this._componentRef.instance.series = this.series;
-        this._init = true;
+        this._componentRef = this.viewContainerRef.createComponent(this.series().component);
     }
     ngOnDestroy() {
         this._componentRef.destroy();
     }
-    ngOnChanges(changes) {
-        if (this._init && (changes.hasOwnProperty('series') || changes.hasOwnProperty('config'))) {
-            this._componentRef.instance.config = this.config;
-            this._componentRef.instance.series = this.series;
-            this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SeriesHostComponent, isStandalone: true, selector: "[teta-series-host]", inputs: { config: "config", series: "series" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesHostComponent, decorators: [{
             type: Component,
@@ -2348,11 +2256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { config: [{
-                type: Input
-            }], series: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class PlotLine {
     constructor(options) {
@@ -2413,7 +2317,7 @@ class PlotlineComponent {
         this.dragElements.on('start drag end', null);
     }
     emit(event) {
-        this.chartService.emitPlotline(event);
+        this.chartService.emitPlotLine(event);
     }
     get value() {
         return this.scale(this.plotLine.value);
@@ -2680,19 +2584,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }] } });
 
-function tetaZoneFull(ngZone) {
-    return (source) => new Observable((subscriber) => source.subscribe({
-        next: (value) => ngZone.run(() => subscriber.next(value)),
-        error: (error) => ngZone.run(() => subscriber.error(error)),
-        complete: () => ngZone.run(() => subscriber.complete()),
-    }));
-}
-function tetaZoneFree(ngZone) {
-    return (source) => new Observable((subscriber) => ngZone.runOutsideAngular(() => source.subscribe(subscriber)));
-}
-function tetaZoneOptimized(ngZone) {
-    return pipe(tetaZoneFree(ngZone), tetaZoneFull(ngZone));
+class SeriesControlsComponent {
+    constructor() {
+        this.chartService = inject(ChartService);
+        this.Align = Align$1;
+        this.series = input();
+        this.strokeWidth = [
+            { id: 1, value: 1 },
+            { id: 2, value: 2 },
+            { id: 3, value: 3 },
+            { id: 4, value: 4 },
+            { id: 5, value: 6 },
+        ];
+        this.strokeArray = [
+            { id: '', value: 'solid' },
+            { id: '4, 8', value: 'dashed' },
+            { id: '2, 2', value: 'dotted' },
+        ];
+    }
+    setSeriesEnabled(series, value) {
+        series.enabled = value;
+        this.chartService.updateSeries(series);
+    }
+    setSeriesColor(series, value) {
+        series.color = value;
+        this.chartService.updateSeries(series);
+    }
+    setSeriesStrokeWidth(series, value) {
+        if (!series.style) {
+            series.style = {};
+        }
+        series.style.strokeWidth = value;
+        this.chartService.updateSeries(series);
+    }
+    setSeriesStrokeDasharray(series, value) {
+        if (!series.style) {
+            series.style = {};
+        }
+        series.style.strokeDasharray = value;
+        this.chartService.updateSeries(series);
+    }
+    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 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-series-controls', imports: [
+                        ButtonComponent,
+                        DropdownComponent,
+                        DropdownContentDirective,
+                        DropdownHeadDirective,
+                        IconComponent,
+                        AccordionComponent,
+                        AccordionHeadComponent,
+                        AccordionItemComponent,
+                        AccordionContentDirective,
+                        CheckboxComponent,
+                        ColorInputComponent,
+                        FormsModule,
+                        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" }]
+        }] });
 
 class ChartContainerComponent {
     constructor(_svc, _scaleService, _elementRef, _zone) {
@@ -2707,7 +2661,7 @@ class ChartContainerComponent {
         this.sumSize = (acc, curr) => acc + curr.selfSize;
         this.config = this._svc.config;
         this.size = this._svc.size;
-        this.scales = this._scaleService.scales.pipe(observeOn(animationFrameScheduler), tetaZoneFull(this._zone), shareReplay({
+        this.scales = this._scaleService.scales.pipe(observeOn(animationFrameScheduler), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
@@ -2756,7 +2710,7 @@ class ChartContainerComponent {
                 width: size.width - left - right - config.bounds?.left - config.bounds?.right,
                 height: size.height - top - bottom - config.bounds?.top - config.bounds?.bottom,
             };
-        }), tetaZoneFull(this._zone), shareReplay({
+        }), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
@@ -2837,11 +2791,8 @@ class ChartContainerComponent {
     mouseLeave(event) {
         this._svc.setPointerMove(event);
     }
-    trackSerie(index, item) {
-        return item.name?.length ? item.name : index;
-    }
     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  {\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) {\n  @if (data.config?.tooltip?.enable) {\n    <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n  }\n  @if (\n    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  ) {\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 (\n            item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\n          ) {\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n            ></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n            ></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\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n            ></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n            ></rect>\n          }\n        }\n      </g>\n    </svg>\n  }\n  @if (\n    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  ) {\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\"\n    >\n      @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\n            teta-plot-band\n            [plotBand]=\"plotBand.plotBand\"\n            [scale]=\"plotBand.axis.scale\"\n            [size]=\"data.visibleRect\"\n            [axis]=\"plotBand.axis\"\n          ></g>\n        }\n      </g>\n      <g class=\"series-container\">\n        @for (series of data.config.series; track series) {\n          @if (series.visible) {\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\n              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)\"\n            ></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\n              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)\"\n            ></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  }\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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: [{
             type: Component,
@@ -2859,7 +2810,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         AnnotationComponent,
                         CrosshairComponent,
                         BrushableDirective,
-                    ], template: "@if (\n  {\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) {\n  @if (data.config?.tooltip?.enable) {\n    <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n  }\n  @if (\n    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  ) {\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 (\n            item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\n          ) {\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n            ></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n            ></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\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n            ></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n            ></rect>\n          }\n        }\n      </g>\n    </svg>\n  }\n  @if (\n    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  ) {\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\"\n    >\n      @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\n            teta-plot-band\n            [plotBand]=\"plotBand.plotBand\"\n            [scale]=\"plotBand.axis.scale\"\n            [size]=\"data.visibleRect\"\n            [axis]=\"plotBand.axis\"\n          ></g>\n        }\n      </g>\n      <g class=\"series-container\">\n        @for (series of data.config.series; track series) {\n          @if (series.visible) {\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\n              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)\"\n            ></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\n              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)\"\n            ></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  }\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"] }]
+                        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 }] });
 
 class LegendComponent {
@@ -2872,23 +2824,23 @@ class LegendComponent {
             .set(SeriesType.area, 2)
             .set(SeriesType.block, 12)
             .set(SeriesType.blockArea, 2);
+        this.series = input();
         this.classLegend = true;
     }
     getHeight(serie) {
         return this.sizeMapping.get(serie.type ?? SeriesType.line);
     }
-    click(serie) {
-        this.chartService.toggleVisibilitySeries([serie.id]);
+    click(series, visible) {
+        series.visible = visible;
+        this.chartService.updateSeries(series);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LegendComponent, deps: [{ token: ChartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LegendComponent, isStandalone: true, selector: "teta-legend", inputs: { series: "series" }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "@for (serie of series; track serie.id) {\n  @if (serie?.showInLegend !== false) {\n    <div>\n      <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n        <div\n          class=\"legend-icon-form\"\n          [style.height.px]=\"getHeight(serie)\"\n          [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n          [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n          [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"\n        ></div>\n        <div\n          class=\"legend-label\"\n          style=\"user-select: none\"\n          [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\"\n        >\n          {{ serie.name }}\n        </div>\n      </div>\n    </div>\n  }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LegendComponent, isStandalone: true, selector: "teta-legend", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "@for (seriesItem of series(); track seriesItem.id) {\n  @if (seriesItem?.showInLegend !== false && seriesItem.enabled) {\n    <div>\n      <div class=\"legend-item cursor-pointer\" (click)=\"click(seriesItem, !seriesItem.visible)\">\n        <div class=\"legend-icon-form\"\n             [style.height.px]=\"getHeight(seriesItem)\"\n             [style.border-top-color]=\"seriesItem.visible ? seriesItem.color : 'var(--color-text-30)'\"\n             [style.border-top-style]=\"seriesItem.style?.strokeDasharray ? 'dashed' : 'solid'\"\n             [style.border-width.px]=\"seriesItem.style?.strokeDasharray ? 1 : 2\"></div>\n        <div class=\"legend-label\"\n             style=\"user-select: none\"\n             [style.text-decoration]=\"seriesItem.visible ? 'none' : 'line-through'\">\n          {{ seriesItem.name }}\n        </div>\n      </div>\n    </div>\n  }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LegendComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-legend', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (serie of series; track serie.id) {\n  @if (serie?.showInLegend !== false) {\n    <div>\n      <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n        <div\n          class=\"legend-icon-form\"\n          [style.height.px]=\"getHeight(serie)\"\n          [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n          [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n          [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"\n        ></div>\n        <div\n          class=\"legend-label\"\n          style=\"user-select: none\"\n          [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\"\n        >\n          {{ serie.name }}\n        </div>\n      </div>\n    </div>\n  }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"] }]
-        }], ctorParameters: () => [{ type: ChartService }], propDecorators: { series: [{
-                type: Input
-            }], classLegend: [{
+            args: [{ selector: 'teta-legend', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (seriesItem of series(); track seriesItem.id) {\n  @if (seriesItem?.showInLegend !== false && seriesItem.enabled) {\n    <div>\n      <div class=\"legend-item cursor-pointer\" (click)=\"click(seriesItem, !seriesItem.visible)\">\n        <div class=\"legend-icon-form\"\n             [style.height.px]=\"getHeight(seriesItem)\"\n             [style.border-top-color]=\"seriesItem.visible ? seriesItem.color : 'var(--color-text-30)'\"\n             [style.border-top-style]=\"seriesItem.style?.strokeDasharray ? 'dashed' : 'solid'\"\n             [style.border-width.px]=\"seriesItem.style?.strokeDasharray ? 1 : 2\"></div>\n        <div class=\"legend-label\"\n             style=\"user-select: none\"\n             [style.text-decoration]=\"seriesItem.visible ? 'none' : 'line-through'\">\n          {{ seriesItem.name }}\n        </div>\n      </div>\n    </div>\n  }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"] }]
+        }], ctorParameters: () => [{ type: ChartService }], propDecorators: { classLegend: [{
                 type: HostBinding,
                 args: ['class.padding-bottom-4']
             }] } });
@@ -3029,47 +2981,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class BlockHorizontalSeriesComponent extends SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.fillType = FillType;
-        this.Math = Math;
-        this.id = (Date.now() + Math.random()).toString(36);
-    }
-    ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
-        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
-        this.displayPoints = this.x.pipe(filter((y) => y), map((y) => {
-            return this.series.data.filter((point, index, arr) => {
-                const [min, max] = y.domain();
+    constructor() {
+        super(...arguments);
+        this.displayPoints = computed(() => {
+            return this.series().data.filter((point, index, arr) => {
+                const [min, max] = this.x().domain();
                 return ((point.x >= min || point.x1 >= min || arr[index + 1]?.x >= min || arr[index + 1]?.x1 >= min) &&
                     (point.x <= max || point.x1 <= max || arr[index - 1]?.x <= max || arr[index - 1]?.x1 <= max));
             });
-        }));
-    }
-    mouseenter(point) {
-        this.svc.setTooltip({
-            point: point,
-            series: this.series,
-        });
-    }
-    mouseleave(point) {
-        this.svc.setTooltip({
-            point: null,
-            series: this.series,
         });
+        this.Math = Math;
+        this.FillType = FillType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockHorizontalSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BlockHorizontalSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-horizontal-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y | async, x: x | async, points: displayPoints | async }; as data) {\n  @if (series?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient\n        [id]=\"'gradient-fill-' + id\"\n        gradientUnits=\"userSpaceOnUse\"\n        x1=\"0%\"\n        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n        y2=\"0%\"\n      >\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          x=\"0\"\n          [attr.x]=\"data.x(point.x)\"\n          [attr.width]=\"Math.abs(data.x(point.x1) - data.x(point.x))\"\n          [attr.fill]=\"\n            series.fillType === fillType.gradient\n              ? 'url(#gradient-fill-' + id + ')'\n              : point.iconId\n                ? 'url(#pattern' + point.iconId + ')'\n                : (point.color ?? series.style?.fill ?? series.color)\n          \"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          height=\"100%\"\n        ></svg:rect>\n        @if (point.text && data.x(point.x1) - data.x(point.x) > 8) {\n          <svg:text\n            [attr.transform]=\"'rotate(270)'\"\n            [ngStyle]=\"{ 'transform-origin': (data.x(point.x1) + data.x(point.x)) / 2 + 'px 50%' }\"\n            y=\"50%\"\n            [attr.x]=\"(data.x(point.x1) + data.x(point.x)) / 2\"\n            text-anchor=\"middle\"\n            alignment-baseline=\"middle\"\n            text-anchor=\"middle\"\n          >\n            {{ point.text }}\n          </svg:text>\n        }\n        <svg:line\n          y1=\"0\"\n          y2=\"100%\"\n          [attr.x1]=\"data.x(point.x)\"\n          [attr.x2]=\"data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series.style?.stroke ?? series.color)\"\n        ></svg:line>\n        <svg:line\n          y1=\"0\"\n          y2=\"100%\"\n          [attr.x1]=\"data.x(point.x1)\"\n          [attr.x2]=\"data.x(point.x1)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series.style?.stroke ?? series.color)\"\n        ></svg:line>\n      </svg:g>\n    }\n  }\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockHorizontalSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BlockHorizontalSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-horizontal-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n  @if (series()?.fillType === FillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                          gradientUnits=\"userSpaceOnUse\"\n                          x1=\"0%\"\n                          [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n                          [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n                          y2=\"0%\">\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\"\n                  stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        <svg:rect x=\"0\"\n                  [attr.x]=\"data.x(point.x)\"\n                  [attr.width]=\"Math.abs(data.x(point.x1) - data.x(point.x))\"\n                  [attr.fill]=\"series().fillType === FillType.gradient\n                                ? 'url(#gradient-fill-' + id + ')'\n                                : point.iconId\n                                  ? 'url(#pattern' + point.iconId + ')'\n                                  : (point.color ?? series().style?.fill ?? series().color)\"\n                  [attr.fill-opacity]=\"series().style?.fillOpacity\"\n                  height=\"100%\"\n        ></svg:rect>\n        @if (point.text && data.x(point.x1) - data.x(point.x) > 8) {\n          <svg:text [attr.transform]=\"'rotate(270)'\"\n                    [ngStyle]=\"{ 'transform-origin': (data.x(point.x1) + data.x(point.x)) / 2 + 'px 50%' }\"\n                    y=\"50%\"\n                    [attr.x]=\"(data.x(point.x1) + data.x(point.x)) / 2\"\n                    text-anchor=\"middle\"\n                    alignment-baseline=\"middle\"\n                    text-anchor=\"middle\">\n            {{ point.text }}\n          </svg:text>\n        }\n        <svg:line y1=\"0\"\n                  y2=\"100%\"\n                  [attr.x1]=\"data.x(point.x)\"\n                  [attr.x2]=\"data.x(point.x)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"></svg:line>\n        <svg:line y1=\"0\"\n                  y2=\"100%\"\n                  [attr.x1]=\"data.x(point.x1)\"\n                  [attr.x2]=\"data.x(point.x1)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"></svg:line>\n      </svg:g>\n    }\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockHorizontalSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-block-horizontal-series]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgStyle], template: "@if ({ y: y | async, x: x | async, points: displayPoints | async }; as data) {\n  @if (series?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient\n        [id]=\"'gradient-fill-' + id\"\n        gradientUnits=\"userSpaceOnUse\"\n        x1=\"0%\"\n        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n        y2=\"0%\"\n      >\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          x=\"0\"\n          [attr.x]=\"data.x(point.x)\"\n          [attr.width]=\"Math.abs(data.x(point.x1) - data.x(point.x))\"\n          [attr.fill]=\"\n            series.fillType === fillType.gradient\n              ? 'url(#gradient-fill-' + id + ')'\n              : point.iconId\n                ? 'url(#pattern' + point.iconId + ')'\n                : (point.color ?? series.style?.fill ?? series.color)\n          \"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          height=\"100%\"\n        ></svg:rect>\n        @if (point.text && data.x(point.x1) - data.x(point.x) > 8) {\n          <svg:text\n            [attr.transform]=\"'rotate(270)'\"\n            [ngStyle]=\"{ 'transform-origin': (data.x(point.x1) + data.x(point.x)) / 2 + 'px 50%' }\"\n            y=\"50%\"\n            [attr.x]=\"(data.x(point.x1) + data.x(point.x)) / 2\"\n            text-anchor=\"middle\"\n            alignment-baseline=\"middle\"\n            text-anchor=\"middle\"\n          >\n            {{ point.text }}\n          </svg:text>\n        }\n        <svg:line\n          y1=\"0\"\n          y2=\"100%\"\n          [attr.x1]=\"data.x(point.x)\"\n          [attr.x2]=\"data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series.style?.stroke ?? series.color)\"\n        ></svg:line>\n        <svg:line\n          y1=\"0\"\n          y2=\"100%\"\n          [attr.x1]=\"data.x(point.x1)\"\n          [attr.x2]=\"data.x(point.x1)\"\n          [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series.style?.stroke ?? series.color)\"\n        ></svg:line>\n      </svg:g>\n    }\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
+            args: [{ selector: 'svg:svg[teta-block-horizontal-series]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle], template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n  @if (series()?.fillType === FillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                          gradientUnits=\"userSpaceOnUse\"\n                          x1=\"0%\"\n                          [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n                          [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n                          y2=\"0%\">\n        <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n        <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n        <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n        <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n        <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\"\n                  stop-opacity=\"0.9\"></svg:stop>\n      </svg:linearGradient>\n    </svg:defs>\n  }\n  @if (data.x && data.y) {\n    @for (point of data.points; track point) {\n      <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n        <svg:rect x=\"0\"\n                  [attr.x]=\"data.x(point.x)\"\n                  [attr.width]=\"Math.abs(data.x(point.x1) - data.x(point.x))\"\n                  [attr.fill]=\"series().fillType === FillType.gradient\n                                ? 'url(#gradient-fill-' + id + ')'\n                                : point.iconId\n                                  ? 'url(#pattern' + point.iconId + ')'\n                                  : (point.color ?? series().style?.fill ?? series().color)\"\n                  [attr.fill-opacity]=\"series().style?.fillOpacity\"\n                  height=\"100%\"\n        ></svg:rect>\n        @if (point.text && data.x(point.x1) - data.x(point.x) > 8) {\n          <svg:text [attr.transform]=\"'rotate(270)'\"\n                    [ngStyle]=\"{ 'transform-origin': (data.x(point.x1) + data.x(point.x)) / 2 + 'px 50%' }\"\n                    y=\"50%\"\n                    [attr.x]=\"(data.x(point.x1) + data.x(point.x)) / 2\"\n                    text-anchor=\"middle\"\n                    alignment-baseline=\"middle\"\n                    text-anchor=\"middle\">\n            {{ point.text }}\n          </svg:text>\n        }\n        <svg:line y1=\"0\"\n                  y2=\"100%\"\n                  [attr.x1]=\"data.x(point.x)\"\n                  [attr.x2]=\"data.x(point.x)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"></svg:line>\n        <svg:line y1=\"0\"\n                  y2=\"100%\"\n                  [attr.x1]=\"data.x(point.x1)\"\n                  [attr.x2]=\"data.x(point.x1)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"></svg:line>\n      </svg:g>\n    }\n  }\n}\n" }]
+        }] });
 
 /*
  * Public API Surface of chart
@@ -3079,5 +3009,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AreaSeriesComponent, Axis, AxisOrientation, BarSeriesComponent, BlockAreaSeriesComponent, BlockHorizontalSeriesComponent, BlockSeriesComponent, BroadcastService, BrushMessage, BrushService, BrushType, ChartBounds, ChartComponent, ChartService, ClipPointsDirection, DragPointType, FillDirection, FillType, LegendComponent, LineSeriesComponent, LinearSeriesBase, PlotBand, PlotLine, ScaleService, ScaleType, ScatterSeriesComponent, SeriesBaseComponent, SeriesType, TooltipTracking, ZoomBehaviorType, ZoomMessage, ZoomService, ZoomType, generateTicks, getTextWidth, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
+export { AreaSeriesComponent, Axis, AxisOrientation, BarSeriesComponent, BlockAreaSeriesComponent, BlockHorizontalSeriesComponent, BlockSeriesComponent, BroadcastService, BrushMessage, BrushService, BrushType, ChartBounds, ChartComponent, ChartService, ClipPointsDirection, DragPointType, FillDirection, FillType, LegendComponent, LineSeriesComponent, LinearSeriesBaseComponent, PlotBand, PlotLine, ScaleService, ScaleType, ScatterSeriesComponent, SeriesBaseComponent, SeriesType, TooltipTracking, ZoomBehaviorType, ZoomMessage, ZoomService, ZoomType, generateTicks, getTextWidth };
 //# sourceMappingURL=tetacom-svg-charts.mjs.map