@tetacom/svg-charts 1.7.4 → 1.7.6

package/chart/chart-container/series-host/series-host.component.d.ts

@@ -9,6 +9,7 @@ export declare class SeriesHostComponent<T extends BasePoint> implements OnDestr
     series: import("@angular/core").InputSignal<Series<T>>;
     private _componentRef;
     private count;
+    private seriesComponent;
     constructor();
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SeriesHostComponent<any>, never>;

package/chart/chart-container/x-axis/x-axis.component.d.ts

@@ -1,23 +1,13 @@
-import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { Axis } from '../../core/axis/axis';
-import { Observable } from 'rxjs';
-import { ScaleService } from '../../service/scale.service';
-import { ChartService } from '../../service/chart.service';
 import * as i0 from "@angular/core";
-export declare class XAxisComponent implements OnInit, OnChanges, OnDestroy {
+export declare class XAxisComponent {
     private scaleService;
-    private _svc;
-    x: Observable<any>;
-    ticks: Observable<any[]>;
-    axis: Axis;
-    size: DOMRect;
-    private update$;
-    private _alive;
-    constructor(scaleService: ScaleService, _svc: ChartService);
-    getLabelTransform(): string;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    ngOnChanges(changes: SimpleChanges): void;
+    xScales: import("@angular/core").Signal<Map<number, Axis>>;
+    axis: import("@angular/core").InputSignal<Axis>;
+    size: import("@angular/core").InputSignal<DOMRect>;
+    x: import("@angular/core").Signal<any>;
+    ticks: import("@angular/core").Signal<any>;
+    getLabelTransform: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<XAxisComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<XAxisComponent, "[teta-x-axis]", never, { "axis": { "alias": "axis"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XAxisComponent, "[teta-x-axis]", never, { "axis": { "alias": "axis"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/chart/chart-container/y-axis/y-axis.component.d.ts

@@ -1,19 +1,12 @@
-import { AfterViewInit, OnInit } from '@angular/core';
 import { Axis } from '../../core/axis/axis';
-import { ScaleService } from '../../service/scale.service';
-import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class YAxisComponent implements OnInit, AfterViewInit {
+export declare class YAxisComponent {
     private scaleService;
-    y: Observable<any>;
-    axis: Axis;
-    size: DOMRect;
-    private _alive;
-    constructor(scaleService: ScaleService);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    ngAfterViewInit(): void;
-    getLabelTransform(): string;
+    yScales: import("@angular/core").Signal<Map<number, Axis>>;
+    axis: import("@angular/core").InputSignal<Axis>;
+    size: import("@angular/core").InputSignal<DOMRect>;
+    y: import("@angular/core").Signal<any>;
+    getLabelTransform: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<YAxisComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<YAxisComponent, "[teta-y-axis]", never, { "axis": { "alias": "axis"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YAxisComponent, "[teta-y-axis]", never, { "axis": { "alias": "axis"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/fesm2022/tetacom-svg-charts.mjs

@@ -1195,45 +1195,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class XAxisComponent {
-    constructor(scaleService, _svc) {
-        this.scaleService = scaleService;
-        this._svc = _svc;
-        this.update$ = new BehaviorSubject(null);
-        this._alive = true;
-        this.x = this.scaleService.scales.pipe(map((_) => {
-            return _.x.get(this.axis.index)?.scale;
-        }));
-        this.ticks = combineLatest([this.x, this.update$]).pipe(withLatestFrom(this._svc.size), map((_) => {
-            const [[x], size] = _;
-            const tickSize = x
+    constructor() {
+        this.scaleService = inject(ScaleService);
+        this.xScales = toSignal(this.scaleService.scales.pipe(map((_) => _.x)));
+        this.axis = input();
+        this.size = input();
+        this.x = computed(() => {
+            return this.xScales().get(this.axis().index)?.scale;
+        });
+        this.ticks = computed(() => {
+            const tickSize = this.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() { }
-    ngOnDestroy() {
-        this._alive = false;
-    }
-    ngOnChanges(changes) {
-        if (changes.hasOwnProperty('axis')) {
-            this.update$.next();
-        }
+                .map((_) => getTextWidth(this.axis().options.tickFormat ? this.axis().options.tickFormat(_) : this.axis().defaultFormatter()(_), 0.45, 11));
+            return this.x().ticks(this.size().width / parseInt(d3.max(tickSize), 10) / 5);
+        });
+        this.getLabelTransform = computed(() => {
+            return `translate(${this.size().width / 2}, ${this.axis().options.opposite ? -32 : 32})`;
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: XAxisComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: XAxisComponent, isStandalone: true, selector: "[teta-x-axis]", inputs: { axis: "axis", size: "size" }, usesOnChanges: true, ngImport: i0, template: "@if ({ x: x | async, ticks: ticks | async }; as data) {\n  @for (tick of data.ticks; track $index) {\n    <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n      <text\n        fill=\"var(--color-text-70)\"\n        [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\"\n        [attr.y]=\"axis.options.opposite ? 0 : 9\"\n      >\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: XAxisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: XAxisComponent, isStandalone: true, selector: "[teta-x-axis]", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ({\n  x: x(),\n  ticks: ticks(),\n  axis: axis()\n}; as data) {\n  @for (tick of data.ticks; track $index) {\n    <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n      <text\n        fill=\"var(--color-text-70)\"\n        [attr.dy]=\"data.axis.options.opposite ? '-0.71em' : '0.71em'\"\n        [attr.y]=\"data.axis.options.opposite ? 0 : 9\"\n      >\n        {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.y2]=\"data.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      {{ data.axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: XAxisComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-x-axis]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if ({ x: x | async, ticks: ticks | async }; as data) {\n  @for (tick of data.ticks; track $index) {\n    <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n      <text\n        fill=\"var(--color-text-70)\"\n        [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\"\n        [attr.y]=\"axis.options.opposite ? 0 : 9\"\n      >\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
-        }], ctorParameters: () => [{ type: ScaleService }, { type: ChartService }], propDecorators: { axis: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
+            args: [{ selector: '[teta-x-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({\n  x: x(),\n  ticks: ticks(),\n  axis: axis()\n}; as data) {\n  @for (tick of data.ticks; track $index) {\n    <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n      <text\n        fill=\"var(--color-text-70)\"\n        [attr.dy]=\"data.axis.options.opposite ? '-0.71em' : '0.71em'\"\n        [attr.y]=\"data.axis.options.opposite ? 0 : 9\"\n      >\n        {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.y2]=\"data.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      {{ data.axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
+        }] });
 
 class ZoomableDirective {
     mouseenter() {
@@ -1467,32 +1453,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class YAxisComponent {
-    constructor(scaleService) {
-        this.scaleService = scaleService;
-        this._alive = true;
-        this.y = this.scaleService.scales.pipe(map((_) => {
-            return _.y.get(this.axis.index)?.scale;
-        }));
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this._alive = false;
-    }
-    ngAfterViewInit() { }
-    getLabelTransform() {
-        return `translate(${this.axis.options.opposite ? this.axis.selfSize : -this.axis.selfSize}, ${this.size.height / 2}) rotate(-90)`;
+    constructor() {
+        this.scaleService = inject(ScaleService);
+        this.yScales = toSignal(this.scaleService.scales.pipe(map((_) => _.y)));
+        this.axis = input();
+        this.size = input();
+        this.y = computed(() => {
+            return this.yScales().get(this.axis().index)?.scale;
+        });
+        this.getLabelTransform = computed(() => {
+            return `translate(${this.axis().options.opposite ? this.axis().selfSize : -this.axis().selfSize}, ${this.size().height / 2}) rotate(-90)`;
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: YAxisComponent, deps: [{ token: ScaleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: YAxisComponent, isStandalone: true, selector: "[teta-y-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "@if (y | async; as scale) {\n  @for (tick of scale.ticks(); track $index) {\n    <svg:g\n      [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\"\n      [attr.transform]=\"'translate(0, ' + scale(tick) + ')'\"\n    >\n      <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text\n      [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\"\n      text-anchor=\"middle\"\n      [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\"\n    >\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: YAxisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: YAxisComponent, isStandalone: true, selector: "[teta-y-axis]", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ({\n  y: y(),\n  axis: axis()\n}; as data) {\n  @for (tick of data.y.ticks(); track $index) {\n    <svg:g\n      [attr.text-anchor]=\"data.axis.options.opposite ? 'start' : 'end'\"\n      [attr.transform]=\"'translate(0, ' + data.y(tick) + ')'\"\n    >\n      <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"data.axis.options.opposite ? 10 : -9\">\n        {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.x2]=\"data.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]=\"data.axis.options.opposite ? '-4px' : '4px'\"\n      text-anchor=\"middle\"\n      [attr.dominant-baseline]=\"data.axis.options.opposite ? 'auto' : 'hanging'\"\n    >\n      {{ data.axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: YAxisComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-y-axis]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe], template: "@if (y | async; as scale) {\n  @for (tick of scale.ticks(); track $index) {\n    <svg:g\n      [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\"\n      [attr.transform]=\"'translate(0, ' + scale(tick) + ')'\"\n    >\n      <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">\n        {{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n    </svg:g>\n  }\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text\n      [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\"\n      text-anchor=\"middle\"\n      [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\"\n    >\n      {{ axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"] }]
-        }], ctorParameters: () => [{ type: ScaleService }], propDecorators: { axis: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
+            args: [{ selector: '[teta-y-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({\n  y: y(),\n  axis: axis()\n}; as data) {\n  @for (tick of data.y.ticks(); track $index) {\n    <svg:g\n      [attr.text-anchor]=\"data.axis.options.opposite ? 'start' : 'end'\"\n      [attr.transform]=\"'translate(0, ' + data.y(tick) + ')'\"\n    >\n      <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"data.axis.options.opposite ? 10 : -9\">\n        {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n      </text>\n      <line stroke=\"var(--color-text-30)\" [attr.x2]=\"data.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]=\"data.axis.options.opposite ? '-4px' : '4px'\"\n      text-anchor=\"middle\"\n      [attr.dominant-baseline]=\"data.axis.options.opposite ? 'auto' : 'hanging'\"\n    >\n      {{ data.axis.options.title }}\n    </text>\n  </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"] }]
+        }] });
 
 class PlotBand {
     constructor(options) {
@@ -2236,12 +2215,15 @@ class SeriesHostComponent {
         this.count = 0;
         effect(() => {
             if (this.series()) {
-                this.viewContainerRef.clear();
-                this._componentRef?.destroy();
                 if (!Object.prototype.isPrototypeOf.call(SeriesBaseComponent, this.series().component)) {
                     this.series().component = defaultSeriesTypeMapping.get(this.series().type) || LineSeriesComponent;
                 }
-                this._componentRef = this.viewContainerRef.createComponent(this.series().component);
+                if (this.series().component !== this.seriesComponent) {
+                    this.viewContainerRef.clear();
+                    this._componentRef?.destroy();
+                    this._componentRef = this.viewContainerRef.createComponent(this.series().component);
+                    this.seriesComponent = this.series().component;
+                }
                 this._componentRef?.setInput('config', this.config());
                 this._componentRef?.setInput('series', this.series());
             }
@@ -2821,7 +2803,7 @@ class ChartContainerComponent {
         this._svc.setPointerMove(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: ScaleService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ChartContainerComponent, isStandalone: true, selector: "teta-chart-container", ngImport: i0, template: "@if ({\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  plotBands: plotBands | async,\n  visibleRect: visibleRect | async,\n};\n  as data) {\n  @if (data.config?.tooltip?.enable) {\n    <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        @for (item of data.scales.y | keyvalue; track item.value.index) {\n          @if (item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-y-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n                  [attr.y]=\"0\"\n                  [attr.height]=\"data.visibleRect.height\"\n                  [attr.width]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n      <g class=\"x-axis-container\">\n        @for (item of data.scales.x | keyvalue; track item.value.index) {\n          @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-x-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"0\"\n                  [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n                  [attr.width]=\"data.visibleRect.width\"\n                  [attr.height]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n    </svg>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      @if (data.config.gridLines?.enable !== false) {\n        <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n      }\n      <g class=\"x-axis-plotband-container\">\n        @for (plotBand of data.plotBands; track $index) {\n          <g teta-plot-band\n             [plotBand]=\"plotBand.plotBand\"\n             [scale]=\"plotBand.axis.scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"plotBand.axis\"></g>\n        }\n      </g>\n      <g class=\"series-container\">\n        @for (series of data.config.series; track series) {\n          @if (series.visible && series.enabled) {\n            <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n          }\n        }\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        @for (axis of data.config.xAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.x.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.x.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        @for (axis of data.config.yAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.y.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.y.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"annotations\">\n        @for (annotation of data.config.annotations; track annotation) {\n          <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n        }\n      </g>\n      @if (data.config.tooltip?.showCrosshair) {\n        <g class=\"crosshair\">\n          <g teta-crosshair [size]=\"data.visibleRect\"></g>\n        </g>\n      }\n    </svg>\n    @if (data.config.controls?.enable) {\n      <teta-series-controls [series]=\"data.config.series\"\n                            class=\"position-absolute\"\n                            style=\"transform: translateX(-100%)\"\n                            [style.top.px]=\"data.visibleRect.y + 12\"\n                            [style.left.px]=\"data.visibleRect.width + data.visibleRect.x -12\">\n      </teta-series-controls>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["visibleRect", "annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "axis"] }, { kind: "component", type: SeriesControlsComponent, selector: "teta-series-controls", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ChartContainerComponent, isStandalone: true, selector: "teta-chart-container", ngImport: i0, template: "@if ({\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  plotBands: plotBands | async,\n  visibleRect: visibleRect | async,\n};\n  as data) {\n  @if (data.config?.tooltip?.enable) {\n    <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        @for (item of data.scales.y | keyvalue; track item.value.index) {\n          @if (item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-y-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n                  [attr.y]=\"0\"\n                  [attr.height]=\"data.visibleRect.height\"\n                  [attr.width]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n      <g class=\"x-axis-container\">\n        @for (item of data.scales.x | keyvalue; track item.value.index) {\n          @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-x-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"0\"\n                  [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n                  [attr.width]=\"data.visibleRect.width\"\n                  [attr.height]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n    </svg>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      @if (data.config.gridLines?.enable !== false) {\n        <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n      }\n      <g class=\"x-axis-plotband-container\">\n        @for (plotBand of data.plotBands; track $index) {\n          <g teta-plot-band\n             [plotBand]=\"plotBand.plotBand\"\n             [scale]=\"plotBand.axis.scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"plotBand.axis\"></g>\n        }\n      </g>\n      <g class=\"series-container\">\n        @for (series of data.config.series; track $index) {\n          @if (series.visible && series.enabled) {\n            <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n          }\n        }\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        @for (axis of data.config.xAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.x.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.x.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        @for (axis of data.config.yAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.y.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.y.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"annotations\">\n        @for (annotation of data.config.annotations; track annotation) {\n          <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n        }\n      </g>\n      @if (data.config.tooltip?.showCrosshair) {\n        <g class=\"crosshair\">\n          <g teta-crosshair [size]=\"data.visibleRect\"></g>\n        </g>\n      }\n    </svg>\n    @if (data.config.controls?.enable) {\n      <teta-series-controls [series]=\"data.config.series\"\n                            class=\"position-absolute\"\n                            style=\"transform: translateX(-100%)\"\n                            [style.top.px]=\"data.visibleRect.y + 12\"\n                            [style.left.px]=\"data.visibleRect.width + data.visibleRect.x -12\">\n      </teta-series-controls>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["visibleRect", "annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "axis"] }, { kind: "component", type: SeriesControlsComponent, selector: "teta-series-controls", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartContainerComponent, decorators: [{
             type: Component,
@@ -2840,7 +2822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         CrosshairComponent,
                         BrushableDirective,
                         SeriesControlsComponent,
-                    ], template: "@if ({\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  plotBands: plotBands | async,\n  visibleRect: visibleRect | async,\n};\n  as data) {\n  @if (data.config?.tooltip?.enable) {\n    <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        @for (item of data.scales.y | keyvalue; track item.value.index) {\n          @if (item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-y-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n                  [attr.y]=\"0\"\n                  [attr.height]=\"data.visibleRect.height\"\n                  [attr.width]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n      <g class=\"x-axis-container\">\n        @for (item of data.scales.x | keyvalue; track item.value.index) {\n          @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-x-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"0\"\n                  [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n                  [attr.width]=\"data.visibleRect.width\"\n                  [attr.height]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n    </svg>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      @if (data.config.gridLines?.enable !== false) {\n        <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n      }\n      <g class=\"x-axis-plotband-container\">\n        @for (plotBand of data.plotBands; track $index) {\n          <g teta-plot-band\n             [plotBand]=\"plotBand.plotBand\"\n             [scale]=\"plotBand.axis.scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"plotBand.axis\"></g>\n        }\n      </g>\n      <g class=\"series-container\">\n        @for (series of data.config.series; track series) {\n          @if (series.visible && series.enabled) {\n            <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n          }\n        }\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        @for (axis of data.config.xAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.x.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.x.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        @for (axis of data.config.yAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.y.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.y.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"annotations\">\n        @for (annotation of data.config.annotations; track annotation) {\n          <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n        }\n      </g>\n      @if (data.config.tooltip?.showCrosshair) {\n        <g class=\"crosshair\">\n          <g teta-crosshair [size]=\"data.visibleRect\"></g>\n        </g>\n      }\n    </svg>\n    @if (data.config.controls?.enable) {\n      <teta-series-controls [series]=\"data.config.series\"\n                            class=\"position-absolute\"\n                            style=\"transform: translateX(-100%)\"\n                            [style.top.px]=\"data.visibleRect.y + 12\"\n                            [style.left.px]=\"data.visibleRect.width + data.visibleRect.x -12\">\n      </teta-series-controls>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
+                    ], template: "@if ({\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  plotBands: plotBands | async,\n  visibleRect: visibleRect | async,\n};\n  as data) {\n  @if (data.config?.tooltip?.enable) {\n    <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        @for (item of data.scales.y | keyvalue; track item.value.index) {\n          @if (item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-y-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n                  [attr.y]=\"0\"\n                  [attr.height]=\"data.visibleRect.height\"\n                  [attr.width]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n      <g class=\"x-axis-container\">\n        @for (item of data.scales.x | keyvalue; track item.value.index) {\n          @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n            <g teta-x-axis\n               [axis]=\"item.value\"\n               [size]=\"data.visibleRect\"\n               [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect tetaZoomable\n                  fill-opacity=\"0\"\n                  [axis]=\"item.value\"\n                  [config]=\"data.config\"\n                  [size]=\"data.visibleRect\"\n                  [attr.x]=\"0\"\n                  [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n                  [attr.width]=\"data.visibleRect.width\"\n                  [attr.height]=\"item.value.selfSize\"\n                  [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          }\n        }\n      </g>\n    </svg>\n  }\n  @if (data.size?.height > 0 &&\n  data.size?.width > 0 &&\n  data.visibleRect?.height > 0 &&\n  data.visibleRect?.width > 0 &&\n  data.scales?.x.size === data.config.xAxis.length &&\n  data.scales?.y.size === data.config.yAxis.length) {\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      @if (data.config.gridLines?.enable !== false) {\n        <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n      }\n      <g class=\"x-axis-plotband-container\">\n        @for (plotBand of data.plotBands; track $index) {\n          <g teta-plot-band\n             [plotBand]=\"plotBand.plotBand\"\n             [scale]=\"plotBand.axis.scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"plotBand.axis\"></g>\n        }\n      </g>\n      <g class=\"series-container\">\n        @for (series of data.config.series; track $index) {\n          @if (series.visible && series.enabled) {\n            <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n          }\n        }\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        @for (axis of data.config.xAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.x.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.x.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        @for (axis of data.config.yAxis; let i = $index; track axis) {\n          @for (plotLine of axis.plotLines; track $index) {\n            <g teta-plot-line\n               [plotLine]=\"plotLine\"\n               [scale]=\"data.scales.y.get(i).scale\"\n               [size]=\"data.size\"\n               [axis]=\"data.scales.y.get(i)\"></g>\n          }\n        }\n      </g>\n      <g class=\"annotations\">\n        @for (annotation of data.config.annotations; track annotation) {\n          <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n        }\n      </g>\n      @if (data.config.tooltip?.showCrosshair) {\n        <g class=\"crosshair\">\n          <g teta-crosshair [size]=\"data.visibleRect\"></g>\n        </g>\n      }\n    </svg>\n    @if (data.config.controls?.enable) {\n      <teta-series-controls [series]=\"data.config.series\"\n                            class=\"position-absolute\"\n                            style=\"transform: translateX(-100%)\"\n                            [style.top.px]=\"data.visibleRect.y + 12\"\n                            [style.left.px]=\"data.visibleRect.width + data.visibleRect.x -12\">\n      </teta-series-controls>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
         }], ctorParameters: () => [{ type: ChartService }, { type: ScaleService }, { type: i0.ElementRef }] });
 
 class LegendComponent {