@tetacom/svg-charts 1.7.1 → 1.7.2

package/fesm2022/tetacom-svg-charts.mjs

@@ -1,9 +1,10 @@
 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';
@@ -314,7 +315,10 @@ class ChartService {
                 const currentSerieIndex = config.series.findIndex((_) => _.id === serie.id);
                 if (currentSerieIndex !== -1) {
                     const seriesLinkCount = config.series.filter((_) => _.yAxisIndex === config.series[currentSerieIndex].yAxisIndex && _.visible === true).length;
-                    config.yAxis[config.series[currentSerieIndex].yAxisIndex].visible = seriesLinkCount !== 0;
+                    const yAxis = config.yAxis[config.series[currentSerieIndex].yAxisIndex];
+                    if (yAxis) {
+                        yAxis.visible = seriesLinkCount !== 0;
+                    }
                 }
                 return serie;
             });
@@ -894,14 +898,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 +1687,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 +1755,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 +1763,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 +1850,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 +1859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     template: '',
                     standalone: true,
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 var DragPointType;
 (function (DragPointType) {
@@ -2016,22 +2015,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 +2042,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 +2058,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 +2081,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 +2108,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()
@@ -2993,24 +2983,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" }]
         }] });
 
 /*