@tetacom/svg-charts 1.7.1 → 1.7.3

package/fesm2022/tetacom-svg-charts.mjs

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, ChangeDetectorRef, ElementRef, input, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostBinding, HostListener, computed, EventEmitter, Output, ViewContainerRef, effect } from '@angular/core';
+import { Injectable, input, inject, ChangeDetectorRef, ElementRef, computed, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostBinding, HostListener, signal, EventEmitter, Output, ViewContainerRef, effect } from '@angular/core';
 import { ReplaySubject, filter, BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, merge, lastValueFrom, take, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler } from 'rxjs';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
 import { maxIndex } from 'd3-array';
+import { toSignal } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/platform-browser';
 import { AsyncPipe, NgTemplateOutlet, KeyValuePipe, NgStyle } from '@angular/common';
-import { Align as Align$1, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective, CheckboxComponent, ColorInputComponent, SelectComponent, SelectOptionDirective, SelectValueDirective } from '@tetacom/ng-components';
+import { Align as Align$1, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective, CheckboxComponent, ColorInputComponent, SelectComponent, SelectOptionDirective, SelectValueDirective, ScrollableComponent } from '@tetacom/ng-components';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
@@ -248,8 +249,10 @@ class ChartService {
             return;
         }
         currentConfig.series = [...currentConfig.series];
-        const seriesLinkCount = currentConfig.series.filter((_) => _.yAxisIndex === currentConfig.series[currentSeriesIndex].yAxisIndex && _.visible === true).length;
-        currentConfig.yAxis[currentConfig.series[currentSeriesIndex].yAxisIndex].visible = seriesLinkCount !== 0;
+        // 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);
         }
@@ -311,11 +314,16 @@ class ChartService {
                     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 currentSerieIndex = config.series.findIndex((_) => _.id === serie.id);
+                // if (currentSerieIndex !== -1) {
+                //   const seriesLinkCount = config.series.filter(
+                //     (_) => _.yAxisIndex === config.series[currentSerieIndex].yAxisIndex && _.visible === true,
+                //   ).length;
+                //   const yAxis = config.yAxis[config.series[currentSerieIndex].yAxisIndex];
+                //   if (yAxis) {
+                //     yAxis.visible = seriesLinkCount !== 0;
+                //   }
+                // }
                 return serie;
             });
             return config;
@@ -894,14 +902,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class SeriesBaseComponent {
     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.config = input();
-        this.series = input();
+        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;
+        });
     }
     mouseenter(point) {
         this.svc.setTooltip({
@@ -1675,24 +1691,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class LinearSeriesBaseComponent extends SeriesBaseComponent {
     constructor() {
-        super(...arguments);
+        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.markers = computed(() => {
             return this.series().data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined && _?.x !== null && _?.y !== null);
         });
-        this._update = new BehaviorSubject(null);
-    }
-    // @Input()
-    // override set series(series: Series<T>) {
-    //   this.__series = series;
-    //
-    //   this.markers =
-    // }
-    //
-    // override get series() {
-    //   return this.__series;
-    // }
-    ngOnInit() {
+        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;
@@ -1719,43 +1759,6 @@ class LinearSeriesBaseComponent 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({
@@ -1764,23 +1767,23 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
         });
     }
     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 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;
             }
@@ -1851,7 +1854,7 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LinearSeriesBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    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: LinearSeriesBaseComponent, decorators: [{
@@ -1860,7 +1863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     template: '',
                     standalone: true,
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 var DragPointType;
 (function (DragPointType) {
@@ -2016,22 +2019,22 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
         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;
                     }
                 }
@@ -2043,9 +2046,9 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
         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,
@@ -2059,9 +2062,9 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
         });
     }
     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,
@@ -2082,28 +2085,26 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
         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: 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 | 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?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle r=\"3\" [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\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}\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.ɵ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: "@if (series(); as series) {\n  <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?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle r=\"3\" [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\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}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
+            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() {
         super(...arguments);
-        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.x1 = this.scaleService.scales.pipe(map((_) => {
-            const x = _.x.get(this.series().xAxisIndex)?.scale;
+        this.x1 = computed(() => {
+            const x = this.xScales().get(this.series().xAxisIndex)?.scale;
             const range = x.range();
             const domain = this.series().data.map((_) => _.x);
             return d3.scaleBand().range([0, range[1]]).domain(domain).padding(0.1);
-        }));
-        this.barSeriesCount = this.svc.config.pipe(map((_) => {
-            const count = _.series.filter((_) => _.type === SeriesType.bar && _.xAxisIndex === this.series().xAxisIndex);
+        });
+        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;
     }
@@ -2111,118 +2112,111 @@ class BarSeriesComponent extends SeriesBaseComponent {
         return typeof value === 'number';
     }
     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 | 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) ? 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: [""], 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: 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) ? 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" }]
+            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() {
-        super(...arguments);
-        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));
-    }
     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 | 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.ɵ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"] }]
+            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() {
         super(...arguments);
-        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) => {
+        this.displayPoints = computed(() => {
             return this.series().data.filter((point, index, arr) => {
-                const [min, max] = y.domain();
+                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));
             });
-        }));
-        this.fillType = FillType;
+        });
         this.Math = Math;
+        this.FillType = FillType;
     }
     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 | 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.ɵ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" }]
+            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() {
         super(...arguments);
-        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) => {
+        this.displayPoints = computed(() => {
             return this.series().data.filter((point, index, arr) => {
-                const [min, max] = y.domain();
+                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));
             });
-        }));
+        });
         this.fillType = FillType;
         this.Math = Math;
     }
     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 | async, x: x | async, points: displayPoints | async }; 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: [""], 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: 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 [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" }]
+            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 LinearSeriesBaseComponent {
     constructor() {
         super(...arguments);
-        this.fillDirection = FillDirection;
-        this.fillType = FillType;
-    }
-    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) {
+        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));
+            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();
+                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();
+                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: 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\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.ɵ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" }]
+            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()
@@ -2635,7 +2629,7 @@ class SeriesControlsComponent {
         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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SeriesControlsComponent, isStandalone: true, selector: "teta-series-controls", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-dropdown [align]=\"Align.right\"\n               #dropdown=\"dropdown\"\n               [appendToBody]=\"true\">\n  <button teta-button\n          tetaDropdownHead\n          [class.active]=\"dropdown.open\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    <teta-icon [name]=\"'gear'\"></teta-icon>\n  </button>\n  <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n    <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n      <teta-accordion>\n        @for (seriesItem of series(); track $index) {\n          <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n            <teta-accordion-head>\n              <div class=\"row align-center gap-12\">\n                <div class=\"row align-center\" (click)=\"$event.stopPropagation()\">\n                  <teta-checkbox [ngModel]=\"seriesItem.enabled\"\n                                 (ngModelChange)=\"setSeriesEnabled(seriesItem, $event)\"\n                                 [binary]=\"true\"></teta-checkbox>\n                  <teta-color-input [ngModel]=\"seriesItem.color\"\n                                    (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n                </div>\n                {{ seriesItem.name }}\n              </div>\n            </teta-accordion-head>\n            <ng-template tetaAccordionContent>\n              <div class=\"column gap-8\">\n                <teta-select [options]=\"strokeWidth\"\n                             [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n                             [valueRef]=\"'id'\"\n                             (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n                             [allowNull]=\"false\">\n                  <ng-template tetaSelectOption let-option>\n                    <div style=\"width: 50px;\"\n                         [style.height.px]=\"option.id\"\n                         [style.background-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                  <ng-template tetaSelectValue let-value>\n                    <div style=\"width: 50px;\"\n                         [style.height.px]=\"value?.id\"\n                         [style.background-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                </teta-select>\n                <teta-select [options]=\"strokeArray\"\n                             [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n                             [valueRef]=\"'id'\"\n                             (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n                             [allowNull]=\"false\">\n                  <ng-template tetaSelectOption let-option>\n                    <div style=\"width: 50px;border:0;border-top: 2px;\"\n                         [style.border-style]=\"option.value\"\n                         [style.border-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                  <ng-template tetaSelectValue let-value>\n                    <div style=\"width: 50px;border:0;border-top: 2px;\"\n                         [style.border-style]=\"value?.value\"\n                         [style.border-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                </teta-select>\n              </div>\n            </ng-template>\n          </teta-accordion-item>\n        }\n      </teta-accordion>\n    </teta-scrollable>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: AccordionComponent, selector: "teta-accordion" }, { kind: "component", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: ["showToggle"] }, { kind: "component", type: AccordionItemComponent, selector: "teta-accordion-item", inputs: ["open", "disabled", "divider", "viewType"] }, { kind: "directive", type: AccordionContentDirective, selector: "[tetaAccordionContent]" }, { kind: "component", type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "labelPosition", "allowNull"] }, { kind: "component", type: ColorInputComponent, selector: "teta-color-input", inputs: ["disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "directive", type: SelectOptionDirective, selector: "[tetaSelectOption]" }, { kind: "directive", type: SelectValueDirective, selector: "[tetaSelectValue]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, decorators: [{
             type: Component,
@@ -2655,7 +2649,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         SelectComponent,
                         SelectOptionDirective,
                         SelectValueDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n               #dropdown=\"dropdown\"\n               [appendToBody]=\"true\">\n  <button teta-button\n          tetaDropdownHead\n          [class.active]=\"dropdown.open\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    <teta-icon [name]=\"'gear'\"></teta-icon>\n  </button>\n  <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n    <teta-accordion>\n      @for (seriesItem of series(); track $index) {\n        <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n          <teta-accordion-head>\n            <div class=\"row align-center gap-12\">\n              <div class=\"row align-center\" (click)=\"$event.stopPropagation()\">\n                <teta-checkbox [ngModel]=\"seriesItem.enabled\"\n                               (ngModelChange)=\"setSeriesEnabled(seriesItem, $event)\"\n                               [binary]=\"true\"></teta-checkbox>\n                <teta-color-input [ngModel]=\"seriesItem.color\"\n                                  (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n              </div>\n              {{ seriesItem.name }}\n            </div>\n          </teta-accordion-head>\n          <ng-template tetaAccordionContent>\n            <div class=\"column gap-8\">\n              <teta-select [options]=\"strokeWidth\"\n                           [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n                           [valueRef]=\"'id'\"\n                           (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n                           [allowNull]=\"false\">\n                <ng-template tetaSelectOption let-option>\n                  <div style=\"width: 50px;\"\n                       [style.height.px]=\"option.id\"\n                       [style.background-color]=\"seriesItem.color\"></div>\n                </ng-template>\n                <ng-template tetaSelectValue let-value>\n                  <div style=\"width: 50px;\"\n                       [style.height.px]=\"value?.id\"\n                       [style.background-color]=\"seriesItem.color\"></div>\n                </ng-template>\n              </teta-select>\n              <teta-select [options]=\"strokeArray\"\n                           [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n                           [valueRef]=\"'id'\"\n                           (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n                           [allowNull]=\"false\">\n                <ng-template tetaSelectOption let-option>\n                  <div style=\"width: 50px;border:0;border-top: 2px;\"\n                       [style.border-style]=\"option.value\"\n                       [style.border-color]=\"seriesItem.color\"></div>\n                </ng-template>\n                <ng-template tetaSelectValue let-value>\n                  <div style=\"width: 50px;border:0;border-top: 2px;\"\n                       [style.border-style]=\"value?.value\"\n                       [style.border-color]=\"seriesItem.color\"></div>\n                </ng-template>\n              </teta-select>\n            </div>\n          </ng-template>\n        </teta-accordion-item>\n      }\n    </teta-accordion>\n  </div>\n</teta-dropdown>\n" }]
+                        ScrollableComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n               #dropdown=\"dropdown\"\n               [appendToBody]=\"true\">\n  <button teta-button\n          tetaDropdownHead\n          [class.active]=\"dropdown.open\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    <teta-icon [name]=\"'gear'\"></teta-icon>\n  </button>\n  <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n    <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n      <teta-accordion>\n        @for (seriesItem of series(); track $index) {\n          <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n            <teta-accordion-head>\n              <div class=\"row align-center gap-12\">\n                <div class=\"row align-center\" (click)=\"$event.stopPropagation()\">\n                  <teta-checkbox [ngModel]=\"seriesItem.enabled\"\n                                 (ngModelChange)=\"setSeriesEnabled(seriesItem, $event)\"\n                                 [binary]=\"true\"></teta-checkbox>\n                  <teta-color-input [ngModel]=\"seriesItem.color\"\n                                    (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n                </div>\n                {{ seriesItem.name }}\n              </div>\n            </teta-accordion-head>\n            <ng-template tetaAccordionContent>\n              <div class=\"column gap-8\">\n                <teta-select [options]=\"strokeWidth\"\n                             [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n                             [valueRef]=\"'id'\"\n                             (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n                             [allowNull]=\"false\">\n                  <ng-template tetaSelectOption let-option>\n                    <div style=\"width: 50px;\"\n                         [style.height.px]=\"option.id\"\n                         [style.background-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                  <ng-template tetaSelectValue let-value>\n                    <div style=\"width: 50px;\"\n                         [style.height.px]=\"value?.id\"\n                         [style.background-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                </teta-select>\n                <teta-select [options]=\"strokeArray\"\n                             [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n                             [valueRef]=\"'id'\"\n                             (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n                             [allowNull]=\"false\">\n                  <ng-template tetaSelectOption let-option>\n                    <div style=\"width: 50px;border:0;border-top: 2px;\"\n                         [style.border-style]=\"option.value\"\n                         [style.border-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                  <ng-template tetaSelectValue let-value>\n                    <div style=\"width: 50px;border:0;border-top: 2px;\"\n                         [style.border-style]=\"value?.value\"\n                         [style.border-color]=\"seriesItem.color\"></div>\n                  </ng-template>\n                </teta-select>\n              </div>\n            </ng-template>\n          </teta-accordion-item>\n        }\n      </teta-accordion>\n    </teta-scrollable>\n  </div>\n</teta-dropdown>\n" }]
         }] });
 
 class ChartContainerComponent {
@@ -2993,24 +2988,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class BlockHorizontalSeriesComponent extends SeriesBaseComponent {
     constructor() {
         super(...arguments);
-        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) => {
+        this.displayPoints = computed(() => {
             return this.series().data.filter((point, index, arr) => {
-                const [min, max] = y.domain();
+                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));
             });
-        }));
-        this.fillType = FillType;
+        });
         this.Math = Math;
+        this.FillType = FillType;
     }
     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 | 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.ɵ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" }]
+            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" }]
         }] });
 
 /*