@tetacom/svg-charts 1.6.2 → 1.6.4

package/fesm2022/tetacom-svg-charts.mjs

@@ -103,13 +103,13 @@ const defaultChartConfig = () => ({
         enable: true,
         type: ZoomType.x,
         syncType: ZoomType.xy,
-        zoomBehavior: ZoomBehaviorType.move
+        zoomBehavior: ZoomBehaviorType.move,
     },
     bounds: new ChartBounds({
         bottom: 12,
         left: 12,
         top: 12,
-        right: 12
+        right: 12,
     }),
     legend: {
         enable: true,
@@ -121,15 +121,15 @@ const defaultChartConfig = () => ({
         showCrosshair: false,
         padding: {
             x: 16,
-            y: 16
-        }
+            y: 16,
+        },
     },
     xAxis: [],
     yAxis: [],
     series: [],
     gridLines: {
-        enable: true
-    }
+        enable: true,
+    },
 });
 
 var SeriesType;
@@ -168,7 +168,7 @@ const defaultSeriesConfig = () => ({
     fillType: FillType.default,
     color: 'coral',
     visible: true,
-    clipPointsDirection: ClipPointsDirection.x
+    clipPointsDirection: ClipPointsDirection.x,
 });
 
 class ChartService {
@@ -190,7 +190,7 @@ class ChartService {
             bufferSize: 1,
             refCount: true,
         }));
-        this.size = this.size$.asObservable().pipe(filter(size => size != null));
+        this.size = this.size$.asObservable().pipe(filter((size) => size != null));
         this.pointerMove = this.pointerMove$.asObservable();
         this.tooltips = this.tooltips$.asObservable();
         this.plotBandEvent = this.plotBandEvent$.asObservable();
@@ -198,19 +198,13 @@ class ChartService {
         this.pointMove = this.pointMove$.asObservable();
         this.chartClick = this.chartClick$.asObservable();
         this.chartContextMenu = this.chartContextMenu$.asObservable();
-        this.annotationClick = this.annotationEvent$
-            .asObservable()
-            .pipe(filter(_ => _?.event?.type === 'click'));
+        this.annotationClick = this.annotationEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'click'));
         this.annotationContextMenu = this.annotationEvent$
             .asObservable()
-            .pipe(filter(_ => _?.event?.type === 'contextmenu'));
+            .pipe(filter((_) => _?.event?.type === 'contextmenu'));
         this.annotationMove = this.annotationMove$.asObservable();
-        this.plotBandClick = this.plotBandEvent$
-            .asObservable()
-            .pipe(filter(_ => _?.event?.type === 'click'));
-        this.plotBandContextMenu = this.plotBandEvent$
-            .asObservable()
-            .pipe(filter(_ => _?.event?.type === 'contextmenu'));
+        this.plotBandClick = this.plotBandEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'click'));
+        this.plotBandContextMenu = this.plotBandEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'contextmenu'));
         // this.zoomInstance = this.zoomInstance$.asObservable();
         // this.brushInstance = this.brushInstance$.asObservable();
     }
@@ -242,17 +236,14 @@ class ChartService {
             return;
         }
         const currentConfig = await lastValueFrom(this.config.pipe(take(1)));
-        seriesIndex.forEach(serieIndex => {
-            const currentSerieIndex = currentConfig.series.findIndex(_ => _.id === serieIndex);
+        seriesIndex.forEach((serieIndex) => {
+            const currentSerieIndex = currentConfig.series.findIndex((_) => _.id === serieIndex);
             if (currentSerieIndex === -1) {
                 return;
             }
             currentConfig.series[currentSerieIndex].visible =
-                visible !== undefined
-                    ? visible
-                    : !currentConfig.series[currentSerieIndex].visible;
-            const seriesLinkCount = currentConfig.series.filter(_ => _.yAxisIndex === currentConfig.series[currentSerieIndex].yAxisIndex &&
-                _.visible === true).length;
+                visible !== undefined ? visible : !currentConfig.series[currentSerieIndex].visible;
+            const seriesLinkCount = currentConfig.series.filter((_) => _.yAxisIndex === currentConfig.series[currentSerieIndex].yAxisIndex && _.visible === true).length;
             currentConfig.yAxis[currentConfig.series[currentSerieIndex].yAxisIndex].visible = seriesLinkCount !== 0;
         });
         try {
@@ -293,7 +284,7 @@ class ChartService {
     saveCookie(config) {
         if (!config.name)
             return;
-        const hiddenSeries = config.series?.filter(_ => !_.visible).map(_ => _.id);
+        const hiddenSeries = config.series?.filter((_) => !_.visible).map((_) => _.id);
         localStorage.setItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`, JSON.stringify(hiddenSeries));
     }
     restoreLocalStorage(config) {
@@ -304,12 +295,10 @@ class ChartService {
             const json = JSON.parse(hiddenSeries);
             config.series = config.series.map((serie, index) => {
                 serie.visible = !json.includes(serie.id);
-                const currentSerieIndex = config.series.findIndex(_ => _.id === serie.id);
+                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 seriesLinkCount = config.series.filter((_) => _.yAxisIndex === config.series[currentSerieIndex].yAxisIndex && _.visible === true).length;
+                    config.yAxis[config.series[currentSerieIndex].yAxisIndex].visible = seriesLinkCount !== 0;
                 }
                 return serie;
             });
@@ -319,8 +308,8 @@ class ChartService {
     }
     setDefaults(data) {
         let [config, id] = data;
-        const defaultConfig = defaultConfig => {
-            return source => {
+        const defaultConfig = (defaultConfig) => {
+            return (source) => {
                 return Object.assign({}, defaultConfig, source);
             };
         };
@@ -336,10 +325,10 @@ class ChartService {
                 id: _.id ?? index,
             };
         });
-        const oppositeYCount = config.yAxis?.filter(_ => _.opposite);
-        const oppositeXCount = config.xAxis?.filter(_ => _.opposite);
-        const nonOppositeYCount = config.yAxis?.filter(_ => !_.opposite);
-        const nonOppositeXCount = config.xAxis?.filter(_ => !_.opposite);
+        const oppositeYCount = config.yAxis?.filter((_) => _.opposite);
+        const oppositeXCount = config.xAxis?.filter((_) => _.opposite);
+        const nonOppositeYCount = config.yAxis?.filter((_) => !_.opposite);
+        const nonOppositeXCount = config.xAxis?.filter((_) => !_.opposite);
         if (nonOppositeXCount?.length > 1) {
             config.bounds.bottom = 0;
         }
@@ -363,7 +352,7 @@ class ChartService {
             const yAxes = [...config.yAxis];
             config.xAxis = yAxes;
             config.yAxis = xAxes;
-            config.series = config.series?.map(serie => {
+            config.series = config.series?.map((serie) => {
                 const x = serie.xAxisIndex;
                 const y = serie.yAxisIndex;
                 serie.xAxisIndex = y;
@@ -371,7 +360,7 @@ class ChartService {
                 return {
                     ...serie,
                     clipPointsDirection: ClipPointsDirection.y,
-                    data: serie?.data?.map(point => {
+                    data: serie?.data?.map((point) => {
                         return {
                             ...point,
                             x: point?.y,
@@ -384,8 +373,8 @@ class ChartService {
             });
         }
         if (config?.brush?.enable) {
-            config.yAxis = config.yAxis.map(_ => ({ ..._, zoom: false }));
-            config.xAxis = config.xAxis.map(_ => ({ ..._, zoom: false }));
+            config.yAxis = config.yAxis.map((_) => ({ ..._, zoom: false }));
+            config.xAxis = config.xAxis.map((_) => ({ ..._, zoom: false }));
         }
         return config;
     }
@@ -414,9 +403,7 @@ const getTextWidth = (inputText, backupRatio = 0.5, fontSize = 10) => {
 function generateTicks(extremes, count = 10) {
     const [min, max] = extremes;
     const tickStep = (max - min) / count;
-    const ticks = d3
-        .range(min, max + tickStep, tickStep)
-        .filter((step) => step <= max);
+    const ticks = d3.range(min, max + tickStep, tickStep).filter((step) => step <= max);
     return ticks;
 }
 
@@ -452,8 +439,8 @@ class AxisSizeBuilder {
 class ExtremesBuilder {
     constructor() {
         this.extentAccessorMap = new Map()
-            .set(AxisOrientation.x, _ => _.x)
-            .set(AxisOrientation.y, _ => _.y);
+            .set(AxisOrientation.x, (_) => _.x)
+            .set(AxisOrientation.y, (_) => _.y);
         this.extremes = [0, 1];
     }
     build(settings) {
@@ -480,9 +467,7 @@ class ExtremesBuilder {
         if (hasMax) {
             extremes[1] = options?.max;
         }
-        if (typeof extremes[0] === 'number' &&
-            typeof extremes[1] === 'number' &&
-            extremes[0] === extremes[1]) {
+        if (typeof extremes[0] === 'number' && typeof extremes[1] === 'number' && extremes[0] === extremes[1]) {
             extremes[0] = extremes[0] - 1;
             extremes[1] = extremes[1] + 1;
         }
@@ -502,7 +487,7 @@ class Axis {
             .set(ScaleType.symlog, d3.format('~s'))
             .set(ScaleType.pow, d3.format('~s'))
             .set(ScaleType.sqrt, d3.format('~s'))
-            .set(ScaleType.band, _ => {
+            .set(ScaleType.band, (_) => {
             return _;
         });
         this.defaultScales = new Map()
@@ -580,9 +565,7 @@ class Axis {
         //this._ticksValues = generateTicks(this._extremes);
     }
     setOptions() {
-        const options = this.orientation === AxisOrientation.x
-            ? this.chartConfig.xAxis[this.index]
-            : this.chartConfig.yAxis[this.index];
+        const options = this.orientation === AxisOrientation.x ? this.chartConfig.xAxis[this.index] : this.chartConfig.yAxis[this.index];
         this._options = options;
     }
     get scale() {
@@ -642,7 +625,7 @@ class ZoomService {
         this.zoomed$ = new BehaviorSubject(null);
         this.zoomed = this.zoomed$.asObservable().pipe(shareReplay({
             bufferSize: 1,
-            refCount: true
+            refCount: true,
         }));
     }
     fireZoom(zoom) {
@@ -652,7 +635,7 @@ class ZoomService {
         if (this.broadcastChannel?.length) {
             this._broadcast.broadcastZoom({
                 channel: this.broadcastChannel,
-                message: zoom
+                message: zoom,
             });
         }
     }
@@ -664,9 +647,10 @@ class ZoomService {
         if (this.broadcastChannel?.length) {
             this.broadcastSub = combineLatest([this._broadcast.subscribeToZoom(this.broadcastChannel), this._chart.config])
                 .pipe(filter(([zoom, config]) => {
-                return zoom.message?.chartId !== config.id && (config.zoom.syncType === ZoomType.xy ||
-                    (zoom.message.axis.orientation === AxisOrientation.y && config.zoom.syncType === ZoomType.y) ||
-                    (zoom.message.axis.orientation === AxisOrientation.x && config.zoom.syncType === ZoomType.x));
+                return (zoom.message?.chartId !== config.id &&
+                    (config.zoom.syncType === ZoomType.xy ||
+                        (zoom.message.axis.orientation === AxisOrientation.y && config.zoom.syncType === ZoomType.y) ||
+                        (zoom.message.axis.orientation === AxisOrientation.x && config.zoom.syncType === ZoomType.x)));
             }))
                 .subscribe(([zoom, config]) => {
                 this.fireZoom(zoom.message);
@@ -674,7 +658,8 @@ class ZoomService {
         }
     }
     getD3Transform(targetDomain, originalDomain, scale, orientation, inverted) {
-        const zoomScale = Math.abs(scale(originalDomain[1]) - scale(originalDomain[0])) / Math.abs(scale(targetDomain[1]) - scale(targetDomain[0]));
+        const zoomScale = Math.abs(scale(originalDomain[1]) - scale(originalDomain[0])) /
+            Math.abs(scale(targetDomain[1]) - scale(targetDomain[0]));
         let transform = zoomIdentity.scale(zoomScale);
         if (orientation === AxisOrientation.x) {
             if (!!inverted) {
@@ -721,11 +706,7 @@ class ScaleService {
             .set(ScaleType.pow, d3.scalePow)
             .set(ScaleType.sqrt, d3.scaleSqrt)
             .set(ScaleType.band, d3.scaleBand);
-        this.scales = combineLatest([
-            this.chartService.size,
-            this.chartService.config,
-            this.zoomService.zoomed,
-        ]).pipe(map((data) => {
+        this.scales = combineLatest([this.chartService.size, this.chartService.config, this.zoomService.zoomed]).pipe(map((data) => {
             const [size, config, zoom] = data;
             const xAxisMap = new Map();
             const yAxisMap = new Map();
@@ -737,13 +718,13 @@ class ScaleService {
             });
             // Generate x scales
             const left = Array.from(yAxisMap.values())
-                .filter(_ => _.options?.visible && _.options?.opposite)
+                .filter((_) => _.options?.visible && _.options?.opposite)
                 .reduce((acc, cur) => acc + cur.selfSize, 0);
             const right = Array.from(yAxisMap.values())
-                .filter(_ => _.options?.visible && _.options?.opposite !== true)
+                .filter((_) => _.options?.visible && _.options?.opposite !== true)
                 .reduce((acc, cur) => acc + cur.selfSize, 0);
             const finalWidth = (size.width || 0) - left - right;
-            xAxisMap.forEach(axis => {
+            xAxisMap.forEach((axis) => {
                 let domain = axis.extremes;
                 if (axis?.options.inverted) {
                     domain = [...axis.extremes].reverse();
@@ -766,8 +747,7 @@ class ScaleService {
                 axis.setScale(scale);
                 axis.setOriginDomain(scale.domain());
                 const hasCache = this.transformCacheX.has(axis.index);
-                const shouldRestore = zoom?.axis?.orientation !== AxisOrientation.x ||
-                    zoom.axis?.index !== axis.index;
+                const shouldRestore = zoom?.axis?.orientation !== AxisOrientation.x || zoom.axis?.index !== axis.index;
                 if (hasCache && shouldRestore) {
                     const restoredTransform = this.transformCacheX.get(axis.index);
                     axis.setScale(restoredTransform.rescaleX(scale));
@@ -786,17 +766,13 @@ class ScaleService {
             }
             // Generate y axis
             const top = Array.from(xAxisMap.values())
-                .filter(_ => _.options?.visible && _.options?.opposite)
+                .filter((_) => _.options?.visible && _.options?.opposite)
                 .reduce((acc, cur) => acc + cur.selfSize, 0);
             const bottom = Array.from(xAxisMap.values())
-                .filter(_ => _.options?.visible && _.options?.opposite !== true)
+                .filter((_) => _.options?.visible && _.options?.opposite !== true)
                 .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const finalHeight = (size.height || 0) -
-                top -
-                bottom -
-                config?.bounds?.top -
-                config.bounds?.bottom;
-            yAxisMap.forEach(axis => {
+            const finalHeight = (size.height || 0) - top - bottom - config?.bounds?.top - config.bounds?.bottom;
+            yAxisMap.forEach((axis) => {
                 let domain = axis.extremes;
                 if (axis.orientation === AxisOrientation.y) {
                     domain = [...axis.extremes].reverse();
@@ -822,8 +798,7 @@ class ScaleService {
                 axis.setScale(scale);
                 axis.setOriginDomain(scale.domain());
                 const hasCache = this.transformCacheY.has(axis.index);
-                const shouldRestore = zoom?.axis?.orientation !== AxisOrientation.y ||
-                    zoom.axis?.index !== axis.index;
+                const shouldRestore = zoom?.axis?.orientation !== AxisOrientation.y || zoom.axis?.index !== axis.index;
                 if (hasCache && shouldRestore) {
                     const restoredTransform = this.transformCacheY.get(axis.index);
                     axis.setScale(restoredTransform.rescaleY(scale));
@@ -866,8 +841,7 @@ class ScaleService {
                         chartId: config.id,
                     });
                     this.zoomService.fireZoom(msg);
-                    if (config.zoom.syncChannel &&
-                        config.zoom.syncType === ZoomType.x) {
+                    if (config.zoom.syncChannel && config.zoom.syncType === ZoomType.x) {
                         this.zoomService.broadcastZoom(msg);
                     }
                 }
@@ -885,8 +859,7 @@ class ScaleService {
                         chartId: config.id,
                     });
                     this.zoomService.fireZoom(msg);
-                    if (config.zoom.syncChannel &&
-                        config.zoom.syncType === ZoomType.y) {
+                    if (config.zoom.syncChannel && config.zoom.syncType === ZoomType.y) {
                         this.zoomService.broadcastZoom(msg);
                     }
                 }
@@ -924,8 +897,7 @@ class SeriesBaseComponent {
         this.element = element;
         this.zone = zone;
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: SeriesBaseComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: SeriesBaseComponent, isStandalone: true, selector: "ng-component", inputs: { config: "config", series: "series" }, ngImport: i0, template: '', isInline: true }); }
 }
@@ -997,9 +969,7 @@ class PositionUtil {
             rect.left = containerPosition.right - elementWidth - margin;
         }
         if (align === Align.center) {
-            rect.left =
-                (containerPosition.left + containerPosition.right) / 2 -
-                    elementWidth / 2;
+            rect.left = (containerPosition.left + containerPosition.right) / 2 - elementWidth / 2;
         }
         if (align === Align.outerAuto) {
             align = Align.outerRight;
@@ -1052,9 +1022,7 @@ class PositionUtil {
             rect.top = containerPosition.top + verticalMargin;
         }
         if (verticalAlign === VerticalAlign.center) {
-            rect.top =
-                (containerPosition.top + containerPosition.bottom) / 2 -
-                    elementHeight / 2;
+            rect.top = (containerPosition.top + containerPosition.bottom) / 2 - elementHeight / 2;
         }
         if (rect.left + elementWidth > window.innerWidth) {
             rect.left = window.innerWidth - elementWidth;
@@ -1073,8 +1041,7 @@ class PositionUtil {
             verticalAlign === VerticalAlign.innerBottom) {
             rect.maxHeight = window.innerHeight - rect.top;
         }
-        if (verticalAlign === VerticalAlign.top ||
-            verticalAlign === VerticalAlign.innerTop) {
+        if (verticalAlign === VerticalAlign.top || verticalAlign === VerticalAlign.innerTop) {
             rect.maxHeight = containerPosition.top;
         }
         if (!isNaN(rect.left)) {
@@ -1087,9 +1054,7 @@ class PositionUtil {
             rect.top = rect.top - transformedParentRect.top;
         }
         if (!isNaN(rect.bottom)) {
-            rect.bottom = rect.bottom
-                ? rect.bottom - transformedParentRect.bottom
-                : rect.bottom;
+            rect.bottom = rect.bottom ? rect.bottom - transformedParentRect.bottom : rect.bottom;
         }
         return rect;
     }
@@ -1098,8 +1063,7 @@ class PositionUtil {
         element.style.right = rect.right != null ? `${rect.right}px` : '';
         element.style.top = rect.top != null ? `${rect.top}px` : '';
         element.style.bottom = rect.bottom != null ? `${rect.bottom}px` : '';
-        element.style.maxHeight =
-            rect.maxHeight != null ? `${rect.maxHeight}px` : '';
+        element.style.maxHeight = rect.maxHeight != null ? `${rect.maxHeight}px` : '';
         element.style.minWidth = rect.minWidth != null ? `${rect.minWidth}px` : '';
     }
     static getMaxHeight(position) {
@@ -1122,7 +1086,7 @@ class TooltipComponent {
         this.sanitizer = sanitizer;
         this._zone = _zone;
         this._elementRef = _elementRef;
-        this.tooltips = this.svc.tooltips.pipe(map(_ => [..._.values()]));
+        this.tooltips = this.svc.tooltips.pipe(map((_) => [..._.values()]));
     }
     getImplicit(t) {
         return { $implicit: t };
@@ -1135,7 +1099,7 @@ class TooltipComponent {
                 this.cdr.detectChanges();
             });
         }));
-        this.position = this.svc.pointerMove.pipe(filter(event => !!event), map(_ => {
+        this.position = this.svc.pointerMove.pipe(filter((event) => !!event), map((_) => {
             return this.getPosition(_);
         }), tap(() => this.cdr.detectChanges()));
         const transformHtml = (html) => {
@@ -1144,17 +1108,13 @@ class TooltipComponent {
         const defaultFormatter = (tooltips) => {
             let html = '';
             const format = d3.timeFormat('%d.%m.%Y');
-            tooltips.forEach(_ => {
+            tooltips.forEach((_) => {
                 const indicatorStyle = `display:block; width: 10px; height: 2px; background-color: ${_?.series?.color}`;
                 html += `<div class='display-flex align-center'><span class='margin-right-1' style='${indicatorStyle}'></span>
           <span class='font-title-3'>${_.series.name}
             <span class='font-body-3'>
-              x: ${_.point.x instanceof Date
-                    ? format(_.point.x)
-                    : _.point.x?.toFixed(2)}
-              y: ${_.point.y instanceof Date
-                    ? format(_.point.y)
-                    : _.point.y?.toFixed(2)}
+              x: ${_.point.x instanceof Date ? format(_.point.x) : _.point.x?.toFixed(2)}
+              y: ${_.point.y instanceof Date ? format(_.point.y) : _.point.y?.toFixed(2)}
             </span>
           </span></div>`;
             });
@@ -1166,9 +1126,7 @@ class TooltipComponent {
             if (tooltipList?.length < 1) {
                 return '';
             }
-            const formatted = formatter
-                ? transformHtml(formatter(tooltipList))
-                : defaultFormatter(tooltipList);
+            const formatted = formatter ? transformHtml(formatter(tooltipList)) : defaultFormatter(tooltipList);
             return formatted;
         }));
     }
@@ -1192,14 +1150,11 @@ class TooltipComponent {
         return format(input);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", 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: "18.2.1", 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 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        @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 tooltip) {\n                <div class=\"display-flex align-center\">\n              <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n                    [style.background-color]=\"tooltip.series?.color\">\n              </span>\n                  <span class=\"font-title-3\">\n                {{ tooltip.series?.name }}\n                    <span class=\"font-body-3\">\n                  x: {{ format(tooltip.point?.x) }}\n                      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: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", 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) { @if ((tooltips | async); as t) { @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  } @if (config.tooltip?.format) {\n  <div [innerHTML]=\"displayTooltips | async\"></div>\n  } @else { @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\"> x: {{ format(tooltip.point?.x) }} y: {{ format(tooltip.point?.y) }} </span>\n      </span>\n    </div>\n    }\n  </div>\n  } }\n</div>\n} } }\n", styles: [":host{position:absolute;z-index:2}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-tooltip', standalone: true, 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 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        @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 tooltip) {\n                <div class=\"display-flex align-center\">\n              <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n                    [style.background-color]=\"tooltip.series?.color\">\n              </span>\n                  <span class=\"font-title-3\">\n                {{ tooltip.series?.name }}\n                    <span class=\"font-body-3\">\n                  x: {{ format(tooltip.point?.x) }}\n                      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"] }]
+            args: [{ selector: 'teta-tooltip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgTemplateOutlet], template: "@if ({p: position | async}; as data) { @if ((tooltips | async); as t) { @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  } @if (config.tooltip?.format) {\n  <div [innerHTML]=\"displayTooltips | async\"></div>\n  } @else { @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\"> x: {{ format(tooltip.point?.x) }} y: {{ format(tooltip.point?.y) }} </span>\n      </span>\n    </div>\n    }\n  </div>\n  } }\n</div>\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: [{
                 type: Input
             }], config: [{
@@ -1220,15 +1175,16 @@ class XAxisComponent {
         }));
         this.ticks = combineLatest([this.x, this.update$]).pipe(withLatestFrom(this._svc.size), map((_) => {
             const [[x], size] = _;
-            const tickSize = x.ticks().map((_) => getTextWidth(this.axis.options.tickFormat ? this.axis.options.tickFormat(_) : this.axis.defaultFormatter()(_), 0.45, 11));
+            const tickSize = x
+                .ticks()
+                .map((_) => getTextWidth(this.axis.options.tickFormat ? this.axis.options.tickFormat(_) : this.axis.defaultFormatter()(_), 0.45, 11));
             return x.ticks(size.width / parseInt(d3.max(tickSize), 10) / 5);
         }));
     }
     getLabelTransform() {
         return `translate(${this.size.width / 2}, ${this.axis.options.opposite ? -32 : 32})`;
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     ngOnDestroy() {
         this._alive = false;
     }
@@ -1238,13 +1194,11 @@ class XAxisComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: XAxisComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: XAxisComponent, isStandalone: true, selector: "[teta-x-axis]", inputs: { axis: "axis", size: "size" }, usesOnChanges: true, ngImport: i0, template: "@if ({x: x | async, ticks: ticks | async}; as data) {\n  @for (tick of data.ticks; track tick) {\n    <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate('+ data.x(tick) +', 0)'\">\n      <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\"\n            [attr.y]=\"axis.options.opposite ? 0 : 9\">\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: XAxisComponent, isStandalone: true, selector: "[teta-x-axis]", inputs: { axis: "axis", size: "size" }, usesOnChanges: true, ngImport: i0, template: "@if ({x: x | async, ticks: ticks | async}; as data) { @for (tick of data.ticks; track tick) {\n<svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n  <text\n    fill=\"var(--color-text-70)\"\n    [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\"\n    [attr.y]=\"axis.options.opposite ? 0 : 9\"\n  >\n    {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n  </text>\n  <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n</svg:g>\n}\n<svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n  <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n    {{ axis.options.title }}\n  </text>\n</svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: XAxisComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-x-axis]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe,
-                    ], template: "@if ({x: x | async, ticks: ticks | async}; as data) {\n  @for (tick of data.ticks; track tick) {\n    <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate('+ data.x(tick) +', 0)'\">\n      <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\"\n            [attr.y]=\"axis.options.opposite ? 0 : 9\">\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
+            args: [{ selector: '[teta-x-axis]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if ({x: x | async, ticks: ticks | async}; as data) { @for (tick of data.ticks; track tick) {\n<svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n  <text\n    fill=\"var(--color-text-70)\"\n    [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\"\n    [attr.y]=\"axis.options.opposite ? 0 : 9\"\n  >\n    {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n  </text>\n  <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n</svg:g>\n}\n<svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n  <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n    {{ axis.options.title }}\n  </text>\n</svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
         }], ctorParameters: () => [{ type: ScaleService }, { type: ChartService }], propDecorators: { axis: [{
                 type: Input
             }], size: [{
@@ -1311,9 +1265,7 @@ class ZoomableDirective {
     }
     ngOnInit() {
         if (this.axis?.options?.zoom || this.config?.zoom?.enable) {
-            this.zoomable =
-                this.config?.zoom?.zoomBehavior === ZoomBehaviorType.move &&
-                    !this.config?.tooltip?.showCrosshair;
+            this.zoomable = this.config?.zoom?.zoomBehavior === ZoomBehaviorType.move && !this.config?.tooltip?.showCrosshair;
             this.crosshair = this.config?.tooltip?.showCrosshair;
         }
     }
@@ -1327,9 +1279,7 @@ class ZoomableDirective {
         this.alive = false;
     }
     initZoomSync() {
-        this.zoomService.zoomed
-            .pipe(takeWhile(() => this.alive))
-            .subscribe((zoomed) => {
+        this.zoomService.zoomed.pipe(takeWhile(() => this.alive)).subscribe((zoomed) => {
             if (this._element &&
                 this.elementRef !== zoomed?.element &&
                 zoomed?.axis?.index === this.axis.index &&
@@ -1348,8 +1298,7 @@ class ZoomableDirective {
         });
     }
     initZoomListeners() {
-        const enable = (this.axis?.options?.zoom && this.axis?.options.visible !== false) ||
-            this.config?.zoom?.enable;
+        const enable = (this.axis?.options?.zoom && this.axis?.options.visible !== false) || this.config?.zoom?.enable;
         if (!enable) {
             return;
         }
@@ -1358,21 +1307,15 @@ class ZoomableDirective {
             [0, 0],
             [this.size.width, this.size.height],
         ]);
-        const min = this.config?.zoom?.minTranslate != null
-            ? this.axis.scale(this.config?.zoom?.minTranslate)
-            : -Infinity;
-        const max = this.config?.zoom?.maxTranslate != null
-            ? this.axis.scale(this.config?.zoom?.maxTranslate)
-            : Infinity;
-        if (this.axis.orientation === AxisOrientation.x &&
-            this.config.zoom.type === ZoomType.x) {
+        const min = this.config?.zoom?.minTranslate != null ? this.axis.scale(this.config?.zoom?.minTranslate) : -Infinity;
+        const max = this.config?.zoom?.maxTranslate != null ? this.axis.scale(this.config?.zoom?.maxTranslate) : Infinity;
+        if (this.axis.orientation === AxisOrientation.x && this.config.zoom.type === ZoomType.x) {
             this.zoom.translateExtent([
                 [Math.min(min, max), -Infinity],
                 [Math.max(min, max), Infinity],
             ]);
         }
-        if (this.axis.orientation === AxisOrientation.y &&
-            this.config.zoom.type === ZoomType.y) {
+        if (this.axis.orientation === AxisOrientation.y && this.config.zoom.type === ZoomType.y) {
             this.zoom.translateExtent([
                 [-Infinity, Math.min(min, max)],
                 [Infinity, Math.max(min, max)],
@@ -1391,9 +1334,7 @@ class ZoomableDirective {
                 : this.config.zoom?.limitZoomByData
                     ? 1
                     : 0;
-            const minZoom = this.config.zoom?.min
-                ? (extremes[1] - extremes[0]) / this.config.zoom?.min
-                : Infinity;
+            const minZoom = this.config.zoom?.min ? (extremes[1] - extremes[0]) / this.config.zoom?.min : Infinity;
             this.zoom.scaleExtent([maxZoom, minZoom]);
         }
         if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
@@ -1407,22 +1348,17 @@ class ZoomableDirective {
         this.zoom.on('start zoom end', this.zoomed);
         this._element?.call(this.zoom);
         this.zoom
-            .filter(event => {
-            return ((event.ctrlKey && event.type === 'wheel') ||
-                Boolean(window.TouchEvent && event.type !== 'wheel'));
+            .filter((event) => {
+            return (event.ctrlKey && event.type === 'wheel') || Boolean(window.TouchEvent && event.type !== 'wheel');
         })
-            .wheelDelta(event => {
+            .wheelDelta((event) => {
             const delta = this.config?.zoom.type === ZoomType.x ? -event.deltaX : -event.deltaY;
             return delta * 0.002;
         });
         const emit = (type, event) => {
             const origin = this.axis.scale.copy().domain(this.axis.originDomain);
             let transform = zoomIdentity;
-            const delta = type === 'end'
-                ? 0
-                : this.axis.orientation === AxisOrientation.y
-                    ? event.deltaY
-                    : event.deltaX;
+            const delta = type === 'end' ? 0 : this.axis.orientation === AxisOrientation.y ? event.deltaY : event.deltaX;
             if (this.axis.orientation === AxisOrientation.y) {
                 transform = transform.translate(0, this.currentTransform.y - delta / 2);
             }
@@ -1433,9 +1369,7 @@ class ZoomableDirective {
             let domain = this.axis.orientation === AxisOrientation.y
                 ? transform.rescaleY(origin).domain()
                 : transform.rescaleX(origin).domain();
-            const extent = this.axis.options?.inverted
-                ? domain
-                : [...domain].reverse();
+            const extent = this.axis.options?.inverted ? domain : [...domain].reverse();
             if (extent[0] <= this.config.zoom?.minTranslate) {
                 return;
             }
@@ -1480,7 +1414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
             type: Directive,
             args: [{
                     selector: '[tetaZoomable]',
-                    standalone: true
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ZoomService }, { type: ChartService }, { type: i0.NgZone }], propDecorators: { config: [{
                 type: Input
@@ -1514,21 +1448,16 @@ class YAxisComponent {
     ngOnDestroy() {
         this._alive = false;
     }
-    ngAfterViewInit() {
-    }
+    ngAfterViewInit() { }
     getLabelTransform() {
-        return `translate(${this.axis.options.opposite
-            ? this.axis.selfSize
-            : -this.axis.selfSize}, ${this.size.height / 2}) rotate(-90)`;
+        return `translate(${this.axis.options.opposite ? this.axis.selfSize : -this.axis.selfSize}, ${this.size.height / 2}) rotate(-90)`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: YAxisComponent, deps: [{ token: ScaleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: YAxisComponent, isStandalone: true, selector: "[teta-y-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "@if (y | async; as scale) {\n  @for (tick of scale.ticks(); track tick) {\n    <svg:g [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\"\n           [attr.transform]=\"'translate(0, '+ scale(tick) +')'\">\n      <text fill=\"var(--color-text-70)\" dy=\"0.32em\"\n            [attr.x]=\"axis.options.opposite ? 10 : -9\">\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\" text-anchor=\"middle\"\n          [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\">\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: YAxisComponent, isStandalone: true, selector: "[teta-y-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "@if (y | async; as scale) { @for (tick of scale.ticks(); track tick) {\n<svg:g\n  [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\"\n  [attr.transform]=\"'translate(0, ' + scale(tick) + ')'\"\n>\n  <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">\n    {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n  </text>\n  <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n</svg:g>\n}\n<svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n  <text\n    [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\"\n    text-anchor=\"middle\"\n    [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\"\n  >\n    {{ axis.options.title }}\n  </text>\n</svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: YAxisComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-y-axis]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe,
-                    ], template: "@if (y | async; as scale) {\n  @for (tick of scale.ticks(); track tick) {\n    <svg:g [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\"\n           [attr.transform]=\"'translate(0, '+ scale(tick) +')'\">\n      <text fill=\"var(--color-text-70)\" dy=\"0.32em\"\n            [attr.x]=\"axis.options.opposite ? 10 : -9\">\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\" text-anchor=\"middle\"\n          [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\">\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"] }]
+            args: [{ selector: '[teta-y-axis]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if (y | async; as scale) { @for (tick of scale.ticks(); track tick) {\n<svg:g\n  [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\"\n  [attr.transform]=\"'translate(0, ' + scale(tick) + ')'\"\n>\n  <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">\n    {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n  </text>\n  <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n</svg:g>\n}\n<svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n  <text\n    [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\"\n    text-anchor=\"middle\"\n    [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\"\n  >\n    {{ axis.options.title }}\n  </text>\n</svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"] }]
         }], ctorParameters: () => [{ type: ScaleService }], propDecorators: { axis: [{
                 type: Input
             }], size: [{
@@ -1543,8 +1472,7 @@ class PlotBand {
         this.from = options?.from;
         this.to = options?.to;
         this.label = options?.label;
-        this.showGrabbers =
-            options?.showGrabbers != null ? options.showGrabbers : true;
+        this.showGrabbers = options?.showGrabbers != null ? options.showGrabbers : true;
         this.draggable = options?.draggable != null ? options?.draggable : false;
         this.resizable = options?.resizable != null ? options?.resizable : true;
         this.min = options?.min;
@@ -1591,12 +1519,8 @@ class PlotBandComponent {
             let [min, max] = this.scale.domain();
             min = min instanceof Date ? min.getTime() : min;
             max = max instanceof Date ? max.getTime() : max;
-            const from = this.plotBand.from instanceof Date
-                ? this.plotBand.from.getTime()
-                : this.plotBand.from;
-            const to = this.plotBand.to instanceof Date
-                ? this.plotBand.to.getTime()
-                : this.plotBand.to;
+            const from = this.plotBand.from instanceof Date ? this.plotBand.from.getTime() : this.plotBand.from;
+            const to = this.plotBand.to instanceof Date ? this.plotBand.to.getTime() : this.plotBand.to;
             const position = ((from <= min ? min : from) + (to >= max ? max : to)) / 2;
             return this.scale(position);
         };
@@ -1605,12 +1529,8 @@ class PlotBandComponent {
         this.chartService.emitPlotband(event);
     }
     ngAfterViewInit() {
-        const plotbandElement = d3
-            .select(this.element.nativeElement)
-            .select('.plotband');
-        const grabElements = d3
-            .select(this.element.nativeElement)
-            .selectAll('.grabber');
+        const plotbandElement = d3.select(this.element.nativeElement).select('.plotband');
+        const grabElements = d3.select(this.element.nativeElement).selectAll('.grabber');
         this.dragElements = d3.drag().subject(() => {
             if (this.axis.orientation === AxisOrientation.x) {
                 return { x: plotbandElement.attr('x') };
@@ -1686,11 +1606,11 @@ class PlotBandComponent {
         return d.style.plotBand?.fill;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PlotBandComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: PlotBandComponent, isStandalone: true, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n  class='plotband' xmlns:svg='http://www.w3.org/1999/html'\n  [class.draggable]='plotBand?.draggable === true'\n  [attr.fill]='getFill(plotBand)'\n  [attr.opacity]='plotBand.style?.plotBand?.opacity'\n  [attr.height]='axis.orientation === orientation.x ? height : bandSize'\n  [attr.width]='axis.orientation === orientation.x ? bandSize : width'\n  [attr.y]='axis.orientation === orientation.y ? (axis.options.inverted === true ? from : to) : null'\n  [attr.x]='axis.orientation === orientation.x ? (axis.options.inverted === true ? to : from) : null'>\n</svg:rect>\n@if (axis.orientation === orientation.x) {\n  <svg:text\n    text-anchor='middle'\n    dominant-baseline='middle'\n    class='label font-caption fill-text-90'\n    [attr.x]='getTextPosition()'\n    [attr.transform]=\"'rotate(-90, '+ getTextPosition() +',' + height / 2 + ')'\"\n    [attr.y]='height / 2'>{{ plotBand.label }}\n  </svg:text>\n}\n@if (axis.orientation === orientation.y) {\n  <svg:text\n    text-anchor='middle'\n    class='label font-caption fill-text-90'\n    dominant-baseline='central'\n    [attr.x]='getTextPosition()'\n    [attr.y]='width / 2'>{{ plotBand.label }}\n  </svg:text>\n}\n@if (plotBand.resizable) {\n  @if (plotBand.showGrabbers) {\n    <svg:line class='display-grabber'\n              [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n              [attr.stroke-width]='plotBand.style?.grabbers?.strokeWidth || 4'\n              [attr.stroke-dasharray]='plotBand.style?.grabbers?.strokeDasharray'\n              [attr.x1]='axis.orientation === orientation.x ? from : 0'\n              [attr.x2]='axis.orientation === orientation.x ? from : width'\n              [attr.data-grabber]=\"'from'\"\n              [attr.y1]='axis.orientation === orientation.x ? 0 : from'\n              [attr.y2]='axis.orientation === orientation.x ? height : from'>\n    </svg:line>\n    <svg:line class='display-grabber'\n              [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n              [attr.stroke-width]='plotBand.style?.grabbers?.strokeWidth || 4'\n              [attr.stroke-dasharray]='plotBand.style?.grabbers?.strokeDasharray'\n              [attr.x1]='axis.orientation === orientation.x ? to : 0'\n              [attr.x2]='axis.orientation === orientation.x ? to : width'\n              [attr.data-grabber]=\"'to'\"\n              [attr.y1]='axis.orientation === orientation.x ? 0 : to'\n              [attr.y2]='axis.orientation === orientation.x ? height : to'>\n    </svg:line>\n  }\n  <svg:line class='grabber'\n            [class.x-grabber]='axis.orientation === orientation.x'\n            [class.y-grabber]='axis.orientation === orientation.y'\n            [class.resizeable]='plotBand?.resizable'\n            [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n            [attr.stroke-width]='8'\n            [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n            [attr.x1]='axis.orientation === orientation.x ? from : 0'\n            [attr.x2]='axis.orientation === orientation.x ? from : width'\n            [attr.data-grabber]=\"'from'\"\n            [attr.y1]='axis.orientation === orientation.x ? 0 : from'\n            [attr.y2]='axis.orientation === orientation.x ? height : from'>\n  </svg:line>\n  <svg:line class='grabber'\n            [class.x-grabber]='axis.orientation === orientation.x'\n            [class.y-grabber]='axis.orientation === orientation.y'\n            [class.resizeable]='plotBand?.resizable'\n            [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n            [attr.stroke-width]='8'\n            [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n            [attr.x1]='axis.orientation === orientation.x ? to : 0'\n            [attr.x2]='axis.orientation === orientation.x ? to : width'\n            [attr.data-grabber]=\"'to'\"\n            [attr.y1]='axis.orientation === orientation.x ? 0 : to'\n            [attr.y2]='axis.orientation === orientation.x ? height : to'>\n  </svg:line>\n}\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: PlotBandComponent, isStandalone: true, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n  class=\"plotband\"\n  xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? (axis.options.inverted === true ? from : to) : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? (axis.options.inverted === true ? to : from) : null\"\n></svg:rect>\n@if (axis.orientation === orientation.x) {\n<svg:text\n  text-anchor=\"middle\"\n  dominant-baseline=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.transform]=\"'rotate(-90, ' + getTextPosition() + ',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\"\n>\n  {{ plotBand.label }}\n</svg:text>\n} @if (axis.orientation === orientation.y) {\n<svg:text\n  text-anchor=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.y]=\"width / 2\"\n>\n  {{ plotBand.label }}\n</svg:text>\n} @if (plotBand.resizable) { @if (plotBand.showGrabbers) {\n<svg:line\n  class=\"display-grabber\"\n  [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n  [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n  [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n  [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n  [attr.data-grabber]=\"'from'\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : from\"\n></svg:line>\n<svg:line\n  class=\"display-grabber\"\n  [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n  [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n  [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n  [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n  [attr.data-grabber]=\"'to'\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : to\"\n></svg:line>\n}\n<svg:line\n  class=\"grabber\"\n  [class.x-grabber]=\"axis.orientation === orientation.x\"\n  [class.y-grabber]=\"axis.orientation === orientation.y\"\n  [class.resizeable]=\"plotBand?.resizable\"\n  [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n  [attr.stroke-width]=\"8\"\n  [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n  [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n  [attr.data-grabber]=\"'from'\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : from\"\n></svg:line>\n<svg:line\n  class=\"grabber\"\n  [class.x-grabber]=\"axis.orientation === orientation.x\"\n  [class.y-grabber]=\"axis.orientation === orientation.y\"\n  [class.resizeable]=\"plotBand?.resizable\"\n  [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n  [attr.stroke-width]=\"8\"\n  [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n  [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n  [attr.data-grabber]=\"'to'\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : to\"\n></svg:line>\n}\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PlotBandComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-plot-band]', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n  class='plotband' xmlns:svg='http://www.w3.org/1999/html'\n  [class.draggable]='plotBand?.draggable === true'\n  [attr.fill]='getFill(plotBand)'\n  [attr.opacity]='plotBand.style?.plotBand?.opacity'\n  [attr.height]='axis.orientation === orientation.x ? height : bandSize'\n  [attr.width]='axis.orientation === orientation.x ? bandSize : width'\n  [attr.y]='axis.orientation === orientation.y ? (axis.options.inverted === true ? from : to) : null'\n  [attr.x]='axis.orientation === orientation.x ? (axis.options.inverted === true ? to : from) : null'>\n</svg:rect>\n@if (axis.orientation === orientation.x) {\n  <svg:text\n    text-anchor='middle'\n    dominant-baseline='middle'\n    class='label font-caption fill-text-90'\n    [attr.x]='getTextPosition()'\n    [attr.transform]=\"'rotate(-90, '+ getTextPosition() +',' + height / 2 + ')'\"\n    [attr.y]='height / 2'>{{ plotBand.label }}\n  </svg:text>\n}\n@if (axis.orientation === orientation.y) {\n  <svg:text\n    text-anchor='middle'\n    class='label font-caption fill-text-90'\n    dominant-baseline='central'\n    [attr.x]='getTextPosition()'\n    [attr.y]='width / 2'>{{ plotBand.label }}\n  </svg:text>\n}\n@if (plotBand.resizable) {\n  @if (plotBand.showGrabbers) {\n    <svg:line class='display-grabber'\n              [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n              [attr.stroke-width]='plotBand.style?.grabbers?.strokeWidth || 4'\n              [attr.stroke-dasharray]='plotBand.style?.grabbers?.strokeDasharray'\n              [attr.x1]='axis.orientation === orientation.x ? from : 0'\n              [attr.x2]='axis.orientation === orientation.x ? from : width'\n              [attr.data-grabber]=\"'from'\"\n              [attr.y1]='axis.orientation === orientation.x ? 0 : from'\n              [attr.y2]='axis.orientation === orientation.x ? height : from'>\n    </svg:line>\n    <svg:line class='display-grabber'\n              [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n              [attr.stroke-width]='plotBand.style?.grabbers?.strokeWidth || 4'\n              [attr.stroke-dasharray]='plotBand.style?.grabbers?.strokeDasharray'\n              [attr.x1]='axis.orientation === orientation.x ? to : 0'\n              [attr.x2]='axis.orientation === orientation.x ? to : width'\n              [attr.data-grabber]=\"'to'\"\n              [attr.y1]='axis.orientation === orientation.x ? 0 : to'\n              [attr.y2]='axis.orientation === orientation.x ? height : to'>\n    </svg:line>\n  }\n  <svg:line class='grabber'\n            [class.x-grabber]='axis.orientation === orientation.x'\n            [class.y-grabber]='axis.orientation === orientation.y'\n            [class.resizeable]='plotBand?.resizable'\n            [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n            [attr.stroke-width]='8'\n            [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n            [attr.x1]='axis.orientation === orientation.x ? from : 0'\n            [attr.x2]='axis.orientation === orientation.x ? from : width'\n            [attr.data-grabber]=\"'from'\"\n            [attr.y1]='axis.orientation === orientation.x ? 0 : from'\n            [attr.y2]='axis.orientation === orientation.x ? height : from'>\n  </svg:line>\n  <svg:line class='grabber'\n            [class.x-grabber]='axis.orientation === orientation.x'\n            [class.y-grabber]='axis.orientation === orientation.y'\n            [class.resizeable]='plotBand?.resizable'\n            [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n            [attr.stroke-width]='8'\n            [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n            [attr.x1]='axis.orientation === orientation.x ? to : 0'\n            [attr.x2]='axis.orientation === orientation.x ? to : width'\n            [attr.data-grabber]=\"'to'\"\n            [attr.y1]='axis.orientation === orientation.x ? 0 : to'\n            [attr.y2]='axis.orientation === orientation.x ? height : to'>\n  </svg:line>\n}\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"] }]
+            args: [{ selector: '[teta-plot-band]', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n  class=\"plotband\"\n  xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? (axis.options.inverted === true ? from : to) : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? (axis.options.inverted === true ? to : from) : null\"\n></svg:rect>\n@if (axis.orientation === orientation.x) {\n<svg:text\n  text-anchor=\"middle\"\n  dominant-baseline=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.transform]=\"'rotate(-90, ' + getTextPosition() + ',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\"\n>\n  {{ plotBand.label }}\n</svg:text>\n} @if (axis.orientation === orientation.y) {\n<svg:text\n  text-anchor=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.y]=\"width / 2\"\n>\n  {{ plotBand.label }}\n</svg:text>\n} @if (plotBand.resizable) { @if (plotBand.showGrabbers) {\n<svg:line\n  class=\"display-grabber\"\n  [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n  [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n  [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n  [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n  [attr.data-grabber]=\"'from'\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : from\"\n></svg:line>\n<svg:line\n  class=\"display-grabber\"\n  [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n  [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n  [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n  [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n  [attr.data-grabber]=\"'to'\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : to\"\n></svg:line>\n}\n<svg:line\n  class=\"grabber\"\n  [class.x-grabber]=\"axis.orientation === orientation.x\"\n  [class.y-grabber]=\"axis.orientation === orientation.y\"\n  [class.resizeable]=\"plotBand?.resizable\"\n  [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n  [attr.stroke-width]=\"8\"\n  [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n  [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n  [attr.data-grabber]=\"'from'\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : from\"\n></svg:line>\n<svg:line\n  class=\"grabber\"\n  [class.x-grabber]=\"axis.orientation === orientation.x\"\n  [class.y-grabber]=\"axis.orientation === orientation.y\"\n  [class.resizeable]=\"plotBand?.resizable\"\n  [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n  [attr.stroke-width]=\"8\"\n  [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n  [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n  [attr.data-grabber]=\"'to'\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : to\"\n></svg:line>\n}\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"] }]
         }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { plotBand: [{
                 type: Input
             }], axis: [{
@@ -1715,26 +1635,27 @@ class GridlinesComponent {
         this.tickYValues = this.svc.scales.pipe(withLatestFrom(this.config), map((_) => {
             const [scales, config] = _;
             const ratio = this.size.height / 40;
-            return config.gridLines?.y?.ticksCount != null ? generateTicks(scales.y.get(0).scale.domain(), config.gridLines?.y?.ticksCount) : scales.y.get(0)?.scale.ticks(ratio);
+            return config.gridLines?.y?.ticksCount != null
+                ? generateTicks(scales.y.get(0).scale.domain(), config.gridLines?.y?.ticksCount)
+                : scales.y.get(0)?.scale.ticks(ratio);
         }));
         this.tickXValues = this.svc.scales.pipe(withLatestFrom(this.config), map((_) => {
             const [scales, config] = _;
             const ratio = this.size.width / 40;
-            return config.gridLines?.x?.ticksCount != null ? generateTicks(scales.x.get(0).originDomain, config.gridLines?.x?.ticksCount) : scales.x.get(0)?.scale.ticks(ratio);
+            return config.gridLines?.x?.ticksCount != null
+                ? generateTicks(scales.x.get(0).originDomain, config.gridLines?.x?.ticksCount)
+                : scales.x.get(0)?.scale.ticks(ratio);
         }));
         this.y = this.svc.scales.pipe(map((_) => _.y.get(0)?.scale));
         this.x = this.svc.scales.pipe(map((_) => _.x.get(0)?.scale));
     }
-    ngAfterViewInit() {
-    }
+    ngAfterViewInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: GridlinesComponent, isStandalone: true, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "@if ({\n  xValues: tickXValues | async,\n  yValues: tickYValues | async,\n  x: x | async,\n  y: y | async,\n  config: config | async\n}; as data) {\n  @if (data.y && data.config.gridLines?.showY !== false) {\n    @for (tick of data.yValues; track tick) {\n      <svg:line [attr.x1]=\"0\"\n                [attr.y1]=\"data.y(tick) || 1\"\n                [attr.x2]=\"size?.width\"\n                [attr.y2]=\"data.y(tick) || 1\"></svg:line>\n    }\n  }\n  @if (data.x && data.config.gridLines?.showX !== false) {\n    @for (tick of data.xValues; track tick) {\n      <svg:line [attr.x1]=\"data.x(tick) || 1\"\n                [attr.y1]=\"0\"\n                [attr.x2]=\"data.x(tick) || 1\"\n                [attr.y2]=\"size?.height\"></svg:line>\n    }\n  }\n}\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: GridlinesComponent, isStandalone: true, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "@if ({ xValues: tickXValues | async, yValues: tickYValues | async, x: x | async, y: y | async, config: config | async };\nas data) { @if (data.y && data.config.gridLines?.showY !== false) { @for (tick of data.yValues; track tick) {\n<svg:line [attr.x1]=\"0\" [attr.y1]=\"data.y(tick) || 1\" [attr.x2]=\"size?.width\" [attr.y2]=\"data.y(tick) || 1\"></svg:line>\n} } @if (data.x && data.config.gridLines?.showX !== false) { @for (tick of data.xValues; track tick) {\n<svg:line [attr.x1]=\"data.x(tick) || 1\" [attr.y1]=\"0\" [attr.x2]=\"data.x(tick) || 1\" [attr.y2]=\"size?.height\"></svg:line>\n} } }\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: GridlinesComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-gridlines]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe,
-                    ], template: "@if ({\n  xValues: tickXValues | async,\n  yValues: tickYValues | async,\n  x: x | async,\n  y: y | async,\n  config: config | async\n}; as data) {\n  @if (data.y && data.config.gridLines?.showY !== false) {\n    @for (tick of data.yValues; track tick) {\n      <svg:line [attr.x1]=\"0\"\n                [attr.y1]=\"data.y(tick) || 1\"\n                [attr.x2]=\"size?.width\"\n                [attr.y2]=\"data.y(tick) || 1\"></svg:line>\n    }\n  }\n  @if (data.x && data.config.gridLines?.showX !== false) {\n    @for (tick of data.xValues; track tick) {\n      <svg:line [attr.x1]=\"data.x(tick) || 1\"\n                [attr.y1]=\"0\"\n                [attr.x2]=\"data.x(tick) || 1\"\n                [attr.y2]=\"size?.height\"></svg:line>\n    }\n  }\n}\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"] }]
+            args: [{ selector: '[teta-gridlines]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if ({ xValues: tickXValues | async, yValues: tickYValues | async, x: x | async, y: y | async, config: config | async };\nas data) { @if (data.y && data.config.gridLines?.showY !== false) { @for (tick of data.yValues; track tick) {\n<svg:line [attr.x1]=\"0\" [attr.y1]=\"data.y(tick) || 1\" [attr.x2]=\"size?.width\" [attr.y2]=\"data.y(tick) || 1\"></svg:line>\n} } @if (data.x && data.config.gridLines?.showX !== false) { @for (tick of data.xValues; track tick) {\n<svg:line [attr.x1]=\"data.x(tick) || 1\" [attr.y1]=\"0\" [attr.x2]=\"data.x(tick) || 1\" [attr.y2]=\"size?.height\"></svg:line>\n} } }\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"] }]
         }], ctorParameters: () => [{ type: ScaleService }, { type: ChartService }], propDecorators: { size: [{
                 type: Input
             }] } });
@@ -1742,11 +1663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
 class LinearSeriesBase extends SeriesBaseComponent {
     set series(series) {
         this.__series = series;
-        this.markers = this.__series.data?.filter(_ => _?.marker &&
-            _?.x !== undefined &&
-            _?.y !== undefined &&
-            _?.x !== null &&
-            _?.y !== null);
+        this.markers = this.__series.data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined && _?.x !== null && _?.y !== null);
     }
     get series() {
         return this.__series;
@@ -1802,14 +1719,14 @@ class LinearSeriesBase extends SeriesBaseComponent {
             const filter = this.defaultClipPointsMapping.get(this.series.clipPointsDirection);
             const line = d3
                 .line()
-                .defined(point => point.x !== null &&
+                .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));
+                .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();
@@ -1847,12 +1764,8 @@ class LinearSeriesBase extends SeriesBaseComponent {
             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);
+            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);
             if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
                 // Collision detected
                 rV.x = p0_x + t * s1_x;
@@ -1872,12 +1785,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
             const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX(this.series.data[rightId - 1]?.x), scaleY(this.series.data[rightId - 1]?.y), scaleX(this.series.data[rightId]?.x), scaleY(this.series.data[rightId]?.y));
             const x = scaleX.invert(intersect.x);
             const y = scaleY.invert(intersect.y);
-            if (x !== null &&
-                x !== undefined &&
-                !isNaN(x) &&
-                y !== null &&
-                y !== undefined &&
-                !isNaN(y)) {
+            if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
                 this.svc.setTooltip({
                     point: {
                         x: scaleX.invert(intersect.x),
@@ -1908,12 +1816,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
             const intersect = lineIntersection(range[0], mouse[1], Number.MAX_SAFE_INTEGER, mouse[1], scaleX(this.series.data[rightId - 1]?.x), scaleY(this.series.data[rightId - 1]?.y), scaleX(this.series.data[rightId]?.x), scaleY(this.series.data[rightId]?.y));
             const x = scaleX.invert(intersect.x);
             const y = scaleY.invert(intersect.y);
-            if (x !== null &&
-                x !== undefined &&
-                !isNaN(x) &&
-                y !== null &&
-                y !== undefined &&
-                !isNaN(y)) {
+            if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
                 this.svc.setTooltip({
                     point: {
                         x: scaleX.invert(intersect.x),
@@ -1970,7 +1873,7 @@ class DraggablePointDirective {
         event.preventDefault();
         this.startPosition = {
             x: event.x,
-            y: event.y
+            y: event.y,
         };
         this.moveStart.emit(this.startPosition);
     }
@@ -1984,12 +1887,13 @@ class DraggablePointDirective {
             if (this.dragDirection === DragPointType.y) {
                 deltaX = 0;
             }
-            if (this.allowDrag && !this.allowDrag({
-                x: event.x,
-                y: event.y,
-                deltaX,
-                deltaY
-            })) {
+            if (this.allowDrag &&
+                !this.allowDrag({
+                    x: event.x,
+                    y: event.y,
+                    deltaX,
+                    deltaY,
+                })) {
                 this.startPosition = null;
                 return;
             }
@@ -2000,14 +1904,14 @@ class DraggablePointDirective {
             else {
                 this.transformCache = {
                     x: deltaX,
-                    y: deltaY
+                    y: deltaY,
                 };
             }
             this.moveEnd.emit({
                 x: event.x,
                 y: event.y,
                 deltaX,
-                deltaY
+                deltaY,
             });
         }
         this.startPosition = null;
@@ -2020,12 +1924,13 @@ class DraggablePointDirective {
                 deltaX = this.transformCache.x + deltaX;
                 deltaY = this.transformCache.y + deltaY;
             }
-            if (this.allowDrag && !this.allowDrag({
-                x: event.x,
-                y: event.y,
-                deltaX,
-                deltaY
-            })) {
+            if (this.allowDrag &&
+                !this.allowDrag({
+                    x: event.x,
+                    y: event.y,
+                    deltaX,
+                    deltaY,
+                })) {
                 return;
             }
             if (this.dragDirection === DragPointType.x) {
@@ -2041,7 +1946,7 @@ class DraggablePointDirective {
                 x: event.x,
                 y: event.y,
                 deltaX,
-                deltaY
+                deltaY,
             });
         }
     }
@@ -2060,7 +1965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
             args: [{
                     selector: '[tetaDraggablePoint]',
                     exportAs: 'tetaDraggablePoint',
-                    standalone: true
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tetaDraggablePoint: [{
                 type: Input
@@ -2137,7 +2042,7 @@ class LineSeriesComponent extends LinearSeriesBase {
         this._update.next();
         const emitEvent = {
             type: 'end',
-            sourceEvent: event
+            sourceEvent: event,
         };
         this.svc.emitPoint({
             target: {
@@ -2153,7 +2058,7 @@ class LineSeriesComponent extends LinearSeriesBase {
         this._update.next();
         const emitEvent = {
             type: 'drag',
-            sourceEvent: event
+            sourceEvent: event,
         };
         this.svc.emitPoint({
             target: {
@@ -2171,14 +2076,11 @@ class LineSeriesComponent extends LinearSeriesBase {
         label.dy = this.labelStart.dy + event.deltaY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LineSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: LineSeriesComponent, isStandalone: true, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n@if (transform | async; as t) {\n  @if (t?.x != null && t?.y != null) {\n    <svg:circle r=\"3\"\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\n        [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\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              <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                {{ point.marker.label?.text }}\n              </div>\n            </svg:foreignObject>\n          }\n        </svg:g>\n      </svg:g>\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: LineSeriesComponent, isStandalone: true, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\"\n></svg:path>\n@if (transform | async; as t) { @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} } @if (markers; as draggablePoints) { @if (x && y) { @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", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LineSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-line-series]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe,
-                        DraggablePointDirective,
-                    ], template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n@if (transform | async; as t) {\n  @if (t?.x != null && t?.y != null) {\n    <svg:circle r=\"3\"\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\n        [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\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              <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                {{ point.marker.label?.text }}\n              </div>\n            </svg:foreignObject>\n          }\n        </svg:g>\n      </svg:g>\n    }\n  }\n}\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
+            args: [{ selector: 'svg:svg[teta-line-series]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, DraggablePointDirective], template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\"\n></svg:path>\n@if (transform | async; as t) { @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} } @if (markers; as draggablePoints) { @if (x && y) { @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", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
         }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
 
 class BarSeriesComponent extends SeriesBaseComponent {
@@ -2200,11 +2102,7 @@ class BarSeriesComponent extends SeriesBaseComponent {
             const x = _.x.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);
+            return d3.scaleBand().range([0, range[1]]).domain(domain).padding(0.1);
         }));
         this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
         this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
@@ -2221,19 +2119,16 @@ class BarSeriesComponent extends SeriesBaseComponent {
             series: this.series,
         });
     }
-    ngOnChanges(changes) {
-    }
+    ngOnChanges(changes) { }
     isNumber(value) {
         return typeof value === 'number';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: BarSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: BarSeriesComponent, isStandalone: true, selector: "svg:svg[teta-bar-series]", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ({\n  x: x | async,\n  x1: x1 | async,\n  y: y | async,\n  barSeriesCount: barSeriesCount | async\n}; 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]=\"data.x(point.x) + ((isNumber(series.id) ? series.id : 0) * data.x1.bandwidth() / data.barSeriesCount)\"\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: "18.2.1", type: BarSeriesComponent, isStandalone: true, selector: "svg:svg[teta-bar-series]", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ({ x: x | async, x1: x1 | async, y: y | async, barSeriesCount: barSeriesCount | async }; as data) { @if (data.x &&\ndata.y) { @if (data.barSeriesCount > 1) { @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) + ((isNumber(series.id) ? series.id : 0) * data.x1.bandwidth()) / data.barSeriesCount\"\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} } @if (data.barSeriesCount === 1) { @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", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: BarSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-bar-series]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe,
-                    ], template: "@if ({\n  x: x | async,\n  x1: x1 | async,\n  y: y | async,\n  barSeriesCount: barSeriesCount | async\n}; 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]=\"data.x(point.x) + ((isNumber(series.id) ? series.id : 0) * data.x1.bandwidth() / data.barSeriesCount)\"\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]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if ({ x: x | async, x1: x1 | async, y: y | async, barSeriesCount: barSeriesCount | async }; as data) { @if (data.x &&\ndata.y) { @if (data.barSeriesCount > 1) { @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) + ((isNumber(series.id) ? series.id : 0) * data.x1.bandwidth()) / data.barSeriesCount\"\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} } @if (data.barSeriesCount === 1) { @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" }]
         }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
 
 class ScatterSeriesComponent extends SeriesBaseComponent {
@@ -2246,11 +2141,10 @@ class ScatterSeriesComponent extends SeriesBaseComponent {
         this.element = element;
     }
     ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map(_ => _.x.get(this.series.xAxisIndex)?.scale));
-        this.y = this.scaleService.scales.pipe(map(_ => _.y.get(this.series.yAxisIndex)?.scale));
-    }
-    ngAfterViewInit() {
+        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
+        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
     }
+    ngAfterViewInit() { }
     mouseenter(point) {
         this.svc.setTooltip({
             point: point,
@@ -2264,13 +2158,11 @@ class ScatterSeriesComponent extends SeriesBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ScatterSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: ScatterSeriesComponent, isStandalone: true, selector: "svg:svg[teta-scatter-series]", usesInheritance: true, ngImport: i0, template: "@if ({\n  y: y | async,\n  x: x | async\n}; 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: "18.2.1", type: ScatterSeriesComponent, isStandalone: true, selector: "svg:svg[teta-scatter-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y | async, x: x | async }; as scales) { @if (scales.x && scales.y) { @for (point of series.data; track point)\n{\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", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ScatterSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-scatter-series]', standalone: true, imports: [
-                        AsyncPipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({\n  y: y | async,\n  x: x | async\n}; 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]', standalone: true, imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ y: y | async, x: x | async }; as scales) { @if (scales.x && scales.y) { @for (point of series.data; track point)\n{\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", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
         }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
 
 class BlockSeriesComponent extends SeriesBaseComponent {
@@ -2286,19 +2178,13 @@ class BlockSeriesComponent extends SeriesBaseComponent {
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map(_ => _.x.get(this.series.xAxisIndex)?.scale));
-        this.y = this.scaleService.scales.pipe(map(_ => _.y.get(this.series.yAxisIndex)?.scale));
-        this.displayPoints = this.y.pipe(filter(y => y), map(y => {
+        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
+        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
+        this.displayPoints = this.y.pipe(filter((y) => y), map((y) => {
             return this.series.data.filter((point, index, arr) => {
                 const [min, max] = y.domain();
-                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));
+                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));
             });
         }));
     }
@@ -2315,13 +2201,11 @@ class BlockSeriesComponent extends SeriesBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: BlockSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: BlockSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "@if ({\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n}; as data) {\n  @if (series?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient [id]=\"'gradient-fill-' + id\" 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\" 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)\"\n             (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]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\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 x=\"50%\"\n                    [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                    alignment-baseline=\"middle\"\n                    text-anchor=\"middle\">{{ point.text }}\n          </svg:text>\n        }\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", 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) { @if (series?.fillType ===\nfillType.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} @if (data.x && data.y) { @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", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: BlockSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-block-series]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe,
-                    ], template: "@if ({\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n}; as data) {\n  @if (series?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient [id]=\"'gradient-fill-' + id\" 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\" 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)\"\n             (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]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\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 x=\"50%\"\n                    [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                    alignment-baseline=\"middle\"\n                    text-anchor=\"middle\">{{ point.text }}\n          </svg:text>\n        }\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\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" }]
+            args: [{ selector: 'svg:svg[teta-block-series]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if ({ y: y | async, x: x | async, points: displayPoints | async }; as data) { @if (series?.fillType ===\nfillType.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} @if (data.x && data.y) { @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" }]
         }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
 
 class BlockAreaSeriesComponent extends SeriesBaseComponent {
@@ -2337,19 +2221,13 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map(_ => _.x.get(this.series.xAxisIndex)?.scale));
-        this.y = this.scaleService.scales.pipe(map(_ => _.y.get(this.series.yAxisIndex)?.scale));
-        this.displayPoints = this.y.pipe(filter(y => y), map(y => {
+        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
+        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
+        this.displayPoints = this.y.pipe(filter((y) => y), map((y) => {
             return this.series.data.filter((point, index, arr) => {
                 const [min, max] = y.domain();
-                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));
+                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));
             });
         }));
     }
@@ -2367,13 +2245,11 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: BlockAreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: BlockAreaSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "@if ({\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n}; 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\" 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)\"\n             (mouseleave)=\"mouseleave(point)\">\n        @if (!!config.inverted) {\n          <svg:rect\n            [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n            [attr.y]=\"data.y(point.y)\"\n            [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n            [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n            [attr.stroke]=\"point.iconId ? '' : point.color ?? series.style?.stroke ?? series.color\"\n            [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n            [attr.stroke-width]=\"series.style?.strokeWidth\"\n            [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n            [attr.fill-opacity]=\"series.style?.fillOpacity\">\n          </svg:rect>\n        } @else {\n          <svg:rect\n            [attr.x]=\"data.x(point.x)\"\n            [attr.y]=\"data.y(0)\"\n            [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n            [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n            [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n            [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n            [attr.stroke-width]=\"series.style?.strokeWidth\"\n            [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n            [attr.fill-opacity]=\"series.style?.fillOpacity\">\n          </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\">{{ 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: "18.2.1", 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) { @if (series?.fillType ===\nfillType.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} @if (data.x && data.y) { @for (point of data.points; track point) {\n<svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n  @if (!!config.inverted) {\n  <svg:rect\n    [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n    [attr.y]=\"data.y(point.y)\"\n    [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n    [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n    [attr.stroke]=\"point.iconId ? '' : point.color ?? series.style?.stroke ?? series.color\"\n    [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n    [attr.stroke-width]=\"series.style?.strokeWidth\"\n    [attr.fill]=\"\n      series.fillType === fillType.gradient\n        ? 'url(#gradient-fill-' + id + ')'\n        : point.iconId\n        ? 'url(#pattern' + point.iconId + ')'\n        : point.color ?? series.style?.fill ?? series.color\n    \"\n    [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  ></svg:rect>\n  } @else {\n  <svg:rect\n    [attr.x]=\"data.x(point.x)\"\n    [attr.y]=\"data.y(0)\"\n    [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n    [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n    [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n    [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n    [attr.stroke-width]=\"series.style?.strokeWidth\"\n    [attr.fill]=\"\n      series.fillType === fillType.gradient\n        ? 'url(#gradient-fill-' + id + ')'\n        : point.iconId\n        ? 'url(#pattern' + point.iconId + ')'\n        : point.color ?? series.color\n    \"\n    [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  ></svg:rect>\n  } @if (point.text) {\n  <svg:text\n    x=\"50%\"\n    fill=\"var(--color-text-50)\"\n    [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n    alignment-baseline=\"middle\"\n    text-anchor=\"middle\"\n  >\n    {{ point.text }}\n  </svg:text>\n  }\n</svg:g>\n} } }\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-block-area-series]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe,
-                    ], template: "@if ({\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n}; 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\" 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)\"\n             (mouseleave)=\"mouseleave(point)\">\n        @if (!!config.inverted) {\n          <svg:rect\n            [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n            [attr.y]=\"data.y(point.y)\"\n            [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n            [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n            [attr.stroke]=\"point.iconId ? '' : point.color ?? series.style?.stroke ?? series.color\"\n            [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n            [attr.stroke-width]=\"series.style?.strokeWidth\"\n            [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n            [attr.fill-opacity]=\"series.style?.fillOpacity\">\n          </svg:rect>\n        } @else {\n          <svg:rect\n            [attr.x]=\"data.x(point.x)\"\n            [attr.y]=\"data.y(0)\"\n            [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n            [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n            [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n            [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n            [attr.stroke-width]=\"series.style?.strokeWidth\"\n            [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n            [attr.fill-opacity]=\"series.style?.fillOpacity\">\n          </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\">{{ point.text }}\n          </svg:text>\n        }\n      </svg:g>\n    }\n  }\n}\n" }]
+            args: [{ selector: 'svg:svg[teta-block-area-series]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if ({ y: y | async, x: x | async, points: displayPoints | async }; as data) { @if (series?.fillType ===\nfillType.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} @if (data.x && data.y) { @for (point of data.points; track point) {\n<svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n  @if (!!config.inverted) {\n  <svg:rect\n    [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n    [attr.y]=\"data.y(point.y)\"\n    [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n    [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n    [attr.stroke]=\"point.iconId ? '' : point.color ?? series.style?.stroke ?? series.color\"\n    [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n    [attr.stroke-width]=\"series.style?.strokeWidth\"\n    [attr.fill]=\"\n      series.fillType === fillType.gradient\n        ? 'url(#gradient-fill-' + id + ')'\n        : point.iconId\n        ? 'url(#pattern' + point.iconId + ')'\n        : point.color ?? series.style?.fill ?? series.color\n    \"\n    [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  ></svg:rect>\n  } @else {\n  <svg:rect\n    [attr.x]=\"data.x(point.x)\"\n    [attr.y]=\"data.y(0)\"\n    [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n    [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n    [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n    [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n    [attr.stroke-width]=\"series.style?.strokeWidth\"\n    [attr.fill]=\"\n      series.fillType === fillType.gradient\n        ? 'url(#gradient-fill-' + id + ')'\n        : point.iconId\n        ? 'url(#pattern' + point.iconId + ')'\n        : point.color ?? series.color\n    \"\n    [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  ></svg:rect>\n  } @if (point.text) {\n  <svg:text\n    x=\"50%\"\n    fill=\"var(--color-text-50)\"\n    [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n    alignment-baseline=\"middle\"\n    text-anchor=\"middle\"\n  >\n    {{ point.text }}\n  </svg:text>\n  }\n</svg:g>\n} } }\n" }]
         }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
 
 class AreaSeriesComponent extends LinearSeriesBase {
@@ -2390,7 +2266,7 @@ class AreaSeriesComponent extends LinearSeriesBase {
     }
     ngOnInit() {
         super.ngOnInit();
-        this.areaPath = this.scaleService.scales.pipe(map(data => {
+        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;
@@ -2399,14 +2275,11 @@ class AreaSeriesComponent extends LinearSeriesBase {
             }
             const area = d3
                 .area()
-                .defined(point => point.x !== null &&
-                point.y !== null &&
-                !isNaN(point.x) &&
-                !isNaN(point.y));
+                .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));
+                .x1((_) => (_.x1 !== null && _.x1 !== undefined ? this.x(_.x1) : this.x(0)))
+                .x0((_) => this.x(_.x))
+                .y((_) => this.y(_.y));
             const filter = this.defaultClipPointsMapping.get(this.series.clipPointsDirection);
             let filteredData = this.series.data;
             if (this.series.clipPointsDirection === ClipPointsDirection.x) {
@@ -2425,11 +2298,11 @@ class AreaSeriesComponent extends LinearSeriesBase {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", 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\" 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\n  class=\"area\"\n  [attr.d]=\"areaPath | async\"\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\">\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\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  @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\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: "18.2.1", 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) { @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} } @if (markers; as draggablePoints) { @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", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AreaSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-area-series]', standalone: true, imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (series?.fillType === fillType.gradient) {\n  <svg:defs>\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" 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\n  class=\"area\"\n  [attr.d]=\"areaPath | async\"\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\">\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\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  @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\n\n\n" }]
+            args: [{ selector: 'svg:svg[teta-area-series]', standalone: true, 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) { @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} } @if (markers; as draggablePoints) { @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" }]
         }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
 
 const defaultSeriesTypeMapping = new Map()
@@ -2447,8 +2320,7 @@ class SeriesHostComponent {
     }
     ngOnInit() {
         if (!SeriesBaseComponent.isPrototypeOf(this.series.component)) {
-            this.series.component =
-                defaultSeriesTypeMapping.get(this.series.type) || LineSeriesComponent;
+            this.series.component = defaultSeriesTypeMapping.get(this.series.type) || LineSeriesComponent;
         }
         this._componentRef = this.viewContainerRef.createComponent(this.series.component);
         this._componentRef.instance.config = this.config;
@@ -2506,15 +2378,9 @@ class PlotlineComponent {
     }
     ngOnInit() {
         this._domain = this.scale.domain();
-        const plotlineElement = d3
-            .select(this.element.nativeElement)
-            .select('.plotline');
-        const grabElement = d3
-            .select(this.element.nativeElement)
-            .selectAll('.grabber');
-        this.dragElements = d3
-            .drag()
-            .subject(() => {
+        const plotlineElement = d3.select(this.element.nativeElement).select('.plotline');
+        const grabElement = d3.select(this.element.nativeElement).selectAll('.grabber');
+        this.dragElements = d3.drag().subject(() => {
             if (this.axis.orientation === AxisOrientation.y) {
                 return { y: plotlineElement.attr('y1') };
             }
@@ -2523,8 +2389,7 @@ class PlotlineComponent {
             }
             return null;
         });
-        const drag = this.dragElements
-            .on('start drag end', (event, d) => {
+        const drag = this.dragElements.on('start drag end', (event, d) => {
             d.value = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
             if (d.max !== null && d.max !== undefined && d.value >= d.max) {
                 d.value = d.max;
@@ -2560,11 +2425,11 @@ class PlotlineComponent {
         return this.size.width;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PlotlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: ScaleService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: PlotlineComponent, isStandalone: true, selector: "[teta-plot-line]", inputs: { plotLine: "plotLine", size: "size", axis: "axis", scale: "scale" }, ngImport: i0, template: "<svg:line class=\"plotline\"\n          [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n\n\n@if (axis.orientation === orientation.x) {\n  <svg:text\n    text-anchor=\"middle\"\n    dominant-baseline=\"central\"\n    class=\"label font-title-2 fill-text-70\"\n    [attr.x]=\"value\"\n    dy=\"-2em\"\n    [attr.transform]=\"'rotate(-90, '+ value +',' + height / 2 + ')'\"\n    [attr.y]=\"height / 2\">{{ plotLine.label }}\n  </svg:text>\n}\n\n@if (axis.orientation === orientation.y) {\n  <svg:text\n    text-anchor=\"middle\"\n    class=\"label font-title-2 fill-text-70\"\n    dominant-baseline=\"central\"\n    [attr.x]=\"value\"\n    [attr.y]=\"width / 2\">{{ plotLine.label }}\n  </svg:text>\n}\n<svg:line class=\"grabber\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: PlotlineComponent, isStandalone: true, selector: "[teta-plot-line]", inputs: { plotLine: "plotLine", size: "size", axis: "axis", scale: "scale" }, ngImport: i0, template: "<svg:line\n  class=\"plotline\"\n  [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n  [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n  [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n  [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : value\"\n></svg:line>\n\n@if (axis.orientation === orientation.x) {\n<svg:text\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-title-2 fill-text-70\"\n  [attr.x]=\"value\"\n  dy=\"-2em\"\n  [attr.transform]=\"'rotate(-90, ' + value + ',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\"\n>\n  {{ plotLine.label }}\n</svg:text>\n} @if (axis.orientation === orientation.y) {\n<svg:text\n  text-anchor=\"middle\"\n  class=\"label font-title-2 fill-text-70\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"value\"\n  [attr.y]=\"width / 2\"\n>\n  {{ plotLine.label }}\n</svg:text>\n}\n<svg:line\n  class=\"grabber\"\n  [class.x-grabber]=\"axis.orientation === orientation.x\"\n  [class.y-grabber]=\"axis.orientation === orientation.y\"\n  [attr.stroke]=\"'red'\"\n  [attr.stroke-width]=\"8\"\n  opacity=\"0\"\n  [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : value\"\n></svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PlotlineComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-plot-line]', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:line class=\"plotline\"\n          [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n\n\n@if (axis.orientation === orientation.x) {\n  <svg:text\n    text-anchor=\"middle\"\n    dominant-baseline=\"central\"\n    class=\"label font-title-2 fill-text-70\"\n    [attr.x]=\"value\"\n    dy=\"-2em\"\n    [attr.transform]=\"'rotate(-90, '+ value +',' + height / 2 + ')'\"\n    [attr.y]=\"height / 2\">{{ plotLine.label }}\n  </svg:text>\n}\n\n@if (axis.orientation === orientation.y) {\n  <svg:text\n    text-anchor=\"middle\"\n    class=\"label font-title-2 fill-text-70\"\n    dominant-baseline=\"central\"\n    [attr.x]=\"value\"\n    [attr.y]=\"width / 2\">{{ plotLine.label }}\n  </svg:text>\n}\n<svg:line class=\"grabber\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"] }]
+            args: [{ selector: '[teta-plot-line]', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:line\n  class=\"plotline\"\n  [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n  [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n  [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n  [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : value\"\n></svg:line>\n\n@if (axis.orientation === orientation.x) {\n<svg:text\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-title-2 fill-text-70\"\n  [attr.x]=\"value\"\n  dy=\"-2em\"\n  [attr.transform]=\"'rotate(-90, ' + value + ',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\"\n>\n  {{ plotLine.label }}\n</svg:text>\n} @if (axis.orientation === orientation.y) {\n<svg:text\n  text-anchor=\"middle\"\n  class=\"label font-title-2 fill-text-70\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"value\"\n  [attr.y]=\"width / 2\"\n>\n  {{ plotLine.label }}\n</svg:text>\n}\n<svg:line\n  class=\"grabber\"\n  [class.x-grabber]=\"axis.orientation === orientation.x\"\n  [class.y-grabber]=\"axis.orientation === orientation.y\"\n  [attr.stroke]=\"'red'\"\n  [attr.stroke-width]=\"8\"\n  opacity=\"0\"\n  [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n  [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n  [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n  [attr.y2]=\"axis.orientation === orientation.x ? height : value\"\n></svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: ScaleService }, { type: ChartService }, { type: i0.ElementRef }], propDecorators: { plotLine: [{
                 type: Input
             }], size: [{
@@ -2601,13 +2466,13 @@ class AnnotationComponent {
     click(event) {
         this.chartService.emitAnnotation({
             event,
-            target: this.annotation
+            target: this.annotation,
         });
     }
     contextMenu(event) {
         this.chartService.emitAnnotation({
             event,
-            target: this.annotation
+            target: this.annotation,
         });
     }
     ngOnDestroy() {
@@ -2624,14 +2489,14 @@ class AnnotationComponent {
                 d.dx += event.dx;
                 d.dy += event.dy;
                 // x constraint
-                if ((d.dx + x(d.point.x) - offsetPx) <= 0) {
+                if (d.dx + x(d.point.x) - offsetPx <= 0) {
                     d.dx = -x(d.point.x) + offsetPx;
                 }
                 if (d.dx + x(d.point.x) + nodeRect.width - offsetPx >= this.visibleRect.width) {
                     d.dx = this.visibleRect.width - x(d.point.x) - nodeRect.width + offsetPx;
                 }
                 // y constraint
-                if ((d.dy + y(d.point.y) - offsetPx) <= 0) {
+                if (d.dy + y(d.point.y) - offsetPx <= 0) {
                     d.dy = -y(d.point.y) + offsetPx;
                 }
                 if (d.dy + y(d.point.y) + nodeRect.height - offsetPx >= this.visibleRect.height) {
@@ -2640,21 +2505,18 @@ class AnnotationComponent {
                 this.cdr.detectChanges();
                 this.chartService.emitMoveAnnotation({
                     event,
-                    target: d
+                    target: d,
                 });
             });
             d3.select(this.node.nativeElement).call(this.drag);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AnnotationComponent, deps: [{ token: ScaleService }, { token: i0.ChangeDetectorRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: AnnotationComponent, isStandalone: true, selector: "[teta-annotation]", inputs: { visibleRect: "visibleRect", annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "@if ({\n  x: x | async,\n  y: y | async\n}; as data) {\n  @if (data.x && data.y) {\n    <svg:circle\n      [attr.r]=\"annotation.style?.radius ?? 5\"\n      [attr.cx]=\"data.x(annotation.point.x)\"\n      [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n      [attr.cy]=\"data.y(annotation.point.y)\">\n    </svg:circle>\n    <svg:line\n      [attr.x1]=\"data.x(annotation.point.x)\"\n      [attr.y1]=\"data.y(annotation.point.y)\"\n      [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n      [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n      [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n      [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n      [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n    >\n    </svg:line>\n    <svg:foreignObject\n      class=\"position-absolute\"\n      [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n      [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n      [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n      [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n      <div\n        #annotationNode\n        [style.background-color]=\"annotation.style?.fill ?? 'var(--color-global-bgmain)'\"\n        [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n        [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n        style=\"border-radius: 2px; display: inline-block;\">\n        @if (annotation.template) {\n          <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n        } @else {\n          {{ annotation.note?.label }}\n        }\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: AnnotationComponent, isStandalone: true, selector: "[teta-annotation]", inputs: { visibleRect: "visibleRect", annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "@if ({ x: x | async, y: y | async }; as data) { @if (data.x && data.y) {\n<svg:circle\n  [attr.r]=\"annotation.style?.radius ?? 5\"\n  [attr.cx]=\"data.x(annotation.point.x)\"\n  [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n  [attr.cy]=\"data.y(annotation.point.y)\"\n></svg:circle>\n<svg:line\n  [attr.x1]=\"data.x(annotation.point.x)\"\n  [attr.y1]=\"data.y(annotation.point.y)\"\n  [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n  [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n  [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n  [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n  [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n></svg:line>\n<svg:foreignObject\n  class=\"position-absolute\"\n  [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n  [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n  [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n  [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\"\n>\n  <div\n    #annotationNode\n    [style.background-color]=\"annotation.style?.fill ?? 'var(--color-global-bgmain)'\"\n    [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n    [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n    style=\"border-radius: 2px; display: inline-block\"\n  >\n    @if (annotation.template) {\n    <ng-container *ngTemplateOutlet=\"annotation.template; context: { $implicit: annotation }\"></ng-container>\n    } @else {\n    {{ annotation.note?.label }}\n    }\n  </div>\n</svg:foreignObject>\n} }\n", styles: [""], 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: "18.2.1", ngImport: i0, type: AnnotationComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-annotation]', standalone: true, imports: [
-                        NgTemplateOutlet,
-                        AsyncPipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({\n  x: x | async,\n  y: y | async\n}; as data) {\n  @if (data.x && data.y) {\n    <svg:circle\n      [attr.r]=\"annotation.style?.radius ?? 5\"\n      [attr.cx]=\"data.x(annotation.point.x)\"\n      [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n      [attr.cy]=\"data.y(annotation.point.y)\">\n    </svg:circle>\n    <svg:line\n      [attr.x1]=\"data.x(annotation.point.x)\"\n      [attr.y1]=\"data.y(annotation.point.y)\"\n      [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n      [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n      [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n      [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n      [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n    >\n    </svg:line>\n    <svg:foreignObject\n      class=\"position-absolute\"\n      [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n      [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n      [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n      [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n      <div\n        #annotationNode\n        [style.background-color]=\"annotation.style?.fill ?? 'var(--color-global-bgmain)'\"\n        [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n        [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n        style=\"border-radius: 2px; display: inline-block;\">\n        @if (annotation.template) {\n          <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n        } @else {\n          {{ annotation.note?.label }}\n        }\n      </div>\n    </svg:foreignObject>\n  }\n}\n" }]
+            args: [{ selector: '[teta-annotation]', standalone: true, imports: [NgTemplateOutlet, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ x: x | async, y: y | async }; as data) { @if (data.x && data.y) {\n<svg:circle\n  [attr.r]=\"annotation.style?.radius ?? 5\"\n  [attr.cx]=\"data.x(annotation.point.x)\"\n  [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n  [attr.cy]=\"data.y(annotation.point.y)\"\n></svg:circle>\n<svg:line\n  [attr.x1]=\"data.x(annotation.point.x)\"\n  [attr.y1]=\"data.y(annotation.point.y)\"\n  [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n  [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n  [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n  [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n  [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n></svg:line>\n<svg:foreignObject\n  class=\"position-absolute\"\n  [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n  [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n  [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n  [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\"\n>\n  <div\n    #annotationNode\n    [style.background-color]=\"annotation.style?.fill ?? 'var(--color-global-bgmain)'\"\n    [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n    [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n    style=\"border-radius: 2px; display: inline-block\"\n  >\n    @if (annotation.template) {\n    <ng-container *ngTemplateOutlet=\"annotation.template; context: { $implicit: annotation }\"></ng-container>\n    } @else {\n    {{ annotation.note?.label }}\n    }\n  </div>\n</svg:foreignObject>\n} }\n" }]
         }], ctorParameters: () => [{ type: ScaleService }, { type: i0.ChangeDetectorRef }, { type: ChartService }], propDecorators: { visibleRect: [{
                 type: Input
             }], annotation: [{
@@ -2680,7 +2542,7 @@ class CrosshairComponent {
         this.transform = this.chartService.pointerMove.pipe(map((event) => {
             return {
                 x: event.type === 'mouseleave' ? -9999 : event.offsetX,
-                y: event.type === 'mouseleave' ? -9999 : event.offsetY
+                y: event.type === 'mouseleave' ? -9999 : event.offsetY,
             };
         }), tap(() => {
             setTimeout(() => {
@@ -2689,13 +2551,11 @@ class CrosshairComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: CrosshairComponent, deps: [{ token: ScaleService }, { token: ChartService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: CrosshairComponent, isStandalone: true, selector: "[teta-crosshair]", inputs: { size: "size" }, ngImport: i0, template: "@if (transform | async; as t) {\n  <svg:line [attr.x1]=\"t.x\" y1=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"size.height\" stroke=\"var(--color-text-90)\"\n            stroke-width=\"0.5\"></svg:line>\n  <svg:line x1=\"0\" [attr.y1]=\"t.y\" [attr.x2]=\"size.width\" [attr.y2]=\"t.y\" stroke=\"var(--color-text-90)\"\n            stroke-width=\"0.5\"></svg:line>\n}\n", styles: [":host{shape-rendering:crispEdges;pointer-events:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: CrosshairComponent, isStandalone: true, selector: "[teta-crosshair]", inputs: { size: "size" }, ngImport: i0, template: "@if (transform | async; as t) {\n<svg:line\n  [attr.x1]=\"t.x\"\n  y1=\"0\"\n  [attr.x2]=\"t.x\"\n  [attr.y2]=\"size.height\"\n  stroke=\"var(--color-text-90)\"\n  stroke-width=\"0.5\"\n></svg:line>\n<svg:line\n  x1=\"0\"\n  [attr.y1]=\"t.y\"\n  [attr.x2]=\"size.width\"\n  [attr.y2]=\"t.y\"\n  stroke=\"var(--color-text-90)\"\n  stroke-width=\"0.5\"\n></svg:line>\n}\n", styles: [":host{shape-rendering:crispEdges;pointer-events:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: CrosshairComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-crosshair]', standalone: true, imports: [
-                        AsyncPipe,
-                    ], template: "@if (transform | async; as t) {\n  <svg:line [attr.x1]=\"t.x\" y1=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"size.height\" stroke=\"var(--color-text-90)\"\n            stroke-width=\"0.5\"></svg:line>\n  <svg:line x1=\"0\" [attr.y1]=\"t.y\" [attr.x2]=\"size.width\" [attr.y2]=\"t.y\" stroke=\"var(--color-text-90)\"\n            stroke-width=\"0.5\"></svg:line>\n}\n", styles: [":host{shape-rendering:crispEdges;pointer-events:none}\n"] }]
+            args: [{ selector: '[teta-crosshair]', standalone: true, imports: [AsyncPipe], template: "@if (transform | async; as t) {\n<svg:line\n  [attr.x1]=\"t.x\"\n  y1=\"0\"\n  [attr.x2]=\"t.x\"\n  [attr.y2]=\"size.height\"\n  stroke=\"var(--color-text-90)\"\n  stroke-width=\"0.5\"\n></svg:line>\n<svg:line\n  x1=\"0\"\n  [attr.y1]=\"t.y\"\n  [attr.x2]=\"size.width\"\n  [attr.y2]=\"t.y\"\n  stroke=\"var(--color-text-90)\"\n  stroke-width=\"0.5\"\n></svg:line>\n}\n", styles: [":host{shape-rendering:crispEdges;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: ScaleService }, { type: ChartService }, { type: i0.ChangeDetectorRef }], propDecorators: { size: [{
                 type: Input
             }] } });
@@ -2713,11 +2573,10 @@ class BrushableDirective {
         this._container = d3.select(this.element.nativeElement);
     }
     ngOnInit() {
-        this.brushService.brushDomain.pipe(takeWhile(() => this._alive), filter((brush) => brush.chartId !== this.config.id)).subscribe((brush) => {
-            this._container.call(this.brush.move, [
-                Math.floor(brush.selection[0]),
-                Math.floor(brush.selection[1]),
-            ].map(this.axis.scale));
+        this.brushService.brushDomain
+            .pipe(takeWhile(() => this._alive), filter((brush) => brush.chartId !== this.config.id))
+            .subscribe((brush) => {
+            this._container.call(this.brush.move, [Math.floor(brush.selection[0]), Math.floor(brush.selection[1])].map(this.axis.scale));
         });
     }
     ngOnDestroy() {
@@ -2728,7 +2587,7 @@ class BrushableDirective {
             const brushMessage = new BrushMessage({
                 chartId: this.config.id,
                 selection: [this.config?.brush?.from, this.config?.brush?.to],
-                mode: 'init'
+                mode: 'init',
             });
             this.brushService.setBrush(brushMessage);
         }
@@ -2751,52 +2610,29 @@ class BrushableDirective {
                         return;
                     const [from, to] = _.selection;
                     if (to - from === 0) {
-                        const selection = this.selection?.map(brushScale) ??
-                            [config.brush?.from, config.brush?.to].map(brushScale);
+                        const selection = this.selection?.map(brushScale) ?? [config.brush?.from, config.brush?.to].map(brushScale);
                         const halfBrushHeight = (selection[1] - selection[0]) / 2;
-                        const invertedSelection = [
-                            from - halfBrushHeight,
-                            to + halfBrushHeight,
-                        ].map(brushScale.invert);
-                        if (invertedSelection[1] - invertedSelection[0] >
-                            config.brush?.max) {
-                            this._container.call(this.brush.move, [
-                                Math.floor(invertedSelection[0]),
-                                Math.floor(invertedSelection[0] + config.brush?.max),
-                            ].map(brushScale));
+                        const invertedSelection = [from - halfBrushHeight, to + halfBrushHeight].map(brushScale.invert);
+                        if (invertedSelection[1] - invertedSelection[0] > config.brush?.max) {
+                            this._container.call(this.brush.move, [Math.floor(invertedSelection[0]), Math.floor(invertedSelection[0] + config.brush?.max)].map(brushScale));
                             return;
                         }
-                        if (invertedSelection[1] - invertedSelection[0] <
-                            config.brush?.min) {
-                            this._container.call(this.brush.move, [
-                                Math.floor(invertedSelection[0]),
-                                Math.ceil(invertedSelection[0] + config.brush?.min),
-                            ].map(brushScale));
+                        if (invertedSelection[1] - invertedSelection[0] < config.brush?.min) {
+                            this._container.call(this.brush.move, [Math.floor(invertedSelection[0]), Math.ceil(invertedSelection[0] + config.brush?.min)].map(brushScale));
                             return;
                         }
-                        this._container.call(this.brush.move, [
-                            from - halfBrushHeight,
-                            to + halfBrushHeight,
-                        ]);
+                        this._container.call(this.brush.move, [from - halfBrushHeight, to + halfBrushHeight]);
                         return;
                     }
-                    if (brushScale.invert(to) - brushScale.invert(from) >
-                        config.brush?.max) {
+                    if (brushScale.invert(to) - brushScale.invert(from) > config.brush?.max) {
                         this._container.call(this.brush.move, this.selection
-                            ? [
-                                this.selection[0],
-                                this.selection[0] + config.brush?.max,
-                            ].map(brushScale)
+                            ? [this.selection[0], this.selection[0] + config.brush?.max].map(brushScale)
                             : [config.brush?.from, config.brush?.to].map(brushScale));
                         return;
                     }
-                    if (brushScale.invert(to) - brushScale.invert(from) <
-                        config.brush?.min) {
+                    if (brushScale.invert(to) - brushScale.invert(from) < config.brush?.min) {
                         this._container.call(this.brush.move, this.selection
-                            ? [
-                                this.selection[0],
-                                this.selection[0] + config.brush?.min,
-                            ].map(brushScale)
+                            ? [this.selection[0], this.selection[0] + config.brush?.min].map(brushScale)
                             : [config.brush?.from, config.brush?.to].map(brushScale));
                         return;
                     }
@@ -2806,7 +2642,7 @@ class BrushableDirective {
                     const brushMessage = new BrushMessage({
                         chartId: this.config.id,
                         selection: [brushScale.invert(from), brushScale.invert(to)],
-                        mode: _.mode
+                        mode: _.mode,
                     });
                     this.brushService.setBrush(brushMessage);
                 }
@@ -2821,9 +2657,7 @@ class BrushableDirective {
                     if (config?.brush?.to) {
                         domain[1] = config.brush.to;
                     }
-                    this._container.call(this.brush.move, this.selection
-                        ? this.selection.map(brushScale)
-                        : domain.map(brushScale), {});
+                    this._container.call(this.brush.move, this.selection ? this.selection.map(brushScale) : domain.map(brushScale), {});
                 }, 0);
             });
         }
@@ -2838,7 +2672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
             type: Directive,
             args: [{
                     selector: '[tetaBrushable]',
-                    standalone: true
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: BrushService }, { type: ChartService }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { config: [{
                 type: Input
@@ -2847,14 +2681,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
             }] } });
 
 function tetaZoneFull(ngZone) {
-    return source => new Observable(subscriber => source.subscribe({
-        next: value => ngZone.run(() => subscriber.next(value)),
+    return (source) => new Observable((subscriber) => source.subscribe({
+        next: (value) => ngZone.run(() => subscriber.next(value)),
         error: (error) => ngZone.run(() => subscriber.error(error)),
         complete: () => ngZone.run(() => subscriber.complete()),
     }));
 }
 function tetaZoneFree(ngZone) {
-    return source => new Observable(subscriber => ngZone.runOutsideAngular(() => source.subscribe(subscriber)));
+    return (source) => new Observable((subscriber) => ngZone.runOutsideAngular(() => source.subscribe(subscriber)));
 }
 function tetaZoneOptimized(ngZone) {
     return pipe(tetaZoneFree(ngZone), tetaZoneFull(ngZone));
@@ -2868,10 +2702,8 @@ class ChartContainerComponent {
         this._zone = _zone;
         this.zoomType = ZoomType;
         this.filterPositionMap = new Map()
-            .set(true, axis => (_) => _.options.opposite && _.options.visible && axis.index <= _.index)
-            .set(false, axis => (_) => _.options.opposite !== true &&
-            _.options.visible &&
-            _.index <= axis.index);
+            .set(true, (axis) => (_) => _.options.opposite && _.options.visible && axis.index <= _.index)
+            .set(false, (axis) => (_) => _.options.opposite !== true && _.options.visible && _.index <= axis.index);
         this.sumSize = (acc, curr) => acc + curr.selfSize;
         this.config = this._svc.config;
         this.size = this._svc.size;
@@ -2882,7 +2714,7 @@ class ChartContainerComponent {
         this.plotBands = combineLatest([this.config, this.scales]).pipe(map(([config, scales]) => {
             const bands = [];
             config.xAxis?.forEach((axis, index) => {
-                axis.plotBands?.forEach(band => {
+                axis.plotBands?.forEach((band) => {
                     bands.push({
                         plotBand: band,
                         axis: scales.x.get(index),
@@ -2890,7 +2722,7 @@ class ChartContainerComponent {
                 });
             });
             config.yAxis?.forEach((axis, index) => {
-                axis.plotBands?.forEach(band => {
+                axis.plotBands?.forEach((band) => {
                     bands.push({
                         plotBand: band,
                         axis: scales.y.get(index),
@@ -2901,47 +2733,28 @@ class ChartContainerComponent {
         }));
         this.brushScale = this._scaleService.scales.pipe(withLatestFrom(this.config), map((data) => {
             const [{ x, y }, config] = data;
-            return config.brush?.type === BrushType.x ||
-                config?.zoom?.type === ZoomType.x
+            return config.brush?.type === BrushType.x || config?.zoom?.type === ZoomType.x
                 ? x.get(0)?.scale
                 : y.get(0)?.scale;
         }), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
-        this.visibleRect = combineLatest([
-            this.size,
-            this.scales,
-            this.config,
-        ]).pipe(map((data) => {
+        this.visibleRect = combineLatest([this.size, this.scales, this.config]).pipe(map((data) => {
             const [size, { x, y }, config] = data;
             const yAxesArray = Array.from(y.values());
             const xAxesArray = Array.from(x.values());
-            const left = yAxesArray
-                .filter(_ => _.options.opposite !== true && _.options.visible)
-                .reduce(this.sumSize, 0);
-            const right = yAxesArray
-                .filter(_ => _.options.opposite && _.options.visible)
-                .reduce(this.sumSize, 0);
+            const left = yAxesArray.filter((_) => _.options.opposite !== true && _.options.visible).reduce(this.sumSize, 0);
+            const right = yAxesArray.filter((_) => _.options.opposite && _.options.visible).reduce(this.sumSize, 0);
             const bottom = xAxesArray
-                .filter(_ => _.options.opposite !== true && _.options.visible)
-                .reduce(this.sumSize, 0);
-            const top = xAxesArray
-                .filter(_ => _.options.opposite && _.options.visible)
+                .filter((_) => _.options.opposite !== true && _.options.visible)
                 .reduce(this.sumSize, 0);
+            const top = xAxesArray.filter((_) => _.options.opposite && _.options.visible).reduce(this.sumSize, 0);
             return {
                 x: left + config.bounds?.left,
                 y: top + config.bounds?.top,
-                width: size.width -
-                    left -
-                    right -
-                    config.bounds?.left -
-                    config.bounds?.right,
-                height: size.height -
-                    top -
-                    bottom -
-                    config.bounds?.top -
-                    config.bounds?.bottom,
+                width: size.width - left - right - config.bounds?.left - config.bounds?.right,
+                height: size.height - top - bottom - config.bounds?.top - config.bounds?.bottom,
             };
         }), tetaZoneFull(this._zone), shareReplay({
             bufferSize: 1,
@@ -2982,20 +2795,16 @@ class ChartContainerComponent {
             const oppositeTranslateX = oppositeOffsetX.reduce((acc, curr) => acc + curr.selfSize, config.bounds?.top);
             const nonOppisteTranslateX = nonOppositeOffsetX.reduce((acc, curr) => acc + curr.selfSize, config.bounds?.bottom);
             const left = yAxesArray
-                .filter(_ => _.options.visible && _.options.opposite !== true)
+                .filter((_) => _.options.visible && _.options.opposite !== true)
                 .reduce((acc, curr) => acc + curr.selfSize, config.bounds?.left);
             const top = xAxesArray
-                .filter(_ => _.options.visible && _.options.opposite === true)
+                .filter((_) => _.options.visible && _.options.opposite === true)
                 .reduce((acc, curr) => acc + curr.selfSize, config.bounds?.top);
             if (axis.orientation === AxisOrientation.x) {
-                return `translate(${left}, ${axis.options.opposite
-                    ? oppositeTranslateX
-                    : size.height - nonOppisteTranslateX})`;
+                return `translate(${left}, ${axis.options.opposite ? oppositeTranslateX : size.height - nonOppisteTranslateX})`;
             }
             if (axis.orientation === AxisOrientation.y) {
-                return `translate(${axis.options.opposite
-                    ? size.width - oppositeTranslateY
-                    : nonOppisteTranslateY}, ${top})`;
+                return `translate(${axis.options.opposite ? size.width - oppositeTranslateY : nonOppisteTranslateY}, ${top})`;
             }
             return 'translate(0, 0)';
         }));
@@ -3032,7 +2841,7 @@ class ChartContainerComponent {
         return item.name?.length ? item.name : index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: ScaleService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: ChartContainerComponent, isStandalone: true, selector: "teta-chart-container", ngImport: i0, template: "@if ({\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  plotBands: plotBands | async,\n  visibleRect: visibleRect | async\n}; as data) {\n  @if (data.config?.tooltip?.enable) {\n    <teta-tooltip [size]=\"data.size\"\n                  [config]=\"data.config\"></teta-tooltip>\n  }\n  @if (data.size?.height > 0\n  && data.size?.width > 0\n  && data.visibleRect?.height > 0\n  && data.visibleRect?.width > 0\n  && data.scales?.x.size === data.config.xAxis.length\n  && data.scales?.y.size === data.config.yAxis.length) {\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        @for (item of data.scales.y | keyvalue; track item.value.index) {\n          @if (item.value.selfSize > 0\n          && item.value.options.visible\n          && data.scales.x.size > 0\n          && data.scales.y.size > 0) {\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n      <g class=\"x-axis-container\">\n        @for (item of data.scales.x | keyvalue; track item.value.index) {\n          @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n    </svg>\n  }\n  @if (data.size?.height > 0\n  && data.size?.width > 0\n  && data.visibleRect?.height > 0\n  && data.visibleRect?.width > 0\n  && data.scales?.x.size === data.config.xAxis.length\n  && data.scales?.y.size === data.config.yAxis.length) {\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      @if (data.config.gridLines?.enable !== false) {\n        <g class=\"gridlines\"\n           teta-gridlines\n           [size]=\"data.size\"></g>\n      }\n      <g class=\"x-axis-plotband-container\">\n        @for (plotBand of data.plotBands; track plotBand) {\n          <g teta-plot-band\n             [plotBand]=\"plotBand.plotBand\"\n             [scale]=\"plotBand.axis.scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"plotBand.axis\"></g>\n        }\n      </g>\n      <g class=\"series-container\">\n        @for (series of data.config.series; track series; ) {\n          @if (series.visible) {\n            <g teta-series-host\n               [config]=\"data.config\"\n               [series]=\"series\"></g>\n          }\n        }\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        @for (axis of data.config.xAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track plotLine) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.x.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.x.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        @for (axis of data.config.yAxis; let i = $index; track axis; ) {\n          @for (plotLine of axis.plotLines; track plotLine) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.y.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.y.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"annotations\">\n        @for (annotation of data.config.annotations; track annotation) {\n          <g teta-annotation\n             [visibleRect]=\"data.visibleRect\"\n             [annotation]=\"annotation\"></g>\n        }\n      </g>\n      @if (data.config.tooltip?.showCrosshair) {\n        <g class=\"crosshair\">\n          <g teta-crosshair [size]=\"data.visibleRect\"></g>\n        </g>\n      }\n    </svg>\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["visibleRect", "annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "axis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: ChartContainerComponent, isStandalone: true, selector: "teta-chart-container", ngImport: i0, template: "@if ({ size: size | async, config: config | async, scales: scales | async, plotBands: plotBands | async, visibleRect:\nvisibleRect | async }; as data) { @if (data.config?.tooltip?.enable) {\n<teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n} @if (data.size?.height > 0 && data.size?.width > 0 && data.visibleRect?.height > 0 && data.visibleRect?.width > 0 &&\ndata.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length) {\n<svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n  <g class=\"y-axis-container\">\n    @for (item of data.scales.y | keyvalue; track item.value.index) { @if (item.value.selfSize > 0 &&\n    item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n    <g\n      teta-y-axis\n      [axis]=\"item.value\"\n      [size]=\"data.visibleRect\"\n      [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n    ></g>\n    <rect\n      tetaZoomable\n      fill-opacity=\"0\"\n      [axis]=\"item.value\"\n      [config]=\"data.config\"\n      [size]=\"data.visibleRect\"\n      [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n      [attr.y]=\"0\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.width]=\"item.value.selfSize\"\n      [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n    ></rect>\n    } }\n  </g>\n  <g class=\"x-axis-container\">\n    @for (item of data.scales.x | keyvalue; track item.value.index) { @if (item.value.options.visible &&\n    data.scales.x.size > 0 && data.scales.y.size > 0) {\n    <g\n      teta-x-axis\n      [axis]=\"item.value\"\n      [size]=\"data.visibleRect\"\n      [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n    ></g>\n    <rect\n      tetaZoomable\n      fill-opacity=\"0\"\n      [axis]=\"item.value\"\n      [config]=\"data.config\"\n      [size]=\"data.visibleRect\"\n      [attr.x]=\"0\"\n      [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"item.value.selfSize\"\n      [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n    ></rect>\n    } }\n  </g>\n</svg>\n} @if (data.size?.height > 0 && data.size?.width > 0 && data.visibleRect?.height > 0 && data.visibleRect?.width > 0 &&\ndata.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length) {\n<svg\n  tetaZoomable\n  tetaBrushable\n  class=\"position-absolute\"\n  [size]=\"data.visibleRect\"\n  [config]=\"data.config\"\n  [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n  [attr.width]=\"data.visibleRect.width\"\n  [attr.height]=\"data.visibleRect.height\"\n  [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n  [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n  (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n  (click)=\"click($event, data.scales.x, data.scales.y)\"\n  (mouseleave)=\"mouseLeave($event)\"\n  (mousemove)=\"mouseMove($event)\"\n>\n  @if (data.config.gridLines?.enable !== false) {\n  <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n  }\n  <g class=\"x-axis-plotband-container\">\n    @for (plotBand of data.plotBands; track plotBand) {\n    <g\n      teta-plot-band\n      [plotBand]=\"plotBand.plotBand\"\n      [scale]=\"plotBand.axis.scale\"\n      [size]=\"data.visibleRect\"\n      [axis]=\"plotBand.axis\"\n    ></g>\n    }\n  </g>\n  <g class=\"series-container\">\n    @for (series of data.config.series; track series; ) { @if (series.visible) {\n    <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n    } }\n  </g>\n  <g class=\"x-axis-plotline-container\">\n    @for (axis of data.config.xAxis; let i = $index; track axis) { @for (plotLine of axis.plotLines; track plotLine) {\n    <g\n      teta-plot-line\n      [plotLine]=\"plotLine\"\n      [scale]=\"data.scales.x.get(i).scale\"\n      [size]=\"data.size\"\n      [axis]=\"data.scales.x.get(i)\"\n    ></g>\n    } }\n  </g>\n  <g class=\"y-axis-plotline-container\">\n    @for (axis of data.config.yAxis; let i = $index; track axis; ) { @for (plotLine of axis.plotLines; track plotLine) {\n    <g\n      teta-plot-line\n      [plotLine]=\"plotLine\"\n      [scale]=\"data.scales.y.get(i).scale\"\n      [size]=\"data.size\"\n      [axis]=\"data.scales.y.get(i)\"\n    ></g>\n    } }\n  </g>\n  <g class=\"annotations\">\n    @for (annotation of data.config.annotations; track annotation) {\n    <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n    }\n  </g>\n  @if (data.config.tooltip?.showCrosshair) {\n  <g class=\"crosshair\">\n    <g teta-crosshair [size]=\"data.visibleRect\"></g>\n  </g>\n  }\n</svg>\n} }\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["visibleRect", "annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "axis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ChartContainerComponent, decorators: [{
             type: Component,
@@ -3050,7 +2859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                         AnnotationComponent,
                         CrosshairComponent,
                         BrushableDirective,
-                    ], template: "@if ({\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  plotBands: plotBands | async,\n  visibleRect: visibleRect | async\n}; as data) {\n  @if (data.config?.tooltip?.enable) {\n    <teta-tooltip [size]=\"data.size\"\n                  [config]=\"data.config\"></teta-tooltip>\n  }\n  @if (data.size?.height > 0\n  && data.size?.width > 0\n  && data.visibleRect?.height > 0\n  && data.visibleRect?.width > 0\n  && data.scales?.x.size === data.config.xAxis.length\n  && data.scales?.y.size === data.config.yAxis.length) {\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        @for (item of data.scales.y | keyvalue; track item.value.index) {\n          @if (item.value.selfSize > 0\n          && item.value.options.visible\n          && data.scales.x.size > 0\n          && data.scales.y.size > 0) {\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n      <g class=\"x-axis-container\">\n        @for (item of data.scales.x | keyvalue; track item.value.index) {\n          @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n    </svg>\n  }\n  @if (data.size?.height > 0\n  && data.size?.width > 0\n  && data.visibleRect?.height > 0\n  && data.visibleRect?.width > 0\n  && data.scales?.x.size === data.config.xAxis.length\n  && data.scales?.y.size === data.config.yAxis.length) {\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      @if (data.config.gridLines?.enable !== false) {\n        <g class=\"gridlines\"\n           teta-gridlines\n           [size]=\"data.size\"></g>\n      }\n      <g class=\"x-axis-plotband-container\">\n        @for (plotBand of data.plotBands; track plotBand) {\n          <g teta-plot-band\n             [plotBand]=\"plotBand.plotBand\"\n             [scale]=\"plotBand.axis.scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"plotBand.axis\"></g>\n        }\n      </g>\n      <g class=\"series-container\">\n        @for (series of data.config.series; track series; ) {\n          @if (series.visible) {\n            <g teta-series-host\n               [config]=\"data.config\"\n               [series]=\"series\"></g>\n          }\n        }\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        @for (axis of data.config.xAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track plotLine) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.x.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.x.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        @for (axis of data.config.yAxis; let i = $index; track axis; ) {\n          @for (plotLine of axis.plotLines; track plotLine) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.y.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.y.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"annotations\">\n        @for (annotation of data.config.annotations; track annotation) {\n          <g teta-annotation\n             [visibleRect]=\"data.visibleRect\"\n             [annotation]=\"annotation\"></g>\n        }\n      </g>\n      @if (data.config.tooltip?.showCrosshair) {\n        <g class=\"crosshair\">\n          <g teta-crosshair [size]=\"data.visibleRect\"></g>\n        </g>\n      }\n    </svg>\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
+                    ], template: "@if ({ size: size | async, config: config | async, scales: scales | async, plotBands: plotBands | async, visibleRect:\nvisibleRect | async }; as data) { @if (data.config?.tooltip?.enable) {\n<teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n} @if (data.size?.height > 0 && data.size?.width > 0 && data.visibleRect?.height > 0 && data.visibleRect?.width > 0 &&\ndata.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length) {\n<svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n  <g class=\"y-axis-container\">\n    @for (item of data.scales.y | keyvalue; track item.value.index) { @if (item.value.selfSize > 0 &&\n    item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n    <g\n      teta-y-axis\n      [axis]=\"item.value\"\n      [size]=\"data.visibleRect\"\n      [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n    ></g>\n    <rect\n      tetaZoomable\n      fill-opacity=\"0\"\n      [axis]=\"item.value\"\n      [config]=\"data.config\"\n      [size]=\"data.visibleRect\"\n      [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n      [attr.y]=\"0\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.width]=\"item.value.selfSize\"\n      [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n    ></rect>\n    } }\n  </g>\n  <g class=\"x-axis-container\">\n    @for (item of data.scales.x | keyvalue; track item.value.index) { @if (item.value.options.visible &&\n    data.scales.x.size > 0 && data.scales.y.size > 0) {\n    <g\n      teta-x-axis\n      [axis]=\"item.value\"\n      [size]=\"data.visibleRect\"\n      [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n    ></g>\n    <rect\n      tetaZoomable\n      fill-opacity=\"0\"\n      [axis]=\"item.value\"\n      [config]=\"data.config\"\n      [size]=\"data.visibleRect\"\n      [attr.x]=\"0\"\n      [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"item.value.selfSize\"\n      [attr.transform]=\"getTranslate(item.value, data.size) | async\"\n    ></rect>\n    } }\n  </g>\n</svg>\n} @if (data.size?.height > 0 && data.size?.width > 0 && data.visibleRect?.height > 0 && data.visibleRect?.width > 0 &&\ndata.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length) {\n<svg\n  tetaZoomable\n  tetaBrushable\n  class=\"position-absolute\"\n  [size]=\"data.visibleRect\"\n  [config]=\"data.config\"\n  [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n  [attr.width]=\"data.visibleRect.width\"\n  [attr.height]=\"data.visibleRect.height\"\n  [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n  [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n  (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n  (click)=\"click($event, data.scales.x, data.scales.y)\"\n  (mouseleave)=\"mouseLeave($event)\"\n  (mousemove)=\"mouseMove($event)\"\n>\n  @if (data.config.gridLines?.enable !== false) {\n  <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n  }\n  <g class=\"x-axis-plotband-container\">\n    @for (plotBand of data.plotBands; track plotBand) {\n    <g\n      teta-plot-band\n      [plotBand]=\"plotBand.plotBand\"\n      [scale]=\"plotBand.axis.scale\"\n      [size]=\"data.visibleRect\"\n      [axis]=\"plotBand.axis\"\n    ></g>\n    }\n  </g>\n  <g class=\"series-container\">\n    @for (series of data.config.series; track series; ) { @if (series.visible) {\n    <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n    } }\n  </g>\n  <g class=\"x-axis-plotline-container\">\n    @for (axis of data.config.xAxis; let i = $index; track axis) { @for (plotLine of axis.plotLines; track plotLine) {\n    <g\n      teta-plot-line\n      [plotLine]=\"plotLine\"\n      [scale]=\"data.scales.x.get(i).scale\"\n      [size]=\"data.size\"\n      [axis]=\"data.scales.x.get(i)\"\n    ></g>\n    } }\n  </g>\n  <g class=\"y-axis-plotline-container\">\n    @for (axis of data.config.yAxis; let i = $index; track axis; ) { @for (plotLine of axis.plotLines; track plotLine) {\n    <g\n      teta-plot-line\n      [plotLine]=\"plotLine\"\n      [scale]=\"data.scales.y.get(i).scale\"\n      [size]=\"data.size\"\n      [axis]=\"data.scales.y.get(i)\"\n    ></g>\n    } }\n  </g>\n  <g class=\"annotations\">\n    @for (annotation of data.config.annotations; track annotation) {\n    <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n    }\n  </g>\n  @if (data.config.tooltip?.showCrosshair) {\n  <g class=\"crosshair\">\n    <g teta-crosshair [size]=\"data.visibleRect\"></g>\n  </g>\n  }\n</svg>\n} }\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
         }], ctorParameters: () => [{ type: ChartService }, { type: ScaleService }, { type: i0.ElementRef }, { type: i0.NgZone }] });
 
 class LegendComponent {
@@ -3072,11 +2881,11 @@ class LegendComponent {
         this.chartService.toggleVisibilitySeries([serie.id]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LegendComponent, deps: [{ token: ChartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: LegendComponent, isStandalone: true, selector: "teta-legend", inputs: { series: "series" }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "@for (serie of series; track serie.id) {\n  @if (serie?.showInLegend !== false) {\n    <div>\n      <div class=\"legend-item cursor-pointer\"\n           (click)=\"click(serie)\">\n        <div class=\"legend-icon-form\"\n             [style.height.px]=\"getHeight(serie)\"\n             [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n             [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n             [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"></div>\n        <div class=\"legend-label\" style=\"user-select: none\"\n             [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}\n        </div>\n      </div>\n    </div>\n  }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: LegendComponent, isStandalone: true, selector: "teta-legend", inputs: { series: "series" }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "@for (serie of series; track serie.id) { @if (serie?.showInLegend !== false) {\n<div>\n  <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n    <div\n      class=\"legend-icon-form\"\n      [style.height.px]=\"getHeight(serie)\"\n      [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n      [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n      [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"\n    ></div>\n    <div\n      class=\"legend-label\"\n      style=\"user-select: none\"\n      [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\"\n    >\n      {{ serie.name }}\n    </div>\n  </div>\n</div>\n} }\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LegendComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-legend', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (serie of series; track serie.id) {\n  @if (serie?.showInLegend !== false) {\n    <div>\n      <div class=\"legend-item cursor-pointer\"\n           (click)=\"click(serie)\">\n        <div class=\"legend-icon-form\"\n             [style.height.px]=\"getHeight(serie)\"\n             [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n             [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n             [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"></div>\n        <div class=\"legend-label\" style=\"user-select: none\"\n             [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}\n        </div>\n      </div>\n    </div>\n  }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"] }]
+            args: [{ selector: 'teta-legend', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (serie of series; track serie.id) { @if (serie?.showInLegend !== false) {\n<div>\n  <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n    <div\n      class=\"legend-icon-form\"\n      [style.height.px]=\"getHeight(serie)\"\n      [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n      [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n      [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"\n    ></div>\n    <div\n      class=\"legend-label\"\n      style=\"user-select: none\"\n      [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\"\n    >\n      {{ serie.name }}\n    </div>\n  </div>\n</div>\n} }\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"] }]
         }], ctorParameters: () => [{ type: ChartService }], propDecorators: { series: [{
                 type: Input
             }], classLegend: [{
@@ -3109,7 +2918,7 @@ class ChartComponent {
         this.brushServiceInstance = new EventEmitter();
         this._alive = true;
         this.svcConfig = this.chartService.config;
-        this.hasSeriesData = this.svcConfig.pipe(map(_ => _.series?.length > 0 && _.series?.some(_ => _.data?.length > 0)));
+        this.hasSeriesData = this.svcConfig.pipe(map((_) => _.series?.length > 0 && _.series?.some((_) => _.data?.length > 0)));
     }
     resetZoom() {
         this.scaleService.resetZoom();
@@ -3149,54 +2958,34 @@ class ChartComponent {
                 });
             }
         });
-        this.chartService.plotBandEvent
-            .pipe(takeWhile(() => this._alive))
-            .subscribe(_ => {
+        this.chartService.plotBandEvent.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.plotBandsMove.emit(_);
         });
-        this.chartService.plotLineMove
-            .pipe(takeWhile(() => this._alive))
-            .subscribe(_ => {
+        this.chartService.plotLineMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.plotLinesMove.emit(_);
         });
-        this.chartService.pointMove
-            .pipe(takeWhile(() => this._alive))
-            .subscribe(_ => {
+        this.chartService.pointMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.pointMove.emit(_);
         });
-        this.chartService.chartClick
-            .pipe(takeWhile(() => this._alive))
-            .subscribe(_ => {
+        this.chartService.chartClick.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.chartClick.emit(_);
         });
-        this.chartService.chartContextMenu
-            .pipe(takeWhile(() => this._alive))
-            .subscribe(_ => {
+        this.chartService.chartContextMenu.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.chartContextMenu.emit(_);
         });
-        this.chartService.plotBandClick
-            .pipe(takeWhile(() => this._alive))
-            .subscribe(_ => {
+        this.chartService.plotBandClick.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.plotBandClick.emit(_);
         });
-        this.chartService.plotBandContextMenu
-            .pipe(takeWhile(() => this._alive))
-            .subscribe(_ => {
+        this.chartService.plotBandContextMenu.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.plotBandContextMenu.emit(_);
         });
-        this.chartService.annotationContextMenu
-            .pipe(takeWhile(() => this._alive))
-            .subscribe(_ => {
+        this.chartService.annotationContextMenu.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.annotationContextMenu.emit(_);
         });
-        this.chartService.annotationClick
-            .pipe(takeWhile(() => this._alive))
-            .subscribe(_ => {
+        this.chartService.annotationClick.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.annotationClick.emit(_);
         });
-        this.chartService.annotationMove
-            .pipe(takeWhile(() => this._alive))
-            .subscribe(_ => {
+        this.chartService.annotationMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.annotationMove.emit(_);
         });
     }
@@ -3204,15 +2993,11 @@ class ChartComponent {
         this._alive = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: BrushService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: ChartComponent, isStandalone: true, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove", zoomServiceInstance: "zoomServiceInstance", brushServiceInstance: "brushServiceInstance" }, providers: [ChartService, ZoomService, ScaleService, BrushService], ngImport: i0, template: "@if ({\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n}; as data) {\n  @if (data.hasSeriesData === true) {\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    @if (data.svcConfig.legend?.enable === true) {\n      <teta-legend [series]=\"data.svcConfig.series\"></teta-legend>\n    }\n  } @else {\n    <div class=\"column column_auto justify-content-center\">\n    <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n      <div #ref><ng-content></ng-content></div>\n      @if (!ref.hasChildNodes()) {\n        <span>\n          No data\n        </span>\n      }\n    </span>\n    </div>\n  }\n}\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: ChartComponent, isStandalone: true, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove", zoomServiceInstance: "zoomServiceInstance", brushServiceInstance: "brushServiceInstance" }, providers: [ChartService, ZoomService, ScaleService, BrushService], ngImport: i0, template: "@if ({ hasSeriesData: hasSeriesData | async, svcConfig: svcConfig | async }; as data) { @if (data.hasSeriesData ===\ntrue) {\n<div class=\"column column_auto\">\n  <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n</div>\n@if (data.svcConfig.legend?.enable === true) {\n<teta-legend [series]=\"data.svcConfig.series\"></teta-legend>\n} } @else {\n<div class=\"column column_auto justify-content-center\">\n  <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n    <div #ref><ng-content></ng-content></div>\n    @if (!ref.hasChildNodes()) {\n    <span> No data </span>\n    }\n  </span>\n</div>\n} }\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-svg-chart', standalone: true, providers: [ChartService, ZoomService, ScaleService, BrushService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        ChartContainerComponent,
-                        AsyncPipe,
-                        LegendComponent,
-                    ], template: "@if ({\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n}; as data) {\n  @if (data.hasSeriesData === true) {\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    @if (data.svcConfig.legend?.enable === true) {\n      <teta-legend [series]=\"data.svcConfig.series\"></teta-legend>\n    }\n  } @else {\n    <div class=\"column column_auto justify-content-center\">\n    <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n      <div #ref><ng-content></ng-content></div>\n      @if (!ref.hasChildNodes()) {\n        <span>\n          No data\n        </span>\n      }\n    </span>\n    </div>\n  }\n}\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
+            args: [{ selector: 'teta-svg-chart', standalone: true, providers: [ChartService, ZoomService, ScaleService, BrushService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartContainerComponent, AsyncPipe, LegendComponent], template: "@if ({ hasSeriesData: hasSeriesData | async, svcConfig: svcConfig | async }; as data) { @if (data.hasSeriesData ===\ntrue) {\n<div class=\"column column_auto\">\n  <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n</div>\n@if (data.svcConfig.legend?.enable === true) {\n<teta-legend [series]=\"data.svcConfig.series\"></teta-legend>\n} } @else {\n<div class=\"column column_auto justify-content-center\">\n  <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n    <div #ref><ng-content></ng-content></div>\n    @if (!ref.hasChildNodes()) {\n    <span> No data </span>\n    }\n  </span>\n</div>\n} }\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: ChartService }, { type: ZoomService }, { type: BrushService }, { type: ScaleService }], propDecorators: { pointerMove: [{
                 type: Output
             }], plotBandsMove: [{
@@ -3256,19 +3041,13 @@ class BlockHorizontalSeriesComponent extends SeriesBaseComponent {
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map(_ => _.x.get(this.series.xAxisIndex)?.scale));
-        this.y = this.scaleService.scales.pipe(map(_ => _.y.get(this.series.yAxisIndex)?.scale));
-        this.displayPoints = this.x.pipe(filter(y => y), map(y => {
+        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
+        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
+        this.displayPoints = this.x.pipe(filter((y) => y), map((y) => {
             return this.series.data.filter((point, index, arr) => {
                 const [min, max] = y.domain();
-                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));
+                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));
             });
         }));
     }
@@ -3285,14 +3064,11 @@ class BlockHorizontalSeriesComponent extends SeriesBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: BlockHorizontalSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: BlockHorizontalSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-horizontal-series]", usesInheritance: true, ngImport: i0, template: "@if ({\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n}; as data) {\n  @if (series?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient [id]=\"'gradient-fill-' + id\" 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\" 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)\"\n             (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]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : 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\" alignment-baseline=\"middle\"\n                    text-anchor=\"middle\">{{ point.text }}\n          </svg:text>\n        }\n        <svg:line y1=\"0\" y2=\"100%\" [attr.x1]=\"data.x(point.x)\" [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\" y2=\"100%\" [attr.x1]=\"data.x(point.x1)\" [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: "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: "18.2.1", 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) { @if (series?.fillType ===\nfillType.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} @if (data.x && data.y) { @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", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: BlockHorizontalSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-block-horizontal-series]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe,
-                        NgStyle,
-                    ], template: "@if ({\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n}; as data) {\n  @if (series?.fillType === fillType.gradient) {\n    <svg:defs>\n      <svg:linearGradient [id]=\"'gradient-fill-' + id\" 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\" 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)\"\n             (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]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : 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\" alignment-baseline=\"middle\"\n                    text-anchor=\"middle\">{{ point.text }}\n          </svg:text>\n        }\n        <svg:line y1=\"0\" y2=\"100%\" [attr.x1]=\"data.x(point.x)\" [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\" y2=\"100%\" [attr.x1]=\"data.x(point.x1)\" [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" }]
+            args: [{ selector: 'svg:svg[teta-block-horizontal-series]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgStyle], template: "@if ({ y: y | async, x: x | async, points: displayPoints | async }; as data) { @if (series?.fillType ===\nfillType.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} @if (data.x && data.y) { @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" }]
         }], ctorParameters: () => [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }] });
 
 /*