@tetacom/ng-components 1.0.25 → 1.0.28

package/{dist/fesm2020 → fesm2020}/tetacom-ng-components.mjs

@@ -16,13 +16,9 @@ import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
 import * as hash from 'object-hash';
 import hash__default from 'object-hash';
 import { SizeStrategy, Datasource, UiScrollModule } from 'ngx-ui-scroll';
-import * as d3 from 'd3';
-import { zoomIdentity } from 'd3';
-import * as d3annotation from 'd3-svg-annotation';
-import { annotationBadge, annotationLabel, annotationCallout, annotationCalloutCircle, annotationCalloutCurve, annotationCalloutElbow, annotationCalloutRect, annotationCustomType, annotationXYThreshold } from 'd3-svg-annotation';
-import { tricontour } from 'd3-tricontour';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import * as d3 from 'd3';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 class AccordionComponent {
@@ -530,6 +526,31 @@ var DatePickerMode;
     DatePickerMode[DatePickerMode["year"] = 2] = "year";
 })(DatePickerMode || (DatePickerMode = {}));
 
+const getPrecision = (a) => {
+    if (!isFinite(a)) {
+        return 0;
+    }
+    let e = 1;
+    let p = 0;
+    while (Math.round(a * e) / e !== a) {
+        e *= 10;
+        p++;
+    }
+    return p;
+};
+const formatNumber = (value, decimalLength, chunkDelimiter, decimalDelimiter, chunkLength) => {
+    const abs = Math.abs(value);
+    if (0 < abs && 1 > abs) {
+        const firstDigitIndex = Math.floor(Math.abs(Math.log10(abs)));
+        decimalLength += firstDigitIndex;
+    }
+    const precision = Math.min(getPrecision(value), Math.floor(decimalLength));
+    const result = '\\d(?=(\\d{' + chunkLength + '})+' + (precision > 0 ? '\\D' : '$') + ')';
+    const num = value.toFixed(precision);
+    return (decimalDelimiter ? num.replace('.', decimalDelimiter) : num).replace(new RegExp(result, 'g'), '$&' + chunkDelimiter);
+};
+const prependZero = (input, length) => ('0'.repeat(length) + input).slice(-length);
+
 class DateUtil {
     /**
      * Вычесть n-дней
@@ -577,10 +598,12 @@ class DateUtil {
             return '';
         }
         const month = dat.getMonth() + 1;
-        const monthString = month < 10 ? '0' + month.toString() : month.toString();
-        return `${dat.getDate().toString()}.${monthString}.${dat
-            .getFullYear()
-            .toString()} ${dat.getHours()}:${dat.getMinutes()}:${dat.getSeconds()}`;
+        return `${prependZero(dat.getDate(), 2)}.
+    ${prependZero(month, 2)}.
+    ${dat.getFullYear()}
+    ${prependZero(dat.getHours(), 2)}:
+    ${prependZero(dat.getMinutes(), 2)}:
+    ${prependZero(dat.getSeconds(), 2)}`;
     }
     /**
      * Подготовка даты к отправке на сервер, чтобы небыло смещения часов
@@ -1510,31 +1533,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Output
             }] } });
 
-const getPrecision = (a) => {
-    if (!isFinite(a)) {
-        return 0;
-    }
-    let e = 1;
-    let p = 0;
-    while (Math.round(a * e) / e !== a) {
-        e *= 10;
-        p++;
-    }
-    return p;
-};
-const formatNumber = (value, decimalLength, chunkDelimiter, decimalDelimiter, chunkLength) => {
-    const abs = Math.abs(value);
-    if (0 < abs && 1 > abs) {
-        const firstDigitIndex = Math.floor(Math.abs(Math.log10(abs)));
-        decimalLength += firstDigitIndex;
-    }
-    const precision = Math.min(getPrecision(value), Math.floor(decimalLength));
-    const result = '\\d(?=(\\d{' + chunkLength + '})+' + (precision > 0 ? '\\D' : '$') + ')';
-    const num = value.toFixed(precision);
-    return (decimalDelimiter ? num.replace('.', decimalDelimiter) : num).replace(new RegExp(result, 'g'), '$&' + chunkDelimiter);
-};
-const prependZero = (input, length) => ('0'.repeat(length) + input).slice(-length);
-
 class PrependZeroPipe {
     transform(value, length) {
         if (value === null || value === undefined) {
@@ -2479,8 +2477,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
         }] });
 
 class ClickOutsideDirective {
-    constructor(_elementRef) {
+    constructor(_elementRef, _ngZone) {
         this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
         this.clickOutside = new EventEmitter();
         this.rightClick = false;
         this._handleEvents = false;
@@ -2497,7 +2496,11 @@ class ClickOutsideDirective {
     set tetaClickOutside(val) {
         this._handleEvents = val;
         if (this._handleEvents) {
-            this.addListener(this.rightClick);
+            this._ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.addListener(this.rightClick);
+                });
+            });
         }
         else {
             this.removeListener();
@@ -2520,14 +2523,14 @@ class ClickOutsideDirective {
         window.removeEventListener('contextmenu', this.listener);
     }
 }
-ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ClickOutsideDirective, selector: "[tetaClickOutside]", inputs: { rightClick: "rightClick", tetaClickOutside: "tetaClickOutside" }, outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaClickOutside]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clickOutside: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { clickOutside: [{
                 type: Output
             }], rightClick: [{
                 type: Input
@@ -2646,7 +2649,8 @@ class OnlyNumberDirective {
         }
         else {
             if (e.key === ',' && originalValue.indexOf('.') < 0) {
-                this._elementRef.nativeElement.value = originalValue + '.';
+                this._elementRef.nativeElement.value =
+                    `${originalValue.slice(0, cursorPosition)}.${originalValue.slice(cursorPosition)}`;
             }
             e.preventDefault();
         }
@@ -3329,10 +3333,10 @@ class FileItemComponent {
     ngOnInit() { }
 }
 FileItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: FileItemComponent, selector: "teta-file-item", ngImport: i0, template: "<p>file-item works!</p>\n", styles: [""] });
+FileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: FileItemComponent, selector: "teta-file-item", ngImport: i0, template: "<p>file-item works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-file-item', template: "<p>file-item works!</p>\n", styles: [""] }]
+            args: [{ selector: 'teta-file-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>file-item works!</p>\n", styles: [""] }]
         }], ctorParameters: function () { return []; } });
 
 class FileUploadModule {
@@ -3452,10 +3456,10 @@ class NumericFilterComponent extends FilterComponentBase {
     }
 }
 NumericFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NumericFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NumericFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: NumericFilterComponent, selector: "teta-numeric-filter", inputs: { column: "column", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-row padding-3\">\n  <teta-input [label]=\"'\u041E\u0442'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"'\u0414\u043E'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NumericFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: NumericFilterComponent, selector: "teta-numeric-filter", inputs: { column: "column", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-row padding-3\">\n  <teta-input [label]=\"'\u041E\u0442'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"'\u0414\u043E'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NumericFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-numeric-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row padding-3\">\n  <teta-input [label]=\"'\u041E\u0442'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"'\u0414\u043E'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'teta-numeric-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row padding-3\">\n  <teta-input [label]=\"'\u041E\u0442'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"'\u0414\u043E'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], filterOptions: [{
@@ -4662,7 +4666,8 @@ FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DatePickerModule,
         RadioModule,
         InputModule,
-        CheckboxModule], exports: [FilterPanelComponent,
+        CheckboxModule,
+        OnlyNumberModule], exports: [FilterPanelComponent,
         NumericFilterComponent,
         StringFilterComponent,
         ListFilterComponent,
@@ -4677,6 +4682,7 @@ FilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             RadioModule,
             InputModule,
             CheckboxModule,
+            OnlyNumberModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FilterModule, decorators: [{
             type: NgModule,
@@ -4707,6 +4713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                         RadioModule,
                         InputModule,
                         CheckboxModule,
+                        OnlyNumberModule,
                     ],
                 }]
         }] });
@@ -4893,7 +4900,7 @@ class FilterState {
 
 class MessageService {
     constructor() {
-        this._message = new Subject();
+        this._message = new ReplaySubject(1);
         this._clear = new Subject();
         this.message = this._message.asObservable();
         this.clear = this._clear.asObservable();
@@ -6131,6 +6138,9 @@ class HintDirective extends DynamicContentBaseDirective {
             'hint',
         ];
     }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
 }
 HintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: DynamicComponentService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 HintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: HintDirective, selector: "[tetaHint]", inputs: { tetaHint: "tetaHint", align: "align", verticalAlign: "verticalAlign", delay: "delay" }, host: { listeners: { "mouseenter": "mouseenter($event)", "mouseleave": "mouseleave($event)", "click": "click($event)" } }, usesInheritance: true, ngImport: i0 });
@@ -8702,6 +8712,7 @@ class NumericCellComponent extends CellComponentBase {
         if (initiator?.column.name === this.column.name) {
             setTimeout(() => {
                 this.input?.nativeElement.focus();
+                this.input?.nativeElement.select();
                 this.cdr.markForCheck();
             }, 0);
         }
@@ -8838,7 +8849,8 @@ class StringCellComponent extends CellComponentBase {
         if (initiator?.column.name === this.column.name) {
             this.cdr.markForCheck();
             setTimeout(() => {
-                this.input.nativeElement.focus();
+                this.input.nativeElement?.focus();
+                this.input.nativeElement?.select();
             }, 0);
         }
     }
@@ -9947,2267 +9959,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }] });
 
-var Scale;
-(function (Scale) {
-    Scale["time"] = "time";
-    Scale["number"] = "number";
-    Scale["category"] = "category";
-})(Scale || (Scale = {}));
-
-var SeriesType;
-(function (SeriesType) {
-    SeriesType[SeriesType["area"] = 0] = "area";
-    SeriesType[SeriesType["bar"] = 1] = "bar";
-    SeriesType[SeriesType["line"] = 2] = "line";
-    SeriesType[SeriesType["pie"] = 3] = "pie";
-    SeriesType[SeriesType["scatter"] = 4] = "scatter";
-    SeriesType[SeriesType["spline"] = 5] = "spline";
-    SeriesType[SeriesType["contour"] = 6] = "contour";
-    SeriesType[SeriesType["custom"] = 7] = "custom";
-})(SeriesType || (SeriesType = {}));
-
-class AreaDrawer {
-    draw(series, context, scaleX, scaleY) {
-        const points = series.data;
-        const path = d3
-            .area()
-            .x1((d) => (d.x1 != null ? scaleX(d.x1) : scaleX(0)))
-            .x0((d) => scaleX(d.x))
-            .y((d) => scaleY(d.y));
-        context
-            .append('path')
-            .attr('transform', `translate(${0}, 0)`)
-            .attr('fill', series.color)
-            .attr('stroke', series.color)
-            .attr('stroke-width', series.strokeWidth ? series.strokeWidth : 1)
-            .datum(points)
-            .attr('d', path);
-    }
-}
-
-class BarDrawer {
-    draw(series, context, scaleX, scaleY) {
-        const points = series.data.filter((_) => _.visible);
-        const barScale = d3
-            .scaleBand()
-            .domain(d3.range(points.length))
-            .range(scaleX.range())
-            .paddingInner(0.2)
-            .paddingOuter(0.2);
-        const u = context.selectAll('rect').data(points);
-        u.enter()
-            .append('rect')
-            .merge(u)
-            .attr('x', (d, i) => barScale(i))
-            .attr('y', (d) => scaleY(d.y))
-            .attr('width', barScale.bandwidth())
-            .attr('height', (d) => Math.abs(scaleY(0) - scaleY(d.y)))
-            .attr('fill', (d) => d.color);
-        u.exit().remove();
-    }
-}
-
-var DispatchType;
-(function (DispatchType) {
-    DispatchType["moveLine"] = "moveLine";
-    DispatchType["movePoint"] = "movePoint";
-})(DispatchType || (DispatchType = {}));
-
-var DragPointType;
-(function (DragPointType) {
-    DragPointType[DragPointType["x"] = 0] = "x";
-    DragPointType[DragPointType["y"] = 1] = "y";
-    DragPointType[DragPointType["xy"] = 2] = "xy";
-})(DragPointType || (DragPointType = {}));
-
-class LineDrawer {
-    constructor() {
-        this.dispatch = d3.dispatch(DispatchType.moveLine, DispatchType.movePoint);
-    }
-    draw(series, context, scaleX, scaleY, options) {
-        const points = series.data;
-        const markerPoints = points.filter((_) => _.marker);
-        const path = d3
-            .line()
-            .curve(series.curveType)
-            .defined((d) => d.x != null && d.y != null)
-            .x((d) => scaleX(d.x))
-            .y((d) => scaleY(d.y));
-        const seriesIndex = options.series.findIndex((_) => _.id === series.id);
-        context
-            .append('path')
-            .attr('class', (d) => series?.drag.enable ? 'draggable' : `series-${seriesIndex}`)
-            .attr('data-draggable-id', seriesIndex)
-            .attr('fill', 'none')
-            .attr('stroke', series.color)
-            .attr('stroke-dasharray', series?.strokeDasharray)
-            .attr('stroke-width', series.strokeWidth ? series.strokeWidth : 1)
-            .style('cursor', series?.drag?.enable ? 'move' : 'default')
-            .datum(points)
-            .attr('d', path);
-        const u = context.append('g').attr('class', 'grabbers');
-        const emit = (event, target) => {
-            this.dispatch.apply(DispatchType.moveLine, {
-                target,
-                event,
-            });
-        };
-        if (series.drag.enable) {
-            u.selectAll('circle')
-                .data(points)
-                .enter()
-                .append('circle')
-                .attr('data-grabber-id', seriesIndex)
-                .attr('stroke', series?.drag?.grabbers?.stroke ?? series?.color)
-                .attr('stroke-width', series?.drag?.grabbers?.strokeWidth ?? 1)
-                .attr('fill', series?.drag?.grabbers?.fill ?? series?.color)
-                .attr('r', series?.drag?.grabbers?.radius ?? 4)
-                .attr('cx', function (d) {
-                return scaleX(d.x);
-            })
-                .attr('cy', function (d) {
-                return scaleY(d.y);
-            })
-                .style('cursor', 'move')
-                .call(d3.drag().on('start drag end', function (event, d) {
-                d.x = scaleX.invert(event.sourceEvent?.offsetX);
-                d.y = scaleY.invert(event.sourceEvent?.offsetY);
-                d3.select(this).attr('cx', scaleX(d.x)).attr('cy', scaleY(d.y));
-                context
-                    .select(`[data-draggable-id='${seriesIndex}']`)
-                    .attr('d', path);
-                emit(event, series);
-                if (series?.drag?.extendLine) {
-                    drawExtendedLine();
-                }
-            }));
-            u.exit().remove();
-        }
-        const drawExtendedLine = () => {
-            context.selectAll(`[data-extended-id='${seriesIndex}']`).remove();
-            const p1 = points[0];
-            const p2 = points[points.length - 1];
-            const distance = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p2.y, 2));
-            if (distance <= 0) {
-                return;
-            }
-            const extendLength = 50;
-            const extendedEndX = p2.x + ((p2.x - p1.x) / distance) * extendLength;
-            const extendedEndY = p2.y + ((p2.y - p1.y) / distance) * extendLength;
-            const extendedStartX = p1.x - ((p2.x - p1.x) / distance) * extendLength;
-            const extendedStartY = p1.y - ((p2.y - p1.y) / distance) * extendLength;
-            context
-                .append('line')
-                .attr('class', 'extendedLine')
-                .attr('data-extended-id', seriesIndex)
-                .attr('stroke', series?.color)
-                .attr('stroke-width', series?.strokeWidth)
-                .attr('stroke-dasharray', series?.strokeDasharray)
-                .attr('x1', scaleX(p1.x))
-                .attr('y1', scaleY(p1.y))
-                .attr('x2', scaleX(extendedStartX))
-                .attr('y2', scaleY(extendedStartY));
-            context
-                .append('line')
-                .attr('class', 'extendedLine')
-                .attr('data-extended-id', seriesIndex)
-                .attr('stroke', series?.color)
-                .attr('stroke-width', series?.strokeWidth)
-                .attr('stroke-dasharray', series?.strokeDasharray)
-                .attr('x1', scaleX(p2.x))
-                .attr('y1', scaleY(p2.y))
-                .attr('x2', scaleX(extendedEndX))
-                .attr('y2', scaleY(extendedEndY));
-        };
-        if (series?.drag?.extendLine && points?.length) {
-            drawExtendedLine();
-        }
-        if (markerPoints?.length) {
-            const emit = (event, target) => {
-                this.dispatch.apply(DispatchType.movePoint, {
-                    target: series,
-                    point: {
-                        ...target,
-                    },
-                    event,
-                });
-            };
-            context
-                .selectAll(`draggable-marker-${seriesIndex}`)
-                .data(markerPoints)
-                .enter()
-                .append('circle')
-                .attr('class', `draggable-marker-${seriesIndex}`)
-                .attr('r', (d) => d.marker?.style?.radius || 5)
-                .attr('cx', function (d) {
-                return scaleX(d.x);
-            })
-                .attr('cy', function (d) {
-                return scaleY(d.y);
-            })
-                .style('cursor', 'pointer')
-                .style('fill', (d) => d.marker?.style?.color || 'none')
-                .attr('stroke', (d) => d.marker?.style?.stroke || 'none')
-                .attr('stroke-width', (d) => d.marker?.style?.strokeWidth || 0);
-            context.selectAll(`.draggable-marker-${seriesIndex}`).call(d3.drag().on('drag start end', function dragged(event, d) {
-                const node = d3.select(this);
-                if (event.type === 'start') {
-                    node.raise().classed('active', true);
-                }
-                if (d.marker?.dragType === DragPointType.x) {
-                    d.x = scaleX.invert(event.sourceEvent?.offsetX);
-                    node.attr('cx', scaleX(d.x));
-                }
-                if (d.marker?.dragType === DragPointType.y) {
-                    d.y = scaleY.invert(event.sourceEvent?.offsetY);
-                    node.attr('cy', scaleY(d.y));
-                }
-                context.select(`.series-${seriesIndex}`).attr('d', path);
-                emit(event, d);
-            }));
-        }
-    }
-}
-
-class PieDrawer {
-    draw(series, context, scaleX, scaleY) { }
-}
-
-class SplineDrawer {
-    draw(series, context, scaleX, scaleY) {
-        const points = series.data;
-        const path = d3
-            .line()
-            .curve(d3.curveCatmullRom)
-            .defined((d) => d.x != null && d.y != null)
-            .x((d) => scaleX(d.x))
-            .y((d) => scaleY(d.y));
-        context
-            .append('path')
-            .attr('transform', `translate(${0}, 0)`)
-            .attr('fill', 'none')
-            .attr('stroke', series.color)
-            .attr('stroke-width', series.strokeWidth ? series.strokeWidth : 1)
-            .datum(points)
-            .attr('d', path)
-            .transition()
-            .duration(750);
-    }
-}
-
-class ScatterDrawer {
-    constructor() {
-        this._colorToData = {};
-    }
-    draw(series, context, scaleX, scaleY, options) {
-        this._options = options;
-        d3.select(context.node().parentNode).select('.virtual-canvas').remove();
-        if (series.renderTo === 'canvas') {
-            this._context = context;
-            const height = context.node().clientHeight;
-            const width = context.node().clientWidth;
-            const points = series.data;
-            const context2D = context.node().getContext('2d');
-            this._virtualCanvas = d3
-                .select(context.node().parentNode)
-                .append('canvas')
-                .attr('class', 'virtual-canvas')
-                .style('display', 'none');
-            this._virtualCanvas.attr('width', width).attr('height', height);
-            const virtualContext = this._virtualCanvas.node().getContext('2d');
-            context.on('mouseout', () => {
-                d3.select(this._context.node().parentNode)
-                    .select('.tooltip-chart')
-                    .style('display', 'none');
-                context.on('mousemove', null);
-            });
-            context.on('mouseenter', () => {
-                d3.select(this._context.node().parentNode)
-                    .select('.tooltip-chart')
-                    .style('display', null);
-                context.on('mousemove', (e) => this.handleMouseMove(e));
-            });
-            points.forEach((d, idx) => {
-                const color = this.getColor(idx);
-                this._colorToData[color] = d;
-                virtualContext.fillStyle = color;
-                context2D.fillStyle = d.color;
-                const cx = scaleX(d.x);
-                const cy = scaleY(d.y);
-                context2D.beginPath();
-                context2D.arc(cx, cy, d.radius, 0, 2 * Math.PI);
-                context2D.closePath();
-                context2D.fill();
-                virtualContext.beginPath();
-                virtualContext.arc(cx, cy, d.radius, 0, 2 * Math.PI);
-                virtualContext.closePath();
-                virtualContext.fill();
-            });
-        }
-    }
-    getColor(index) {
-        return d3
-            .rgb(Math.floor(index / 256 / 256) % 256, Math.floor(index / 256) % 256, index % 256)
-            .toString();
-    }
-    tooltipPosition(event) {
-        const centerX = this._context.node().clientWidth / 2;
-        const centerY = this._context.node().clientHeight / 2;
-        const padding = { x: 10, y: 10 };
-        const scene = {
-            left: event.pageX > centerX ? 'initial' : `${event.pageX + padding.x}px`,
-            top: event.pageY > centerY ? 'initial' : `${event.pageY + padding.y}px`,
-            bottom: event.pageY > centerY
-                ? `${window.innerHeight - event.pageY}px`
-                : 'initial',
-            right: event.pageX > centerX
-                ? `${window.innerWidth - event.pageX + padding.x}px`
-                : 'initial',
-        };
-        return scene;
-    }
-    handleMouseMove(event) {
-        const mouse = d3.pointer(event);
-        const virtualContext = this._virtualCanvas.node().getContext('2d');
-        const image = virtualContext.getImageData(mouse[0], mouse[1], 1, 1);
-        const color = d3.rgb.apply(null, image.data).toString();
-        const possibleDatum = this._colorToData[color];
-        const { top, right, bottom, left } = this.tooltipPosition(event);
-        if (possibleDatum) {
-            const formatted = this._options.tooltip?.format([possibleDatum]);
-            d3.select(this._context.node().parentNode)
-                .select('.tooltip-chart')
-                .style('z-index', 3)
-                .style('top', top)
-                .style('right', right)
-                .style('bottom', bottom)
-                .style('left', left)
-                .html(formatted);
-        }
-    }
-}
-
-class ContourDrawer {
-    draw(series, context, scaleX, scaleY) {
-        const points = series.data;
-        const tricontourFn = tricontour()
-            .x((d) => scaleX(d.x))
-            .y((d) => scaleY(d.y))
-            .value((d) => d.value)
-            .thresholds(30);
-        let contours = tricontourFn(points);
-        const geoFn = d3.geoPath();
-        const color = series?.colorScale.domain(d3.extent(contours, (d) => d.value));
-        contours = contours.map((_) => ({
-            ..._,
-            color: color(_.value),
-        }));
-        const u = context.selectAll('path').data(contours);
-        u.enter()
-            .append('path')
-            .merge(u)
-            .attr('d', (_) => geoFn(_))
-            .attr('stroke', 'rgba(255, 255,255,0.5)')
-            .attr('stroke-width', 0.5)
-            .attr('fill', (_) => _.color);
-        u.exit().remove();
-    }
-}
-
-const defaultDrawerMapping = new Map()
-    .set(SeriesType.area, new AreaDrawer())
-    .set(SeriesType.bar, new BarDrawer())
-    .set(SeriesType.line, new LineDrawer())
-    .set(SeriesType.pie, new PieDrawer())
-    .set(SeriesType.scatter, new ScatterDrawer())
-    .set(SeriesType.spline, new SplineDrawer())
-    .set(SeriesType.contour, new ContourDrawer());
-
-var LegendType;
-(function (LegendType) {
-    LegendType[LegendType["swatches"] = 0] = "swatches";
-    LegendType[LegendType["gradient"] = 1] = "gradient";
-})(LegendType || (LegendType = {}));
-
-const classTypeLegendMapping = new Map()
-    .set(SeriesType.line, 'line')
-    .set(SeriesType.spline, 'line');
-class SwatchDrawer {
-    draw(options) {
-        d3.select(options.context.parentElement)
-            .select('.legend-container')
-            .selectAll('.legend')
-            .remove();
-        const defaultData = options.series?.filter((serie) => serie.type !== SeriesType.bar);
-        const barData = options?.series
-            ?.filter((serie) => serie.type === SeriesType.bar)
-            .reduce((acc, serie) => {
-            const data = serie.data.map((_) => ({
-                ..._,
-                serieType: serie.type,
-                serieIndex: serie.id,
-            }));
-            return acc.concat(data);
-        }, []);
-        const legendContainer = d3
-            .select(options.context.parentElement)
-            .select('.legend-container')
-            .append('div')
-            .attr('class', 'legend padding-bottom-4');
-        const defaultLegend = legendContainer
-            .selectAll('div')
-            .data(defaultData)
-            .enter()
-            .append('div')
-            .attr('class', 'item')
-            .style('user-select', 'none');
-        const barLegend = legendContainer
-            .selectAll('.bar')
-            .data(barData)
-            .enter()
-            .append('div')
-            .attr('class', 'item bar')
-            .style('user-select', 'none');
-        defaultLegend
-            .append('div')
-            .attr('class', (_) => classTypeLegendMapping.get(_.type) || 'swatch')
-            .style('background', (_) => _.visible ? _.color ?? 'black' : 'var(--color-text-10)');
-        defaultLegend
-            .append('div')
-            .attr('class', 'label')
-            .text((_) => _.name ?? 'Без названия')
-            .style('text-decoration', (_) => (_.visible ? 'unset' : 'line-through'));
-        barLegend
-            .append('div')
-            .attr('class', 'swatch')
-            .style('background', (_) => _.visible ? _.color ?? 'black' : 'var(--color-text-10)');
-        barLegend
-            .append('div')
-            .attr('class', 'label')
-            .text((_) => _.label ?? 'Без названия')
-            .style('text-decoration', (_) => (_.visible ? 'unset' : 'line-through'));
-    }
-}
-
-class GradientDrawer {
-    draw(options) {
-        const container = d3
-            .select(options.context.parentElement)
-            .select('.legend-container');
-        container.selectAll('.gradient-legend').remove();
-        const svg = container
-            .append('svg')
-            .attr('class', 'gradient-legend')
-            .attr('width', options.width)
-            .attr('height', 32);
-        svg.selectAll('.legend-defs').remove();
-        const extent = d3.extent(options.series[0]?.data, (d) => d.value);
-        const defs = svg.append('defs').attr('class', 'legend-defs');
-        const linearGradient = defs
-            .append('linearGradient')
-            .attr('id', 'legend-gradient');
-        linearGradient
-            .selectAll('stop')
-            .data([...options.series[0]?.data].reverse())
-            .enter()
-            .append('stop')
-            .attr('offset', (d) => ((d.value - extent[0]) / (extent[1] - extent[0])) * 100 + '%')
-            .attr('stop-color', (d) => d.color);
-        const g = svg.append('g').attr('class', 'gradient-legend');
-        g.append('rect')
-            .attr('width', options.width - 80)
-            .attr('transform', 'translate(40, 0)')
-            .attr('height', 4)
-            .style('fill', 'url(#legend-gradient)');
-        const xScale = d3
-            .scaleLinear()
-            .range([80, options.width - 80])
-            .domain(extent)
-            .nice();
-        const tickCount = options.width / 80;
-        const xAxis = d3.axisBottom(xScale).tickSize(8).ticks(tickCount);
-        g.call(xAxis).call((node) => {
-            node.select('.domain').remove();
-            node.selectAll('line').remove();
-        });
-    }
-}
-
-const defaultLegendDrawerMapping = new Map()
-    .set(LegendType.swatches, new SwatchDrawer())
-    .set(LegendType.gradient, new GradientDrawer());
-
-var AxisType;
-(function (AxisType) {
-    AxisType[AxisType["abscissa"] = 0] = "abscissa";
-    AxisType[AxisType["ordinatus"] = 1] = "ordinatus";
-})(AxisType || (AxisType = {}));
-
-class Axis {
-    constructor(options) {
-        this._extents = [0, 0];
-        this._type = options?.type;
-        this._index = options?.index || 0;
-        this._chartOptions = options?.chartOptions;
-        this._height = options?.height;
-        if (this._chartOptions == null) {
-            throw new Error(`No chartOptions for axis ${AxisType[this._type]}`);
-        }
-        this.createExtents();
-        this.width = this.calculateAxisWidth();
-    }
-    get index() {
-        return this._index;
-    }
-    get options() {
-        return this._type === AxisType.abscissa
-            ? this._chartOptions.xAxis[this.index]
-            : this._chartOptions.yAxis[this.index];
-    }
-    get extent() {
-        return this._extents;
-    }
-    get type() {
-        return this._type;
-    }
-    get offset() {
-        return this._offset;
-    }
-    get ticks() {
-        return this._ticks;
-    }
-    setOffset(offset) {
-        this._offset = offset;
-    }
-    calculateAxisWidth() {
-        if (this.type === AxisType.abscissa) {
-            return 0;
-        }
-        const y = d3
-            .scaleLinear()
-            .domain([this.extent[0], this.extent[1]])
-            .range([0, this._height])
-            .nice();
-        const body = d3
-            .select('body')
-            .append('svg')
-            .attr('class', 'calculate-offset')
-            .style('position', 'absolute')
-            .style('left', '-9999px');
-        const axis = d3.axisRight(y).tickValues(this.ticks);
-        const element = body.append('g').attr('class', 'font-caption').call(axis);
-        const bBox = element.node().getBBox();
-        d3.selectAll('.calculate-offset').remove();
-        return bBox.width;
-    }
-    createExtents() {
-        const hasMin = this.options?.min != null;
-        const hasMax = this.options?.max != null;
-        if (!hasMin || !hasMax) {
-            const filtered = this._chartOptions?.series?.filter((serie) => this._index ===
-                serie[this._type === AxisType.abscissa ? 'xAxisIndex' : 'yAxisIndex']);
-            const raw = filtered.map((series) => d3.extent(series?.data, (point) => this._type === AxisType.abscissa ? point.x : point.y));
-            const merged = [].concat(...(raw ?? []));
-            const abs = (num) => Math.abs(num);
-            this._extents = this.options.negative
-                ? [-Math.abs(d3.max(merged.map(abs))), d3.max(merged.map(abs))]
-                : [d3.min(merged), d3.max(merged)];
-        }
-        if (hasMin) {
-            this._extents[0] = this.options?.min;
-        }
-        if (hasMax) {
-            this._extents[1] = this.options?.max;
-        }
-    }
-}
-Axis.offsetFactor = 22;
-
-var ScaleType;
-(function (ScaleType) {
-    ScaleType[ScaleType["linear"] = 0] = "linear";
-    ScaleType[ScaleType["log"] = 1] = "log";
-    ScaleType[ScaleType["pow"] = 2] = "pow";
-    ScaleType[ScaleType["sqrt"] = 3] = "sqrt";
-    ScaleType[ScaleType["time"] = 4] = "time";
-})(ScaleType || (ScaleType = {}));
-
-var ZoomType;
-(function (ZoomType) {
-    ZoomType[ZoomType["x"] = 0] = "x";
-    ZoomType[ZoomType["y"] = 1] = "y";
-    ZoomType[ZoomType["xy"] = 2] = "xy";
-})(ZoomType || (ZoomType = {}));
-
-class TetaChart {
-    constructor(options, element) {
-        this.plotLinesMove$ = new Subject();
-        this.plotBandsMove$ = new Subject();
-        this.seriesMove$ = new Subject();
-        this.pointMove$ = new Subject();
-        this.zoom$ = new Subject();
-        this._container = null;
-        this._width = 0;
-        this._height = 0;
-        this._zoomYCache = new Map();
-        this._zoomXCache = new Map();
-        this._zoom = d3.zoom();
-        this.visibleChartWindowWidth = 0;
-        this._xScales = new Map();
-        this._yScales = new Map();
-        this._clonedX = new Map();
-        this._clonedY = new Map();
-        this.offsetOpposite = 0;
-        this.offsetNonOpposite = 0;
-        this._zoomAdded = false;
-        this._options = options;
-        this.selectNode(element);
-        this.createTooltip();
-        this.plotLinesMove = this.plotLinesMove$.asObservable();
-        this.plotBandsMove = this.plotBandsMove$.asObservable();
-        this.seriesMove = this.seriesMove$.asObservable();
-        this.pointMove = this.pointMove$.asObservable();
-        this.zoom = this.zoom$.asObservable();
-    }
-    redraw(options) {
-        if (options) {
-            this._options = options;
-        }
-        this.createAxis();
-        this.createScales();
-        this.createMarkers();
-        this.createVisibleWindow();
-        this._redraw();
-        this.drawLegend();
-        if (this._commonZoomTransform) {
-            this._chart.call(this._zoom.transform, this._commonZoomTransform);
-        }
-        if (!this._zoomAdded) {
-            this.addZoom();
-            this._zoomAdded = true;
-        }
-        this.addAxesZoom();
-    }
-    setZoom(zoom) {
-        if (!this._zoom) {
-            return;
-        }
-        this._chart.call(this._zoom.transform, zoom?.zoomTransform ?? zoomIdentity);
-    }
-    setSize(size = { width: 0, height: 0 }) {
-        this._height = size.height;
-        this._width = size.width;
-        this._chart.attr('width', this._width).attr('height', this._height);
-        this._canvas.attr('width', this._width).attr('height', this._height);
-        const extent = [
-            [
-                this.offsetNonOpposite
-                    ? this.offsetNonOpposite
-                    : this._options.bounds.left,
-                this._options.bounds.top,
-            ],
-            [
-                this._width -
-                    (this.offsetOpposite
-                        ? this.offsetOpposite
-                        : this._options.bounds.right),
-                this._height - this._options.bounds.bottom,
-            ],
-        ];
-        this._zoom
-            .scaleExtent([1, Infinity])
-            .translateExtent(extent)
-            .extent(extent);
-    }
-    createVisibleWindow() {
-        this.uniqId = (Date.now() + Math.random()).toString(36);
-        this._chart.selectAll('defs').remove();
-        this._chart
-            .append('defs')
-            .append('clipPath')
-            .attr('id', `draw-window-${this.uniqId}`)
-            .append('rect')
-            .attr('x', this.offsetNonOpposite === 0
-            ? this._options.bounds.left
-            : this.offsetNonOpposite)
-            .attr('y', this._options.bounds.top)
-            .attr('width', this.visibleChartWindowWidth + 1)
-            .attr('height', this._height -
-            this._options.bounds.bottom -
-            this._options.bounds.top +
-            1 >
-            0
-            ? this._height -
-                this._options.bounds.bottom -
-                this._options.bounds.top +
-                1
-            : 0);
-    }
-    createAxis() {
-        this._xAxisList = this._options.xAxis.map((_, index) => new Axis({
-            type: AxisType.abscissa,
-            index,
-            chartOptions: this._options,
-        }));
-        this._yAxisList = this._options.yAxis.map((_, index) => {
-            const axis = new Axis({
-                type: AxisType.ordinatus,
-                index,
-                chartOptions: this._options,
-                height: this._height,
-            });
-            return axis;
-        });
-        const nonTitleOffset = 6;
-        this.offsetNonOpposite = d3.reduce(this._yAxisList.filter((_) => _.options?.opposite !== true && _.options?.visible), (sum, axis) => {
-            const offset = sum +
-                axis.width +
-                (axis?.options?.title ? Axis.offsetFactor : nonTitleOffset);
-            axis.setOffset(offset);
-            return offset;
-        }, 0);
-        this.offsetOpposite = d3.reduce(this._yAxisList.filter((_) => _.options?.opposite === true && _.options?.visible), (sum, axis) => {
-            const offset = sum +
-                axis.width +
-                (axis?.options?.title ? Axis.offsetFactor : nonTitleOffset);
-            axis.setOffset(offset);
-            return offset;
-        }, 0);
-        this.visibleChartWindowWidth = this.caluclateChartWidth();
-    }
-    _redraw() {
-        this.drawPlotBands();
-        this.drawPlotLines();
-        this.drawChart();
-        this.drawAxis();
-        this.drawGridLines();
-        this.drawAnnotations();
-    }
-    addZoom() {
-        if (this._options?.zoom?.enable) {
-            const hasXZoom = [ZoomType.x, ZoomType.xy].includes(this._options.zoom.zoomType);
-            const hasYZoom = [ZoomType.y, ZoomType.xy].includes(this._options.zoom.zoomType);
-            this._chart.call(this._zoom.on('start end zoom', (event) => {
-                if (hasXZoom) {
-                    for (const [key, value] of this._clonedX.entries()) {
-                        const rescaled = event.transform.rescaleX(value);
-                        this._xScales.set(key, rescaled);
-                        if (event.sourceEvent) {
-                            this.zoom$.next({
-                                domain: rescaled.domain(),
-                                zoomTransform: event.transform,
-                                zoomType: ZoomType.x,
-                                event,
-                            });
-                        }
-                    }
-                }
-                if (hasYZoom) {
-                    for (const [key, value] of this._clonedY.entries()) {
-                        const rescaled = event.transform.rescaleY(value);
-                        this._yScales.set(key, rescaled);
-                        if (event.type === 'zoom') {
-                            if (event.sourceEvent) {
-                                this.zoom$.next({
-                                    domain: rescaled.domain(),
-                                    zoomTransform: event.transform,
-                                    zoomType: ZoomType.y,
-                                    event,
-                                });
-                            }
-                        }
-                    }
-                }
-                if (event.type === 'end') {
-                    this._commonZoomTransform = event.transform;
-                }
-                this._redraw();
-            }));
-        }
-    }
-    addAxesZoom() {
-        this._chart.selectAll('.zoom-behavior').remove();
-        [...this._yAxisList, ...this._xAxisList]
-            .filter((axis) => axis.options.visible && axis.options.zoom)
-            .forEach((axis) => {
-            const foundNode = this._chart
-                .select(`[data-${axis.type === AxisType.abscissa ? 'x' : 'y'}-scale-id='${axis.index}']`)
-                .node();
-            if (!foundNode) {
-                return;
-            }
-            const bBox = foundNode.getBBox();
-            const translateX = axis.type === AxisType.abscissa
-                ? this.offsetNonOpposite
-                    ? this.offsetNonOpposite
-                    : this._options.bounds.left + this.offsetNonOpposite
-                : axis.options.opposite
-                    ? this._width - axis.offset
-                    : axis.offset - bBox.width;
-            const zoom = d3
-                .zoom()
-                .scaleExtent([1, Infinity])
-                .on('zoom end', (event) => {
-                if (axis.type === AxisType.abscissa) {
-                    const scale = this._clonedX.get(axis.index);
-                    this._xScales.set(axis.index, event.transform.rescaleX(scale));
-                }
-                else {
-                    const scale = this._clonedY.get(axis.index);
-                    this._yScales.set(axis.index, event.transform.rescaleY(scale));
-                }
-                if (event.type === 'end') {
-                    if (axis.type === AxisType.ordinatus) {
-                        this._zoomYCache.set(axis.index, event.transform);
-                    }
-                    if (axis.type === AxisType.abscissa) {
-                        this._zoomXCache.set(axis.index, event.transform);
-                        this._chart.call(this._zoom.transform, event.transform);
-                    }
-                }
-                this._redraw();
-            });
-            const restoredTransform = axis.type === AxisType.ordinatus
-                ? this._zoomYCache.get(axis.index)
-                : this._zoomXCache.get(axis.index);
-            this._chart
-                .append('rect')
-                .attr('class', 'zoom-behavior')
-                .attr('height', bBox.height)
-                .attr('width', bBox.width)
-                .attr('transform', `translate(${translateX}, ${axis.type === AxisType.abscissa
-                ? this._height - this._options.bounds.bottom
-                : this._options.bounds.top})`)
-                .style('opacity', '0')
-                .style('pointer-events', 'all')
-                .call(zoom.transform, restoredTransform ?? d3.zoomIdentity)
-                .call(zoom);
-        });
-    }
-    selectNode(element) {
-        this._container = element;
-        d3.select(element.nativeElement).selectAll('.tooltip-chart').remove();
-        d3.select(element.nativeElement).selectAll('svg').remove();
-        d3.select(element.nativeElement).selectAll('canvas').remove();
-        this._chart = d3
-            .select(element.nativeElement)
-            .append('svg')
-            .attr('position', 'relative')
-            .style('z-index', 0);
-        this._canvas = d3
-            .select(element.nativeElement)
-            .append('canvas')
-            .attr('class', 'main-canvas')
-            .style('transform', 'translate(35, 0)')
-            .style('position', 'absolute')
-            .style('z-index', 1);
-    }
-    drawAnnotations() {
-        this._chart.selectAll('.annotations').remove();
-        const annotations = this._options.annotations?.map((annotation) => {
-            const x = this._xScales.get(annotation.xAxisIndex);
-            const y = this._yScales.get(annotation.yAxisIndex);
-            return {
-                note: annotation.note,
-                connector: annotation.connector,
-                x: x(annotation.point?.x),
-                y: y(annotation.point?.y),
-                dx: annotation.dx,
-                dy: annotation.dy,
-                type: annotation.type,
-                className: annotation.className,
-            };
-        });
-        const makeAnnotations = d3annotation
-            .annotation()
-            .annotations(annotations ?? []);
-        this._chart
-            .append('g')
-            .attr('class', 'annotations')
-            .attr('clip-path', `url(#draw-window-${this.uniqId})`)
-            .call(makeAnnotations)
-            .lower();
-    }
-    drawPlotLines() {
-        this._chart.selectAll('.plotlines').remove();
-        const plotlineGroup = this._chart
-            .append('g')
-            .attr('class', 'plotlines')
-            .style('shape-rendering', 'crispEdges')
-            .attr('clip-path', `url(#draw-window-${this.uniqId})`);
-        this._xAxisList
-            .filter((_) => _.options.plotLines.length > 0)
-            .forEach((axis) => {
-            const [min, max] = axis.extent;
-            const x = this._xScales.get(axis.index);
-            const plotlinesPoints = axis.options.plotLines;
-            const getTextCenterPointPx = (d, idx) => x((d?.value +
-                (plotlinesPoints[idx - 1]
-                    ? plotlinesPoints[idx - 1]?.value
-                    : 0)) /
-                2);
-            const opacity = (d, idx) => {
-                const displayWidth = 20;
-                const width = x(d?.value) -
-                    x(plotlinesPoints[idx - 1] ? plotlinesPoints[idx - 1]?.value : 0);
-                return width <= displayWidth ? 0 : 1;
-            };
-            plotlineGroup
-                .selectAll('.label')
-                .data(plotlinesPoints)
-                .join('text')
-                .attr('class', 'label font-body-3 fill-text-70')
-                .attr('x', getTextCenterPointPx)
-                .attr('y', (d) => this._height / 2)
-                .attr('text-anchor', 'middle')
-                .attr('dominant-baseline', 'central')
-                .attr('transform', (d, idx) => `rotate(-90, ${getTextCenterPointPx(d, idx)}, ${this._height / 2})`)
-                .text((d) => d?.label ?? '')
-                .style('opacity', opacity);
-            plotlineGroup
-                .selectAll('.plotline')
-                .data(plotlinesPoints)
-                .join('line')
-                .attr('class', 'plotline')
-                .attr('data-plotline-id', (d) => d.id)
-                .attr('x1', (d) => x(d.value))
-                .attr('x2', (d) => x(d.value))
-                .attr('y1', 0)
-                .attr('y2', this._height -
-                this._options.bounds.top -
-                this._options.bounds.bottom)
-                .attr('transform', `translate(0, ${this._options.bounds.top})`)
-                .style('stroke-width', (d) => d.width)
-                .style('stroke', (d) => d.color)
-                .style('stroke-dasharray', (d) => (d.dashed ? '8, 8' : '0, 0'));
-            const emit = (event, plotLine) => {
-                this.plotLinesMove$.next({ event, target: plotLine });
-            };
-            plotlineGroup
-                .selectAll('.drag-plotline')
-                .data(plotlinesPoints)
-                .join('line')
-                .attr('class', 'drag-plotline')
-                .attr('x1', (d) => x(d.value))
-                .attr('x2', (d) => x(d.value))
-                .attr('y1', 0)
-                .attr('y2', this._height -
-                this._options.bounds.top -
-                this._options.bounds.bottom)
-                .attr('transform', `translate(0, ${this._options.bounds.top})`)
-                .style('stroke-width', 8)
-                .style('stroke', 'rgba(0, 0, 0, 0)')
-                .style('cursor', 'col-resize')
-                .call(d3
-                .drag()
-                .on('drag', function (event, d) {
-                const group = d3.select(this).node().parentElement;
-                const draggedPlotLine = d3
-                    .select(group)
-                    .select(`[data-plotline-id='${d.id}']`);
-                d.value = x.invert(event.x);
-                const minValue = d.min ?? min;
-                const maxValue = d.max ?? max;
-                const borderLeftReached = d.value <= minValue;
-                const borderRightReached = d.value >= maxValue;
-                if (borderLeftReached) {
-                    d.value = minValue;
-                }
-                if (borderRightReached) {
-                    d.value = maxValue;
-                }
-                d3.select(this).attr('x1', x(d.value)).attr('x2', x(d.value));
-                draggedPlotLine.attr('x1', x(d.value)).attr('x2', x(d.value));
-                emit(event, d);
-            })
-                .on('end', (event, d) => {
-                emit(event, d);
-            }));
-        });
-        this._yAxisList
-            .filter((_) => _.options.plotLines.length > 0)
-            .forEach((axis) => {
-            const [min, max] = axis.extent;
-            const y = this._yScales.get(axis.index);
-            const plotlinesPoints = axis.options.plotLines;
-            plotlineGroup
-                .selectAll('.plotline')
-                .data(plotlinesPoints)
-                .join('line')
-                .attr('class', 'plotline')
-                .attr('data-plotline-id', (d) => d.id)
-                .attr('y1', (d) => y(d.value))
-                .attr('y2', (d) => y(d.value))
-                .attr('x1', 0)
-                .attr('x2', this._width - this._options.bounds.left - this._options.bounds.right)
-                .attr('transform', `translate(${this._options.bounds.left}, 0)`)
-                .style('stroke-width', (d) => d.width)
-                .style('stroke', (d) => d.color)
-                .style('stroke-dasharray', (d) => (d.dashed ? '8, 8' : '0, 0'));
-            const emit = (event, plotLine) => {
-                this.plotLinesMove$.next({ event, target: plotLine });
-            };
-            plotlineGroup
-                .selectAll('.drag-plotline')
-                .data(plotlinesPoints)
-                .join('line')
-                .attr('class', 'drag-plotline')
-                .attr('y1', (d) => y(d.value))
-                .attr('y2', (d) => y(d.value))
-                .attr('x1', 0)
-                .attr('x2', this._width - this._options.bounds.left - this._options.bounds.right)
-                .attr('transform', `translate(${this._options.bounds.left}, 0)`)
-                .style('stroke-width', 8)
-                .style('stroke', 'rgba(0, 0, 0, 0)')
-                .style('cursor', 'row-resize')
-                .call(d3
-                .drag()
-                .on('drag', function (event, d) {
-                const group = d3.select(this).node().parentElement;
-                const draggedPlotLine = d3
-                    .select(group)
-                    .select(`[data-plotline-id='${d.id}']`);
-                d.value = y.invert(event.y);
-                const minValue = d.min ?? min;
-                const maxValue = d.max ?? max;
-                const borderTopReached = d.value <= minValue;
-                const borderBottomReached = d.value >= maxValue;
-                if (borderTopReached) {
-                    d.value = minValue;
-                }
-                if (borderBottomReached) {
-                    d.value = maxValue;
-                }
-                d3.select(this).attr('y1', y(d.value)).attr('y2', y(d.value));
-                draggedPlotLine.attr('y1', y(d.value)).attr('y2', y(d.value));
-                emit(event, d);
-            })
-                .on('end', (event, d) => {
-                emit(event, d);
-            }));
-        });
-    }
-    drawPlotBands() {
-        this._chart.selectAll('.plotbands').remove();
-        const plotBandGroup = this._chart
-            .append('g')
-            .attr('class', 'plotbands')
-            .attr('clip-path', `url(#draw-window-${this.uniqId})`);
-        this._xAxisList
-            .filter((_) => _.options.plotBands.length > 0)
-            .forEach((axis) => {
-            const x = this._xScales.get(axis.index);
-            const [min, max] = axis.extent;
-            const plotband = plotBandGroup
-                .append('g')
-                .style('shape-rendering', 'crispEdges');
-            const plotBandHeight = this._height - this._options.bounds.top - this._options.bounds.bottom;
-            const emit = (event, plotBand) => {
-                this.plotBandsMove$.next({
-                    event,
-                    target: plotBand,
-                });
-            };
-            plotband
-                .selectAll('rect')
-                .data(axis.options.plotBands)
-                .on('start', (_) => {
-                this._chart.selectAll('.marker').style('display', 'none');
-                d3.select(this._container.nativeElement)
-                    .select('.tooltip-chart')
-                    .style('display', 'none');
-            })
-                .join('rect')
-                .attr('data-plotband-id', (d) => d.id)
-                .attr('x', (d) => x(d.from))
-                .attr('y', 0)
-                .attr('width', (d) => Math.abs(x(d.to) - x(d.from)))
-                .attr('fill', (d) => {
-                if (d.image) {
-                    return `url(#${d.image})`;
-                }
-                return d.color;
-            })
-                .style('opacity', (d) => d.opacity ?? 1)
-                .attr('height', plotBandHeight > 0 ? plotBandHeight : 0)
-                .attr('transform', `translate(0, ${this._options.bounds.top})`);
-            plotband
-                .selectAll('.line-left')
-                .data(axis.options.plotBands)
-                .join('line')
-                .attr('data-line-left-id', (d) => d.id)
-                .attr('class', 'line-left')
-                .attr('x1', (d) => x(d.from))
-                .attr('x2', (d) => x(d.from))
-                .attr('y1', 0)
-                .attr('y2', this._height -
-                this._options.bounds.top -
-                this._options.bounds.bottom)
-                .attr('transform', `translate(0, ${this._options.bounds.top})`)
-                .style('stroke-width', 1)
-                .style('stroke-dasharray', '8, 8')
-                .style('stroke', 'var(--color-text-90)')
-                .style('opacity', (d) => (d.showGrabbers ? 1 : 0));
-            plotband
-                .selectAll('.drag-left')
-                .data(axis.options.plotBands)
-                .join('line')
-                .attr('x1', (d) => x(d.from))
-                .attr('x2', (d) => x(d.from))
-                .attr('y1', 0)
-                .attr('y2', this._height -
-                this._options.bounds.top -
-                this._options.bounds.bottom)
-                .style('display', (d) => (d?.resizable ? 'unset' : 'none'))
-                .attr('transform', `translate(0, ${this._options.bounds.top})`)
-                .style('stroke-width', 8)
-                .style('stroke', 'rgba(0, 0, 0, 0)')
-                .style('cursor', 'col-resize')
-                .call(d3
-                .drag()
-                .on('drag', function (event, d) {
-                const group = d3.select(this).node().parentElement;
-                const draggedBand = d3
-                    .select(group)
-                    .select(`[data-plotband-id='${d.id}']`);
-                const draggedLine = d3
-                    .select(group)
-                    .select(`[data-line-left-id='${d.id}']`);
-                d.from = x.invert(event.x);
-                const minValue = d.min ?? min;
-                const borderReached = d.from <= minValue;
-                if (borderReached) {
-                    d.from = minValue;
-                }
-                if (d.from >= d.to) {
-                    d.from = d.to;
-                }
-                d3.select(this).attr('x1', x(d.from)).attr('x2', x(d.from));
-                draggedBand
-                    .attr('x', x(d.from))
-                    .attr('width', x(d.to) - x(d.from));
-                draggedLine.attr('x1', x(d.from)).attr('x2', x(d.from));
-                emit(event, d);
-            })
-                .on('end', (event, d) => emit(event, d)));
-            plotband
-                .selectAll('.line-right')
-                .data(axis.options.plotBands)
-                .join('line')
-                .attr('data-line-right-id', (d) => d.id)
-                .attr('class', 'line-right')
-                .attr('x1', (d) => x(d.to))
-                .attr('x2', (d) => x(d.to))
-                .attr('y1', 0)
-                .attr('y2', this._height -
-                this._options.bounds.top -
-                this._options.bounds.bottom)
-                .attr('transform', `translate(0, ${this._options.bounds.top})`)
-                .style('stroke-width', 1)
-                .style('stroke-dasharray', '8, 8')
-                .style('stroke', 'var(--color-text-90)')
-                .style('opacity', (d) => (d.showGrabbers ? 1 : 0));
-            plotband
-                .selectAll('.drag-right')
-                .data(axis.options.plotBands)
-                .join('line')
-                .attr('class', 'drag-right')
-                .style('display', (d) => (d?.resizable ? 'unset' : 'none'))
-                .attr('x1', (d) => x(d.to))
-                .attr('x2', (d) => x(d.to))
-                .attr('y1', 0)
-                .attr('y2', this._height -
-                this._options.bounds.top -
-                this._options.bounds.bottom)
-                .attr('transform', `translate(0, ${this._options.bounds.top})`)
-                .style('stroke-width', 8)
-                .style('stroke', 'rgba(0, 0, 0, 0)')
-                .style('cursor', 'col-resize')
-                .call(d3
-                .drag()
-                .on('drag', function (event, d) {
-                const group = d3.select(this).node().parentElement;
-                const draggedBand = d3
-                    .select(group)
-                    .select(`[data-plotband-id='${d.id}']`);
-                const draggedLine = d3
-                    .select(group)
-                    .select(`[data-line-right-id='${d.id}']`);
-                d.to = x.invert(event.x);
-                const maxValue = d.max ?? max;
-                const borderReached = d.to >= maxValue;
-                if (borderReached) {
-                    d.to = maxValue;
-                }
-                if (d.to <= d.from) {
-                    d.to = d.from;
-                }
-                d3.select(this).attr('x1', x(d.to)).attr('x2', x(d.to));
-                draggedBand.attr('width', x(d.to) - x(d.from));
-                draggedLine.attr('x1', x(d.to)).attr('x2', x(d.to));
-                emit(event, d);
-            })
-                .on('end', (event, d) => emit(event, d)));
-        });
-        this._yAxisList
-            .filter((_) => _.options.plotBands.length > 0)
-            .forEach((axis) => {
-            const y = this._yScales.get(axis.index);
-            const [min, max] = axis.extent;
-            const plotband = plotBandGroup
-                .append('g')
-                .style('shape-rendering', 'crispEdges');
-            const plotBandWidth = this._width - this._options.bounds.left - this._options.bounds.right; // TODO add multiaxis support width
-            const emit = (event, plotBand) => {
-                this.plotBandsMove$.next({
-                    event,
-                    target: plotBand,
-                });
-            };
-            const dragPlotband = d3
-                .drag()
-                .subject(function () {
-                const element = d3.select(this);
-                return { y: element.attr('y') };
-            })
-                .on('start drag end', function (event, d) {
-                const element = d3.select(this);
-                const height = parseFloat(element.attr('height'));
-                d.to = y.invert(event.y + height);
-                d.from = y.invert(event.y);
-                const minValue = d.min ?? min;
-                const maxValue = d.max ?? max;
-                const borderReachedMin = d.from <= minValue;
-                const borderReachedMax = d.to >= maxValue;
-                if (borderReachedMin) {
-                    d.to = y.invert(y(minValue) + height);
-                    d.from = minValue;
-                }
-                if (borderReachedMax) {
-                    d.to = maxValue;
-                    d.from = y.invert(y(maxValue) - height);
-                }
-                element.attr('y', y(d.from));
-                const group = element.node().parentElement;
-                d3.select(group)
-                    .select(`[data-line-left-id='${d.id}']`)
-                    .attr('y1', y(d.from))
-                    .attr('y2', y(d.from));
-                d3.select(group)
-                    .select(`[data-grab-left-id='${d.id}']`)
-                    .attr('y1', y(d.from))
-                    .attr('y2', y(d.from));
-                d3.select(group)
-                    .select(`[data-line-right-id='${d.id}']`)
-                    .attr('y1', y(d.to))
-                    .attr('y2', y(d.to));
-                d3.select(group)
-                    .select(`[data-grab-right-id='${d.id}']`)
-                    .attr('y1', y(d.to))
-                    .attr('y2', y(d.to));
-                emit(event, d);
-            });
-            const leftGrabDrag = d3
-                .drag()
-                .on('drag', function (event, d) {
-                const group = d3.select(this).node().parentElement;
-                const draggedBand = d3
-                    .select(group)
-                    .select(`[data-plotband-id='${d.id}']`);
-                const draggedLine = d3
-                    .select(group)
-                    .select(`[data-line-left-id='${d.id}']`);
-                d.from = y.invert(event.y);
-                const minValue = d.min ?? min;
-                const borderReached = d.from <= minValue;
-                if (borderReached) {
-                    d.from = minValue;
-                }
-                if (d.from >= d.to) {
-                    d.from = d.to;
-                }
-                d3.select(this).attr('y1', y(d.from)).attr('y2', y(d.from));
-                draggedBand
-                    .attr('y', y(d.from))
-                    .attr('height', Math.abs(y(d.to) - y(d.from)));
-                draggedLine.attr('y1', y(d.from)).attr('y2', y(d.from));
-                emit(event, d);
-            })
-                .on('end', (event, d) => emit(event, d));
-            const rightGrabDrag = d3
-                .drag()
-                .on('drag', function (event, d) {
-                const group = d3.select(this).node().parentElement;
-                const draggedBand = d3
-                    .select(group)
-                    .select(`[data-plotband-id='${d.id}']`);
-                const draggedLine = d3
-                    .select(group)
-                    .select(`[data-line-right-id='${d.id}']`);
-                d.to = y.invert(event.y);
-                const maxValue = d.max ?? max;
-                const borderReached = d.to >= maxValue;
-                if (borderReached) {
-                    d.to = maxValue;
-                }
-                if (d.to <= d.from) {
-                    d.to = d.from;
-                }
-                d3.select(this).attr('y1', y(d.to)).attr('y2', y(d.to));
-                draggedBand
-                    .attr('y', y(d.from))
-                    .attr('height', Math.abs(y(d.to) - y(d.from)));
-                draggedLine.attr('y1', y(d.to)).attr('y2', y(d.to));
-                emit(event, d);
-            })
-                .on('end', (event, d) => emit(event, d));
-            plotband
-                .selectAll('rect')
-                .data(axis.options.plotBands)
-                .join('rect')
-                .attr('data-plotband-id', (d) => d.id)
-                .attr('x', 0)
-                .attr('y', (d) => y(d.from))
-                .attr('width', (d) => plotBandWidth)
-                .attr('fill', (d) => {
-                if (d.image) {
-                    return `url(#${d.image})`;
-                }
-                return d.color;
-            })
-                .style('opacity', (d) => d.opacity ?? 1)
-                .attr('height', (d) => Math.abs(y(d.to) - y(d.from)))
-                .attr('cursor', (d) => (d.draggable ? 'move' : 'default'));
-            plotband
-                .selectAll('.line-left')
-                .data(axis.options.plotBands.filter((d) => d.resizable))
-                .join('line')
-                .attr('data-line-left-id', (d) => d.id)
-                .attr('class', 'line-left')
-                .attr('y1', (d) => y(d.from))
-                .attr('y2', (d) => y(d.from))
-                .attr('x1', 0)
-                .attr('x2', plotBandWidth)
-                .style('stroke-width', 1)
-                .style('stroke-dasharray', '8, 8')
-                .style('stroke', 'var(--color-text-90)')
-                .style('opacity', (d) => (d.showGrabbers ? 1 : 0));
-            plotband
-                .selectAll('.drag-left')
-                .data(axis.options.plotBands.filter((d) => d.resizable))
-                .join('line')
-                .attr('data-grab-left-id', (d) => d.id)
-                .attr('y1', (d) => y(d.from))
-                .attr('y2', (d) => y(d.from))
-                .attr('x1', 0)
-                .attr('x2', plotBandWidth)
-                .style('stroke-width', 8)
-                .style('stroke', 'rgba(0, 0, 0, 0)')
-                .style('cursor', (d) => (d.resizable ? 'row-resize' : 'default'));
-            plotband
-                .selectAll('.line-right')
-                .data(axis.options.plotBands.filter((d) => d.resizable))
-                .join('line')
-                .attr('data-line-right-id', (d) => d.id)
-                .attr('class', 'line-right')
-                .attr('y1', (d) => y(d.to))
-                .attr('y2', (d) => y(d.to))
-                .attr('x1', 0)
-                .attr('x2', plotBandWidth)
-                .style('stroke-width', 1)
-                .style('stroke-dasharray', '8, 8')
-                .style('stroke', 'var(--color-text-90)')
-                .style('opacity', (d) => (d.showGrabbers ? 1 : 0));
-            plotband
-                .selectAll('.drag-right')
-                .data(axis.options.plotBands.filter((d) => d.resizable))
-                .join('line')
-                .attr('class', 'drag-right')
-                .attr('data-grab-right-id', (d) => d.id)
-                .attr('y1', (d) => y(d.to))
-                .attr('y2', (d) => y(d.to))
-                .attr('x1', 0)
-                .attr('x2', plotBandWidth)
-                .style('stroke-width', 8)
-                .style('stroke', 'rgba(0, 0, 0, 0)')
-                .style('cursor', (d) => (d.resizable ? 'row-resize' : 'default'));
-            axis.options.plotBands.forEach((_) => {
-                if (_.draggable) {
-                    plotband.select(`[data-plotband-id='${_.id}']`).call(dragPlotband);
-                }
-                if (_.resizable) {
-                    plotband.select(`[data-grab-left-id='${_.id}']`).call(leftGrabDrag);
-                    plotband
-                        .select(`[data-grab-right-id='${_.id}']`)
-                        .call(rightGrabDrag);
-                }
-            });
-        });
-    }
-    drawChart() {
-        const series = this._options.series?.filter((_) => _.visible);
-        this._chart.selectAll('.series').remove();
-        if (!series || series.length < 1) {
-            d3.select(this._container.nativeElement)
-                .select('canvas')
-                .style('display', 'none');
-        }
-        const group = this._chart
-            .append('g')
-            .attr('class', 'series')
-            .attr('clip-path', `url(#draw-window-${this.uniqId})`);
-        series?.forEach((seriesItem, index) => {
-            if (seriesItem.renderTo === 'canvas') {
-                d3.select(this._container.nativeElement)
-                    .select('canvas')
-                    .style('display', null);
-                d3.select(this._container.nativeElement)
-                    .select('svg')
-                    .style('position', 'absolute');
-            }
-            else {
-                d3.select(this._container.nativeElement)
-                    .select('canvas')
-                    .style('display', 'none');
-            }
-            if (!this._xScales.has(seriesItem.xAxisIndex) ||
-                !this._yScales.has(seriesItem.yAxisIndex)) {
-                return;
-            }
-            const foundX = this._xScales.get(seriesItem.xAxisIndex);
-            const foundY = this._yScales.get(seriesItem.yAxisIndex);
-            const drawer = seriesItem.drawer != null
-                ? seriesItem.drawer
-                : defaultDrawerMapping.get(seriesItem.type);
-            if (!drawer) {
-                throw new Error(`No drawer for series ${seriesItem.name}, type ${SeriesType[seriesItem.type]}`);
-            }
-            if (seriesItem.renderTo === 'canvas') {
-                const context = this._canvas.node().getContext('2d');
-                context.clearRect(0, 0, this._width, this._height);
-            }
-            let [xMin, xMax] = foundX.domain();
-            let [yMin, yMax] = foundY.domain();
-            xMin = xMin instanceof Date ? xMin.getTime() : xMin;
-            xMax = xMax instanceof Date ? xMax.getTime() : xMax;
-            yMin = yMin instanceof Date ? yMin.getTime() : yMin;
-            yMax = yMax instanceof Date ? yMax.getTime() : yMax;
-            const visiblePoints = (point, idx, arr) => (point.x <= xMax ||
-                point.x1 <= xMax ||
-                (arr[idx - 1] && arr[idx - 1].x <= xMax) ||
-                (arr[idx - 1] && arr[idx - 1].x1 <= xMax)) &&
-                (point.x >= xMin ||
-                    point.x1 >= xMin ||
-                    (arr[idx + 1] && arr[idx + 1].x >= xMin) ||
-                    (arr[idx + 1] && arr[idx + 1].x1 >= xMin)) &&
-                (point.y <= yMax ||
-                    point.y1 <= yMax ||
-                    (arr[idx - 1] && arr[idx - 1].y <= yMax) ||
-                    (arr[idx - 1] && arr[idx - 1].y1 <= yMax)) &&
-                (point.y >= yMin ||
-                    point.y1 >= yMin ||
-                    (arr[idx + 1] && arr[idx + 1].y >= yMin) ||
-                    (arr[idx + 1] && arr[idx + 1].y1 >= yMin));
-            const filteredData = seriesItem.data; //.filter(visiblePoints);
-            const serie = {
-                ...seriesItem,
-                data: filteredData,
-            };
-            drawer.draw(serie, seriesItem.renderTo === 'canvas' ? this._canvas : group, foundX, foundY, this._options);
-            const emit = (event) => {
-                this.seriesMove$.next(event);
-            };
-            const emitPoint = (event) => {
-                this.pointMove$.next(event);
-            };
-            drawer?.dispatch?.on(DispatchType.moveLine, function () {
-                emit(this);
-            });
-            drawer?.dispatch?.on(DispatchType.movePoint, function () {
-                emitPoint(this);
-            });
-        });
-    }
-    createTooltip() {
-        d3.select(this._container.nativeElement)
-            .append('div')
-            .attr('class', 'tooltip-chart color-text-90 bg-background-50 shadow-2')
-            .style('position', 'fixed')
-            .style('top', 'unset')
-            .style('right', 'unset')
-            .style('bottom', 'unset')
-            .style('left', 'unset')
-            .style('pointer-events', 'none')
-            .style('display', 'none');
-    }
-    handleMouseMove(options) {
-        const mouse = d3.pointer(options.event);
-        const { top, right, bottom, left } = this.tooltipPosition(options.event);
-        const tooltipsData = [];
-        this._chart
-            .select('.marker-line')
-            .attr('transform', `translate(${0}, ${mouse[1] - 2})`);
-        this._chart
-            .selectAll('.marker')
-            .attr('transform', (d) => {
-            if (!d.data.length) {
-                return;
-            }
-            if (!this._xScales.has(d.xAxisIndex) ||
-                !this._yScales.has(d.yAxisIndex)) {
-                return;
-            }
-            const foundX = this._xScales.get(d.xAxisIndex);
-            const foundY = this._yScales.get(d.yAxisIndex);
-            if (this._options.tooltip.tracking === 'x') {
-                const [min, max] = foundX.domain();
-                const filteredData = d.data.filter((point) => point.x <= max && point.x >= min);
-                const sorted = [...filteredData].sort((a, b) => d3.ascending(a.x, b.x));
-                const bisect = d3.bisector((dd) => dd.x).left;
-                const x0 = foundX.invert(mouse[0]);
-                const index = bisect(sorted, x0);
-                const data = sorted[index] ? sorted[index] : sorted[index - 1];
-                tooltipsData.push({
-                    point: data,
-                    color: d.color,
-                    name: d.name,
-                });
-                return `translate(${!isNaN(data?.x) && data?.x != null ? foundX(data.x) : -10}, ${!isNaN(data?.y) && data?.y != null ? foundY(data.y) : -10})`;
-            }
-            if (this._options.tooltip.tracking === 'y') {
-                const sorted = [...d.data].sort((a, b) => d3.ascending(a.y, b.y));
-                const bisect = d3.bisector((dd) => dd.y).left;
-                const y0 = foundY.invert(mouse[1]);
-                const index = bisect(sorted, y0, 0);
-                const data = sorted[index] ? sorted[index] : sorted[index - 1];
-                tooltipsData.push({
-                    point: data,
-                    color: d.color,
-                    name: d.name,
-                });
-                return `translate(${!isNaN(data?.x) && data?.x != null ? foundX(data.x) : -10}, ${!isNaN(data?.y) && data?.y != null ? foundY(data.y) : -10})`;
-            }
-        });
-        if (this._options.tooltip?.format) {
-            const formatted = this._options.tooltip?.format(tooltipsData);
-            d3.select(this._container.nativeElement)
-                .select('.tooltip-chart')
-                .style('top', top)
-                .style('right', right)
-                .style('bottom', bottom)
-                .style('left', left)
-                .html(formatted);
-        }
-    }
-    tooltipPosition(event) {
-        const centerX = this._width / 2;
-        const centerY = this._height / 2;
-        const padding = { x: 10, y: 10 };
-        const scene = {
-            left: event.pageX > centerX ? 'initial' : `${event.pageX + padding.x}px`,
-            top: event.pageY > centerY ? 'initial' : `${event.pageY + padding.y}px`,
-            bottom: event.pageY > centerY
-                ? `${window.innerHeight - event.pageY}px`
-                : 'initial',
-            right: event.pageX > centerX
-                ? `${window.innerWidth - event.pageX + padding.x}px`
-                : 'initial',
-        };
-        return scene;
-    }
-    createMarkers() {
-        if (this._options.tooltip === undefined) {
-            return;
-        }
-        if (!this._options.tooltip.enable) {
-            return;
-        }
-        this._chart.selectAll('.marker').remove();
-        this._chart.select('.marker-line').remove();
-        this._chart
-            .append('line')
-            .attr('class', 'marker-line')
-            .attr('x1', 35)
-            .attr('x2', this._width)
-            .style('stroke-width', 0.5)
-            .style('stroke', 'var(--color-text-40)')
-            .style('display', 'none');
-        const { series } = this._options;
-        if (!series) {
-            return;
-        }
-        const markers = this._chart
-            .selectAll()
-            .data(series.filter((_) => _.visible));
-        markers
-            .enter()
-            .append('circle')
-            .attr('class', 'marker')
-            .attr('pointer-events', 'none')
-            .attr('r', 3)
-            .attr('fill', (_, i) => _.color)
-            .style('display', 'none');
-        const mouseoutEvent = () => {
-            this._chart.selectAll('.marker').style('display', 'none');
-            this._chart.select('.marker-line').style('display', 'none');
-            d3.select(this._container.nativeElement)
-                .select('.tooltip-chart')
-                .style('display', 'none');
-        };
-        const mouseMoveEvent = (event) => {
-            const options = {
-                event,
-                series,
-            };
-            this.handleMouseMove(options);
-        };
-        const mouseOverEvent = () => {
-            if (this._options.tooltip.showMarkers) {
-                this._chart
-                    .selectAll('.marker')
-                    .style('display', (d) => {
-                    if (d.data.length) {
-                        return null;
-                    }
-                    return 'none';
-                });
-            }
-            if (this._options.tooltip.showLine) {
-                this._chart.select('.marker-line').style('display', null);
-            }
-            d3.select(this._container.nativeElement)
-                .select('.tooltip-chart')
-                .style('display', null);
-        };
-        this._chart
-            .on('mouseover', mouseOverEvent)
-            .on('mousemove', mouseMoveEvent)
-            .on('mouseleave', mouseoutEvent);
-    }
-    drawLegend() {
-        if (this._options.legend?.visible === false) {
-            return;
-        }
-        this._chart.selectAll('.legend').remove();
-        const drawer = this._options.legend?.type
-            ? defaultLegendDrawerMapping.get(this._options.legend.type)
-            : defaultLegendDrawerMapping.get(LegendType.swatches);
-        const context = this._container.nativeElement;
-        if (!drawer) {
-            throw new Error(`No drawer for legend
-        }`);
-        }
-        drawer.draw({
-            context,
-            series: this._options.series.filter((_) => _.showInLegend),
-            width: this._width,
-            height: this._height,
-        });
-    }
-    caluclateChartWidth() {
-        let width = -this._width;
-        if (this.offsetOpposite > 0) {
-            width = -this._width + this.offsetOpposite + this.offsetNonOpposite;
-        }
-        if (this.offsetNonOpposite > 0) {
-            width =
-                -this._width + this._options.bounds.right + this.offsetNonOpposite;
-        }
-        if (this.offsetOpposite >= Axis.offsetFactor &&
-            this.offsetNonOpposite === 0) {
-            width = -this._width + this.offsetOpposite + this._options.bounds.left;
-        }
-        if (this.offsetOpposite > 0 && this.offsetNonOpposite > 0) {
-            width = -this._width + this.offsetOpposite + this.offsetNonOpposite;
-        }
-        return Math.abs(width);
-    }
-    drawGridLines() {
-        if (this._options.gridLines === false) {
-            return;
-        }
-        const translateX = this.offsetNonOpposite > 0
-            ? this.offsetNonOpposite
-            : this._options.bounds.left + this.offsetNonOpposite;
-        this._chart.selectAll('.grid').remove();
-        const yList = this._yAxisList.filter((_) => _.options.visible && !_.options.opposite);
-        const y = yList?.length > 0
-            ? this._yScales.get(yList[yList.length - 1].index)
-            : this._yScales.get(0);
-        const x = this._xScales.get(0);
-        if (!y || !x) {
-            return;
-        }
-        const TICK_HEIGHT = 40;
-        const TICK_WIDTH = 60;
-        const tickCount = Math.round(this._height / TICK_HEIGHT);
-        const tickCountX = Math.round(this._width / TICK_WIDTH);
-        const gridY = this._chart
-            .append('g')
-            .attr('class', 'grid color-text-10')
-            .style('shape-rendering', 'crispEdges');
-        const gridlinesY = d3
-            .axisLeft(y)
-            .tickFormat('')
-            .tickSize(-this.visibleChartWindowWidth);
-        const hasBarSeriesType = this._options.series.some((_) => _.type === SeriesType.bar);
-        if (!hasBarSeriesType) {
-            const gridX = this._chart
-                .append('g')
-                .attr('class', 'grid color-text-10')
-                .style('shape-rendering', 'crispEdges');
-            const gridlinesX = d3
-                .axisBottom(x)
-                .ticks(tickCountX)
-                .tickFormat('')
-                .tickSize(this._height - this._options.bounds.bottom - this._options.bounds.top);
-            gridX
-                .call(gridlinesX)
-                .attr('transform', `translate(0, ${this._options.bounds.top})`)
-                .lower();
-        }
-        gridY
-            .call(gridlinesY)
-            .attr('transform', `translate(${translateX}, ${0})`)
-            .lower();
-        this._chart.selectAll('.grid path').remove();
-    }
-    createScales() {
-        this._xScales.clear();
-        this._yScales.clear();
-        const defaultScaleMapping = new Map()
-            .set(ScaleType.linear, d3.scaleLinear)
-            .set(ScaleType.log, d3.scaleLog)
-            .set(ScaleType.sqrt, d3.scaleSqrt)
-            .set(ScaleType.pow, d3.scalePow);
-        const xRange = [
-            this.offsetNonOpposite
-                ? this.offsetNonOpposite
-                : this._options.bounds.left,
-            this._width -
-                (this.offsetOpposite
-                    ? this.offsetOpposite
-                    : this._options.bounds.right),
-        ];
-        const yRange = [
-            this._height - this._options.bounds.bottom,
-            this._options.bounds.top,
-        ];
-        this._xAxisList.forEach((axis, index) => {
-            let scale = null;
-            if (axis.options.type === Scale.time) {
-                scale = d3
-                    .scaleTime()
-                    .domain(axis.extent)
-                    .range(axis.options.inverted ? [...xRange].reverse() : xRange);
-            }
-            if (axis.options.type === Scale.number) {
-                scale = defaultScaleMapping
-                    .get(axis.options.scaleOptions.type)()
-                    .domain(axis.extent)
-                    .range(axis.options.inverted ? [...xRange].reverse() : xRange);
-            }
-            if (axis.options.niceTicks) {
-                scale.nice();
-            }
-            if (axis.options.scaleOptions.type === ScaleType.log) {
-                scale.base(axis.options.scaleOptions.base);
-            }
-            if (axis.options.scaleOptions.type === ScaleType.pow) {
-                scale.exponent(axis.options.scaleOptions.base);
-            }
-            this._xScales.set(index, scale);
-        });
-        this._yAxisList.forEach((axis, index) => {
-            let scale = null;
-            if (axis.options.type === Scale.number) {
-                scale = defaultScaleMapping
-                    .get(axis.options.scaleOptions.type)()
-                    .domain(axis.extent)
-                    .range(axis.options.inverted ? [...yRange].reverse() : yRange);
-            }
-            if (axis.options.type === Scale.time) {
-                scale = d3
-                    .scaleTime()
-                    .domain(axis.extent)
-                    .range(axis.options.inverted ? [...yRange].reverse() : yRange);
-            }
-            if (axis.options.niceTicks) {
-                scale.nice();
-            }
-            if (axis.options.scaleOptions.type === ScaleType.log) {
-                scale.base(axis.options.scaleOptions.base);
-            }
-            if (axis.options.scaleOptions.type === ScaleType.pow) {
-                scale.exponent(axis.options.scaleOptions.base);
-            }
-            this._yScales.set(index, scale);
-        });
-        for (const [key, value] of this._yScales) {
-            this._clonedY.set(key, value.copy());
-        }
-        for (const [key, value] of this._xScales) {
-            this._clonedX.set(key, value.copy());
-        }
-    }
-    drawAxis() {
-        const hasVisibleAxis = [...this._xAxisList, ...this._yAxisList].filter((axis) => axis.options.visible);
-        if (!hasVisibleAxis) {
-            return;
-        }
-        const negative = false;
-        this._chart.selectAll('.axes').remove();
-        const axes = this._chart
-            .append('g')
-            .attr('class', 'axes')
-            .style('shape-rendering', 'crispEdges');
-        const TICK_HEIGHT = 40;
-        const TICK_WIDTH = 60;
-        const tickCount = Math.round(this._height / TICK_HEIGHT);
-        const tickCountX = Math.round(this._width / TICK_WIDTH);
-        this._xAxisList.forEach((axis) => {
-            const options = axis.options;
-            const translate = `translate(${0}, ${this._height - this._options.bounds.bottom})`;
-            const x = this._xScales.get(axis.index);
-            const xAxis = d3.axisBottom(x).ticks(tickCountX);
-            if (axis.options?.tickFormat) {
-                xAxis.tickFormat(axis.options.tickFormat);
-            }
-            if (options.visible !== false) {
-                const translateX = this.offsetNonOpposite
-                    ? this.offsetNonOpposite
-                    : this._options.bounds.left + this.offsetNonOpposite;
-                axes
-                    .append('g')
-                    .attr('class', 'x-axis-label')
-                    .append('text')
-                    .style('fill', 'var(--color-text-50)')
-                    .attr('transform', 'translate(' +
-                    this._width / 2 +
-                    ' ,' +
-                    (this._height - this._options.bounds.bottom) +
-                    ')')
-                    .style('text-anchor', 'middle')
-                    .attr('dy', '3em')
-                    .text(options.title ?? '');
-                axes
-                    .append('g')
-                    .attr('class', 'x-axis font-caption')
-                    .attr('data-x-scale-id', axis.index)
-                    .attr('transform', translate)
-                    .style('pointer-events', 'none')
-                    .call(xAxis)
-                    .call((_) => {
-                    _.select('.domain').remove();
-                    _.selectAll('.tick').attr('class', 'color-text-50');
-                    if (negative) {
-                        _.append('line')
-                            .attr('y1', 0)
-                            .attr('y2', this._height)
-                            .attr('transform', `translate(${x(0)}, -${this._height})`)
-                            .style('stroke-width', 0.5)
-                            .style('stroke', 'var(--color-text-50)');
-                    }
-                    _.append('line')
-                        .attr('x1', 0)
-                        .attr('x2', this.visibleChartWindowWidth)
-                        .attr('transform', `translate(${translateX}, ${0})`)
-                        .style('stroke-width', 0.5)
-                        .style('stroke', 'var(--color-text-50)');
-                });
-            }
-        });
-        this._yAxisList.forEach((axis) => {
-            const translate = axis.options.opposite
-                ? `translate(${this._width - axis.offset}, ${0})`
-                : `translate(${axis.offset}, ${0})`;
-            const y = this._yScales.get(axis.index);
-            const yAxis = axis.options.opposite ? d3.axisRight(y) : d3.axisLeft(y);
-            if (axis.options.visible !== false) {
-                const labelOffset = axis.options.opposite
-                    ? this._width - axis.offset + axis.width
-                    : axis.offset - axis.width;
-                axes
-                    .append('g')
-                    .attr('class', 'y-axis-label')
-                    .append('text')
-                    .style('fill', 'var(--color-text-50)')
-                    .attr('transform', 'rotate(-90)')
-                    .attr('y', labelOffset)
-                    .attr('x', 0 - this._height / 2)
-                    .attr('dy', axis.options.opposite ? '12px' : '-3px')
-                    .style('text-anchor', 'middle')
-                    .text(axis.options.title ?? '');
-                axes
-                    .append('g')
-                    .attr('class', 'y-axis font-caption')
-                    .attr('data-y-scale-id', axis.index)
-                    .attr('transform', translate)
-                    .call(yAxis)
-                    .style('pointer-events', 'none')
-                    .call((_) => {
-                    _.select('.domain').remove();
-                    _.selectAll('.tick').attr('class', 'color-text-50');
-                    if (!negative) {
-                        _.append('line')
-                            .attr('y1', 0)
-                            .attr('y2', this._height -
-                            this._options.bounds.top -
-                            this._options.bounds.bottom)
-                            .attr('transform', `translate(${0}, ${this._options.bounds.top})`)
-                            .style('stroke-width', 0.5)
-                            .style('stroke', 'var(--color-text-50)');
-                    }
-                });
-            }
-        });
-    }
-}
-
-class ChartComponent {
-    constructor(_zone) {
-        this._zone = _zone;
-        this.plotLinesMove = new EventEmitter();
-        this.plotBandsMove = new EventEmitter();
-        this.seriesMove = new EventEmitter();
-        this.pointMove = new EventEmitter();
-        this.zoomChange = new EventEmitter();
-        this._alive = true;
-        this.size$ = new Subject();
-    }
-    click(event) {
-        const composedPath = event.composedPath();
-        const triggerToken = 'legend';
-        const isLegend = composedPath.some((_) => _.classList?.contains(triggerToken));
-        if (isLegend) {
-            const clickedElement = event.target?.__data__;
-            if (!clickedElement) {
-                return;
-            }
-            const serieIndex = this._config?.series?.indexOf(clickedElement);
-            if (clickedElement.serieType === SeriesType.bar) {
-                const foundSerie = this._config.series[clickedElement.serieIndex];
-                this._config.series[foundSerie.id].data = this._config.series[foundSerie.id].data.map((_) => {
-                    if (clickedElement.id === _.id) {
-                        return {
-                            ..._,
-                            visible: !_.visible,
-                        };
-                    }
-                    return _;
-                });
-                this.redraw(this._config);
-            }
-            if (serieIndex !== -1) {
-                const foundSerie = this._config.series[serieIndex];
-                const yAxisIndex = foundSerie?.yAxisIndex;
-                this._config.series[serieIndex].visible = !foundSerie.visible;
-                const attachedYAxes = this._config.series
-                    ?.filter((_) => _.visible)
-                    .map((_) => _.yAxisIndex);
-                const shouldVisibleYAxis = attachedYAxes?.includes(yAxisIndex);
-                this._config.yAxis[yAxisIndex].visible = shouldVisibleYAxis;
-                this.redraw(this._config);
-            }
-        }
-    }
-    ngOnChanges(changes) {
-        if (this.config && changes.hasOwnProperty('config')) {
-            this.setConfig(this.config);
-            if (this.zoom) {
-                this._chart?.setZoom(this.zoom);
-            }
-        }
-        if (this.zoom && changes.hasOwnProperty('zoom')) {
-            this._chart?.setZoom(this.zoom);
-        }
-    }
-    ngOnInit() { }
-    ngAfterViewInit() {
-        this._observer = new ResizeObserver((entries) => {
-            const { contentRect } = entries[0];
-            this.size$.next(contentRect);
-        });
-        this._observer.observe(this.chart.nativeElement);
-        this.size$
-            .pipe(throttleTime(100, undefined, { trailing: true }))
-            .pipe(takeWhile((_) => this._alive), map((_) => {
-            this.resize(_);
-            this.redraw(this._config);
-        }))
-            .subscribe();
-    }
-    get showLegend() {
-        return this._config?.legend?.visible;
-    }
-    ngOnDestroy() {
-        this._alive = false;
-        this._observer?.unobserve(this.chart.nativeElement);
-    }
-    redraw(config) {
-        if (config) {
-            this._chart.redraw(config);
-        }
-    }
-    resize(contentRect) {
-        const { width, height } = contentRect;
-        this._chart.setSize({
-            width,
-            height,
-        });
-    }
-    setConfig(config) {
-        if (config) {
-            this._config = config;
-            this.hasSeriesData = !!this._config?.series?.some((_) => _.data.length);
-            if (!this._chart) {
-                this._chart = new TetaChart(this._config, this.chart);
-                this._chart.plotLinesMove
-                    .pipe(takeWhile((_) => this._alive))
-                    .subscribe((_) => this.plotLinesMove.emit(_));
-                this._chart.plotBandsMove
-                    .pipe(takeWhile((_) => this._alive))
-                    .subscribe((_) => this.plotBandsMove.emit(_));
-                this._chart.seriesMove
-                    .pipe(takeWhile((_) => this._alive))
-                    .subscribe((_) => this.seriesMove.emit(_));
-                this._chart.pointMove
-                    .pipe(takeWhile((_) => this._alive))
-                    .subscribe((_) => {
-                    this.pointMove.emit(_);
-                });
-                this._chart.zoom
-                    .pipe(takeWhile((_) => this._alive), map((_) => {
-                    this.zoomChange.emit(_);
-                }))
-                    .subscribe();
-            }
-            if (this.chart) {
-                if (this.hasSeriesData) {
-                    if (!this._zoom || this._zoom?.event?.type === 'end') {
-                        this.redraw(this._config);
-                    }
-                }
-            }
-        }
-    }
-}
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartComponent, selector: "teta-chart", inputs: { zoom: "zoom", config: "config" }, outputs: { plotLinesMove: "plotLinesMove", plotBandsMove: "plotBandsMove", seriesMove: "seriesMove", pointMove: "pointMove", zoomChange: "zoomChange" }, host: { listeners: { "click": "click($event)" } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.display]=\"hasSeriesData ? 'contents' : 'none'\">\n  <div #chart class=\"chart-container\"></div>\n  <div *ngIf=\"showLegend\" class=\"legend-container\"></div>\n</div>\n<div [style.display]=\"!hasSeriesData ? 'block' : 'none'\" class=\"chart-placeholder text-align-center\">\n  <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n</div>\n\n\n", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column}.chart-container{position:relative;min-height:0;flex-grow:1;flex-basis:1px}.chart-placeholder{margin:auto;width:100%}.chart-placeholder span{text-overflow:ellipsis;overflow:hidden;display:block}.legend-container{flex-shrink:0;flex-basis:1px}::ng-deep .grid line{stroke-dasharray:1,4}::ng-deep .tooltip-chart{padding:8px 12px;border-radius:2px}::ng-deep .legend{grid-gap:8px;padding-bottom:5px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-evenly}::ng-deep .legend .item{display:flex;align-items:center;cursor:pointer}::ng-deep .legend .item .swatch{width:10px;height:10px}::ng-deep .legend .item .line{width:12px;height:2px}::ng-deep .legend .item .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:5px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.display]=\"hasSeriesData ? 'contents' : 'none'\">\n  <div #chart class=\"chart-container\"></div>\n  <div *ngIf=\"showLegend\" class=\"legend-container\"></div>\n</div>\n<div [style.display]=\"!hasSeriesData ? 'block' : 'none'\" class=\"chart-placeholder text-align-center\">\n  <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n</div>\n\n\n", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column}.chart-container{position:relative;min-height:0;flex-grow:1;flex-basis:1px}.chart-placeholder{margin:auto;width:100%}.chart-placeholder span{text-overflow:ellipsis;overflow:hidden;display:block}.legend-container{flex-shrink:0;flex-basis:1px}::ng-deep .grid line{stroke-dasharray:1,4}::ng-deep .tooltip-chart{padding:8px 12px;border-radius:2px}::ng-deep .legend{grid-gap:8px;padding-bottom:5px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-evenly}::ng-deep .legend .item{display:flex;align-items:center;cursor:pointer}::ng-deep .legend .item .swatch{width:10px;height:10px}::ng-deep .legend .item .line{width:12px;height:2px}::ng-deep .legend .item .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { zoom: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], plotLinesMove: [{
-                type: Output
-            }], plotBandsMove: [{
-                type: Output
-            }], seriesMove: [{
-                type: Output
-            }], pointMove: [{
-                type: Output
-            }], zoomChange: [{
-                type: Output
-            }], chart: [{
-                type: ViewChild,
-                args: ['chart', {
-                        static: true,
-                    }]
-            }], click: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class ChartModule {
-}
-ChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, declarations: [ChartComponent], imports: [CommonModule], exports: [ChartComponent] });
-ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ChartComponent],
-                    exports: [ChartComponent],
-                    imports: [CommonModule],
-                }]
-        }] });
-
-class AxisOptions {
-    constructor(options) {
-        this.niceTicks = true;
-        this.title = options?.title;
-        this.min = options?.min;
-        this.max = options?.max;
-        this.visible = options?.visible ?? true;
-        this.tickFormat = options?.tickFormat;
-        this.transform = options?.transform;
-        this.zoom = options?.zoom;
-        this.type = options?.type ?? 'number';
-        this.scaleOptions = {
-            type: ScaleType.linear,
-            base: 10,
-            ...options?.scaleOptions,
-        };
-        this.inverted = options?.inverted;
-        this.negative = options?.negative;
-        this.opposite = options?.opposite;
-        this.niceTicks = options?.niceTicks == null ? true : options.niceTicks;
-        this.plotLines = options?.plotLines || [];
-        this.plotBands = options?.plotBands || [];
-    }
-}
-
-class Series {
-    constructor(options) {
-        this.id = options?.id;
-        this.renderTo = options?.renderTo ?? 'svg';
-        this.type = options?.type != null ? options?.type : SeriesType.line;
-        this.curveType =
-            options?.curveType != null ? options?.curveType : d3.curveLinear;
-        this.data = options?.data?.filter((_) => !isNaN(_.x) && !isNaN(_.y));
-        this.axisFormat = options?.axisFormat;
-        this.name = options?.name;
-        this.xAxisIndex = options?.xAxisIndex != null ? options?.xAxisIndex : 0;
-        this.yAxisIndex = options?.yAxisIndex != null ? options?.yAxisIndex : 0;
-        this.drawer = options?.drawer;
-        this.strokeWidth = options?.strokeWidth;
-        this.strokeDasharray = options?.strokeDasharray ?? null;
-        this.visible = options?.visible || true;
-        this.color = options?.color ?? 'cyan';
-        this.colorScale = options?.colorScale;
-        this.drag = { enable: false, extendLine: false, ...options?.drag };
-        this.showInLegend =
-            options?.showInLegend != null ? options?.showInLegend : true;
-        this.extend = options?.extend != null ? options?.extend : false;
-    }
-}
-
-class TooltipOptions {
-    constructor(options) {
-        const defaultFormatter = (tooltips) => {
-            let html = '';
-            tooltips
-                .filter((_) => _.point)
-                .forEach((_) => {
-                html += `<div>${_.name ?? 'Без названия'} x: ${_.point?.x?.toFixed(2)} y: ${_.point?.y?.toFixed(2)}</div>`;
-            });
-            return html;
-        };
-        this.enable = options?.enable ?? true;
-        this.showMarkers = options?.showMarkers ?? true;
-        this.showLine = options?.showLine ?? false;
-        this.tracking = options?.tracking ?? 'x';
-        this.format = options?.format ?? defaultFormatter;
-    }
-}
-
-class ChartBounds {
-    constructor(options) {
-        this.top = 35;
-        this.right = 50;
-        this.bottom = 50;
-        this.left = 35;
-        this.top = options?.top || this.top;
-        this.right = options?.right || this.right;
-        this.bottom = options?.bottom || this.bottom;
-        this.left = options?.left || this.left;
-    }
-}
-
-class ChartOptions {
-    constructor(options) {
-        this.bounds = new ChartBounds();
-        this.name = options?.name;
-        this.zoom = {
-            enable: false,
-            zoomType: ZoomType.x,
-            ...options?.zoom,
-        };
-        this.series = options?.series?.map((series, idx) => ({
-            ...series,
-            id: idx,
-        }));
-        this.zoom = { enable: false, zoomType: ZoomType.x, ...options?.zoom };
-        this.series = options?.series?.map((series, idx) => new Series(series));
-        this.tooltip = new TooltipOptions({ ...options?.tooltip });
-        this.xAxis = options?.xAxis?.map((_) => new AxisOptions(_));
-        this.yAxis = options?.yAxis?.map((_) => new AxisOptions(_));
-        this.gridLines = options?.gridLines == null ? true : options.gridLines;
-        this.width = options?.width;
-        this.height = options?.height;
-        this.legend = {
-            visible: true,
-            type: LegendType.swatches,
-            ...options?.legend,
-        };
-        this.bounds = { ...this.bounds, ...options?.bounds };
-        this.annotations = options?.annotations;
-    }
-}
-
-const annotationMap = [
-    annotationBadge,
-    annotationLabel,
-    annotationCallout,
-    annotationCalloutCircle,
-    annotationCalloutCurve,
-    annotationCalloutElbow,
-    annotationCalloutRect,
-    annotationCustomType,
-    annotationXYThreshold,
-];
-class Annotation {
-    constructor(options) {
-        this.point = options?.point;
-        this.yAxisIndex = options?.yAxisIndex;
-        this.xAxisIndex = options?.xAxisIndex;
-        this.type = options?.type || annotationLabel;
-        this.enabled = options?.enabled;
-        this.className = options?.className;
-        this.fillColor = options?.fillColor;
-        this.borderColor = options?.borderColor;
-        this.borderWidth = options?.borderWidth;
-        this.note = options?.note;
-        this.connector = options?.connector;
-        this.dx = options?.dx;
-        this.dy = options?.dy;
-    }
-}
-
-class PlotLine {
-    constructor(options) {
-        this.id = options?.id;
-        this.width = options?.width || 1;
-        this.value = options?.value;
-        this.label = options?.label;
-        this.dashed = options?.dashed || false;
-        this.color = options?.color || 'var(--color-text-70)';
-        this.min = options?.min;
-        this.max = options?.max;
-    }
-}
-
-class PlotBand {
-    constructor(options) {
-        this.id = options?.id;
-        this.from = options?.from;
-        this.to = options?.to;
-        this.label = options?.label;
-        this.color = options?.color || '#59AE501A';
-        this.image = options?.image;
-        this.showGrabbers =
-            options?.showGrabbers != null ? options.showGrabbers : true;
-        this.draggable = options?.draggable != null ? options?.draggable : false;
-        this.resizable = options?.resizable != null ? options?.resizable : true;
-        this.min = options?.min;
-        this.max = options?.max;
-        this.opacity = options?.opacity;
-    }
-}
-
 class Chart3dComponent {
     constructor(_elementRef, _themeService) {
         this._elementRef = _elementRef;
@@ -12422,10 +10173,10 @@ class Chart3dComponent {
     }
 }
 Chart3dComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: Chart3dComponent, deps: [{ token: i0.ElementRef }, { token: ThemeSwitchService }], target: i0.ɵɵFactoryTarget.Component });
-Chart3dComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: Chart3dComponent, selector: "teta-chart3d", inputs: { config: "config" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"] });
+Chart3dComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: Chart3dComponent, selector: "teta-chart3d", inputs: { config: "config" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: Chart3dComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-chart3d', template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"] }]
+            args: [{ selector: 'teta-chart3d', changeDetection: ChangeDetectionStrategy.OnPush, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ThemeSwitchService }]; }, propDecorators: { canvasRef: [{
                 type: ViewChild,
                 args: ['canvas']
@@ -13230,5 +10981,5 @@ class StringUtil {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, Annotation, AreaDrawer, ArrayUtil, Axis, AxisOptions, AxisType, BarDrawer, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, ChartBounds, ChartComponent, ChartModule, ChartOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DAY_SELECT_CONTROL_VALUE_ACCESSOR, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerModule, DateTimeCellComponent, DateUtil, DaySelectComponent, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DomUtil, DragPointType, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterPanelComponent, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, GroupRowComponent, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, LegendType, LineDrawer, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, MONTH_PICKER_CONTROL_VALUE_ACCESSOR, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, MonthPickerComponent, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PieDrawer, PlotBand, PlotLine, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, Scale, ScaleType, ScatterDrawer, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, Series, SeriesType, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, SplineDrawer, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableContextMenuConfig, TableHeadComponent, TableModule, TableRow, TableService, TableUtil, TabsComponent, TabsModule, TetaChart, TetaContentRef, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TooltipOptions, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, ZoomType, getCellComponent };
+export { AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, ArrayUtil, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DAY_SELECT_CONTROL_VALUE_ACCESSOR, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerModule, DateTimeCellComponent, DateUtil, DaySelectComponent, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DomUtil, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterPanelComponent, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, GroupRowComponent, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, MONTH_PICKER_CONTROL_VALUE_ACCESSOR, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, MonthPickerComponent, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableContextMenuConfig, TableHeadComponent, TableModule, TableRow, TableService, TableUtil, TabsComponent, TabsModule, TetaContentRef, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, formatNumber, getCellComponent, getPrecision, prependZero };
 //# sourceMappingURL=tetacom-ng-components.mjs.map