@tetacom/svg-charts 1.7.38 → 1.7.39

package/fesm2022/tetacom-svg-charts.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Injectable, input, inject, ChangeDetectorRef, ElementRef, computed, Component, ViewChild, Input, ChangeDetectionStrategy, HostListener, HostBinding, Directive, signal, effect, EventEmitter, Output, ViewContainerRef } from '@angular/core';
-import { ReplaySubject, filter, BehaviorSubject, Subject, of, shareReplay, withLatestFrom, map, merge, lastValueFrom, take, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler, distinctUntilChanged } from 'rxjs';
+import { ReplaySubject, filter, BehaviorSubject, Subject, of, shareReplay, withLatestFrom, map, merge, lastValueFrom, take, combineLatest, takeWhile, tap, observeOn, animationFrameScheduler, distinctUntilChanged } 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 { DomSanitizer } from '@angular/platform-browser';
 import { NgTemplateOutlet, AsyncPipe, KeyValuePipe, NgStyle } from '@angular/common';
 import { DialogService, Align as Align$1, TetaSize, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective, ColorInputComponent, SelectComponent, SelectOptionDirective, SelectValueDirective, ScrollableComponent, InputComponent } from '@tetacom/ng-components';
 import * as i1 from '@angular/forms';
@@ -1196,29 +1196,24 @@ class PositionUtil {
 }
 
 class TooltipComponent {
-    constructor(svc, cdr, zoomService, sanitizer, _zone, _elementRef) {
-        this.svc = svc;
-        this.cdr = cdr;
-        this.zoomService = zoomService;
-        this.sanitizer = sanitizer;
-        this._zone = _zone;
-        this._elementRef = _elementRef;
+    constructor() {
+        this.svc = inject(ChartService);
+        this.sanitizer = inject(DomSanitizer);
+        this.pointerMove = toSignal(this.svc.pointerMove);
+        this.display = computed(() => (this.pointerMove()?.type === 'mousemove' ? 1 : 0), ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+        this.position = computed(() => {
+            const event = this.pointerMove();
+            if (!this.display() || !event) {
+                return null;
+            }
+            return this.getPosition(event);
+        }, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
         this.tooltips = this.svc.tooltips.pipe(map((_) => [..._.values()]));
     }
     getImplicit(t) {
         return { $implicit: t };
     }
     ngOnInit() {
-        this.display = this.svc.pointerMove.pipe(map((event) => {
-            return event.type === 'mousemove' ? 1 : 0;
-        }), tap(() => {
-            setTimeout(() => {
-                this.cdr.detectChanges();
-            });
-        }));
-        this.position = this.svc.pointerMove.pipe(filter((event) => !!event), map((_) => {
-            return this.getPosition(_);
-        }), tap(() => this.cdr.detectChanges()));
         const transformHtml = (html) => {
             return this.sanitizer.bypassSecurityTrustHtml(html);
         };
@@ -1243,8 +1238,7 @@ class TooltipComponent {
             if (tooltipList?.length < 1) {
                 return '';
             }
-            const formatted = formatter ? transformHtml(formatter(tooltipList)) : defaultFormatter(tooltipList);
-            return formatted;
+            return formatter ? transformHtml(formatter(tooltipList)) : defaultFormatter(tooltipList);
         }));
     }
     getPosition(event) {
@@ -1266,13 +1260,13 @@ class TooltipComponent {
         const format = d3.format(',.5~r');
         return format(input);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TooltipComponent, isStandalone: true, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if ({ p: position | async }; as data) {\n  @if (tooltips | async; as t) {\n    @if (t.length > 0) {\n      <div\n        class=\"chart-tooltip color-text-90 bg-global-bgcard shadow-2\"\n        #tooltip\n        [style.position]=\"'fixed'\"\n        [style.opacity]=\"display | async\"\n        [hidden]=\"!data.p\"\n        style=\"pointer-events: none; min-width: 200px\"\n        [style.left.px]=\"data.p?.left\"\n        [style.top.px]=\"data.p?.top\"\n        [style.bottom.px]=\"data.p?.bottom\"\n        [style.right.px]=\"data.p?.right\"\n      >\n        @if (config.tooltip?.template) {\n          <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: getImplicit(t)\"></ng-container>\n        }\n        @if (config.tooltip?.format) {\n          <div [innerHTML]=\"displayTooltips | async\"></div>\n        } @else {\n          @if (!config.tooltip?.template) {\n            <div class=\"padding-2 border-radius-1\">\n              @for (tooltip of t; track $index) {\n                <div class=\"display-flex align-center\">\n                  <span\n                    class=\"display-block margin-right-1\"\n                    [style.width.px]=\"10\"\n                    [style.height.px]=\"2\"\n                    [style.background-color]=\"tooltip.series?.color\"\n                  >\n                  </span>\n                  <span class=\"font-title-3\">\n                    {{ tooltip.series?.name }}\n                    <span class=\"font-body-3\">\n                      x: {{ format(tooltip.point?.x) }} y: {{ format(tooltip.point?.y) }}\n                    </span>\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n}\n", styles: [":host{position:absolute;z-index:2}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TooltipComponent, isStandalone: true, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if ({ p: position() }; as data) {\n  @if (tooltips | async; as t) {\n    @if (t.length > 0) {\n      <div\n        class=\"chart-tooltip color-text-90 bg-global-bgcard shadow-2\"\n        #tooltip\n        [style.position]=\"'fixed'\"\n        [style.opacity]=\"display()\"\n        [hidden]=\"!data.p\"\n        style=\"pointer-events: none; min-width: 200px\"\n        [style.left.px]=\"data.p?.left\"\n        [style.top.px]=\"data.p?.top\"\n        [style.bottom.px]=\"data.p?.bottom\"\n        [style.right.px]=\"data.p?.right\"\n      >\n        @if (config.tooltip?.template) {\n          <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: getImplicit(t)\"></ng-container>\n        }\n        @if (config.tooltip?.format) {\n          <div [innerHTML]=\"displayTooltips | async\"></div>\n        } @else {\n          @if (!config.tooltip?.template) {\n            <div class=\"padding-2 border-radius-1\">\n              @for (tooltip of t; track $index) {\n                <div class=\"display-flex align-center\">\n                  <span\n                    class=\"display-block margin-right-1\"\n                    [style.width.px]=\"10\"\n                    [style.height.px]=\"2\"\n                    [style.background-color]=\"tooltip.series?.color\"\n                  >\n                  </span>\n                  <span class=\"font-title-3\">\n                    {{ tooltip.series?.name }}\n                    <span class=\"font-body-3\">\n                      x: {{ format(tooltip.point?.x) }} y: {{ format(tooltip.point?.y) }}\n                    </span>\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n}\n", styles: [":host{position:absolute;z-index:2}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgTemplateOutlet], template: "@if ({ p: position | async }; as data) {\n  @if (tooltips | async; as t) {\n    @if (t.length > 0) {\n      <div\n        class=\"chart-tooltip color-text-90 bg-global-bgcard shadow-2\"\n        #tooltip\n        [style.position]=\"'fixed'\"\n        [style.opacity]=\"display | async\"\n        [hidden]=\"!data.p\"\n        style=\"pointer-events: none; min-width: 200px\"\n        [style.left.px]=\"data.p?.left\"\n        [style.top.px]=\"data.p?.top\"\n        [style.bottom.px]=\"data.p?.bottom\"\n        [style.right.px]=\"data.p?.right\"\n      >\n        @if (config.tooltip?.template) {\n          <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: getImplicit(t)\"></ng-container>\n        }\n        @if (config.tooltip?.format) {\n          <div [innerHTML]=\"displayTooltips | async\"></div>\n        } @else {\n          @if (!config.tooltip?.template) {\n            <div class=\"padding-2 border-radius-1\">\n              @for (tooltip of t; track $index) {\n                <div class=\"display-flex align-center\">\n                  <span\n                    class=\"display-block margin-right-1\"\n                    [style.width.px]=\"10\"\n                    [style.height.px]=\"2\"\n                    [style.background-color]=\"tooltip.series?.color\"\n                  >\n                  </span>\n                  <span class=\"font-title-3\">\n                    {{ tooltip.series?.name }}\n                    <span class=\"font-body-3\">\n                      x: {{ format(tooltip.point?.x) }} y: {{ format(tooltip.point?.y) }}\n                    </span>\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n}\n", styles: [":host{position:absolute;z-index:2}\n"] }]
-        }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { size: [{
+            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgTemplateOutlet], template: "@if ({ p: position() }; as data) {\n  @if (tooltips | async; as t) {\n    @if (t.length > 0) {\n      <div\n        class=\"chart-tooltip color-text-90 bg-global-bgcard shadow-2\"\n        #tooltip\n        [style.position]=\"'fixed'\"\n        [style.opacity]=\"display()\"\n        [hidden]=\"!data.p\"\n        style=\"pointer-events: none; min-width: 200px\"\n        [style.left.px]=\"data.p?.left\"\n        [style.top.px]=\"data.p?.top\"\n        [style.bottom.px]=\"data.p?.bottom\"\n        [style.right.px]=\"data.p?.right\"\n      >\n        @if (config.tooltip?.template) {\n          <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: getImplicit(t)\"></ng-container>\n        }\n        @if (config.tooltip?.format) {\n          <div [innerHTML]=\"displayTooltips | async\"></div>\n        } @else {\n          @if (!config.tooltip?.template) {\n            <div class=\"padding-2 border-radius-1\">\n              @for (tooltip of t; track $index) {\n                <div class=\"display-flex align-center\">\n                  <span\n                    class=\"display-block margin-right-1\"\n                    [style.width.px]=\"10\"\n                    [style.height.px]=\"2\"\n                    [style.background-color]=\"tooltip.series?.color\"\n                  >\n                  </span>\n                  <span class=\"font-title-3\">\n                    {{ tooltip.series?.name }}\n                    <span class=\"font-body-3\">\n                      x: {{ format(tooltip.point?.x) }} y: {{ format(tooltip.point?.y) }}\n                    </span>\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n}\n", styles: [":host{position:absolute;z-index:2}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{
                 type: Input
             }], config: [{
                 type: Input
@@ -1794,9 +1788,17 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
         this.markers = computed(() => {
             return this.series().data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined && _?.x !== null && _?.y !== null);
         }, ...(ngDevMode ? [{ debugName: "markers" }] : /* istanbul ignore next */ []));
+        this.sortedTooltipData = computed(() => {
+            this.update();
+            const data = [...this.series().data];
+            const tooltipTracking = this.config()?.tooltip?.tracking;
+            return data.sort(tooltipTracking === TooltipTracking.y ? (a, b) => a.y - b.y : (a, b) => a.x - b.x);
+        }, ...(ngDevMode ? [{ debugName: "sortedTooltipData" }] : /* istanbul ignore next */ []));
         this.path = computed(() => {
             this.update();
-            if (!this.x() || !this.y()) {
+            const x = this.x();
+            const y = this.y();
+            if (!x || !y) {
                 return '';
             }
             const filter = this.defaultClipPointsMapping.get(this.series().clipPointsDirection);
@@ -1808,18 +1810,18 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
                 point.y !== undefined &&
                 !isNaN(point.x) &&
                 !isNaN(point.y))
-                .x((point) => this.x()(point.x))
-                .y((point) => this.y()(point.y));
+                .x((point) => x(point.x))
+                .y((point) => y(point.y));
             let filteredData = this.series().data;
             const clipOffset = this.getClipOffset();
             if (this.series().clipPointsDirection === ClipPointsDirection.x) {
-                let [min, max] = this.x().domain();
+                let [min, max] = x.domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
                 filteredData = filteredData?.filter(filter(min - clipOffset.x, max - clipOffset.x));
             }
             if (this.series().clipPointsDirection === ClipPointsDirection.y) {
-                let [min, max] = this.y().domain();
+                let [min, max] = y.domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
                 filteredData = filteredData?.filter(filter(min - clipOffset.y, max - clipOffset.y));
@@ -1891,7 +1893,7 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
             return rV;
         };
         if (tooltipTracking === TooltipTracking.x) {
-            const sortedData = [...this.series().data].sort((a, b) => a.x - b.x);
+            const sortedData = this.sortedTooltipData();
             const bisect = d3.bisector((_) => _.x).right;
             const pointer = mouse[0];
             let x0 = scaleX.invert(pointer);
@@ -1899,7 +1901,7 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
                 x0 = x0.getTime();
             }
             x0 = subtractOffset(x0, clipOffset.x);
-            const rightId = bisect([...this.series().data].sort((a, b) => a.x - b.x), x0);
+            const rightId = bisect(sortedData, x0);
             const range = scaleY.range();
             const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX(addOffset(sortedData[rightId - 1]?.x, clipOffset.x)), scaleY(addOffset(sortedData[rightId - 1]?.y, clipOffset.y)), scaleX(addOffset(sortedData[rightId]?.x, clipOffset.x)), scaleY(addOffset(sortedData[rightId]?.y, clipOffset.y)));
             const x = scaleX.invert(intersect.x);
@@ -1925,7 +1927,7 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
             };
         }
         if (tooltipTracking === TooltipTracking.y) {
-            const sortedData = [...this.series().data].sort((a, b) => a.y - b.y);
+            const sortedData = this.sortedTooltipData();
             const bisect = d3.bisector((_) => _.y).right;
             let y0 = scaleY.invert(mouse[1]);
             if (y0 instanceof Date) {
@@ -2442,24 +2444,27 @@ class LineSeriesComponent extends LinearSeriesBaseComponent {
         return scale(nextValue) - scale(domainStart);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LineSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LineSeriesComponent, isStandalone: true, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "@if (series(); as series) {\n  <svg:g\n    [tetaDraggableSeries]=\"series.draggablePath\"\n    [dragDirection]=\"series.pathDragType\"\n    [attr.transform]=\"seriesPathTransform()\"\n    [class.draggable-path]=\"series.draggablePath\"\n    [class.selected-path]=\"seriesSelectedForPathDrag()\"\n    (click)=\"seriesPathClick($event)\"\n    (moveStart)=\"seriesMoveStart($event)\"\n    (moveProcess)=\"seriesMoveProcess($event)\"\n    (moveEnd)=\"seriesMoveEnd($event)\"\n  >\n    <svg:path\n      class=\"line\"\n      [class.line-selected]=\"seriesSelectedForPathDrag()\"\n      [attr.d]=\"path()\"\n      [attr.stroke]=\"series.color\"\n      [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n      [attr.stroke-width]=\"series.style?.strokeWidth\"\n      [style.--series-color]=\"series.color\"\n      fill=\"none\"\n    ></svg:path>\n    @if (series.draggablePath) {\n      <svg:path\n        class=\"line-hitbox\"\n        [attr.d]=\"path()\"\n        fill=\"none\"\n        stroke=\"transparent\"\n        stroke-width=\"14\"\n        pointer-events=\"stroke\"\n      ></svg:path>\n    }\n  </svg:g>\n  @if (transform(); as t) {\n    @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle\n        r=\"3\"\n        [attr.fill]=\"series.color\"\n        [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"\n      ></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}.draggable-path,.selected-path,.selected-path:active{cursor:ew-resize}.line-selected{filter:drop-shadow(0 0 3px var(--series-color))}.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"] }, { kind: "directive", type: DraggableSeriesDirective, selector: "[tetaDraggableSeries]", inputs: ["tetaDraggableSeries", "dragDirection"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggableSeries"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LineSeriesComponent, isStandalone: true, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "@if (series(); as series) {\n  <svg:g\n    [tetaDraggableSeries]=\"series.draggablePath\"\n    [dragDirection]=\"series.pathDragType\"\n    [attr.transform]=\"seriesPathTransform()\"\n    [class.draggable-path]=\"series.draggablePath\"\n    [class.selected-path]=\"seriesSelectedForPathDrag()\"\n    (click)=\"seriesPathClick($event)\"\n    (moveStart)=\"seriesMoveStart($event)\"\n    (moveProcess)=\"seriesMoveProcess($event)\"\n    (moveEnd)=\"seriesMoveEnd($event)\"\n  >\n    <svg:path\n      class=\"line\"\n      [class.line-selected]=\"seriesSelectedForPathDrag()\"\n      [attr.d]=\"path()\"\n      [attr.stroke]=\"series.color\"\n      [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n      [attr.stroke-width]=\"series.style?.strokeWidth\"\n      [style.--series-color]=\"series.color\"\n      fill=\"none\"\n    ></svg:path>\n    @if (series.draggablePath) {\n      <svg:path\n        class=\"line-hitbox\"\n        [attr.d]=\"path()\"\n        fill=\"none\"\n        stroke=\"transparent\"\n        stroke-width=\"14\"\n        pointer-events=\"stroke\"\n      ></svg:path>\n    }\n  </svg:g>\n  @if (transform(); as t) {\n    @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle\n        r=\"3\"\n        [attr.fill]=\"series.color\"\n        [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"\n      ></svg:circle>\n    }\n  }\n  @if (markers(); as draggablePoints) {\n    @if ({ x: x(), y: y() }; as scales) {\n      @if (scales.x && scales.y) {\n        @for (point of draggablePoints; track point) {\n          <svg:g [attr.transform]=\"'translate(' + scales.x(point.x) + ',' + scales.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}\n", styles: [".draggable-marker{cursor:move}.draggable-path,.selected-path,.selected-path:active{cursor:ew-resize}.line-selected{filter:drop-shadow(0 0 3px var(--series-color))}.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"] }, { kind: "directive", type: DraggableSeriesDirective, selector: "[tetaDraggableSeries]", inputs: ["tetaDraggableSeries", "dragDirection"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggableSeries"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LineSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, DraggablePointDirective, DraggableSeriesDirective], template: "@if (series(); as series) {\n  <svg:g\n    [tetaDraggableSeries]=\"series.draggablePath\"\n    [dragDirection]=\"series.pathDragType\"\n    [attr.transform]=\"seriesPathTransform()\"\n    [class.draggable-path]=\"series.draggablePath\"\n    [class.selected-path]=\"seriesSelectedForPathDrag()\"\n    (click)=\"seriesPathClick($event)\"\n    (moveStart)=\"seriesMoveStart($event)\"\n    (moveProcess)=\"seriesMoveProcess($event)\"\n    (moveEnd)=\"seriesMoveEnd($event)\"\n  >\n    <svg:path\n      class=\"line\"\n      [class.line-selected]=\"seriesSelectedForPathDrag()\"\n      [attr.d]=\"path()\"\n      [attr.stroke]=\"series.color\"\n      [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n      [attr.stroke-width]=\"series.style?.strokeWidth\"\n      [style.--series-color]=\"series.color\"\n      fill=\"none\"\n    ></svg:path>\n    @if (series.draggablePath) {\n      <svg:path\n        class=\"line-hitbox\"\n        [attr.d]=\"path()\"\n        fill=\"none\"\n        stroke=\"transparent\"\n        stroke-width=\"14\"\n        pointer-events=\"stroke\"\n      ></svg:path>\n    }\n  </svg:g>\n  @if (transform(); as t) {\n    @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle\n        r=\"3\"\n        [attr.fill]=\"series.color\"\n        [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"\n      ></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}.draggable-path,.selected-path,.selected-path:active{cursor:ew-resize}.line-selected{filter:drop-shadow(0 0 3px var(--series-color))}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
+            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, DraggablePointDirective, DraggableSeriesDirective], template: "@if (series(); as series) {\n  <svg:g\n    [tetaDraggableSeries]=\"series.draggablePath\"\n    [dragDirection]=\"series.pathDragType\"\n    [attr.transform]=\"seriesPathTransform()\"\n    [class.draggable-path]=\"series.draggablePath\"\n    [class.selected-path]=\"seriesSelectedForPathDrag()\"\n    (click)=\"seriesPathClick($event)\"\n    (moveStart)=\"seriesMoveStart($event)\"\n    (moveProcess)=\"seriesMoveProcess($event)\"\n    (moveEnd)=\"seriesMoveEnd($event)\"\n  >\n    <svg:path\n      class=\"line\"\n      [class.line-selected]=\"seriesSelectedForPathDrag()\"\n      [attr.d]=\"path()\"\n      [attr.stroke]=\"series.color\"\n      [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n      [attr.stroke-width]=\"series.style?.strokeWidth\"\n      [style.--series-color]=\"series.color\"\n      fill=\"none\"\n    ></svg:path>\n    @if (series.draggablePath) {\n      <svg:path\n        class=\"line-hitbox\"\n        [attr.d]=\"path()\"\n        fill=\"none\"\n        stroke=\"transparent\"\n        stroke-width=\"14\"\n        pointer-events=\"stroke\"\n      ></svg:path>\n    }\n  </svg:g>\n  @if (transform(); as t) {\n    @if (t?.x !== null && t?.x !== undefined && t?.y !== null && t?.y !== undefined) {\n      <svg:circle\n        r=\"3\"\n        [attr.fill]=\"series.color\"\n        [attr.transform]=\"'translate(' + t.x + ', ' + t.y + ')'\"\n      ></svg:circle>\n    }\n  }\n  @if (markers(); as draggablePoints) {\n    @if ({ x: x(), y: y() }; as scales) {\n      @if (scales.x && scales.y) {\n        @for (point of draggablePoints; track point) {\n          <svg:g [attr.transform]=\"'translate(' + scales.x(point.x) + ',' + scales.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}\n", styles: [".draggable-marker{cursor:move}.draggable-path,.selected-path,.selected-path:active{cursor:ew-resize}.line-selected{filter:drop-shadow(0 0 3px var(--series-color))}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
         }] });
 
 class BarSeriesComponent extends SeriesBaseComponent {
     constructor() {
         super(...arguments);
         this.x1 = computed(() => {
-            const x = this.xScales().get(this.series().xAxisIndex)?.scale;
+            const series = this.series();
+            const x = this.xScales().get(series.xAxisIndex)?.scale;
             const range = x.range();
-            const domain = this.series().data.map((_) => _.x);
+            const domain = series.data.map((_) => _.x);
             return d3.scaleBand().range([0, range[1]]).domain(domain).padding(0.1);
         }, ...(ngDevMode ? [{ debugName: "x1" }] : /* istanbul ignore next */ []));
         this.barSeriesCount = computed(() => {
-            const count = this.config().series.filter((_) => _.type === SeriesType.bar && _.xAxisIndex === this.series().xAxisIndex);
+            const config = this.config();
+            const series = this.series();
+            const count = config.series.filter((_) => _.type === SeriesType.bar && _.xAxisIndex === series.xAxisIndex);
             return count.length;
         }, ...(ngDevMode ? [{ debugName: "barSeriesCount" }] : /* istanbul ignore next */ []));
         this.Math = Math;
@@ -2489,12 +2494,14 @@ class BlockSeriesComponent extends SeriesBaseComponent {
     constructor() {
         super(...arguments);
         this.displayPoints = computed(() => {
-            const domain = this.config().inverted ? this.y().domain() : this.x().domain();
+            const config = this.config();
+            const series = this.series();
+            const domain = config.inverted ? this.y().domain() : this.x().domain();
             const [min, max] = domain;
-            return this.series().data.filter((point, index, arr) => {
+            return series.data.filter((point, index, arr) => {
                 const next = arr[index + 1];
                 const secondNext = arr[index + 2];
-                if (this.config().inverted) {
+                if (config.inverted) {
                     if (point.y1 === null || point.y1 === undefined) {
                         point.y1 = next?.y ?? point.y;
                     }
@@ -2531,12 +2538,14 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
     constructor() {
         super(...arguments);
         this.displayPoints = computed(() => {
-            const domain = this.config().inverted ? this.y().domain() : this.x().domain();
+            const config = this.config();
+            const series = this.series();
+            const domain = config.inverted ? this.y().domain() : this.x().domain();
             const [min, max] = domain;
-            return this.series().data.filter((point, index, arr) => {
+            return series.data.filter((point, index, arr) => {
                 const next = arr[index + 1];
                 const secondNext = arr[index + 2];
-                if (this.config().inverted) {
+                if (config.inverted) {
                     if (point.y1 === null || point.y1 === undefined) {
                         point.y1 = next?.y ?? point.y;
                     }
@@ -2573,34 +2582,38 @@ class AreaSeriesComponent extends LinearSeriesBaseComponent {
     constructor() {
         super(...arguments);
         this.areaPath = computed(() => {
-            if (!this.x() || !this.y()) {
+            const x = this.x();
+            const y = this.y();
+            const config = this.config();
+            const series = this.series();
+            if (!x || !y) {
                 return '';
             }
             const area = d3
                 .area()
                 .defined((point) => point.x !== null && point.y !== null && !isNaN(point.x) && !isNaN(point.y));
-            if (this.config().inverted) {
+            if (config.inverted) {
                 area
-                    .x1((_) => (_.x1 !== null && _.x1 !== undefined ? this.x()(_.x1) : this.x()(0)))
-                    .x0((_) => this.x()(_.x))
-                    .y((_) => this.y()(_.y));
+                    .x1((_) => (_.x1 !== null && _.x1 !== undefined ? x(_.x1) : x(0)))
+                    .x0((_) => x(_.x))
+                    .y((_) => 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();
+                    .y1((_) => (_.y1 !== null && _.y1 !== undefined ? y(_.y1) : y(0)))
+                    .y0((_) => y(_.y))
+                    .x((_) => x(_.x));
+            }
+            const filter = this.defaultClipPointsMapping.get(series.clipPointsDirection);
+            let filteredData = series.data;
+            if (series.clipPointsDirection === ClipPointsDirection.x) {
+                let [min, max] = x.domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
                 filteredData = filteredData?.filter(filter(min, max));
             }
-            if (this.series().clipPointsDirection === ClipPointsDirection.y) {
-                let [min, max] = this.y().domain();
+            if (series.clipPointsDirection === ClipPointsDirection.y) {
+                let [min, max] = y.domain();
                 min = min instanceof Date ? min.getTime() : min;
                 max = max instanceof Date ? max.getTime() : max;
                 filteredData = filteredData?.filter(filter(min, max));
@@ -2611,11 +2624,11 @@ class AreaSeriesComponent extends LinearSeriesBaseComponent {
         this.FillDirection = FillDirection;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AreaSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 ({ points: markers(), x: x(), y: y() }; as data) {\n  @if (data.x && data.y) {\n    @for (point of data.points; 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]=\"data.x(point.x)\"\n                  [attr.cy]=\"data.y(point.y)\"\n      ></svg:circle>\n    }\n  }\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AreaSeriesComponent, decorators: [{
             type: Component,
-            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" }]
+            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 ({ points: markers(), x: x(), y: y() }; as data) {\n  @if (data.x && data.y) {\n    @for (point of data.points; 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]=\"data.x(point.x)\"\n                  [attr.cy]=\"data.y(point.y)\"\n      ></svg:circle>\n    }\n  }\n}\n" }]
         }] });
 
 const defaultSeriesTypeMapping = new Map()
@@ -3487,8 +3500,9 @@ class BlockHorizontalSeriesComponent extends SeriesBaseComponent {
     constructor() {
         super(...arguments);
         this.displayPoints = computed(() => {
+            const x = this.x();
+            const [min, max] = x.domain();
             return this.series().data.filter((point, index, arr) => {
-                const [min, max] = this.x().domain();
                 return ((point.x >= min || point.x1 >= min || arr[index + 1]?.x >= min || arr[index + 1]?.x1 >= min) &&
                     (point.x <= max || point.x1 <= max || arr[index - 1]?.x <= max || arr[index - 1]?.x1 <= max));
             });