@tetacom/svg-charts 1.7.30 → 1.7.32

package/fesm2022/tetacom-svg-charts.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, inject, ChangeDetectorRef, ElementRef, computed, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostBinding, HostListener, signal, effect, EventEmitter, Output, ViewContainerRef } from '@angular/core';
+import { Injectable, input, inject, ChangeDetectorRef, ElementRef, computed, Component, ViewChild, Input, ChangeDetectionStrategy, HostListener, HostBinding, Directive, signal, effect, EventEmitter, Output, ViewContainerRef } from '@angular/core';
 import { ReplaySubject, filter, BehaviorSubject, Subject, of, shareReplay, withLatestFrom, map, merge, lastValueFrom, take, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler } from 'rxjs';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
@@ -2776,7 +2776,7 @@ class SeriesControlsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SeriesControlsComponent, isStandalone: true, selector: "teta-series-controls", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-dropdown [align]=\"Align.right\"\n               #dropdown=\"dropdown\"\n               [appendToBody]=\"true\">\n  <button teta-button\n          tetaDropdownHead\n          [class.active]=\"dropdown.open\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    <teta-icon [name]=\"'gear'\"></teta-icon>\n    {{ 'charts.settings' | transloco }}\n  </button>\n  <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n    @if (disabledSeries().length > 0) {\n      <div class=\"row padding-h-3 padding-top-3\">\n        <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n          <button teta-button\n                  tetaDropdownHead\n                  [palette]=\"'primary'\">\n            <teta-icon [name]=\"'add'\"></teta-icon>\n            {{ 'charts.add_curve' | transloco }}\n          </button>\n          <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n               (click)=\"$event.stopPropagation();\">\n            @for (seriesItem of disabledSeries(); track seriesItem.id) {\n              <div class=\"list-item list-item_interactive\"\n                   (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n                {{ seriesItem.name }}\n              </div>\n            }\n          </div>\n        </teta-dropdown>\n      </div>\n    }\n    <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n      <teta-accordion>\n        @for (seriesItem of enabledSeries(); track seriesItem.id) {\n          <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n            <teta-accordion-head style=\"padding: 2px 8px\">\n              <div class=\"row align-center gap-12\">\n                <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n                  <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n                               [palette]=\"'text'\"\n                               [view]=\"'ghost'\"\n                               [square]=\"true\">\n                    <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n                  </teta-button>\n                  <teta-color-input [ngModel]=\"seriesItem.color\"\n                                    (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n                </div>\n                {{ seriesItem.name }}\n              </div>\n            </teta-accordion-head>\n            <ng-template tetaAccordionContent>\n              <div class=\"column gap-8\">\n                <teta-input [label]=\"'charts.line_width' | transloco\">\n                  <teta-select [options]=\"strokeWidth\"\n                               [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n                               [valueRef]=\"'id'\"\n                               (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                    <ng-template tetaSelectOption let-option>\n                      <div style=\"width: 50px;\"\n                           [style.height.px]=\"option.id\"\n                           [style.background-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                    <ng-template tetaSelectValue let-value>\n                      <div style=\"width: 50px;\"\n                           [style.height.px]=\"value?.id\"\n                           [style.background-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                  </teta-select>\n                </teta-input>\n                <teta-input [label]=\"'charts.line_style' | transloco\">\n                  <teta-select [options]=\"strokeArray\"\n                               [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n                               [valueRef]=\"'id'\"\n                               (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                    <ng-template tetaSelectOption let-option>\n                      <div style=\"width: 50px;border:0;border-top: 2px;\"\n                           [style.border-style]=\"option.value\"\n                           [style.border-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                    <ng-template tetaSelectValue let-value>\n                      <div style=\"width: 50px;border:0;border-top: 2px;\"\n                           [style.border-style]=\"value?.value\"\n                           [style.border-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                  </teta-select>\n                </teta-input>\n                <teta-input [label]=\"'charts.chart_type' | transloco\">\n                  <teta-select [options]=\"seriesType\"\n                               [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n                               [valueRef]=\"'id'\"\n                               [textRef]=\"'value'\"\n                               (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                  </teta-select>\n                </teta-input>\n                @if (seriesItem.type === SeriesType.area || seriesItem.type === SeriesType.blockArea || seriesItem.type === SeriesType.block) {\n                  <teta-input [label]=\"'charts.fill_type' | transloco\">\n                    <teta-select [options]=\"fillType\"\n                                 [ngModel]=\"seriesItem.fillType ?? FillType.default\"\n                                 [valueRef]=\"'id'\"\n                                 [textRef]=\"'value'\"\n                                 (ngModelChange)=\"setSeriesFillType(seriesItem, $event)\"\n                                 [allowNull]=\"false\">\n                    </teta-select>\n                  </teta-input>\n                }\n              </div>\n            </ng-template>\n          </teta-accordion-item>\n        }\n      </teta-accordion>\n    </teta-scrollable>\n    <div class=\"row padding-3\">\n      <button teta-button\n              [palette]=\"'red'\"\n              [view]=\"'ghost'\"\n              (click)=\"clear()\">\n        <teta-icon [name]=\"'erase'\"></teta-icon>\n        {{ 'charts.reset' | transloco }}\n      </button>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: AccordionComponent, selector: "teta-accordion" }, { kind: "component", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: ["showToggle"] }, { kind: "component", type: AccordionItemComponent, selector: "teta-accordion-item", inputs: ["open", "disabled", "divider", "viewType"] }, { kind: "directive", type: AccordionContentDirective, selector: "[tetaAccordionContent]" }, { kind: "component", type: ColorInputComponent, selector: "teta-color-input", inputs: ["disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef", "open"] }, { kind: "directive", type: SelectOptionDirective, selector: "[tetaSelectOption]" }, { kind: "directive", type: SelectValueDirective, selector: "[tetaSelectValue]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SeriesControlsComponent, isStandalone: true, selector: "teta-series-controls", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-dropdown [align]=\"Align.right\"\n               #dropdown=\"dropdown\"\n               [appendToBody]=\"true\">\n  <button teta-button\n          tetaDropdownHead\n          [class.active]=\"dropdown.open\"\n          [palette]=\"'text'\"\n          [square]=\"true\"\n          [view]=\"'ghost'\">\n    <teta-icon [name]=\"'gear'\"></teta-icon>\n  </button>\n  <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n    @if (disabledSeries().length > 0) {\n      <div class=\"row padding-h-3 padding-top-3\">\n        <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n          <button teta-button\n                  tetaDropdownHead\n                  [palette]=\"'primary'\">\n            <teta-icon [name]=\"'add'\"></teta-icon>\n            {{ 'charts.add_curve' | transloco }}\n          </button>\n          <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n               (click)=\"$event.stopPropagation();\">\n            @for (seriesItem of disabledSeries(); track seriesItem.id) {\n              <div class=\"list-item list-item_interactive\"\n                   (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n                {{ seriesItem.name }}\n              </div>\n            }\n          </div>\n        </teta-dropdown>\n      </div>\n    }\n    <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n      <teta-accordion>\n        @for (seriesItem of enabledSeries(); track seriesItem.id) {\n          <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n            <teta-accordion-head style=\"padding: 2px 8px\">\n              <div class=\"row align-center gap-12\">\n                <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n                  <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n                               [palette]=\"'text'\"\n                               [view]=\"'ghost'\"\n                               [square]=\"true\">\n                    <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n                  </teta-button>\n                  <teta-color-input [ngModel]=\"seriesItem.color\"\n                                    (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n                </div>\n                {{ seriesItem.name }}\n              </div>\n            </teta-accordion-head>\n            <ng-template tetaAccordionContent>\n              <div class=\"column gap-8\">\n                <teta-input [label]=\"'charts.line_width' | transloco\">\n                  <teta-select [options]=\"strokeWidth\"\n                               [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n                               [valueRef]=\"'id'\"\n                               (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                    <ng-template tetaSelectOption let-option>\n                      <div style=\"width: 50px;\"\n                           [style.height.px]=\"option.id\"\n                           [style.background-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                    <ng-template tetaSelectValue let-value>\n                      <div style=\"width: 50px;\"\n                           [style.height.px]=\"value?.id\"\n                           [style.background-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                  </teta-select>\n                </teta-input>\n                <teta-input [label]=\"'charts.line_style' | transloco\">\n                  <teta-select [options]=\"strokeArray\"\n                               [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n                               [valueRef]=\"'id'\"\n                               (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                    <ng-template tetaSelectOption let-option>\n                      <div style=\"width: 50px;border:0;border-top: 2px;\"\n                           [style.border-style]=\"option.value\"\n                           [style.border-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                    <ng-template tetaSelectValue let-value>\n                      <div style=\"width: 50px;border:0;border-top: 2px;\"\n                           [style.border-style]=\"value?.value\"\n                           [style.border-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                  </teta-select>\n                </teta-input>\n                <teta-input [label]=\"'charts.chart_type' | transloco\">\n                  <teta-select [options]=\"seriesType\"\n                               [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n                               [valueRef]=\"'id'\"\n                               [textRef]=\"'value'\"\n                               (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                  </teta-select>\n                </teta-input>\n                @if (seriesItem.type === SeriesType.area || seriesItem.type === SeriesType.blockArea || seriesItem.type === SeriesType.block) {\n                  <teta-input [label]=\"'charts.fill_type' | transloco\">\n                    <teta-select [options]=\"fillType\"\n                                 [ngModel]=\"seriesItem.fillType ?? FillType.default\"\n                                 [valueRef]=\"'id'\"\n                                 [textRef]=\"'value'\"\n                                 (ngModelChange)=\"setSeriesFillType(seriesItem, $event)\"\n                                 [allowNull]=\"false\">\n                    </teta-select>\n                  </teta-input>\n                }\n              </div>\n            </ng-template>\n          </teta-accordion-item>\n        }\n      </teta-accordion>\n    </teta-scrollable>\n    <div class=\"row padding-3\">\n      <button teta-button\n              [palette]=\"'red'\"\n              [view]=\"'ghost'\"\n              (click)=\"clear()\">\n        <teta-icon [name]=\"'erase'\"></teta-icon>\n        {{ 'charts.reset' | transloco }}\n      </button>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: AccordionComponent, selector: "teta-accordion" }, { kind: "component", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: ["showToggle"] }, { kind: "component", type: AccordionItemComponent, selector: "teta-accordion-item", inputs: ["open", "disabled", "divider", "viewType"] }, { kind: "directive", type: AccordionContentDirective, selector: "[tetaAccordionContent]" }, { kind: "component", type: ColorInputComponent, selector: "teta-color-input", inputs: ["disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef", "open"] }, { kind: "directive", type: SelectOptionDirective, selector: "[tetaSelectOption]" }, { kind: "directive", type: SelectValueDirective, selector: "[tetaSelectValue]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, decorators: [{
             type: Component,
@@ -2798,7 +2798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ScrollableComponent,
                         TranslocoPipe,
                         InputComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n               #dropdown=\"dropdown\"\n               [appendToBody]=\"true\">\n  <button teta-button\n          tetaDropdownHead\n          [class.active]=\"dropdown.open\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    <teta-icon [name]=\"'gear'\"></teta-icon>\n    {{ 'charts.settings' | transloco }}\n  </button>\n  <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n    @if (disabledSeries().length > 0) {\n      <div class=\"row padding-h-3 padding-top-3\">\n        <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n          <button teta-button\n                  tetaDropdownHead\n                  [palette]=\"'primary'\">\n            <teta-icon [name]=\"'add'\"></teta-icon>\n            {{ 'charts.add_curve' | transloco }}\n          </button>\n          <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n               (click)=\"$event.stopPropagation();\">\n            @for (seriesItem of disabledSeries(); track seriesItem.id) {\n              <div class=\"list-item list-item_interactive\"\n                   (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n                {{ seriesItem.name }}\n              </div>\n            }\n          </div>\n        </teta-dropdown>\n      </div>\n    }\n    <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n      <teta-accordion>\n        @for (seriesItem of enabledSeries(); track seriesItem.id) {\n          <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n            <teta-accordion-head style=\"padding: 2px 8px\">\n              <div class=\"row align-center gap-12\">\n                <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n                  <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n                               [palette]=\"'text'\"\n                               [view]=\"'ghost'\"\n                               [square]=\"true\">\n                    <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n                  </teta-button>\n                  <teta-color-input [ngModel]=\"seriesItem.color\"\n                                    (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n                </div>\n                {{ seriesItem.name }}\n              </div>\n            </teta-accordion-head>\n            <ng-template tetaAccordionContent>\n              <div class=\"column gap-8\">\n                <teta-input [label]=\"'charts.line_width' | transloco\">\n                  <teta-select [options]=\"strokeWidth\"\n                               [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n                               [valueRef]=\"'id'\"\n                               (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                    <ng-template tetaSelectOption let-option>\n                      <div style=\"width: 50px;\"\n                           [style.height.px]=\"option.id\"\n                           [style.background-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                    <ng-template tetaSelectValue let-value>\n                      <div style=\"width: 50px;\"\n                           [style.height.px]=\"value?.id\"\n                           [style.background-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                  </teta-select>\n                </teta-input>\n                <teta-input [label]=\"'charts.line_style' | transloco\">\n                  <teta-select [options]=\"strokeArray\"\n                               [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n                               [valueRef]=\"'id'\"\n                               (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                    <ng-template tetaSelectOption let-option>\n                      <div style=\"width: 50px;border:0;border-top: 2px;\"\n                           [style.border-style]=\"option.value\"\n                           [style.border-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                    <ng-template tetaSelectValue let-value>\n                      <div style=\"width: 50px;border:0;border-top: 2px;\"\n                           [style.border-style]=\"value?.value\"\n                           [style.border-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                  </teta-select>\n                </teta-input>\n                <teta-input [label]=\"'charts.chart_type' | transloco\">\n                  <teta-select [options]=\"seriesType\"\n                               [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n                               [valueRef]=\"'id'\"\n                               [textRef]=\"'value'\"\n                               (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                  </teta-select>\n                </teta-input>\n                @if (seriesItem.type === SeriesType.area || seriesItem.type === SeriesType.blockArea || seriesItem.type === SeriesType.block) {\n                  <teta-input [label]=\"'charts.fill_type' | transloco\">\n                    <teta-select [options]=\"fillType\"\n                                 [ngModel]=\"seriesItem.fillType ?? FillType.default\"\n                                 [valueRef]=\"'id'\"\n                                 [textRef]=\"'value'\"\n                                 (ngModelChange)=\"setSeriesFillType(seriesItem, $event)\"\n                                 [allowNull]=\"false\">\n                    </teta-select>\n                  </teta-input>\n                }\n              </div>\n            </ng-template>\n          </teta-accordion-item>\n        }\n      </teta-accordion>\n    </teta-scrollable>\n    <div class=\"row padding-3\">\n      <button teta-button\n              [palette]=\"'red'\"\n              [view]=\"'ghost'\"\n              (click)=\"clear()\">\n        <teta-icon [name]=\"'erase'\"></teta-icon>\n        {{ 'charts.reset' | transloco }}\n      </button>\n    </div>\n  </div>\n</teta-dropdown>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n               #dropdown=\"dropdown\"\n               [appendToBody]=\"true\">\n  <button teta-button\n          tetaDropdownHead\n          [class.active]=\"dropdown.open\"\n          [palette]=\"'text'\"\n          [square]=\"true\"\n          [view]=\"'ghost'\">\n    <teta-icon [name]=\"'gear'\"></teta-icon>\n  </button>\n  <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n    @if (disabledSeries().length > 0) {\n      <div class=\"row padding-h-3 padding-top-3\">\n        <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n          <button teta-button\n                  tetaDropdownHead\n                  [palette]=\"'primary'\">\n            <teta-icon [name]=\"'add'\"></teta-icon>\n            {{ 'charts.add_curve' | transloco }}\n          </button>\n          <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n               (click)=\"$event.stopPropagation();\">\n            @for (seriesItem of disabledSeries(); track seriesItem.id) {\n              <div class=\"list-item list-item_interactive\"\n                   (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n                {{ seriesItem.name }}\n              </div>\n            }\n          </div>\n        </teta-dropdown>\n      </div>\n    }\n    <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n      <teta-accordion>\n        @for (seriesItem of enabledSeries(); track seriesItem.id) {\n          <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n            <teta-accordion-head style=\"padding: 2px 8px\">\n              <div class=\"row align-center gap-12\">\n                <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n                  <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n                               [palette]=\"'text'\"\n                               [view]=\"'ghost'\"\n                               [square]=\"true\">\n                    <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n                  </teta-button>\n                  <teta-color-input [ngModel]=\"seriesItem.color\"\n                                    (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n                </div>\n                {{ seriesItem.name }}\n              </div>\n            </teta-accordion-head>\n            <ng-template tetaAccordionContent>\n              <div class=\"column gap-8\">\n                <teta-input [label]=\"'charts.line_width' | transloco\">\n                  <teta-select [options]=\"strokeWidth\"\n                               [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n                               [valueRef]=\"'id'\"\n                               (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                    <ng-template tetaSelectOption let-option>\n                      <div style=\"width: 50px;\"\n                           [style.height.px]=\"option.id\"\n                           [style.background-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                    <ng-template tetaSelectValue let-value>\n                      <div style=\"width: 50px;\"\n                           [style.height.px]=\"value?.id\"\n                           [style.background-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                  </teta-select>\n                </teta-input>\n                <teta-input [label]=\"'charts.line_style' | transloco\">\n                  <teta-select [options]=\"strokeArray\"\n                               [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n                               [valueRef]=\"'id'\"\n                               (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                    <ng-template tetaSelectOption let-option>\n                      <div style=\"width: 50px;border:0;border-top: 2px;\"\n                           [style.border-style]=\"option.value\"\n                           [style.border-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                    <ng-template tetaSelectValue let-value>\n                      <div style=\"width: 50px;border:0;border-top: 2px;\"\n                           [style.border-style]=\"value?.value\"\n                           [style.border-color]=\"seriesItem.color\"></div>\n                    </ng-template>\n                  </teta-select>\n                </teta-input>\n                <teta-input [label]=\"'charts.chart_type' | transloco\">\n                  <teta-select [options]=\"seriesType\"\n                               [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n                               [valueRef]=\"'id'\"\n                               [textRef]=\"'value'\"\n                               (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n                               [allowNull]=\"false\">\n                  </teta-select>\n                </teta-input>\n                @if (seriesItem.type === SeriesType.area || seriesItem.type === SeriesType.blockArea || seriesItem.type === SeriesType.block) {\n                  <teta-input [label]=\"'charts.fill_type' | transloco\">\n                    <teta-select [options]=\"fillType\"\n                                 [ngModel]=\"seriesItem.fillType ?? FillType.default\"\n                                 [valueRef]=\"'id'\"\n                                 [textRef]=\"'value'\"\n                                 (ngModelChange)=\"setSeriesFillType(seriesItem, $event)\"\n                                 [allowNull]=\"false\">\n                    </teta-select>\n                  </teta-input>\n                }\n              </div>\n            </ng-template>\n          </teta-accordion-item>\n        }\n      </teta-accordion>\n    </teta-scrollable>\n    <div class=\"row padding-3\">\n      <button teta-button\n              [palette]=\"'red'\"\n              [view]=\"'ghost'\"\n              (click)=\"clear()\">\n        <teta-icon [name]=\"'erase'\"></teta-icon>\n        {{ 'charts.reset' | transloco }}\n      </button>\n    </div>\n  </div>\n</teta-dropdown>\n" }]
         }] });
 
 class ChartContainerComponent {
@@ -2944,7 +2944,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}; 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 }); }
+    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}; 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 i) {\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 i) {\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]=\"4\"\n                            [style.right.px]=\"4\">\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,
@@ -2963,7 +2963,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}; 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"] }]
+                    ], 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\" [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 i) {\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 i) {\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]=\"4\"\n                            [style.right.px]=\"4\">\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 {