@tetacom/svg-charts 1.4.21 → 1.4.22

package/fesm2015/tetacom-svg-charts.mjs

@@ -1,3095 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, Component, Input, EventEmitter, Directive, Output, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, ViewChild, HostBinding, NgModule } from '@angular/core';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { __awaiter } from 'tslib';
-import { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, lastValueFrom, take, ReplaySubject, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler } from 'rxjs';
-import * as d3 from 'd3';
-import { zoomIdentity } from 'd3';
-import { maxIndex } from 'd3-array';
-import * as i5 from '@tetacom/ng-components';
-import { PositionUtil, Align, VerticalAlign, tetaZoneFull, LetModule } from '@tetacom/ng-components';
-import * as i3 from '@angular/platform-browser';
-
-var ZoomType;
-(function (ZoomType) {
-    ZoomType[ZoomType["x"] = 0] = "x";
-    ZoomType[ZoomType["y"] = 1] = "y";
-    ZoomType[ZoomType["xy"] = 2] = "xy";
-})(ZoomType || (ZoomType = {}));
-
-class ChartBounds {
-    constructor(options) {
-        this.top = 0;
-        this.right = 0;
-        this.bottom = 0;
-        this.left = 0;
-        this.top = (options === null || options === void 0 ? void 0 : options.top) || 0;
-        this.right = (options === null || options === void 0 ? void 0 : options.right) || 0;
-        this.bottom = (options === null || options === void 0 ? void 0 : options.bottom) || 0;
-        this.left = (options === null || options === void 0 ? void 0 : options.left) || 0;
-    }
-}
-
-var TooltipTracking;
-(function (TooltipTracking) {
-    TooltipTracking[TooltipTracking["x"] = 0] = "x";
-    TooltipTracking[TooltipTracking["y"] = 1] = "y";
-})(TooltipTracking || (TooltipTracking = {}));
-
-var ZoomBehaviorType;
-(function (ZoomBehaviorType) {
-    ZoomBehaviorType[ZoomBehaviorType["move"] = 0] = "move";
-    ZoomBehaviorType[ZoomBehaviorType["wheel"] = 1] = "wheel";
-})(ZoomBehaviorType || (ZoomBehaviorType = {}));
-
-const defaultChartConfig = () => ({
-    name: null,
-    zoom: {
-        enable: true,
-        type: ZoomType.x,
-        syncType: ZoomType.xy,
-        zoomBehavior: ZoomBehaviorType.move
-    },
-    bounds: new ChartBounds({
-        bottom: 12,
-        left: 12,
-        top: 12,
-        right: 12
-    }),
-    legend: {
-        enable: true,
-    },
-    tooltip: {
-        enable: true,
-        showMarkers: true,
-        tracking: TooltipTracking.x,
-        showCrosshair: false,
-        padding: {
-            x: 16,
-            y: 16
-        }
-    },
-    xAxis: [],
-    yAxis: [],
-    series: [],
-    gridLines: {
-        enable: true
-    }
-});
-
-var ScaleType;
-(function (ScaleType) {
-    ScaleType[ScaleType["linear"] = 0] = "linear";
-    ScaleType[ScaleType["log"] = 1] = "log";
-    ScaleType[ScaleType["symlog"] = 2] = "symlog";
-    ScaleType[ScaleType["pow"] = 3] = "pow";
-    ScaleType[ScaleType["sqrt"] = 4] = "sqrt";
-    ScaleType[ScaleType["time"] = 5] = "time";
-    ScaleType[ScaleType["band"] = 6] = "band";
-})(ScaleType || (ScaleType = {}));
-
-const defaultAxisConfig = {
-    visible: true,
-    zoom: true,
-    scaleType: {
-        type: ScaleType.linear,
-    },
-    niceTicks: false,
-};
-
-var SeriesType;
-(function (SeriesType) {
-    SeriesType[SeriesType["line"] = 0] = "line";
-    SeriesType[SeriesType["bar"] = 1] = "bar";
-    SeriesType[SeriesType["area"] = 2] = "area";
-    SeriesType[SeriesType["scatter"] = 3] = "scatter";
-    SeriesType[SeriesType["block"] = 4] = "block";
-    SeriesType[SeriesType["blockArea"] = 5] = "blockArea";
-})(SeriesType || (SeriesType = {}));
-
-var FillType;
-(function (FillType) {
-    FillType[FillType["default"] = 0] = "default";
-    FillType[FillType["gradient"] = 1] = "gradient";
-})(FillType || (FillType = {}));
-var FillDirection;
-(function (FillDirection) {
-    FillDirection[FillDirection["x"] = 0] = "x";
-    FillDirection[FillDirection["y"] = 1] = "y";
-})(FillDirection || (FillDirection = {}));
-
-var ClipPointsDirection;
-(function (ClipPointsDirection) {
-    ClipPointsDirection[ClipPointsDirection["x"] = 0] = "x";
-    ClipPointsDirection[ClipPointsDirection["y"] = 1] = "y";
-    ClipPointsDirection[ClipPointsDirection["none"] = 2] = "none";
-})(ClipPointsDirection || (ClipPointsDirection = {}));
-
-const defaultSeriesConfig = () => ({
-    data: [],
-    type: SeriesType.line,
-    xAxisIndex: 0,
-    yAxisIndex: 0,
-    fillType: FillType.default,
-    color: 'coral',
-    visible: true,
-    clipPointsDirection: ClipPointsDirection.x
-});
-
-class ChartService {
-    constructor() {
-        this.config$ = new BehaviorSubject(defaultChartConfig());
-        this.size$ = new BehaviorSubject(null);
-        this.pointerMove$ = new Subject();
-        this.tooltips$ = new BehaviorSubject(new Map());
-        this.plotBandEvent$ = new Subject();
-        this.plotLineMove$ = new Subject();
-        this.pointMove$ = new Subject();
-        this.chartClick$ = new Subject();
-        this.chartContextMenu$ = new Subject();
-        this.annotationEvent$ = new Subject();
-        this.annotationMove$ = new Subject();
-        this.id = of((Date.now() + Math.random()).toString(36));
-        this.config = this.config$.asObservable().pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), map(this.restoreLocalStorage), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-        this.size = this.size$.asObservable().pipe(filter((size) => size != null));
-        this.pointerMove = this.pointerMove$.asObservable();
-        this.tooltips = this.tooltips$.asObservable();
-        this.plotBandEvent = this.plotBandEvent$.asObservable();
-        this.plotLineMove = this.plotLineMove$.asObservable();
-        this.pointMove = this.pointMove$.asObservable();
-        this.chartClick = this.chartClick$.asObservable();
-        this.chartContextMenu = this.chartContextMenu$.asObservable();
-        this.annotationClick = this.annotationEvent$
-            .asObservable()
-            .pipe(filter((_) => { var _a; return ((_a = _ === null || _ === void 0 ? void 0 : _.event) === null || _a === void 0 ? void 0 : _a.type) === 'click'; }));
-        this.annotationContextMenu = this.annotationEvent$
-            .asObservable()
-            .pipe(filter((_) => { var _a; return ((_a = _ === null || _ === void 0 ? void 0 : _.event) === null || _a === void 0 ? void 0 : _a.type) === 'contextmenu'; }));
-        this.annotationMove = this.annotationMove$.asObservable();
-        this.plotBandClick = this.plotBandEvent$
-            .asObservable()
-            .pipe(filter((_) => { var _a; return ((_a = _ === null || _ === void 0 ? void 0 : _.event) === null || _a === void 0 ? void 0 : _a.type) === 'click'; }));
-        this.plotBandContextMenu = this.plotBandEvent$
-            .asObservable()
-            .pipe(filter((_) => { var _a; return ((_a = _ === null || _ === void 0 ? void 0 : _.event) === null || _a === void 0 ? void 0 : _a.type) === 'contextmenu'; }));
-        // this.zoomInstance = this.zoomInstance$.asObservable();
-        // this.brushInstance = this.brushInstance$.asObservable();
-    }
-    setConfig(config) {
-        this.clearTooltips();
-        this.config$.next(config);
-    }
-    setSize(size) {
-        this.size$.next(size);
-    }
-    setPointerMove(event) {
-        this.pointerMove$.next(event);
-    }
-    setTooltip(tooltip) {
-        const currentTooltips = this.tooltips$.value;
-        if (!tooltip.point) {
-            currentTooltips.delete(tooltip.series);
-        }
-        else {
-            currentTooltips.set(tooltip.series, tooltip);
-        }
-        this.tooltips$.next(new Map(currentTooltips));
-    }
-    clearTooltips() {
-        this.tooltips$.next(new Map());
-    }
-    toggleVisibilitySeries(seriesIndex, visible) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if ((seriesIndex === null || seriesIndex === void 0 ? void 0 : seriesIndex.length) === 0) {
-                return;
-            }
-            const currentConfig = yield lastValueFrom(this.config.pipe(take(1)));
-            seriesIndex.forEach((serieIndex) => {
-                const currentSerieIndex = currentConfig.series.findIndex((_) => _.id === serieIndex);
-                if (currentSerieIndex === -1) {
-                    return;
-                }
-                currentConfig.series[currentSerieIndex].visible = visible !== undefined ? visible : !currentConfig.series[currentSerieIndex].visible;
-                const seriesLinkCount = currentConfig.series.filter((_) => _.yAxisIndex === currentConfig.series[currentSerieIndex].yAxisIndex && _.visible === true).length;
-                currentConfig.yAxis[currentConfig.series[currentSerieIndex].yAxisIndex].visible = seriesLinkCount !== 0;
-            });
-            try {
-                this.saveCookie(currentConfig);
-            }
-            finally {
-                this.config$.next(currentConfig);
-            }
-        });
-    }
-    emitMoveAnnotation(event) {
-        this.annotationMove$.next(event);
-    }
-    emitAnnotation(event) {
-        this.annotationEvent$.next(event);
-    }
-    emitPlotband(event) {
-        this.plotBandEvent$.next(event);
-    }
-    emitPlotline(event) {
-        this.plotLineMove$.next(event);
-    }
-    emitPoint(event) {
-        this.pointMove$.next(event);
-    }
-    emitChartClick(event) {
-        this.chartClick$.next(event);
-    }
-    emitChartContextMenu(event) {
-        this.chartContextMenu$.next(event);
-    }
-    // public emitZoomInstance(event: ZoomService) {
-    //   this.zoomInstance$.next(event);
-    // }
-    //
-    // public emitZoomInstance(event: ZoomService) {
-    //   this.zoomInstance$.next(event);
-    // }
-    saveCookie(config) {
-        var _a;
-        if (!config.name)
-            return;
-        const hiddenSeries = (_a = config.series) === null || _a === void 0 ? void 0 : _a.filter((_) => !_.visible).map((_) => _.id);
-        localStorage.setItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`, JSON.stringify(hiddenSeries));
-    }
-    restoreLocalStorage(config) {
-        if (!config.name)
-            return config;
-        const hiddenSeries = localStorage.getItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`);
-        if (hiddenSeries) {
-            const json = JSON.parse(hiddenSeries);
-            config.series = config.series.map((serie, index) => {
-                serie.visible = !json.includes(serie.id);
-                const currentSerieIndex = config.series.findIndex((_) => _.id === serie.id);
-                if (currentSerieIndex !== -1) {
-                    const seriesLinkCount = config.series.filter((_) => _.yAxisIndex === config.series[currentSerieIndex].yAxisIndex && _.visible === true).length;
-                    config.yAxis[config.series[currentSerieIndex].yAxisIndex].visible = seriesLinkCount !== 0;
-                }
-                return serie;
-            });
-            return config;
-        }
-        return config;
-    }
-    setDefaults(data) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        let [config, id] = data;
-        const defaultConfig = (defaultConfig) => {
-            return (source) => {
-                return Object.assign({}, defaultConfig, source);
-            };
-        };
-        config = Object.assign({}, defaultChartConfig(), config);
-        config.id = (_a = config.id) !== null && _a !== void 0 ? _a : id;
-        config.xAxis = config.xAxis.map(defaultConfig(defaultAxisConfig));
-        config.yAxis = config.yAxis.map(defaultConfig(defaultAxisConfig));
-        config.series = config.series.map(defaultConfig(defaultSeriesConfig()));
-        config.series = config.series.map((_, index) => {
-            var _a, _b;
-            return Object.assign(Object.assign({}, _), { data: (_a = _.data) !== null && _a !== void 0 ? _a : [], id: (_b = _.id) !== null && _b !== void 0 ? _b : index });
-        });
-        const oppositeYCount = (_b = config.yAxis) === null || _b === void 0 ? void 0 : _b.filter((_) => _.opposite);
-        const oppositeXCount = (_c = config.xAxis) === null || _c === void 0 ? void 0 : _c.filter((_) => _.opposite);
-        const nonOppositeYCount = (_d = config.yAxis) === null || _d === void 0 ? void 0 : _d.filter((_) => !_.opposite);
-        const nonOppositeXCount = (_e = config.xAxis) === null || _e === void 0 ? void 0 : _e.filter((_) => !_.opposite);
-        if ((nonOppositeXCount === null || nonOppositeXCount === void 0 ? void 0 : nonOppositeXCount.length) > 1) {
-            config.bounds.bottom = 0;
-        }
-        if ((oppositeXCount === null || oppositeXCount === void 0 ? void 0 : oppositeXCount.length) > 1) {
-            config.bounds.top = 0;
-        }
-        if ((nonOppositeYCount === null || nonOppositeYCount === void 0 ? void 0 : nonOppositeYCount.length) > 1) {
-            config.bounds.left = 0;
-        }
-        if ((oppositeYCount === null || oppositeYCount === void 0 ? void 0 : oppositeYCount.length) > 1) {
-            config.bounds.right = 0;
-        }
-        config.tooltip = Object.assign({}, defaultChartConfig().tooltip, config.tooltip);
-        config.zoom = Object.assign({}, defaultChartConfig().zoom, config.zoom);
-        config.zoom.syncChannel = (_g = (_f = config.zoom) === null || _f === void 0 ? void 0 : _f.syncChannel) !== null && _g !== void 0 ? _g : id;
-        return config;
-    }
-    setPreparationData(config) {
-        var _a, _b;
-        if (config.inverted) {
-            const xAxes = [...config.xAxis];
-            const yAxes = [...config.yAxis];
-            config.xAxis = yAxes;
-            config.yAxis = xAxes;
-            config.series = (_a = config.series) === null || _a === void 0 ? void 0 : _a.map((serie) => {
-                var _a;
-                const x = serie.xAxisIndex;
-                const y = serie.yAxisIndex;
-                serie.xAxisIndex = y;
-                serie.yAxisIndex = x;
-                return Object.assign(Object.assign({}, serie), { clipPointsDirection: ClipPointsDirection.y, data: (_a = serie === null || serie === void 0 ? void 0 : serie.data) === null || _a === void 0 ? void 0 : _a.map((point) => {
-                        return Object.assign(Object.assign({}, point), { x: point === null || point === void 0 ? void 0 : point.y, y: point === null || point === void 0 ? void 0 : point.x, x1: point === null || point === void 0 ? void 0 : point.y1, y1: point === null || point === void 0 ? void 0 : point.x1 });
-                    }) });
-            });
-        }
-        if ((_b = config === null || config === void 0 ? void 0 : config.brush) === null || _b === void 0 ? void 0 : _b.enable) {
-            config.yAxis = config.yAxis.map((_) => (Object.assign(Object.assign({}, _), { zoom: false })));
-            config.xAxis = config.xAxis.map((_) => (Object.assign(Object.assign({}, _), { zoom: false })));
-        }
-        return config;
-    }
-}
-ChartService._hiddenSeriesPostfix = 'hidden_series';
-ChartService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ChartService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-var AxisOrientation;
-(function (AxisOrientation) {
-    AxisOrientation[AxisOrientation["x"] = 0] = "x";
-    AxisOrientation[AxisOrientation["y"] = 1] = "y";
-})(AxisOrientation || (AxisOrientation = {}));
-
-class BroadcastService {
-    constructor() {
-        this.zoomEmitter = new ReplaySubject(1);
-    }
-    broadcastZoom(value) {
-        this.zoomEmitter.next(value);
-    }
-    subscribeToZoom(channel) {
-        return this.zoomEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel));
-    }
-}
-BroadcastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-BroadcastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class ZoomService {
-    constructor(_broadcast, _chart) {
-        this._broadcast = _broadcast;
-        this._chart = _chart;
-        this.zoomed$ = new BehaviorSubject(null);
-        this.zoomed = this.zoomed$.asObservable().pipe(shareReplay({
-            bufferSize: 1,
-            refCount: true
-        }));
-    }
-    fireZoom(zoom) {
-        this.zoomed$.next(zoom);
-    }
-    broadcastZoom(zoom) {
-        var _a;
-        if ((_a = this.broadcastChannel) === null || _a === void 0 ? void 0 : _a.length) {
-            this._broadcast.broadcastZoom({
-                channel: this.broadcastChannel,
-                message: zoom
-            });
-        }
-    }
-    setBroadcastChannel(channel) {
-        var _a, _b;
-        if (this.broadcastSub) {
-            (_a = this.broadcastSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        }
-        this.broadcastChannel = channel;
-        if ((_b = this.broadcastChannel) === null || _b === void 0 ? void 0 : _b.length) {
-            this.broadcastSub = combineLatest([this._broadcast.subscribeToZoom(this.broadcastChannel), this._chart.config])
-                .pipe(filter(([zoom, config]) => {
-                var _a;
-                return ((_a = zoom.message) === null || _a === void 0 ? void 0 : _a.chartId) !== config.id && (config.zoom.syncType === ZoomType.xy ||
-                    (zoom.message.axis.orientation === AxisOrientation.y && config.zoom.syncType === ZoomType.y) ||
-                    (zoom.message.axis.orientation === AxisOrientation.x && config.zoom.syncType === ZoomType.x));
-            }))
-                .subscribe(([zoom, config]) => {
-                this.fireZoom(zoom.message);
-            });
-        }
-    }
-    getD3Transform(targetDomain, originalDomain, scale, orientation, inverted) {
-        const zoomScale = Math.abs(scale(originalDomain[1]) - scale(originalDomain[0])) / Math.abs(scale(targetDomain[1]) - scale(targetDomain[0]));
-        let transform = zoomIdentity.scale(zoomScale);
-        if (orientation === AxisOrientation.x) {
-            if (!!inverted) {
-                transform = transform.translate(-scale(Math.max(...targetDomain)), 0);
-            }
-            else {
-                transform = transform.translate(-scale(Math.min(...targetDomain)), 0);
-            }
-        }
-        if (orientation === AxisOrientation.y) {
-            if (!!inverted) {
-                transform = transform.translate(0, -scale(Math.min(...targetDomain)));
-            }
-            else {
-                transform = transform.translate(0, -scale(Math.max(...targetDomain)));
-            }
-        }
-        return transform;
-    }
-    ngOnDestroy() {
-        var _a;
-        (_a = this.broadcastSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-    }
-}
-ZoomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, deps: [{ token: BroadcastService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Injectable });
-ZoomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: BroadcastService }, { type: ChartService }]; } });
-
-const getTextWidth = (inputText, backupRatio = 0.5, fontSize = 10) => {
-    let text = inputText !== null && inputText !== void 0 ? inputText : '';
-    text = text.toString();
-    return fontSize * backupRatio * text.length;
-};
-
-function generateTicks(extremes, count = 10) {
-    const [min, max] = extremes;
-    const tickStep = (max - min) / count;
-    const ticks = d3
-        .range(min, max + tickStep, tickStep)
-        .filter((step) => step <= max);
-    return ticks;
-}
-
-class AxisSizeBuilder {
-    constructor() {
-        this.titlePadding = 11;
-        this.basePadding = 16;
-        this.backupRatio = 0.58;
-    }
-    build(settings) {
-        let finalPadding = this.basePadding;
-        if (settings.orientation === AxisOrientation.y) {
-            const formatter = settings.options.tickFormat || settings.defaultFormatter();
-            finalPadding += settings.options.title ? this.titlePadding : 0;
-            const scale = settings.defaultScale()();
-            scale.domain(settings.extremes);
-            if (settings.options.scaleType.type === ScaleType.band) {
-                scale.ticks = (ticks) => {
-                    return scale.domain();
-                };
-            }
-            const ticks = scale.ticks(20);
-            const maxElementLengthIndex = maxIndex(ticks, (_) => formatter(_).length);
-            finalPadding += getTextWidth(formatter(ticks[maxElementLengthIndex]), this.backupRatio);
-        }
-        if (settings.orientation === AxisOrientation.x) {
-            finalPadding += finalPadding + 20;
-        }
-        return finalPadding;
-    }
-}
-
-class ExtremesBuilder {
-    constructor() {
-        this.extentAccessorMap = new Map()
-            .set(AxisOrientation.x, (_) => _.x)
-            .set(AxisOrientation.y, (_) => _.y);
-        this.extremes = [0, 0];
-    }
-    build(settings) {
-        const options = settings.options;
-        const hasMin = (options === null || options === void 0 ? void 0 : options.min) != null;
-        const hasMax = (options === null || options === void 0 ? void 0 : options.max) != null;
-        if (!hasMin || !hasMax) {
-            const linkedSeries = settings.linkedSeries();
-            const data = linkedSeries.reduce((acc, current) => {
-                return acc.concat(current.data);
-            }, []);
-            const accessor = this.extentAccessorMap.get(settings.orientation);
-            this.extremes = data.length > 1 ? d3.extent(data, accessor) : [0, 0];
-            if (settings.options.scaleType.type === ScaleType.band) {
-                this.extremes = data.map(accessor);
-            }
-        }
-        if (hasMin) {
-            this.extremes[0] = options === null || options === void 0 ? void 0 : options.min;
-        }
-        if (hasMax) {
-            this.extremes[1] = options === null || options === void 0 ? void 0 : options.max;
-        }
-        return this.extremes;
-    }
-}
-
-class Axis {
-    constructor(config) {
-        this._extremes = [0, 0];
-        this._originDomain = [0, 0];
-        this.defaultFormatters = new Map()
-            .set(ScaleType.linear, d3.format(',.5~r'))
-            .set(ScaleType.time, d3.timeFormat('%d.%m.%Y'))
-            .set(ScaleType.log, d3.format('~s'))
-            .set(ScaleType.symlog, d3.format('~s'))
-            .set(ScaleType.pow, d3.format('~s'))
-            .set(ScaleType.sqrt, d3.format('~s'))
-            .set(ScaleType.band, (_) => { return _; });
-        this.defaultScales = new Map()
-            .set(ScaleType.linear, d3.scaleLinear)
-            .set(ScaleType.log, d3.scaleLog)
-            .set(ScaleType.symlog, d3.scaleSymlog)
-            .set(ScaleType.pow, d3.scalePow)
-            .set(ScaleType.sqrt, d3.scaleSqrt)
-            .set(ScaleType.time, d3.scaleTime)
-            .set(ScaleType.band, d3.scaleBand);
-        this.chartConfig = config;
-    }
-    /**
-     * Factory for creating x,y axes
-     * @param {AxisOrientation} orientation
-     * Axis type
-     * @param {IChartConfig} config
-     * Chart config
-     * @param {number} index
-     * New generated axis
-     */
-    static createAxis(orientation, config, index) {
-        const axis = new Axis(config);
-        axis.setLocate(orientation);
-        axis.setIndex(index);
-        axis.setOptions();
-        axis.setExtremes();
-        axis.setTicksValues();
-        axis.setSelfSize();
-        return axis;
-    }
-    /**
-     *
-     * @param {orientation} orientation
-     * Set locate axis x or y
-     */
-    setLocate(orientation) {
-        this._orientation = orientation;
-    }
-    /**
-     *
-     * @param {number} index
-     * Index axis
-     */
-    setIndex(index) {
-        this._index = index;
-    }
-    /**
-     * @return {Array<Series<BasePoint>>}
-     * Linked series
-     */
-    linkedSeries() {
-        var _a;
-        const linkedFilter = (serie) => serie[this._orientation === AxisOrientation.y ? 'yAxisIndex' : 'xAxisIndex'] === this._index;
-        return (_a = this.chartConfig) === null || _a === void 0 ? void 0 : _a.series.filter(linkedFilter);
-    }
-    setExtremes() {
-        const builder = new ExtremesBuilder();
-        this._extremes = builder.build(this);
-    }
-    setOriginDomain(domain) {
-        this._originDomain = domain;
-    }
-    setScale(scale) {
-        this._scale = scale;
-        if (this.options.scaleType.type === ScaleType.band) {
-            this._scale.ticks = () => {
-                return this._scale.domain();
-            };
-        }
-    }
-    setSelfSize() {
-        this._selfSize = new AxisSizeBuilder().build(this);
-    }
-    setTicksValues() {
-        //this._ticksValues = generateTicks(this._extremes);
-    }
-    setOptions() {
-        const options = this.orientation === AxisOrientation.x
-            ? this.chartConfig.xAxis[this.index]
-            : this.chartConfig.yAxis[this.index];
-        this._options = options;
-    }
-    get scale() {
-        return this._scale;
-    }
-    get extremes() {
-        return this._extremes;
-    }
-    get orientation() {
-        return this._orientation;
-    }
-    get selfSize() {
-        return this._selfSize;
-    }
-    get tickValues() {
-        return this._ticksValues;
-    }
-    get index() {
-        return this._index;
-    }
-    get options() {
-        return this._options;
-    }
-    get originDomain() {
-        return this._originDomain;
-    }
-    defaultFormatter() {
-        return this.defaultFormatters.get(this.options.scaleType.type);
-    }
-    defaultScale() {
-        return this.defaultScales.get(this.options.scaleType.type);
-    }
-}
-
-class ZoomMessage {
-    constructor(options) {
-        this.eventType = options === null || options === void 0 ? void 0 : options.eventType;
-        this.element = options === null || options === void 0 ? void 0 : options.element;
-        this.axis = options === null || options === void 0 ? void 0 : options.axis;
-        this.domain = options.domain;
-        this.chartId = options === null || options === void 0 ? void 0 : options.chartId;
-        this.style = options === null || options === void 0 ? void 0 : options.style;
-    }
-}
-class BrushMessage {
-    constructor(options) {
-        this.chartId = options === null || options === void 0 ? void 0 : options.chartId;
-        this.selection = options === null || options === void 0 ? void 0 : options.selection;
-        this.mode = options === null || options === void 0 ? void 0 : options.mode;
-    }
-}
-
-class ScaleService {
-    constructor(chartService, zoomService) {
-        this.chartService = chartService;
-        this.zoomService = zoomService;
-        this.transformCacheX = new Map();
-        this.transformCacheY = new Map();
-        this.scaleMapping = new Map()
-            .set(ScaleType.linear, d3.scaleLinear)
-            .set(ScaleType.time, d3.scaleTime)
-            .set(ScaleType.log, d3.scaleLog)
-            .set(ScaleType.symlog, d3.scaleSymlog)
-            .set(ScaleType.pow, d3.scalePow)
-            .set(ScaleType.sqrt, d3.scaleSqrt)
-            .set(ScaleType.band, d3.scaleBand);
-        this.scales = combineLatest([
-            this.chartService.size,
-            this.chartService.config,
-            this.zoomService.zoomed,
-        ]).pipe(map((data) => {
-            var _a, _b, _c, _d;
-            const [size, config, zoom] = data;
-            const xAxisMap = new Map();
-            const yAxisMap = new Map();
-            config.yAxis.map((_, index) => {
-                yAxisMap.set(index, Axis.createAxis(AxisOrientation.y, config, index));
-            });
-            config.xAxis.map((_, index) => {
-                xAxisMap.set(index, Axis.createAxis(AxisOrientation.x, config, index));
-            });
-            // Generate x scales
-            const left = Array.from(yAxisMap.values())
-                .filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite); })
-                .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const right = Array.from(yAxisMap.values())
-                .filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite) !== true; })
-                .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const finalWidth = (size.width || 0) - left - right;
-            xAxisMap.forEach((axis) => {
-                var _a, _b;
-                let domain = axis.extremes;
-                if (axis === null || axis === void 0 ? void 0 : axis.options.inverted) {
-                    domain = [...axis.extremes].reverse();
-                }
-                let scale = this.scaleMapping
-                    .get(axis.options.scaleType.type)()
-                    .domain(domain)
-                    .range([0, finalWidth - config.bounds.right]);
-                if (axis.options.niceTicks) {
-                    scale.nice();
-                }
-                if (axis.options.scaleType.type === ScaleType.log) {
-                    scale.base(axis.options.scaleType.base);
-                }
-                if (axis.options.scaleType.type === ScaleType.band) {
-                    scale.paddingInner(0.1);
-                    scale.paddingOuter(0.1);
-                    scale.align(0.1);
-                }
-                axis.setScale(scale);
-                axis.setOriginDomain(scale.domain());
-                const hasCache = this.transformCacheX.has(axis.index);
-                const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.axis) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.x ||
-                    ((_b = zoom.axis) === null || _b === void 0 ? void 0 : _b.index) !== axis.index;
-                if (hasCache && shouldRestore) {
-                    const restoredTransform = this.transformCacheX.get(axis.index);
-                    axis.setScale(restoredTransform.rescaleX(scale));
-                }
-            });
-            if (zoom && zoom.domain) {
-                if (((_a = zoom.axis) === null || _a === void 0 ? void 0 : _a.orientation) === AxisOrientation.x) {
-                    if (xAxisMap.has(zoom.axis.index)) {
-                        const x = xAxisMap.get(zoom.axis.index);
-                        const transform = this.zoomService.getD3Transform(zoom.domain, x.originDomain, x.scale, AxisOrientation.x, x.options.inverted);
-                        const rescaled = transform.rescaleX(x.scale.copy());
-                        x.setScale(rescaled);
-                        this.transformCacheX.set(x.index, transform);
-                    }
-                }
-            }
-            // Generate y axis
-            const top = Array.from(xAxisMap.values())
-                .filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite); })
-                .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const bottom = Array.from(xAxisMap.values())
-                .filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite) !== true; })
-                .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const finalHeight = (size.height || 0) -
-                top -
-                bottom -
-                ((_b = config === null || config === void 0 ? void 0 : config.bounds) === null || _b === void 0 ? void 0 : _b.top) -
-                ((_c = config.bounds) === null || _c === void 0 ? void 0 : _c.bottom);
-            yAxisMap.forEach((axis) => {
-                var _a, _b;
-                let domain = axis.extremes;
-                if (axis.orientation === AxisOrientation.y) {
-                    domain = [...axis.extremes].reverse();
-                }
-                if (axis === null || axis === void 0 ? void 0 : axis.options.inverted) {
-                    domain = domain.reverse();
-                }
-                const scale = this.scaleMapping
-                    .get(axis.options.scaleType.type)()
-                    .domain(domain)
-                    .range([config.bounds.top, finalHeight]);
-                if (axis.options.niceTicks) {
-                    scale.nice();
-                }
-                if (axis.options.scaleType.type === ScaleType.log) {
-                    scale.base(axis.options.scaleType.base);
-                }
-                if (axis.options.scaleType.type === ScaleType.band) {
-                    scale.paddingInner(0.1);
-                    scale.paddingOuter(0.1);
-                    scale.align(0.1);
-                }
-                axis.setScale(scale);
-                axis.setOriginDomain(scale.domain());
-                const hasCache = this.transformCacheY.has(axis.index);
-                const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.axis) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.y ||
-                    ((_b = zoom.axis) === null || _b === void 0 ? void 0 : _b.index) !== axis.index;
-                if (hasCache && shouldRestore) {
-                    const restoredTransform = this.transformCacheY.get(axis.index);
-                    axis.setScale(restoredTransform.rescaleY(scale));
-                }
-            });
-            if (zoom && zoom.domain) {
-                if (((_d = zoom.axis) === null || _d === void 0 ? void 0 : _d.orientation) === AxisOrientation.y) {
-                    if (yAxisMap.has(zoom.axis.index)) {
-                        const y = yAxisMap.get(zoom.axis.index);
-                        const transform = this.zoomService.getD3Transform(zoom.domain, y.originDomain, y.scale, AxisOrientation.y, y.options.inverted);
-                        const rescaled = transform.rescaleY(y.scale.copy());
-                        y.setScale(rescaled);
-                        this.transformCacheY.set(y.index, transform);
-                    }
-                }
-            }
-            return {
-                x: xAxisMap,
-                y: yAxisMap
-            };
-        }), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-    }
-    resetZoom() {
-        this.chartService.config.pipe(take(1), withLatestFrom(this.scales)).subscribe(([config, scales]) => {
-            config.xAxis.forEach((axis, index) => {
-                var _a, _b;
-                const scale = (_b = (_a = scales === null || scales === void 0 ? void 0 : scales.x) === null || _a === void 0 ? void 0 : _a.get(index)) === null || _b === void 0 ? void 0 : _b.originDomain;
-                if (scale) {
-                    const msg = new ZoomMessage({
-                        eventType: "end",
-                        axis: {
-                            index,
-                            orientation: AxisOrientation.x
-                        },
-                        domain: scale,
-                        chartId: config.id
-                    });
-                    this.zoomService.fireZoom(msg);
-                    if (config.zoom.syncChannel && config.zoom.syncType === ZoomType.x) {
-                        this.zoomService.broadcastZoom(msg);
-                    }
-                }
-            });
-            config.yAxis.forEach((axis, index) => {
-                var _a, _b;
-                const scale = (_b = (_a = scales === null || scales === void 0 ? void 0 : scales.y) === null || _a === void 0 ? void 0 : _a.get(index)) === null || _b === void 0 ? void 0 : _b.originDomain;
-                if (scale) {
-                    const msg = new ZoomMessage({
-                        eventType: "end",
-                        axis: {
-                            index,
-                            orientation: AxisOrientation.y
-                        },
-                        domain: scale,
-                        chartId: config.id
-                    });
-                    this.zoomService.fireZoom(msg);
-                    if (config.zoom.syncChannel && config.zoom.syncType === ZoomType.y) {
-                        this.zoomService.broadcastZoom(msg);
-                    }
-                }
-            });
-        });
-    }
-}
-ScaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScaleService, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Injectable });
-ScaleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScaleService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScaleService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }]; } });
-
-class BrushService {
-    constructor() {
-        this._brushDomain = new ReplaySubject(1);
-        this.brushDomain = this._brushDomain.asObservable();
-    }
-    setBrush(brush) {
-        this._brushDomain.next(brush);
-    }
-}
-BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-BrushService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-var BrushType;
-(function (BrushType) {
-    BrushType[BrushType["x"] = 0] = "x";
-    BrushType[BrushType["y"] = 1] = "y";
-    BrushType[BrushType["xy"] = 2] = "xy";
-})(BrushType || (BrushType = {}));
-
-class SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element, zone) {
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.zone = zone;
-    }
-    set config(config) {
-        this._config = config;
-    }
-    get config() {
-        return this._config;
-    }
-    set series(series) {
-        this._series = series;
-    }
-    get series() {
-        return this._series;
-    }
-    ngOnInit() {
-    }
-}
-SeriesBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesBaseComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SeriesBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SeriesBaseComponent, selector: "ng-component", inputs: { config: "config", series: "series" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesBaseComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { config: [{
-                type: Input
-            }], series: [{
-                type: Input
-            }] } });
-
-class LinearSeriesBase extends SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.defaultClipPointsMapping = new Map();
-        this._update = new BehaviorSubject(null);
-    }
-    set series(series) {
-        var _a;
-        this.__series = series;
-        this.markers = (_a = this.__series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => (_ === null || _ === void 0 ? void 0 : _.marker) && (_ === null || _ === void 0 ? void 0 : _.x) !== undefined && (_ === null || _ === void 0 ? void 0 : _.y) !== undefined && (_ === null || _ === void 0 ? void 0 : _.x) !== null && (_ === null || _ === void 0 ? void 0 : _.y) !== null);
-    }
-    get series() {
-        return this.__series;
-    }
-    ngOnInit() {
-        const filterX = (min, max) => (point, idx, arr) => {
-            const bigger = min > max ? min : max;
-            const smaller = min > max ? max : min;
-            return (point.x <= bigger ||
-                point.x1 <= bigger ||
-                (arr[idx - 1] && arr[idx - 1].x <= bigger) ||
-                (arr[idx - 1] && arr[idx - 1].x1 <= bigger)) &&
-                (point.x >= smaller ||
-                    point.x1 >= smaller ||
-                    (arr[idx + 1] && arr[idx + 1].x >= smaller) ||
-                    (arr[idx + 1] && arr[idx + 1].x1 >= smaller));
-        };
-        const filterY = (min, max) => (point, idx, arr) => {
-            const bigger = min > max ? min : max;
-            const smaller = min > max ? max : min;
-            return (point.y <= bigger ||
-                point.y1 <= bigger ||
-                (arr[idx - 1] && arr[idx - 1].y <= bigger) ||
-                (arr[idx - 1] && arr[idx - 1].y1 <= bigger)) &&
-                (point.y >= smaller ||
-                    point.y1 >= smaller ||
-                    (arr[idx + 1] && arr[idx + 1].y >= smaller) ||
-                    (arr[idx + 1] && arr[idx + 1].y1 >= smaller));
-        };
-        this.defaultClipPointsMapping.set(ClipPointsDirection.x, filterX);
-        this.defaultClipPointsMapping.set(ClipPointsDirection.y, filterY);
-        this.transform = this.svc.pointerMove.pipe(withLatestFrom(this.scaleService.scales), map((data) => {
-            const [event, { x, y }] = data;
-            return this.getTransform(event, x.get(this.series.xAxisIndex).scale, y.get(this.series.yAxisIndex).scale);
-        }), tap(() => setTimeout(() => this.cdr.detectChanges())));
-        this.path = combineLatest([this.scaleService.scales, this._update]).pipe(map(([data]) => {
-            var _a, _b;
-            const { x, y } = data;
-            this.x = (_a = x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale;
-            this.y = (_b = y.get(this.series.yAxisIndex)) === null || _b === void 0 ? void 0 : _b.scale;
-            if (!this.x || !this.y) {
-                return '';
-            }
-            const filter = this.defaultClipPointsMapping.get(this.series.clipPointsDirection);
-            const line = d3
-                .line()
-                .defined((point) => point.x !== null &&
-                point.y !== null &&
-                point.x !== undefined &&
-                point.y !== undefined &&
-                !isNaN(point.x) &&
-                !isNaN(point.y))
-                .x((point) => this.x(point.x))
-                .y((point) => this.y(point.y));
-            let filteredData = this.series.data;
-            if (this.series.clipPointsDirection === ClipPointsDirection.x) {
-                let [min, max] = this.x.domain();
-                min = min instanceof Date ? min.getTime() : min;
-                max = max instanceof Date ? max.getTime() : max;
-                filteredData = filteredData === null || filteredData === void 0 ? void 0 : filteredData.filter(filter(min, max));
-            }
-            if (this.series.clipPointsDirection === ClipPointsDirection.y) {
-                let [min, max] = this.y.domain();
-                min = min instanceof Date ? min.getTime() : min;
-                max = max instanceof Date ? max.getTime() : max;
-                filteredData = filteredData === null || filteredData === void 0 ? void 0 : filteredData.filter(filter(min, max));
-            }
-            return line(filteredData);
-        }));
-    }
-    ngOnDestroy() {
-        this.svc.setTooltip({
-            point: null,
-            series: this.series,
-        });
-    }
-    ngAfterViewInit() {
-    }
-    getTransform(event, scaleX, scaleY) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if (event.type === 'mouseleave') {
-            return null;
-        }
-        const mouse = [event === null || event === void 0 ? void 0 : event.offsetX, event === null || event === void 0 ? void 0 : event.offsetY];
-        const tooltipTracking = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.tooltip) === null || _b === void 0 ? void 0 : _b.tracking;
-        const lineIntersection = (p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) => {
-            const rV = {};
-            let s1_x, s1_y, s2_x, s2_y;
-            s1_x = p1_x - p0_x;
-            s1_y = p1_y - p0_y;
-            s2_x = p3_x - p2_x;
-            s2_y = p3_y - p2_y;
-            let s, t;
-            s =
-                (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) /
-                    (-s2_x * s1_y + s1_x * s2_y);
-            t =
-                (s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) /
-                    (-s2_x * s1_y + s1_x * s2_y);
-            if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
-                // Collision detected
-                rV.x = p0_x + t * s1_x;
-                rV.y = p0_y + t * s1_y;
-            }
-            return rV;
-        };
-        if (tooltipTracking === TooltipTracking.x) {
-            const bisect = d3.bisector((_) => _.x).right;
-            const pointer = mouse[0];
-            let x0 = scaleX.invert(pointer);
-            if (x0 instanceof Date) {
-                x0 = x0.getTime();
-            }
-            const rightId = bisect(this.series.data, x0);
-            const range = scaleY.range();
-            const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX((_c = this.series.data[rightId - 1]) === null || _c === void 0 ? void 0 : _c.x), scaleY((_d = this.series.data[rightId - 1]) === null || _d === void 0 ? void 0 : _d.y), scaleX((_e = this.series.data[rightId]) === null || _e === void 0 ? void 0 : _e.x), scaleY((_f = this.series.data[rightId]) === null || _f === void 0 ? void 0 : _f.y));
-            const x = scaleX.invert(intersect.x);
-            const y = scaleY.invert(intersect.y);
-            if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
-                this.svc.setTooltip({
-                    point: { x: scaleX.invert(intersect.x), y: scaleY.invert(intersect.y) },
-                    series: this.series,
-                });
-            }
-            else {
-                this.svc.setTooltip({
-                    point: null,
-                    series: this.series,
-                });
-            }
-            return {
-                x: intersect.x,
-                y: intersect.y,
-            };
-        }
-        if (tooltipTracking === TooltipTracking.y) {
-            const bisect = d3.bisector((_) => _.y).right;
-            let y0 = scaleY.invert(mouse[1]);
-            if (y0 instanceof Date) {
-                y0 = y0.getTime();
-            }
-            const rightId = bisect(this.series.data, y0);
-            const range = scaleX.range();
-            const intersect = lineIntersection(range[0], mouse[1], Number.MAX_SAFE_INTEGER, mouse[1], scaleX((_g = this.series.data[rightId - 1]) === null || _g === void 0 ? void 0 : _g.x), scaleY((_h = this.series.data[rightId - 1]) === null || _h === void 0 ? void 0 : _h.y), scaleX((_j = this.series.data[rightId]) === null || _j === void 0 ? void 0 : _j.x), scaleY((_k = this.series.data[rightId]) === null || _k === void 0 ? void 0 : _k.y));
-            const x = scaleX.invert(intersect.x);
-            const y = scaleY.invert(intersect.y);
-            if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
-                this.svc.setTooltip({
-                    point: { x: scaleX.invert(intersect.x), y: scaleY.invert(intersect.y) },
-                    series: this.series,
-                });
-            }
-            else {
-                this.svc.setTooltip({
-                    point: null,
-                    series: this.series,
-                });
-            }
-            return {
-                x: intersect.x,
-                y: intersect.y,
-            };
-        }
-    }
-}
-LinearSeriesBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LinearSeriesBase, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-LinearSeriesBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LinearSeriesBase, selector: "ng-component", inputs: { series: "series" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LinearSeriesBase, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; }, propDecorators: { series: [{
-                type: Input
-            }] } });
-
-var DragPointType;
-(function (DragPointType) {
-    DragPointType[DragPointType["x"] = 0] = "x";
-    DragPointType[DragPointType["y"] = 1] = "y";
-    DragPointType[DragPointType["xy"] = 2] = "xy";
-})(DragPointType || (DragPointType = {}));
-
-class DraggablePointDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-        this.moveStart = new EventEmitter();
-        this.moveProcess = new EventEmitter();
-        this.moveEnd = new EventEmitter();
-    }
-    mouseDown(event) {
-        if (!this.tetaDraggablePoint) {
-            return;
-        }
-        event.stopPropagation();
-        event.preventDefault();
-        this.startPosition = {
-            x: event.x,
-            y: event.y
-        };
-        this.moveStart.emit(this.startPosition);
-    }
-    mouseUp(event) {
-        if (this.startPosition !== null && this.startPosition !== undefined) {
-            let deltaX = event.x - this.startPosition.x;
-            let deltaY = event.y - this.startPosition.y;
-            if (this.dragDirection === DragPointType.x) {
-                deltaY = 0;
-            }
-            if (this.dragDirection === DragPointType.y) {
-                deltaX = 0;
-            }
-            if (this.allowDrag && !this.allowDrag({
-                x: event.x,
-                y: event.y,
-                deltaX,
-                deltaY
-            })) {
-                this.startPosition = null;
-                return;
-            }
-            if (this.transformCache) {
-                this.transformCache.x = this.transformCache.x + deltaX;
-                this.transformCache.y = this.transformCache.y + deltaY;
-            }
-            else {
-                this.transformCache = {
-                    x: deltaX,
-                    y: deltaY
-                };
-            }
-            this.moveEnd.emit({
-                x: event.x,
-                y: event.y,
-                deltaX,
-                deltaY
-            });
-        }
-        this.startPosition = null;
-    }
-    mouseMove(event) {
-        if (this.startPosition) {
-            let deltaX = event.x - this.startPosition.x;
-            let deltaY = event.y - this.startPosition.y;
-            if (this.transformCache) {
-                deltaX = this.transformCache.x + deltaX;
-                deltaY = this.transformCache.y + deltaY;
-            }
-            if (this.allowDrag && !this.allowDrag({
-                x: event.x,
-                y: event.y,
-                deltaX,
-                deltaY
-            })) {
-                return;
-            }
-            if (this.dragDirection === DragPointType.x) {
-                deltaY = 0;
-            }
-            if (this.dragDirection === DragPointType.y) {
-                deltaX = 0;
-            }
-            this.setTransform(deltaX, deltaY);
-            event.stopPropagation();
-            event.preventDefault();
-            this.moveProcess.emit({
-                x: event.x,
-                y: event.y,
-                deltaX,
-                deltaY
-            });
-        }
-    }
-    setTransform(x, y) {
-        this._elementRef.nativeElement.style.transform = `translate(${x}px, ${y}px)`;
-    }
-    resetTransform() {
-        this.setTransform(0, 0);
-        this.transformCache = null;
-    }
-}
-DraggablePointDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggablePointDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-DraggablePointDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: { tetaDraggablePoint: "tetaDraggablePoint", dragDirection: "dragDirection", allowDrag: "allowDrag" }, outputs: { moveStart: "moveStart", moveProcess: "moveProcess", moveEnd: "moveEnd" }, host: { listeners: { "mousedown": "mouseDown($event)", "touchstart": "mouseDown($event)", "window:mouseup": "mouseUp($event)", "window:touchend": "mouseUp($event)", "window:mousemove": "mouseMove($event)", "window:touchmove": "mouseMove($event)" } }, exportAs: ["tetaDraggablePoint"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggablePointDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaDraggablePoint]',
-                    exportAs: 'tetaDraggablePoint'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { tetaDraggablePoint: [{
-                type: Input
-            }], dragDirection: [{
-                type: Input
-            }], allowDrag: [{
-                type: Input
-            }], moveStart: [{
-                type: Output
-            }], moveProcess: [{
-                type: Output
-            }], moveEnd: [{
-                type: Output
-            }], mouseDown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['touchstart', ['$event']]
-            }], mouseUp: [{
-                type: HostListener,
-                args: ['window:mouseup', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['window:touchend', ['$event']]
-            }], mouseMove: [{
-                type: HostListener,
-                args: ['window:mousemove', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['window:touchmove', ['$event']]
-            }] } });
-
-class LineSeriesComponent extends LinearSeriesBase {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.allowDrag = (point) => {
-            return (newPoint) => {
-                if (point.marker.minX !== null && point.marker.minX !== undefined) {
-                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) < point.marker.minX) {
-                        return false;
-                    }
-                }
-                if (point.marker.maxX !== null && point.marker.maxX !== undefined) {
-                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.maxX) {
-                        return false;
-                    }
-                }
-                if (point.marker.minY !== null && point.marker.minY !== undefined) {
-                    if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) < point.marker.minY) {
-                        return false;
-                    }
-                }
-                if (point.marker.maxY !== null && point.marker.maxY !== undefined) {
-                    if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) > point.marker.maxY) {
-                        return false;
-                    }
-                }
-                return true;
-            };
-        };
-    }
-    moveStart(event, point) {
-        this.start = { x: point.x, y: point.y };
-    }
-    moveEnd(event, point) {
-        point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
-        point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
-        this._update.next();
-        const emitEvent = {
-            type: 'end',
-            sourceEvent: event
-        };
-        this.svc.emitPoint({
-            target: {
-                series: this.series,
-                point: point,
-            },
-            event: emitEvent,
-        });
-    }
-    moveProcess(event, point) {
-        point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
-        point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
-        this._update.next();
-        const emitEvent = {
-            type: 'drag',
-            sourceEvent: event
-        };
-        this.svc.emitPoint({
-            target: {
-                series: this.series,
-                point: point,
-            },
-            event: emitEvent,
-        });
-    }
-    startLabel(event, label) {
-        this.labelStart = { dx: label.dx, dy: label.dy };
-    }
-    moveLabel(event, label) {
-        label.dx = this.labelStart.dx + event.deltaX;
-        label.dy = this.labelStart.dy + event.deltaY;
-    }
-}
-LineSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LineSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y!=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <ng-container *ngIf=\"x && y\">\n    <svg:g\n      *ngFor=\"let point of draggablePoints\"\n      [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n      <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n             [dragDirection]=\"point.marker.dragType\"\n             [allowDrag]=\"allowDrag(point)\"\n             #dragPoint=\"tetaDraggablePoint\"\n             (moveStart)=\"moveStart($event, point)\"\n             (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n             (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n             [class.draggable-marker]=\"point?.marker?.draggable\">\n        <svg:circle\n          class=\"marker\"\n          [attr.r]=\"point.marker.style?.radius ?? 5\"\n          [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n          [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n          [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n          [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n          [attr.cx]=\"0\"\n          [attr.cy]=\"0\">\n        </svg:circle>\n        <ng-container *ngIf=\"point.marker.label?.text\">\n          <svg:line\n            [attr.x1]=\"0\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"point.marker.label?.dx\"\n            [attr.y2]=\"point.marker.label?.dy\"\n            [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n            [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n            [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n          </svg:line>\n          <svg:foreignObject\n            [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n            [dragDirection]=\"point.marker.label.dragType\"\n            #labelPoint=\"tetaDraggablePoint\"\n            (moveStart)=\"startLabel($event, point.marker.label)\"\n            (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n            (moveEnd)=\"labelPoint.resetTransform();\"\n            [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n            [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n            [attr.x]=\"point.marker.label?.dx\"\n            [attr.y]=\"point.marker.label?.dy\"\n            class=\"position-absolute\">\n            <div\n              #annotationNode\n              class=\"shadow-2 padding-2\"\n              [style.color]=\"'var(--color-text-90)'\"\n              [style.background-color]=\"'var(--color-background-50)'\"\n              [style.cursor]=\"'move'\"\n              style=\"border-radius: 2px; display: inline-block;\">\n              {{point.marker.label?.text}}\n            </div>\n          </svg:foreignObject>\n        </ng-container>\n      </svg:g>\n    </svg:g>\n  </ng-container>\n\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LineSeriesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y!=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <ng-container *ngIf=\"x && y\">\n    <svg:g\n      *ngFor=\"let point of draggablePoints\"\n      [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n      <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n             [dragDirection]=\"point.marker.dragType\"\n             [allowDrag]=\"allowDrag(point)\"\n             #dragPoint=\"tetaDraggablePoint\"\n             (moveStart)=\"moveStart($event, point)\"\n             (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n             (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n             [class.draggable-marker]=\"point?.marker?.draggable\">\n        <svg:circle\n          class=\"marker\"\n          [attr.r]=\"point.marker.style?.radius ?? 5\"\n          [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n          [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n          [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n          [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n          [attr.cx]=\"0\"\n          [attr.cy]=\"0\">\n        </svg:circle>\n        <ng-container *ngIf=\"point.marker.label?.text\">\n          <svg:line\n            [attr.x1]=\"0\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"point.marker.label?.dx\"\n            [attr.y2]=\"point.marker.label?.dy\"\n            [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n            [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n            [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n          </svg:line>\n          <svg:foreignObject\n            [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n            [dragDirection]=\"point.marker.label.dragType\"\n            #labelPoint=\"tetaDraggablePoint\"\n            (moveStart)=\"startLabel($event, point.marker.label)\"\n            (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n            (moveEnd)=\"labelPoint.resetTransform();\"\n            [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n            [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n            [attr.x]=\"point.marker.label?.dx\"\n            [attr.y]=\"point.marker.label?.dy\"\n            class=\"position-absolute\">\n            <div\n              #annotationNode\n              class=\"shadow-2 padding-2\"\n              [style.color]=\"'var(--color-text-90)'\"\n              [style.background-color]=\"'var(--color-background-50)'\"\n              [style.cursor]=\"'move'\"\n              style=\"border-radius: 2px; display: inline-block;\">\n              {{point.marker.label?.text}}\n            </div>\n          </svg:foreignObject>\n        </ng-container>\n      </svg:g>\n    </svg:g>\n  </ng-container>\n\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
-
-class BarSeriesComponent extends SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.Math = Math;
-    }
-    ngOnInit() {
-        this.barSeriesCount = this.svc.config.pipe(map((_) => {
-            const count = _.series.filter((_) => _.type === SeriesType.bar && _.xAxisIndex === this.series.xAxisIndex);
-            return count.length;
-        }));
-        this.x1 = this.scaleService.scales.pipe(map((_) => {
-            var _a;
-            const x = (_a = _.x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale;
-            const range = x.range();
-            const domain = this.series.data.map((_) => _.x);
-            return d3
-                .scaleBand()
-                .range([0, range[1]])
-                .domain(domain)
-                .padding(0.1);
-        }));
-        this.x = this.scaleService.scales.pipe(map((_) => { var _a; return (_a = _.x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
-        this.y = this.scaleService.scales.pipe(map((_) => { var _a; return (_a = _.y.get(this.series.yAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
-    }
-    mouseenter(point) {
-        this.svc.setTooltip({
-            point: point,
-            series: this.series,
-        });
-    }
-    mouseleave(point) {
-        this.svc.setTooltip({
-            point: null,
-            series: this.series,
-        });
-    }
-    ngOnChanges(changes) { }
-}
-BarSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BarSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BarSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BarSeriesComponent, selector: "svg:svg[teta-bar-series]", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  x: x | async,\n  x1: x1 | async,\n  y: y | async,\n  barSeriesCount: barSeriesCount | async\n} as data\">\n  <ng-container *ngIf=\"data.x && data.y\">\n    <ng-container *ngIf=\"data.barSeriesCount > 1\">\n      <svg:rect\n        *ngFor=\"let point of series.data\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.x]=\"data.x(point.x) + (series.id * data.x1.bandwidth() / data.barSeriesCount)\"\n        [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n        [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n        [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n        [attr.fill]=\"series.color\"\n      ></svg:rect>\n    </ng-container>\n    <ng-container *ngIf=\"data.barSeriesCount === 1\">\n      <svg:rect\n        *ngFor=\"let point of series.data\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n        [attr.width]=\"data.x1.bandwidth()\"\n        [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n        [attr.fill]=\"point.color ?? series.color\"\n      ></svg:rect>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BarSeriesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'svg:svg[teta-bar-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  x: x | async,\n  x1: x1 | async,\n  y: y | async,\n  barSeriesCount: barSeriesCount | async\n} as data\">\n  <ng-container *ngIf=\"data.x && data.y\">\n    <ng-container *ngIf=\"data.barSeriesCount > 1\">\n      <svg:rect\n        *ngFor=\"let point of series.data\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.x]=\"data.x(point.x) + (series.id * data.x1.bandwidth() / data.barSeriesCount)\"\n        [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n        [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n        [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n        [attr.fill]=\"series.color\"\n      ></svg:rect>\n    </ng-container>\n    <ng-container *ngIf=\"data.barSeriesCount === 1\">\n      <svg:rect\n        *ngFor=\"let point of series.data\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n        [attr.width]=\"data.x1.bandwidth()\"\n        [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n        [attr.fill]=\"point.color ?? series.color\"\n      ></svg:rect>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n" }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
-
-class ScatterSeriesComponent extends SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-    }
-    ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map(_ => { var _a; return (_a = _.x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
-        this.y = this.scaleService.scales.pipe(map(_ => { var _a; return (_a = _.y.get(this.series.yAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
-    }
-    ngAfterViewInit() {
-    }
-    mouseenter(point) {
-        this.svc.setTooltip({
-            point: point,
-            series: this.series,
-        });
-    }
-    mouseleave(point) {
-        this.svc.setTooltip({
-            point: null,
-            series: this.series,
-        });
-    }
-}
-ScatterSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScatterSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ScatterSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ScatterSeriesComponent, selector: "svg:svg[teta-scatter-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async\n} as scales\">\n  <ng-container *ngIf=\"scales.x && scales.y\">\n    <svg:circle\n      class=\"line\"\n      *ngFor=\"let point of series.data\"\n      (mouseenter)=\"mouseenter(point)\"\n      (mouseleave)=\"mouseleave(point)\"\n      [attr.cx]=\"scales.x(point.x)\"\n      [attr.cy]=\"scales.y(point.y)\"\n      [attr.r]=\"series.style?.radius ?? 1\"\n      [attr.stroke]=\"point.color ?? series.color\"\n      [attr.fill]=\"point.color ?? series.color\"\n      [attr.stroke-width]=\"series.style?.strokeWidth\">\n    </svg:circle>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScatterSeriesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'svg:svg[teta-scatter-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async\n} as scales\">\n  <ng-container *ngIf=\"scales.x && scales.y\">\n    <svg:circle\n      class=\"line\"\n      *ngFor=\"let point of series.data\"\n      (mouseenter)=\"mouseenter(point)\"\n      (mouseleave)=\"mouseleave(point)\"\n      [attr.cx]=\"scales.x(point.x)\"\n      [attr.cy]=\"scales.y(point.y)\"\n      [attr.r]=\"series.style?.radius ?? 1\"\n      [attr.stroke]=\"point.color ?? series.color\"\n      [attr.fill]=\"point.color ?? series.color\"\n      [attr.stroke-width]=\"series.style?.strokeWidth\">\n    </svg:circle>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
-
-class BlockSeriesComponent extends SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.fillType = FillType;
-        this.Math = Math;
-        this.id = (Date.now() + Math.random()).toString(36);
-    }
-    ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map((_) => { var _a; return (_a = _.x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
-        this.y = this.scaleService.scales.pipe(map((_) => { var _a; return (_a = _.y.get(this.series.yAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
-        this.displayPoints = this.y.pipe(filter((y) => y), map((y) => {
-            return this.series.data.filter((point, index, arr) => {
-                var _a, _b, _c, _d;
-                const [min, max] = y.domain();
-                return (point.y >= min ||
-                    point.y1 >= min ||
-                    ((_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.y) >= min ||
-                    ((_b = arr[index + 1]) === null || _b === void 0 ? void 0 : _b.y1) >= min) &&
-                    (point.y <= max ||
-                        point.y1 <= max ||
-                        ((_c = arr[index - 1]) === null || _c === void 0 ? void 0 : _c.y) <= max ||
-                        ((_d = arr[index - 1]) === null || _d === void 0 ? void 0 : _d.y1) <= max);
-            });
-        }));
-    }
-    mouseenter(point) {
-        this.svc.setTooltip({
-            point: point,
-            series: this.series,
-        });
-    }
-    mouseleave(point) {
-        this.svc.setTooltip({
-            point: null,
-            series: this.series,
-        });
-    }
-    ngAfterViewInit() {
-    }
-}
-BlockSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BlockSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BlockSeriesComponent, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngIf=\"data.x && data.y\">\n    <ng-container *ngFor=\"let point of data.points\">\n      <svg:g (mouseenter)=\"mouseenter(point)\"\n             (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          x=\"0\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          width=\"100%\">\n        </svg:rect>\n        <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                  x=\"50%\"\n                  [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                  alignment-baseline=\"middle\"\n                  text-anchor=\"middle\">{{ point.text }}\n        </svg:text>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n      </svg:g>\n    </ng-container>\n\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockSeriesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'svg:svg[teta-block-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngIf=\"data.x && data.y\">\n    <ng-container *ngFor=\"let point of data.points\">\n      <svg:g (mouseenter)=\"mouseenter(point)\"\n             (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          x=\"0\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          width=\"100%\">\n        </svg:rect>\n        <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                  x=\"50%\"\n                  [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                  alignment-baseline=\"middle\"\n                  text-anchor=\"middle\">{{ point.text }}\n        </svg:text>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n      </svg:g>\n    </ng-container>\n\n  </ng-container>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
-
-class BlockAreaSeriesComponent extends SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.fillType = FillType;
-        this.Math = Math;
-        this.id = (Date.now() + Math.random()).toString(36);
-    }
-    ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map((_) => { var _a; return (_a = _.x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
-        this.y = this.scaleService.scales.pipe(map((_) => { var _a; return (_a = _.y.get(this.series.yAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
-        this.displayPoints = this.y.pipe(filter((y) => y), map((y) => {
-            return this.series.data.filter((point, index, arr) => {
-                var _a, _b, _c, _d;
-                const [min, max] = y.domain();
-                return (point.y >= min ||
-                    point.y1 >= min ||
-                    ((_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.y) >= min ||
-                    ((_b = arr[index + 1]) === null || _b === void 0 ? void 0 : _b.y1) >= min) &&
-                    (point.y <= max ||
-                        point.y1 <= max ||
-                        ((_c = arr[index - 1]) === null || _c === void 0 ? void 0 : _c.y) <= max ||
-                        ((_d = arr[index - 1]) === null || _d === void 0 ? void 0 : _d.y1) <= max);
-            });
-        }));
-    }
-    ngAfterViewInit() {
-    }
-    mouseenter(point) {
-        this.svc.setTooltip({
-            point: point,
-            series: this.series,
-        });
-    }
-    mouseleave(point) {
-        this.svc.setTooltip({
-            point: null,
-            series: this.series,
-        });
-    }
-}
-BlockAreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockAreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BlockAreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BlockAreaSeriesComponent, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngIf=\"data.x && data.y\">\n\n\n    <ng-container *ngFor=\"let point of data.points\">\n      <svg:g (mouseenter)=\"mouseenter(point)\"\n             (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          *ngIf=\"!!config.inverted\"\n          [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? '' : point.color ?? series.style?.stroke ?? series.color\"\n          [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n          [attr.stroke-width]=\"series.style?.strokeWidth\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\">\n        </svg:rect>\n        <svg:rect\n          *ngIf=\"!config.inverted\"\n          [attr.x]=\"data.x(point.x)\"\n          [attr.y]=\"data.y(0)\"\n          [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n          [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n          [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n          [attr.stroke-width]=\"series.style?.strokeWidth\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\">\n        </svg:rect>\n        <svg:text *ngIf=\"point.text\"\n                  x=\"50%\"\n                  [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                  alignment-baseline=\"middle\"\n                  text-anchor=\"middle\">{{ point.text }}\n        </svg:text>\n\n        <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n        <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n      </svg:g>\n    </ng-container>\n\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngIf=\"data.x && data.y\">\n\n\n    <ng-container *ngFor=\"let point of data.points\">\n      <svg:g (mouseenter)=\"mouseenter(point)\"\n             (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          *ngIf=\"!!config.inverted\"\n          [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? '' : point.color ?? series.style?.stroke ?? series.color\"\n          [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n          [attr.stroke-width]=\"series.style?.strokeWidth\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\">\n        </svg:rect>\n        <svg:rect\n          *ngIf=\"!config.inverted\"\n          [attr.x]=\"data.x(point.x)\"\n          [attr.y]=\"data.y(0)\"\n          [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n          [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n          [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n          [attr.stroke-width]=\"series.style?.strokeWidth\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\">\n        </svg:rect>\n        <svg:text *ngIf=\"point.text\"\n                  x=\"50%\"\n                  [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                  alignment-baseline=\"middle\"\n                  text-anchor=\"middle\">{{ point.text }}\n        </svg:text>\n\n        <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n        <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n      </svg:g>\n    </ng-container>\n\n  </ng-container>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
-
-class AreaSeriesComponent extends LinearSeriesBase {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.fillDirection = FillDirection;
-        this.fillType = FillType;
-        this.id = (Date.now() + Math.random()).toString(36);
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.areaPath = this.scaleService.scales.pipe(map((data) => {
-            var _a, _b;
-            const { x, y } = data;
-            this.x = (_a = x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale;
-            this.y = (_b = y.get(this.series.yAxisIndex)) === null || _b === void 0 ? void 0 : _b.scale;
-            if (!this.x || !this.y) {
-                return '';
-            }
-            const area = d3
-                .area()
-                .defined((point) => point.x !== null &&
-                point.y !== null &&
-                !isNaN(point.x) &&
-                !isNaN(point.y));
-            area
-                .x1((_) => _.x1 !== null && _.x1 !== undefined ? this.x(_.x1) : this.x(0))
-                .x0((_) => this.x(_.x))
-                .y((_) => this.y(_.y));
-            const filter = this.defaultClipPointsMapping.get(this.series.clipPointsDirection);
-            let filteredData = this.series.data;
-            if (this.series.clipPointsDirection === ClipPointsDirection.x) {
-                let [min, max] = this.x.domain();
-                min = min instanceof Date ? min.getTime() : min;
-                max = max instanceof Date ? max.getTime() : max;
-                filteredData = filteredData === null || filteredData === void 0 ? void 0 : filteredData.filter(filter(min, max));
-            }
-            if (this.series.clipPointsDirection === ClipPointsDirection.y) {
-                let [min, max] = this.y.domain();
-                min = min instanceof Date ? min.getTime() : min;
-                max = max instanceof Date ? max.getTime() : max;
-                filteredData = filteredData === null || filteredData === void 0 ? void 0 : filteredData.filter(filter(min, max));
-            }
-            return area(filteredData);
-        }));
-    }
-}
-AreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AreaSeriesComponent, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  [attr.d]=\"areaPath | async\"\n  [attr.stroke-width]=\"0\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style?.fill ?? series.color\">\n</svg:path>\n<svg:path\n  class=\"area\"\n  fill=\"none\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y !=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of draggablePoints\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AreaSeriesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  [attr.d]=\"areaPath | async\"\n  [attr.stroke-width]=\"0\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style?.fill ?? series.color\">\n</svg:path>\n<svg:path\n  class=\"area\"\n  fill=\"none\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y !=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of draggablePoints\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n" }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
-
-const defaultSeriesTypeMapping = new Map()
-    .set(SeriesType.line, LineSeriesComponent)
-    .set(SeriesType.bar, BarSeriesComponent)
-    .set(SeriesType.scatter, ScatterSeriesComponent)
-    .set(SeriesType.block, BlockSeriesComponent)
-    .set(SeriesType.area, AreaSeriesComponent)
-    .set(SeriesType.blockArea, BlockAreaSeriesComponent);
-
-class SeriesHostComponent {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-        this._init = false;
-    }
-    ngOnInit() {
-        if (!SeriesBaseComponent.isPrototypeOf(this.series.component)) {
-            this.series.component =
-                defaultSeriesTypeMapping.get(this.series.type) || LineSeriesComponent;
-        }
-        this._componentRef = this.viewContainerRef.createComponent(this.series.component);
-        this._componentRef.instance.config = this.config;
-        this._componentRef.instance.series = this.series;
-        this._init = true;
-    }
-    ngOnDestroy() {
-        this._componentRef.destroy();
-    }
-    ngOnChanges(changes) {
-        if (this._init && (changes.hasOwnProperty('series') || changes.hasOwnProperty('config'))) {
-            this._componentRef.instance.config = this.config;
-            this._componentRef.instance.series = this.series;
-            this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
-        }
-    }
-}
-SeriesHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-SeriesHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: { config: "config", series: "series" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesHostComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[teta-series-host]',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { config: [{
-                type: Input
-            }], series: [{
-                type: Input
-            }] } });
-
-class GridlinesComponent {
-    constructor(svc, chartService) {
-        this.svc = svc;
-        this.chartService = chartService;
-        this.config = this.chartService.config;
-        this.tickYValues = this.svc.scales.pipe(withLatestFrom(this.config), map((_) => {
-            var _a, _b, _c, _d, _e;
-            const [scales, config] = _;
-            const ratio = this.size.height / 40;
-            return ((_b = (_a = config.gridLines) === null || _a === void 0 ? void 0 : _a.y) === null || _b === void 0 ? void 0 : _b.ticksCount) != null ? generateTicks(scales.y.get(0).scale.domain(), (_d = (_c = config.gridLines) === null || _c === void 0 ? void 0 : _c.y) === null || _d === void 0 ? void 0 : _d.ticksCount) : (_e = scales.y.get(0)) === null || _e === void 0 ? void 0 : _e.scale.ticks(ratio);
-        }));
-        this.tickXValues = this.svc.scales.pipe(withLatestFrom(this.config), map((_) => {
-            var _a, _b, _c, _d, _e;
-            const [scales, config] = _;
-            const ratio = this.size.width / 40;
-            return ((_b = (_a = config.gridLines) === null || _a === void 0 ? void 0 : _a.x) === null || _b === void 0 ? void 0 : _b.ticksCount) != null ? generateTicks(scales.x.get(0).originDomain, (_d = (_c = config.gridLines) === null || _c === void 0 ? void 0 : _c.x) === null || _d === void 0 ? void 0 : _d.ticksCount) : (_e = scales.x.get(0)) === null || _e === void 0 ? void 0 : _e.scale.ticks(ratio);
-        }));
-        this.y = this.svc.scales.pipe(map((_) => { var _a; return (_a = _.y.get(0)) === null || _a === void 0 ? void 0 : _a.scale; }));
-        this.x = this.svc.scales.pipe(map((_) => { var _a; return (_a = _.x.get(0)) === null || _a === void 0 ? void 0 : _a.scale; }));
-    }
-    ngAfterViewInit() {
-    }
-}
-GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"{\n  xValues: tickXValues | async,\n  yValues: tickYValues | async,\n  x: x | async,\n  y: y | async,\n  config: config | async\n} as data\">\n  <ng-container *ngIf=\"data.y && data.config.gridLines?.showY !== false\">\n    <ng-container *ngFor=\"let tick of data.yValues\">\n      <svg:line [attr.x1]=\"0\"\n                [attr.y1]=\"data.y(tick) || 1\"\n                [attr.x2]=\"size?.width\"\n                [attr.y2]=\"data.y(tick) || 1\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"data.x && data.config.gridLines?.showX !== false\">\n    <ng-container *ngFor=\"let tick of data.xValues\">\n      <svg:line [attr.x1]=\"data.x(tick) || 1\"\n                [attr.y1]=\"0\"\n                [attr.x2]=\"data.x(tick) || 1\"\n                [attr.y2]=\"size?.height\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GridlinesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  xValues: tickXValues | async,\n  yValues: tickYValues | async,\n  x: x | async,\n  y: y | async,\n  config: config | async\n} as data\">\n  <ng-container *ngIf=\"data.y && data.config.gridLines?.showY !== false\">\n    <ng-container *ngFor=\"let tick of data.yValues\">\n      <svg:line [attr.x1]=\"0\"\n                [attr.y1]=\"data.y(tick) || 1\"\n                [attr.x2]=\"size?.width\"\n                [attr.y2]=\"data.y(tick) || 1\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"data.x && data.config.gridLines?.showX !== false\">\n    <ng-container *ngFor=\"let tick of data.xValues\">\n      <svg:line [attr.x1]=\"data.x(tick) || 1\"\n                [attr.y1]=\"0\"\n                [attr.x2]=\"data.x(tick) || 1\"\n                [attr.y2]=\"size?.height\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"] }]
-        }], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }]; }, propDecorators: { size: [{
-                type: Input
-            }] } });
-
-class XAxisComponent {
-    constructor(scaleService, _svc) {
-        this.scaleService = scaleService;
-        this._svc = _svc;
-        this.update$ = new BehaviorSubject(null);
-        this._alive = true;
-        this.x = this.scaleService.scales.pipe(map((_) => {
-            var _a;
-            return (_a = _.x.get(this.axis.index)) === null || _a === void 0 ? void 0 : _a.scale;
-        }));
-        this.ticks = combineLatest([this.x, this.update$]).pipe(withLatestFrom(this._svc.size), map((_) => {
-            const [[x], size] = _;
-            const tickSize = x.ticks().map((_) => getTextWidth(this.axis.options.tickFormat ? this.axis.options.tickFormat(_) : this.axis.defaultFormatter()(_), 0.45, 11));
-            return x.ticks(size.width / parseInt(d3.max(tickSize), 10) / 5);
-        }));
-    }
-    getLabelTransform() {
-        return `translate(${this.size.width / 2}, ${this.axis.options.opposite ? -32 : 32})`;
-    }
-    ngOnInit() {
-    }
-    ngOnDestroy() {
-        this._alive = false;
-    }
-    ngOnChanges(changes) {
-        if (changes.hasOwnProperty('axis')) {
-            this.update$.next();
-        }
-    }
-}
-XAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XAxisComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-XAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XAxisComponent, selector: "[teta-x-axis]", inputs: { axis: "axis", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{x: x | async, ticks: ticks | async} as data\">\n  <svg:g text-anchor=\"middle\" *ngFor=\"let tick of data.ticks\" [attr.transform]=\"'translate('+ data.x(tick) +', 0)'\">\n    <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\" [attr.y]=\"axis.options.opposite ? 0 : 9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\"  text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XAxisComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[teta-x-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{x: x | async, ticks: ticks | async} as data\">\n  <svg:g text-anchor=\"middle\" *ngFor=\"let tick of data.ticks\" [attr.transform]=\"'translate('+ data.x(tick) +', 0)'\">\n    <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\" [attr.y]=\"axis.options.opposite ? 0 : 9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\"  text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
-        }], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }]; }, propDecorators: { axis: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
-
-class YAxisComponent {
-    constructor(scaleService) {
-        this.scaleService = scaleService;
-        this._alive = true;
-        this.y = this.scaleService.scales.pipe(map((_) => {
-            var _a;
-            return (_a = _.y.get(this.axis.index)) === null || _a === void 0 ? void 0 : _a.scale;
-        }));
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this._alive = false;
-    }
-    ngAfterViewInit() {
-    }
-    getLabelTransform() {
-        return `translate(${this.axis.options.opposite
-            ? this.axis.selfSize
-            : -this.axis.selfSize}, ${this.size.height / 2}) rotate(-90)`;
-    }
-}
-YAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: YAxisComponent, deps: [{ token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
-YAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: YAxisComponent, selector: "[teta-y-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"y | async as scale\">\n  <svg:g [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\" *ngFor=\"let tick of scale.ticks()\" [attr.transform]=\"'translate(0, '+ scale(tick) +')'\">\n    <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\" text-anchor=\"middle\" [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: YAxisComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[teta-y-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"y | async as scale\">\n  <svg:g [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\" *ngFor=\"let tick of scale.ticks()\" [attr.transform]=\"'translate(0, '+ scale(tick) +')'\">\n    <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\" text-anchor=\"middle\" [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"] }]
-        }], ctorParameters: function () { return [{ type: ScaleService }]; }, propDecorators: { axis: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
-
-class PlotlineComponent {
-    constructor(cdr, zoomService, scaleService, chartService, element) {
-        this.cdr = cdr;
-        this.zoomService = zoomService;
-        this.scaleService = scaleService;
-        this.chartService = chartService;
-        this.element = element;
-        this.orientation = AxisOrientation;
-    }
-    ngOnInit() {
-        this._domain = this.scale.domain();
-        const plotlineElement = d3
-            .select(this.element.nativeElement)
-            .select('.plotline');
-        const grabElement = d3
-            .select(this.element.nativeElement)
-            .selectAll('.grabber');
-        this.dragElements = d3
-            .drag()
-            .subject(() => {
-            if (this.axis.orientation === AxisOrientation.y) {
-                return { y: plotlineElement.attr('y1') };
-            }
-            if (this.axis.orientation === AxisOrientation.x) {
-                return { x: plotlineElement.attr('x1') };
-            }
-        });
-        const drag = this.dragElements
-            .on('start drag end', (event, d) => {
-            d.value = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
-            if (d.max !== null && d.max !== undefined && d.value >= d.max) {
-                d.value = d.max;
-            }
-            if (d.min !== null && d.min !== undefined && d.value <= d.min) {
-                d.value = d.min;
-            }
-            this.emit({
-                event,
-                target: d,
-            });
-            this.cdr.detectChanges();
-        });
-        plotlineElement.datum(this.plotLine);
-        grabElement.datum(this.plotLine);
-        if (this.plotLine.draggable) {
-            grabElement.call(drag);
-        }
-    }
-    ngOnDestroy() {
-        this.dragElements.on('start drag end', null);
-    }
-    emit(event) {
-        this.chartService.emitPlotline(event);
-    }
-    get value() {
-        return this.scale(this.plotLine.value);
-    }
-    get height() {
-        return this.size.height;
-    }
-    get width() {
-        return this.size.width;
-    }
-}
-PlotlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: ScaleService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PlotlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: { plotLine: "plotLine", size: "size", axis: "axis", scale: "scale" }, ngImport: i0, template: "<svg:line class=\"plotline\"\n          [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-title-2 fill-text-70\"\n  [attr.x]=\"value\"\n  dy=\"-2em\"\n  [attr.transform]=\"'rotate(-90, '+ value +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-title-2 fill-text-70\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"value\"\n  [attr.y]=\"width / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:line class=\"grabber\"\n\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotlineComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[teta-plot-line]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:line class=\"plotline\"\n          [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-title-2 fill-text-70\"\n  [attr.x]=\"value\"\n  dy=\"-2em\"\n  [attr.transform]=\"'rotate(-90, '+ value +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-title-2 fill-text-70\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"value\"\n  [attr.y]=\"width / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:line class=\"grabber\"\n\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: ScaleService }, { type: ChartService }, { type: i0.ElementRef }]; }, propDecorators: { plotLine: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], axis: [{
-                type: Input
-            }], scale: [{
-                type: Input
-            }] } });
-
-class PlotBandComponent {
-    constructor(scaleService, zoomService, chartService, cdr, element) {
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.chartService = chartService;
-        this.cdr = cdr;
-        this.element = element;
-        this.orientation = AxisOrientation;
-        this.getTextPosition = () => {
-            let [min, max] = this.scale.domain();
-            min = min instanceof Date ? min.getTime() : min;
-            max = max instanceof Date ? max.getTime() : max;
-            const from = this.plotBand.from instanceof Date ? this.plotBand.from.getTime() : this.plotBand.from;
-            const to = this.plotBand.to instanceof Date ? this.plotBand.to.getTime() : this.plotBand.to;
-            const position = ((from <= min ? min : from) + (to >= max ? max : to)) / 2;
-            return this.scale(position);
-        };
-    }
-    click(event) {
-        this.emit({
-            target: this.plotBand,
-            event,
-        });
-    }
-    contextMenu(event) {
-        this.emit({
-            target: this.plotBand,
-            event,
-        });
-    }
-    emit(event) {
-        this.chartService.emitPlotband(event);
-    }
-    ngAfterViewInit() {
-        const plotbandElement = d3
-            .select(this.element.nativeElement)
-            .select('.plotband');
-        const grabElements = d3
-            .select(this.element.nativeElement)
-            .selectAll('.grabber');
-        this.dragElements = d3
-            .drag()
-            .subject(() => {
-            if (this.axis.orientation === AxisOrientation.x) {
-                return { x: plotbandElement.attr('x') };
-            }
-            if (this.axis.orientation === AxisOrientation.y) {
-                return { y: plotbandElement.attr('y') };
-            }
-        });
-        const drag = this.dragElements
-            .on('start drag end', (event, d) => {
-            let bandSize = parseFloat(plotbandElement.attr(this.axis.orientation === AxisOrientation.x ? 'width' : 'height'));
-            d.from = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
-            d.to = this.scale.invert(event[AxisOrientation[this.axis.orientation]] + bandSize);
-            this.emit({
-                event,
-                target: d,
-            });
-            this.cdr.detectChanges();
-        });
-        let grabberKey;
-        this.resizeElements = d3
-            .drag();
-        const resize = this.resizeElements
-            .on('start drag end', (event, d) => {
-            var _a, _b, _c, _d;
-            if ((event === null || event === void 0 ? void 0 : event.type) === 'start') {
-                const { grabber } = (_b = (_a = event === null || event === void 0 ? void 0 : event.sourceEvent) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.dataset;
-                grabberKey = grabber;
-            }
-            const min = Math.min(...this.scale.domain());
-            const max = Math.max(...this.scale.domain());
-            const minValue = (_c = d.min) !== null && _c !== void 0 ? _c : min;
-            const maxValue = (_d = d.max) !== null && _d !== void 0 ? _d : max;
-            d[grabberKey] = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
-            if (grabberKey === 'from') {
-                const borderMin = d.from <= minValue;
-                if (d.from >= d.to) {
-                    d.from = d.to;
-                }
-                if (borderMin) {
-                    d.from = minValue;
-                }
-            }
-            if (grabberKey === 'to') {
-                const borderMax = d.to >= maxValue;
-                if (borderMax) {
-                    d.to = maxValue;
-                }
-                if (d.to <= d.from) {
-                    d.to = d.from;
-                }
-            }
-            this.emit({
-                event,
-                target: d,
-            });
-            this.cdr.detectChanges();
-        });
-        plotbandElement.datum(this.plotBand);
-        grabElements.datum(this.plotBand);
-        if (this.plotBand.draggable) {
-            plotbandElement.call(drag);
-        }
-        if (this.plotBand.resizable) {
-            grabElements.call(resize);
-        }
-    }
-    ngOnDestroy() {
-        this.dragElements.on('start drag end', null);
-        this.resizeElements.on('start drag end', null);
-    }
-    get height() {
-        return this.size.height;
-    }
-    get width() {
-        return this.size.width;
-    }
-    get from() {
-        return this.scale(this.plotBand.from);
-    }
-    get to() {
-        return this.scale(this.plotBand.to);
-    }
-    get bandSize() {
-        return Math.abs(this.scale(this.plotBand.to) - this.scale(this.plotBand.from));
-    }
-    getFill(d) {
-        var _a, _b, _c, _d;
-        if ((_b = (_a = d.style) === null || _a === void 0 ? void 0 : _a.plotBand) === null || _b === void 0 ? void 0 : _b.patternImage) {
-            return `url(#${(_c = d.style.plotBand) === null || _c === void 0 ? void 0 : _c.patternImage})`;
-        }
-        return (_d = d.style.plotBand) === null || _d === void 0 ? void 0 : _d.fill;
-    }
-}
-PlotBandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, deps: [{ token: ScaleService }, { token: ZoomService }, { token: ChartService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PlotBandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n  class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.transform]=\"'rotate(-90, '+ getTextPosition() +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[teta-plot-band]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n  class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.transform]=\"'rotate(-90, '+ getTextPosition() +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: ScaleService }, { type: ZoomService }, { type: ChartService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { plotBand: [{
-                type: Input
-            }], axis: [{
-                type: Input
-            }], scale: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], click: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], contextMenu: [{
-                type: HostListener,
-                args: ['contextmenu', ['$event']]
-            }] } });
-
-class TooltipComponent {
-    constructor(svc, cdr, zoomService, sanitizer, _zone, _elementRef) {
-        this.svc = svc;
-        this.cdr = cdr;
-        this.zoomService = zoomService;
-        this.sanitizer = sanitizer;
-        this._zone = _zone;
-        this._elementRef = _elementRef;
-        this.tooltips = this.svc.tooltips.pipe(map((_) => [..._.values()]));
-    }
-    ngOnInit() {
-        var _a, _b;
-        this.display = this.svc.pointerMove.pipe(map((event) => {
-            return event.type === 'mousemove' ? 1 : 0;
-        }), tap(() => {
-            setTimeout(() => {
-                this.cdr.detectChanges();
-            });
-        }));
-        this.position = this.svc.pointerMove.pipe(filter((event) => !!event), map((_) => {
-            return this.getPosition(_);
-        }), tap(() => this.cdr.detectChanges()));
-        const transformHtml = (html) => {
-            return this.sanitizer.bypassSecurityTrustHtml(html);
-        };
-        const defaultFormatter = (tooltips) => {
-            let html = '';
-            const format = d3.timeFormat('%d.%m.%Y');
-            tooltips.forEach((_) => {
-                var _a, _b, _c;
-                const indicatorStyle = `display:block; width: 10px; height: 2px; background-color: ${(_a = _ === null || _ === void 0 ? void 0 : _.series) === null || _a === void 0 ? void 0 : _a.color}`;
-                html += `<div class="display-flex align-center"><span class="margin-right-1" style="${indicatorStyle}"></span>
-          <span class="font-title-3">${_.series.name}
-            <span class="font-body-3">
-              x: ${_.point.x instanceof Date ? format(_.point.x) : (_b = _.point.x) === null || _b === void 0 ? void 0 : _b.toFixed(2)}
-              y: ${_.point.y instanceof Date ? format(_.point.y) : (_c = _.point.y) === null || _c === void 0 ? void 0 : _c.toFixed(2)}
-            </span>
-          </span></div>`;
-            });
-            return transformHtml(html);
-        };
-        const formatter = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.tooltip) === null || _b === void 0 ? void 0 : _b.format;
-        this.displayTooltips = this.svc.tooltips.pipe(map((tooltips) => {
-            const tooltipList = [...tooltips.values()];
-            if ((tooltipList === null || tooltipList === void 0 ? void 0 : tooltipList.length) < 1) {
-                return '';
-            }
-            const formatted = formatter
-                ? transformHtml(formatter(tooltipList))
-                : defaultFormatter(tooltipList);
-            return formatted;
-        }));
-    }
-    getPosition(event) {
-        var _a, _b;
-        if (!this.tooltip) {
-            return null;
-        }
-        return PositionUtil.getPosition({
-            top: event.pageY,
-            bottom: event.pageY,
-            left: event.pageX,
-            right: event.pageX,
-        }, (_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect(), Align.auto, VerticalAlign.top, 12);
-    }
-    format(input) {
-        if (input instanceof Date) {
-            const format = d3.timeFormat('%d.%m.%Y');
-            return format(input);
-        }
-        const format = d3.format(',.5~r');
-        return format(input);
-    }
-}
-TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container *tetaLet=\"position | async as p\">\n  <ng-container *ngIf=\"tooltips | async as t\">\n    <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2\"\n         #tooltip\n         [style.position]=\"'fixed'\"\n         *ngIf=\"t.length > 0\"\n         [style.opacity]=\"display | async\"\n         [hidden]=\"!p\"\n         style=\"pointer-events: none; min-width: 200px;\"\n         [style.left.px]=\"p?.left\"\n         [style.top.px]=\"p?.top\"\n         [style.bottom.px]=\"p?.bottom\"\n         [style.right.px]=\"p?.right\"\n    >\n      <ng-container *ngIf=\"config.tooltip?.template\">\n        <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"config.tooltip?.format; else default\">\n        <div [innerHTML]=\"displayTooltips | async\"></div>\n      </ng-container>\n\n      <ng-template #default>\n        <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n          <ng-container *ngFor=\"let tooltip of t\">\n            <div class=\"display-flex align-center\">\n            <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n                  [style.background-color]=\"tooltip.series?.color\"></span>\n              <span class=\"font-title-3\">\n            {{ tooltip.series?.name }}\n                <span class=\"font-body-3\">\n              x: {{ format(tooltip.point?.x) }}\n                  y: {{ format(tooltip.point?.y) }}\n            </span>\n          </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *tetaLet=\"position | async as p\">\n  <ng-container *ngIf=\"tooltips | async as t\">\n    <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2\"\n         #tooltip\n         [style.position]=\"'fixed'\"\n         *ngIf=\"t.length > 0\"\n         [style.opacity]=\"display | async\"\n         [hidden]=\"!p\"\n         style=\"pointer-events: none; min-width: 200px;\"\n         [style.left.px]=\"p?.left\"\n         [style.top.px]=\"p?.top\"\n         [style.bottom.px]=\"p?.bottom\"\n         [style.right.px]=\"p?.right\"\n    >\n      <ng-container *ngIf=\"config.tooltip?.template\">\n        <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"config.tooltip?.format; else default\">\n        <div [innerHTML]=\"displayTooltips | async\"></div>\n      </ng-container>\n\n      <ng-template #default>\n        <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n          <ng-container *ngFor=\"let tooltip of t\">\n            <div class=\"display-flex align-center\">\n            <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n                  [style.background-color]=\"tooltip.series?.color\"></span>\n              <span class=\"font-title-3\">\n            {{ tooltip.series?.name }}\n                <span class=\"font-body-3\">\n              x: {{ format(tooltip.point?.x) }}\n                  y: {{ format(tooltip.point?.y) }}\n            </span>\n          </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { size: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], tooltip: [{
-                type: ViewChild,
-                args: ['tooltip', { static: false, read: ElementRef }]
-            }] } });
-
-class ZoomableDirective {
-    constructor(elementRef, zoomService, chartService, zone) {
-        this.elementRef = elementRef;
-        this.zoomService = zoomService;
-        this.chartService = chartService;
-        this.zone = zone;
-        this.zoomable = false;
-        this.crosshair = false;
-        this.alive = true;
-        this.currentTransform = zoomIdentity;
-        this.zoomed = (event) => {
-            if (event.sourceEvent && (this.elementRef.nativeElement === event.sourceEvent.target || this.elementRef.nativeElement.contains(event.sourceEvent.target))) {
-                if (Object.keys(event.sourceEvent).length !== 0) {
-                    const origin = this.axis.scale.copy().domain(this.axis.originDomain);
-                    if (this.axis.options.scaleType.type === ScaleType.band) {
-                        return;
-                    }
-                    const domain = this.axis.orientation === AxisOrientation.y
-                        ? event.transform.rescaleY(origin).domain()
-                        : event.transform.rescaleX(origin).domain();
-                    if (domain[0] === null || domain[0] === undefined
-                        || domain[1] === null || domain[1] === undefined
-                        || Math.abs(domain[0] - domain[1]) < 0.000001) {
-                        return;
-                    }
-                    const message = new ZoomMessage({
-                        eventType: event.type,
-                        axis: {
-                            index: this.axis.index,
-                            orientation: this.axis.orientation,
-                        },
-                        element: this.elementRef,
-                        domain,
-                        chartId: this.config.id
-                    });
-                    this.zoomService.fireZoom(message);
-                    this.zoomService.broadcastZoom(message);
-                }
-                this.currentTransform = event.transform;
-            }
-        };
-    }
-    mouseenter() {
-        var _a, _b, _c, _d;
-        (_a = this.zoom) === null || _a === void 0 ? void 0 : _a.on('start zoom end', this.zoomed);
-        (_b = this._element) === null || _b === void 0 ? void 0 : _b.call(this.zoom).on('dblclick.zoom', null);
-        // Run wheel event listener
-        if (((_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.zoom) === null || _d === void 0 ? void 0 : _d.zoomBehavior) === ZoomBehaviorType.wheel) {
-            this.runWheelTranslate();
-        }
-    }
-    mouseleave() {
-        var _a, _b;
-        (_a = this.zoom) === null || _a === void 0 ? void 0 : _a.on('start zoom end', null);
-        (_b = this._element) === null || _b === void 0 ? void 0 : _b.on('wheel', null);
-    }
-    ngOnInit() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if (((_b = (_a = this.axis) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.zoom) || ((_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.zoom) === null || _d === void 0 ? void 0 : _d.enable)) {
-            this.zoomable = ((_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.zoom) === null || _f === void 0 ? void 0 : _f.zoomBehavior) === ZoomBehaviorType.move && !((_h = (_g = this.config) === null || _g === void 0 ? void 0 : _g.tooltip) === null || _h === void 0 ? void 0 : _h.showCrosshair);
-            this.crosshair = (_k = (_j = this.config) === null || _j === void 0 ? void 0 : _j.tooltip) === null || _k === void 0 ? void 0 : _k.showCrosshair;
-        }
-    }
-    ngAfterViewInit() {
-        this.initZoomListeners();
-        this.initZoomSync();
-    }
-    ngOnDestroy() {
-        var _a, _b;
-        (_a = this.zoom) === null || _a === void 0 ? void 0 : _a.on('start zoom end', null);
-        (_b = this._element) === null || _b === void 0 ? void 0 : _b.on('wheel', null);
-        this.alive = false;
-    }
-    initZoomSync() {
-        this.zoomService.zoomed.pipe(takeWhile(() => this.alive)).subscribe((zoomed) => {
-            var _a, _b;
-            if (this._element && this.elementRef !== (zoomed === null || zoomed === void 0 ? void 0 : zoomed.element)
-                && ((_a = zoomed === null || zoomed === void 0 ? void 0 : zoomed.axis) === null || _a === void 0 ? void 0 : _a.index) === this.axis.index
-                && ((_b = zoomed === null || zoomed === void 0 ? void 0 : zoomed.axis) === null || _b === void 0 ? void 0 : _b.orientation) === this.axis.orientation) {
-                const scale = this.axis.scale.copy().domain(this.axis.originDomain);
-                let transform;
-                if (zoomed.domain === null) {
-                    transform = zoomIdentity;
-                }
-                else {
-                    transform =
-                        this.zoomService.getD3Transform(zoomed.domain, this.axis.originDomain, scale, this.axis.orientation, this.axis.options.inverted);
-                }
-                this._element.call(this.zoom.transform, transform);
-                this.currentTransform = transform;
-            }
-        });
-    }
-    initZoomListeners() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
-        const enable = (((_b = (_a = this.axis) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.zoom) && ((_c = this.axis) === null || _c === void 0 ? void 0 : _c.options.visible) !== false) ||
-            ((_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.zoom) === null || _e === void 0 ? void 0 : _e.enable);
-        if (!enable) {
-            return;
-        }
-        this._element = d3.select(this.elementRef.nativeElement);
-        this.zoom = d3.zoom().extent([
-            [0, 0],
-            [this.size.width, this.size.height],
-        ]);
-        const min = ((_g = (_f = this.config) === null || _f === void 0 ? void 0 : _f.zoom) === null || _g === void 0 ? void 0 : _g.minTranslate) != null
-            ? this.axis.scale((_j = (_h = this.config) === null || _h === void 0 ? void 0 : _h.zoom) === null || _j === void 0 ? void 0 : _j.minTranslate)
-            : -Infinity;
-        const max = (((_l = (_k = this.config) === null || _k === void 0 ? void 0 : _k.zoom) === null || _l === void 0 ? void 0 : _l.maxTranslate) != null
-            ? this.axis.scale((_o = (_m = this.config) === null || _m === void 0 ? void 0 : _m.zoom) === null || _o === void 0 ? void 0 : _o.maxTranslate)
-            : Infinity);
-        if (this.axis.orientation === AxisOrientation.x && this.config.zoom.type === ZoomType.x) {
-            this.zoom.translateExtent([
-                [Math.min(min, max), -Infinity],
-                [Math.max(min, max), Infinity],
-            ]);
-        }
-        if (this.axis.orientation === AxisOrientation.y && this.config.zoom.type === ZoomType.y) {
-            this.zoom.translateExtent([
-                [-Infinity, Math.min(min, max)],
-                [Infinity, Math.max(min, max)],
-            ]);
-        }
-        if ((_p = this.config.zoom) === null || _p === void 0 ? void 0 : _p.wheelDelta) {
-            this.zoom.wheelDelta((_q = this.config.zoom) === null || _q === void 0 ? void 0 : _q.wheelDelta);
-        }
-        if ((_s = (_r = this.config) === null || _r === void 0 ? void 0 : _r.zoom) === null || _s === void 0 ? void 0 : _s.wheelFilter) {
-            this.zoom.filter((_u = (_t = this.config) === null || _t === void 0 ? void 0 : _t.zoom) === null || _u === void 0 ? void 0 : _u.wheelFilter);
-        }
-        if (this.axis.options.scaleType.type !== ScaleType.band) {
-            const extremes = this.axis.extremes;
-            const maxZoom = ((_v = this.config.zoom) === null || _v === void 0 ? void 0 : _v.max)
-                ? (extremes[1] - extremes[0]) /
-                    ((_w = this.config.zoom) === null || _w === void 0 ? void 0 : _w.max)
-                : ((_x = this.config.zoom) === null || _x === void 0 ? void 0 : _x.limitZoomByData)
-                    ? 1
-                    : 0;
-            const minZoom = ((_y = this.config.zoom) === null || _y === void 0 ? void 0 : _y.min)
-                ? (extremes[1] - extremes[0]) /
-                    ((_z = this.config.zoom) === null || _z === void 0 ? void 0 : _z.min)
-                : Infinity;
-            this.zoom.scaleExtent([maxZoom, minZoom]);
-        }
-        if (((_1 = (_0 = this.config) === null || _0 === void 0 ? void 0 : _0.zoom) === null || _1 === void 0 ? void 0 : _1.zoomBehavior) === ZoomBehaviorType.wheel) {
-            this.runWheelTranslate();
-        }
-    }
-    runWheelTranslate() {
-        var _a;
-        let type = 'start';
-        let wheeling;
-        // For touch events
-        this.zoom.on('start zoom end', this.zoomed);
-        (_a = this._element) === null || _a === void 0 ? void 0 : _a.call(this.zoom);
-        this.zoom
-            .filter((event) => {
-            return (event.ctrlKey && event.type === 'wheel') ||
-                Boolean(window.TouchEvent && event.type !== 'wheel');
-        })
-            .wheelDelta((event) => {
-            var _a;
-            const delta = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.zoom.type) === ZoomType.x
-                ? -event.deltaX
-                : -event.deltaY;
-            return delta * 0.002;
-        });
-        const emit = (type, event) => {
-            var _a, _b, _c, _d;
-            const origin = this.axis.scale.copy().domain(this.axis.originDomain);
-            let transform = zoomIdentity;
-            const delta = type === 'end'
-                ? 0
-                : this.axis.orientation === AxisOrientation.y
-                    ? event.deltaY
-                    : event.deltaX;
-            if (this.axis.orientation === AxisOrientation.y) {
-                transform = transform.translate(0, this.currentTransform.y - delta / 2);
-            }
-            if (this.axis.orientation === AxisOrientation.x) {
-                transform = transform.translate(this.currentTransform.x - delta / 2, 0);
-            }
-            transform = transform.scale(this.currentTransform.k);
-            let domain = this.axis.orientation === AxisOrientation.y
-                ? transform.rescaleY(origin).domain()
-                : transform.rescaleX(origin).domain();
-            const extent = ((_a = this.axis.options) === null || _a === void 0 ? void 0 : _a.inverted) ? domain : [...domain].reverse();
-            if (extent[0] <= ((_b = this.config.zoom) === null || _b === void 0 ? void 0 : _b.minTranslate)) {
-                return;
-            }
-            if (extent[1] >= ((_c = this.config.zoom) === null || _c === void 0 ? void 0 : _c.maxTranslate)) {
-                return;
-            }
-            const message = new ZoomMessage({
-                eventType: type,
-                element: this.elementRef,
-                axis: {
-                    index: this.axis.index,
-                    orientation: this.axis.orientation
-                },
-                domain,
-                chartId: this.config.id,
-            });
-            (_d = this._element) === null || _d === void 0 ? void 0 : _d.call(this.zoom.transform, transform);
-            this.zoomService.fireZoom(message);
-            this.zoomService.broadcastZoom(message);
-            this.currentTransform = transform;
-        };
-        this._element.on('wheel', (event) => {
-            event.preventDefault();
-            if (event.ctrlKey) {
-                return;
-            }
-            this.zone.runOutsideAngular(() => {
-                clearTimeout(wheeling);
-                emit(type, event);
-                type = 'zoom';
-                wheeling = setTimeout(() => {
-                    emit('end', event);
-                    type = 'start';
-                }, 50);
-            });
-        });
-    }
-}
-ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ChartService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaZoomable]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: ChartService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
-                type: Input
-            }], axis: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], zoomable: [{
-                type: HostBinding,
-                args: ['class.zoomable']
-            }], crosshair: [{
-                type: HostBinding,
-                args: ['class.crosshair']
-            }], mouseenter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], mouseleave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-
-class BrushableDirective {
-    constructor(brushService, chartService, element, zone) {
-        this.brushService = brushService;
-        this.chartService = chartService;
-        this.element = element;
-        this.zone = zone;
-        this.brushMap = new Map()
-            .set(BrushType.x, d3.brushX())
-            .set(BrushType.y, d3.brushY());
-        this._alive = true;
-        this._container = d3.select(this.element.nativeElement);
-    }
-    ngOnInit() {
-        this.brushService.brushDomain.pipe(takeWhile(() => this._alive), filter((brush) => brush.chartId !== this.config.id)).subscribe((brush) => {
-            this._container.call(this.brush.move, [
-                Math.floor(brush.selection[0]),
-                Math.floor(brush.selection[1]),
-            ].map(this.axis.scale));
-        });
-    }
-    ngOnDestroy() {
-        this._alive = false;
-    }
-    ngAfterViewInit() {
-        var _a, _b, _c, _d, _e, _f;
-        if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.brush) === null || _b === void 0 ? void 0 : _b.enable) {
-            const brushMessage = new BrushMessage({
-                chartId: this.config.id,
-                selection: [(_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.brush) === null || _d === void 0 ? void 0 : _d.from, (_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.brush) === null || _f === void 0 ? void 0 : _f.to],
-                mode: 'init'
-            });
-            this.brushService.setBrush(brushMessage);
-        }
-    }
-    ngOnChanges(changes) {
-        var _a, _b;
-        if (changes.hasOwnProperty('config')) {
-            this.clearPreviousSelection();
-        }
-        if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.brush) === null || _b === void 0 ? void 0 : _b.enable) {
-            this.applyBrush(this.config, this.axis.scale);
-        }
-    }
-    applyBrush(config, brushScale) {
-        var _a, _b, _c, _d;
-        (_a = this.brush) === null || _a === void 0 ? void 0 : _a.on('start brush end', null);
-        if ((_b = config.brush) === null || _b === void 0 ? void 0 : _b.enable) {
-            this.brush = this.brushMap.get((_d = (_c = config === null || config === void 0 ? void 0 : config.brush) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : BrushType.x);
-            this.brush.on('start brush end', (_) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-                if (_.sourceEvent) {
-                    if (!_.selection)
-                        return;
-                    const [from, to] = _.selection;
-                    if (to - from === 0) {
-                        const selection = (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map(brushScale)) !== null && _b !== void 0 ? _b : [(_c = config.brush) === null || _c === void 0 ? void 0 : _c.from, (_d = config.brush) === null || _d === void 0 ? void 0 : _d.to].map(brushScale);
-                        const halfBrushHeight = (selection[1] - selection[0]) / 2;
-                        const invertedSelection = [
-                            from - halfBrushHeight,
-                            to + halfBrushHeight,
-                        ].map(brushScale.invert);
-                        if (invertedSelection[1] - invertedSelection[0] >
-                            ((_e = config.brush) === null || _e === void 0 ? void 0 : _e.max)) {
-                            this._container.call(this.brush.move, [
-                                Math.floor(invertedSelection[0]),
-                                Math.floor(invertedSelection[0] + ((_f = config.brush) === null || _f === void 0 ? void 0 : _f.max)),
-                            ].map(brushScale));
-                            return;
-                        }
-                        if (invertedSelection[1] - invertedSelection[0] <
-                            ((_g = config.brush) === null || _g === void 0 ? void 0 : _g.min)) {
-                            this._container.call(this.brush.move, [
-                                Math.floor(invertedSelection[0]),
-                                Math.ceil(invertedSelection[0] + ((_h = config.brush) === null || _h === void 0 ? void 0 : _h.min)),
-                            ].map(brushScale));
-                            return;
-                        }
-                        this._container.call(this.brush.move, [
-                            from - halfBrushHeight,
-                            to + halfBrushHeight,
-                        ]);
-                        return;
-                    }
-                    if (brushScale.invert(to) - brushScale.invert(from) >
-                        ((_j = config.brush) === null || _j === void 0 ? void 0 : _j.max)) {
-                        this._container.call(this.brush.move, this.selection
-                            ? [
-                                this.selection[0],
-                                this.selection[0] + ((_k = config.brush) === null || _k === void 0 ? void 0 : _k.max),
-                            ].map(brushScale)
-                            : [(_l = config.brush) === null || _l === void 0 ? void 0 : _l.from, (_m = config.brush) === null || _m === void 0 ? void 0 : _m.to].map(brushScale));
-                        return;
-                    }
-                    if (brushScale.invert(to) - brushScale.invert(from) <
-                        ((_o = config.brush) === null || _o === void 0 ? void 0 : _o.min)) {
-                        this._container.call(this.brush.move, this.selection
-                            ? [
-                                this.selection[0],
-                                this.selection[0] + ((_p = config.brush) === null || _p === void 0 ? void 0 : _p.min),
-                            ].map(brushScale)
-                            : [(_q = config.brush) === null || _q === void 0 ? void 0 : _q.from, (_r = config.brush) === null || _r === void 0 ? void 0 : _r.to].map(brushScale));
-                        return;
-                    }
-                    if (_.sourceEvent instanceof MouseEvent) {
-                        this.selection = _.selection.map(brushScale.invert);
-                    }
-                    const brushMessage = new BrushMessage({
-                        chartId: this.config.id,
-                        selection: [brushScale.invert(from), brushScale.invert(to)],
-                        mode: _.mode
-                    });
-                    this.brushService.setBrush(brushMessage);
-                }
-            });
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    var _a, _b;
-                    this._container.call(this.brush);
-                    let domain = brushScale.domain();
-                    if ((_a = config === null || config === void 0 ? void 0 : config.brush) === null || _a === void 0 ? void 0 : _a.from) {
-                        domain[0] = config.brush.from;
-                    }
-                    if ((_b = config === null || config === void 0 ? void 0 : config.brush) === null || _b === void 0 ? void 0 : _b.to) {
-                        domain[1] = config.brush.to;
-                    }
-                    this._container.call(this.brush.move, this.selection
-                        ? this.selection.map(brushScale)
-                        : domain.map(brushScale), {});
-                }, 0);
-            });
-        }
-    }
-    clearPreviousSelection() {
-        this.selection = null;
-    }
-}
-BrushableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushableDirective, deps: [{ token: BrushService }, { token: ChartService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-BrushableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: BrushableDirective, selector: "[tetaBrushable]", inputs: { config: "config", axis: "axis" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaBrushable]',
-                }]
-        }], ctorParameters: function () { return [{ type: BrushService }, { type: ChartService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { config: [{
-                type: Input
-            }], axis: [{
-                type: Input
-            }] } });
-
-class AnnotationComponent {
-    constructor(scaleService, cdr, chartService) {
-        this.scaleService = scaleService;
-        this.cdr = cdr;
-        this.chartService = chartService;
-        this.x = this.scaleService.scales.pipe(map((_) => { var _a, _b; return (_b = _.x.get((_a = this.annotation.xAxisIndex) !== null && _a !== void 0 ? _a : 0)) === null || _b === void 0 ? void 0 : _b.scale; }));
-        this.y = this.scaleService.scales.pipe(map((_) => { var _a, _b; return (_b = _.y.get((_a = this.annotation.yAxisIndex) !== null && _a !== void 0 ? _a : 0)) === null || _b === void 0 ? void 0 : _b.scale; }));
-        this.drag = d3.drag();
-    }
-    set annotation(annotation) {
-        this._annotation = annotation;
-    }
-    get annotation() {
-        return this._annotation;
-    }
-    set node(node) {
-        this._node = node;
-        this.init();
-        this.cdr.detectChanges();
-    }
-    get node() {
-        return this._node;
-    }
-    click(event) {
-        this.chartService.emitAnnotation({
-            event,
-            target: this.annotation
-        });
-    }
-    contextMenu(event) {
-        this.chartService.emitAnnotation({
-            event,
-            target: this.annotation
-        });
-    }
-    ngOnDestroy() {
-        this.drag.on('drag end', null);
-    }
-    init() {
-        d3.select(this.node.nativeElement).datum(this.annotation);
-        const offsetPx = 10;
-        const nodeRect = this.node.nativeElement.getBoundingClientRect();
-        if (this.annotation.draggable) {
-            this.drag.on('drag end', (event, d) => __awaiter(this, void 0, void 0, function* () {
-                const x = yield lastValueFrom(this.x.pipe(take(1)));
-                const y = yield lastValueFrom(this.y.pipe(take(1)));
-                d.dx += event.dx;
-                d.dy += event.dy;
-                // x constraint
-                if ((d.dx + x(d.point.x) - offsetPx) <= 0) {
-                    d.dx = -x(d.point.x) + offsetPx;
-                }
-                if (d.dx + x(d.point.x) + nodeRect.width - offsetPx >= this.visibleRect.width) {
-                    d.dx = this.visibleRect.width - x(d.point.x) - nodeRect.width + offsetPx;
-                }
-                // y constraint
-                if ((d.dy + y(d.point.y) - offsetPx) <= 0) {
-                    d.dy = -y(d.point.y) + offsetPx;
-                }
-                if (d.dy + y(d.point.y) + nodeRect.height - offsetPx >= this.visibleRect.height) {
-                    d.dy = Math.abs(y(d.point.y) - this.visibleRect.height) - nodeRect.height + offsetPx;
-                }
-                this.cdr.detectChanges();
-                this.chartService.emitMoveAnnotation({
-                    event,
-                    target: d
-                });
-            }));
-            d3.select(this.node.nativeElement).call(this.drag);
-        }
-    }
-}
-AnnotationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AnnotationComponent, deps: [{ token: ScaleService }, { token: i0.ChangeDetectorRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-AnnotationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AnnotationComponent, selector: "[teta-annotation]", inputs: { visibleRect: "visibleRect", annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <ng-container *ngIf=\"data.x && data.y\">\n\n\n    <svg:circle\n      [attr.r]=\"annotation.style?.radius ?? 5\"\n      [attr.cx]=\"data.x(annotation.point.x)\"\n      [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n      [attr.cy]=\"data.y(annotation.point.y)\">\n    </svg:circle>\n    <svg:line\n      [attr.x1]=\"data.x(annotation.point.x)\"\n      [attr.y1]=\"data.y(annotation.point.y)\"\n      [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n      [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n      [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n      [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n      [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n    >\n    </svg:line>\n    <svg:foreignObject\n      class=\"position-absolute\"\n      [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n      [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n      [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n      [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n      <div\n        #annotationNode\n        [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n        [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n        [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n        style=\"border-radius: 2px; display: inline-block;\">\n        <ng-container *ngIf=\"annotation.template;else default\">\n          <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n        </ng-container>\n      </div>\n    </svg:foreignObject>\n  </ng-container>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AnnotationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[teta-annotation]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <ng-container *ngIf=\"data.x && data.y\">\n\n\n    <svg:circle\n      [attr.r]=\"annotation.style?.radius ?? 5\"\n      [attr.cx]=\"data.x(annotation.point.x)\"\n      [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n      [attr.cy]=\"data.y(annotation.point.y)\">\n    </svg:circle>\n    <svg:line\n      [attr.x1]=\"data.x(annotation.point.x)\"\n      [attr.y1]=\"data.y(annotation.point.y)\"\n      [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n      [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n      [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n      [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n      [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n    >\n    </svg:line>\n    <svg:foreignObject\n      class=\"position-absolute\"\n      [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n      [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n      [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n      [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n      <div\n        #annotationNode\n        [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n        [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n        [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n        style=\"border-radius: 2px; display: inline-block;\">\n        <ng-container *ngIf=\"annotation.template;else default\">\n          <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n        </ng-container>\n      </div>\n    </svg:foreignObject>\n  </ng-container>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: ScaleService }, { type: i0.ChangeDetectorRef }, { type: ChartService }]; }, propDecorators: { visibleRect: [{
-                type: Input
-            }], annotation: [{
-                type: Input
-            }], node: [{
-                type: ViewChild,
-                args: ['annotationNode', { static: false }]
-            }], click: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], contextMenu: [{
-                type: HostListener,
-                args: ['contextmenu', ['$event']]
-            }] } });
-
-class CrosshairComponent {
-    constructor(scaleService, chartService, cdr) {
-        this.scaleService = scaleService;
-        this.chartService = chartService;
-        this.cdr = cdr;
-    }
-    ngOnInit() {
-        this.transform = this.chartService.pointerMove.pipe(map((event) => {
-            return {
-                x: event.type === 'mouseleave' ? -9999 : event.offsetX,
-                y: event.type === 'mouseleave' ? -9999 : event.offsetY
-            };
-        }), tap(() => {
-            setTimeout(() => {
-                this.cdr.detectChanges();
-            });
-        }));
-    }
-}
-CrosshairComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CrosshairComponent, deps: [{ token: ScaleService }, { token: ChartService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CrosshairComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"transform | async as t\">\n  <svg:line [attr.x1]=\"t.x\" y1=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"size.height\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n  <svg:line x1=\"0\" [attr.y1]=\"t.y\" [attr.x2]=\"size.width\" [attr.y2]=\"t.y\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CrosshairComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[teta-crosshair]', template: "<ng-container *ngIf=\"transform | async as t\">\n  <svg:line [attr.x1]=\"t.x\" y1=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"size.height\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n  <svg:line x1=\"0\" [attr.y1]=\"t.y\" [attr.x2]=\"size.width\" [attr.y2]=\"t.y\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges;pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
-                type: Input
-            }] } });
-
-class ChartContainerComponent {
-    constructor(_svc, _cdr, _scaleService, _zoomService, _elementRef, _zone) {
-        this._svc = _svc;
-        this._cdr = _cdr;
-        this._scaleService = _scaleService;
-        this._zoomService = _zoomService;
-        this._elementRef = _elementRef;
-        this._zone = _zone;
-        this.zoomType = ZoomType;
-        this.filterPositionMap = new Map()
-            .set(true, (axis) => (_) => _.options.opposite && _.options.visible && axis.index <= _.index)
-            .set(false, (axis) => (_) => _.options.opposite !== true &&
-            _.options.visible &&
-            _.index <= axis.index);
-        this.sumSize = (acc, curr) => acc + curr.selfSize;
-        this.config = this._svc.config;
-        this.size = this._svc.size;
-        this.scales = this._scaleService.scales.pipe(observeOn(animationFrameScheduler), tetaZoneFull(this._zone), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-        this.brushScale = this._scaleService.scales.pipe(withLatestFrom(this.config), map((data) => {
-            var _a, _b, _c, _d;
-            const [{ x, y }, config] = data;
-            return ((_a = config.brush) === null || _a === void 0 ? void 0 : _a.type) === BrushType.x || ((_b = config === null || config === void 0 ? void 0 : config.zoom) === null || _b === void 0 ? void 0 : _b.type) === ZoomType.x ? (_c = x.get(0)) === null || _c === void 0 ? void 0 : _c.scale : (_d = y.get(0)) === null || _d === void 0 ? void 0 : _d.scale;
-        }), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-        this.visibleRect = combineLatest([this.size, this.scales, this.config])
-            .pipe(map((data) => {
-            var _a, _b, _c, _d, _e, _f;
-            const [size, { x, y }, config] = data;
-            const yAxesArray = Array.from(y.values());
-            const xAxesArray = Array.from(x.values());
-            const left = yAxesArray
-                .filter((_) => _.options.opposite !== true && _.options.visible)
-                .reduce(this.sumSize, 0);
-            const right = yAxesArray
-                .filter((_) => _.options.opposite && _.options.visible)
-                .reduce(this.sumSize, 0);
-            const bottom = xAxesArray
-                .filter((_) => _.options.opposite !== true && _.options.visible)
-                .reduce(this.sumSize, 0);
-            const top = xAxesArray
-                .filter((_) => _.options.opposite && _.options.visible)
-                .reduce(this.sumSize, 0);
-            return {
-                x: left + ((_a = config.bounds) === null || _a === void 0 ? void 0 : _a.left),
-                y: top + ((_b = config.bounds) === null || _b === void 0 ? void 0 : _b.top),
-                width: size.width -
-                    left -
-                    right -
-                    ((_c = config.bounds) === null || _c === void 0 ? void 0 : _c.left) -
-                    ((_d = config.bounds) === null || _d === void 0 ? void 0 : _d.right),
-                height: size.height -
-                    top -
-                    bottom -
-                    ((_e = config.bounds) === null || _e === void 0 ? void 0 : _e.top) -
-                    ((_f = config.bounds) === null || _f === void 0 ? void 0 : _f.bottom),
-            };
-        }), tetaZoneFull(this._zone), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-    }
-    ngOnInit() {
-    }
-    ngAfterViewInit() {
-        this._observer = new ResizeObserver((entries) => {
-            requestAnimationFrame(() => {
-                if (!Array.isArray(entries) ||
-                    !entries.length ||
-                    entries[0].contentRect.width <= 0 ||
-                    entries[0].contentRect.height <= 0) {
-                    return;
-                }
-                this._svc.setSize(entries[0].contentRect);
-            });
-        });
-        this._observer.observe(this._elementRef.nativeElement);
-    }
-    ngOnDestroy() {
-        this._observer.unobserve(this._elementRef.nativeElement);
-        this._observer.disconnect();
-    }
-    getTranslate(axis, size) {
-        return this.scales.pipe(withLatestFrom(this.config), map((data) => {
-            var _a, _b, _c, _d, _e, _f;
-            const [{ x, y }, config] = data;
-            const xAxesArray = Array.from(x.values());
-            const yAxesArray = Array.from(y.values());
-            const oppositeFilter = this.filterPositionMap.get(true);
-            const nonOppositeFilter = this.filterPositionMap.get(false);
-            const oppositeOffsetY = yAxesArray.filter(oppositeFilter(axis));
-            const nonOppositeOffsetY = yAxesArray.filter(nonOppositeFilter(axis));
-            const oppositeOffsetX = xAxesArray.filter(oppositeFilter(axis));
-            const nonOppositeOffsetX = xAxesArray.filter(nonOppositeFilter(axis));
-            const oppositeTranslateY = oppositeOffsetY.reduce((acc, curr) => acc + curr.selfSize, (_a = config.bounds) === null || _a === void 0 ? void 0 : _a.right);
-            const nonOppisteTranslateY = nonOppositeOffsetY.reduce((acc, curr) => acc + curr.selfSize, (_b = config.bounds) === null || _b === void 0 ? void 0 : _b.left);
-            const oppositeTranslateX = oppositeOffsetX.reduce((acc, curr) => acc + curr.selfSize, (_c = config.bounds) === null || _c === void 0 ? void 0 : _c.top);
-            const nonOppisteTranslateX = nonOppositeOffsetX.reduce((acc, curr) => acc + curr.selfSize, (_d = config.bounds) === null || _d === void 0 ? void 0 : _d.bottom);
-            const left = yAxesArray
-                .filter((_) => _.options.visible && _.options.opposite !== true)
-                .reduce((acc, curr) => acc + curr.selfSize, (_e = config.bounds) === null || _e === void 0 ? void 0 : _e.left);
-            const top = xAxesArray
-                .filter((_) => _.options.visible && _.options.opposite === true)
-                .reduce((acc, curr) => acc + curr.selfSize, (_f = config.bounds) === null || _f === void 0 ? void 0 : _f.top);
-            if (axis.orientation === AxisOrientation.x) {
-                return `translate(${left}, ${axis.options.opposite
-                    ? oppositeTranslateX
-                    : size.height - nonOppisteTranslateX})`;
-            }
-            if (axis.orientation === AxisOrientation.y) {
-                return `translate(${axis.options.opposite
-                    ? size.width - oppositeTranslateY
-                    : nonOppisteTranslateY}, ${top})`;
-            }
-            return 'translate(0, 0)';
-        }));
-    }
-    identify(index, item) {
-        return item.value.index;
-    }
-    click(event, xScales, yScales) {
-        var _a, _b;
-        const x = (_a = xScales.get(0)) === null || _a === void 0 ? void 0 : _a.scale;
-        const y = (_b = yScales.get(0)) === null || _b === void 0 ? void 0 : _b.scale;
-        this._svc.emitChartClick({
-            event: event,
-            target: {
-                x: x.invert(event.offsetX),
-                y: y.invert(event.offsetY),
-            },
-        });
-    }
-    contextMenu(event, xScales, yScales) {
-        var _a, _b;
-        const x = (_a = xScales.get(0)) === null || _a === void 0 ? void 0 : _a.scale;
-        const y = (_b = yScales.get(0)) === null || _b === void 0 ? void 0 : _b.scale;
-        this._svc.emitChartContextMenu({
-            event: event,
-            target: {
-                x: x.invert(event.offsetX),
-                y: y.invert(event.offsetY),
-            },
-        });
-    }
-    mouseMove(event) {
-        this._svc.setPointerMove(event);
-    }
-    mouseLeave(event) {
-        this._svc.setPointerMove(event);
-    }
-    trackSerie(index, item) {
-        var _a;
-        return ((_a = item.name) === null || _a === void 0 ? void 0 : _a.length) ? item.name : index;
-    }
-}
-ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  visibleRect: visibleRect | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n  <ng-container *ngIf=\"data.size?.height > 0\n                      && data.size?.width > 0\n                      && data.visibleRect?.height > 0\n                      && data.visibleRect?.width > 0\n                      && data.scales?.x.size === data.config.xAxis.length\n                      && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.selfSize > 0\n                                && item.value.options.visible\n                                && data.scales.x.size > 0\n                                && data.scales.y.size > 0\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n\n        </ng-container>\n      </g>\n      <g class=\"x-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n        </ng-container>\n      </g>\n    </svg>\n  </ng-container>\n  <ng-container\n    *ngIf=\"data.size?.height > 0\n          && data.size?.width > 0\n          && data.visibleRect?.height > 0\n          && data.visibleRect?.width > 0\n          && data.scales?.x.size === data.config.xAxis.length\n          && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           [visibleRect]=\"data.visibleRect\"\n           *ngFor=\"let annotation of data.config.annotations\"\n           [annotation]=\"annotation\"></g>\n      </g>\n      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "axis"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["visibleRect", "annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  visibleRect: visibleRect | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n  <ng-container *ngIf=\"data.size?.height > 0\n                      && data.size?.width > 0\n                      && data.visibleRect?.height > 0\n                      && data.visibleRect?.width > 0\n                      && data.scales?.x.size === data.config.xAxis.length\n                      && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.selfSize > 0\n                                && item.value.options.visible\n                                && data.scales.x.size > 0\n                                && data.scales.y.size > 0\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n\n        </ng-container>\n      </g>\n      <g class=\"x-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n        </ng-container>\n      </g>\n    </svg>\n  </ng-container>\n  <ng-container\n    *ngIf=\"data.size?.height > 0\n          && data.size?.width > 0\n          && data.visibleRect?.height > 0\n          && data.visibleRect?.width > 0\n          && data.scales?.x.size === data.config.xAxis.length\n          && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           [visibleRect]=\"data.visibleRect\"\n           *ngFor=\"let annotation of data.config.annotations\"\n           [annotation]=\"annotation\"></g>\n      </g>\n      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-class LegendComponent {
-    constructor(chartService) {
-        this.chartService = chartService;
-        this.sizeMapping = new Map()
-            .set(SeriesType.line, 2)
-            .set(SeriesType.scatter, 2)
-            .set(SeriesType.bar, 12)
-            .set(SeriesType.area, 2)
-            .set(SeriesType.block, 12)
-            .set(SeriesType.blockArea, 2);
-        this.classLegend = true;
-    }
-    getHeight(serie) {
-        var _a;
-        return this.sizeMapping.get((_a = serie.type) !== null && _a !== void 0 ? _a : SeriesType.line);
-    }
-    click(serie) {
-        this.chartService.toggleVisibilitySeries([serie.id]);
-    }
-}
-LegendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LegendComponent, deps: [{ token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-LegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LegendComponent, selector: "teta-legend", inputs: { series: "series" }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n  <div *ngIf=\"serie?.showInLegend !== false\">\n    <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n      <div class=\"legend-icon-form\"\n           [style.height.px]=\"getHeight(serie)\"\n           [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n           [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n           [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"></div>\n      <div class=\"legend-label\" style=\"user-select: none\" [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}</div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LegendComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n  <div *ngIf=\"serie?.showInLegend !== false\">\n    <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n      <div class=\"legend-icon-form\"\n           [style.height.px]=\"getHeight(serie)\"\n           [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n           [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n           [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"></div>\n      <div class=\"legend-label\" style=\"user-select: none\" [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}</div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChartService }]; }, propDecorators: { series: [{
-                type: Input
-            }], classLegend: [{
-                type: HostBinding,
-                args: ['class.padding-bottom-4']
-            }] } });
-
-class ChartComponent {
-    constructor(chartService, zoomService, brushService, scaleService) {
-        this.chartService = chartService;
-        this.zoomService = zoomService;
-        this.brushService = brushService;
-        this.scaleService = scaleService;
-        this.pointerMove = new EventEmitter();
-        this.plotBandsMove = new EventEmitter();
-        this.plotBandClick = new EventEmitter();
-        this.plotBandContextMenu = new EventEmitter();
-        this.plotLinesMove = new EventEmitter();
-        this.pointMove = new EventEmitter();
-        this.chartClick = new EventEmitter();
-        this.chartContextMenu = new EventEmitter();
-        this.annotationContextMenu = new EventEmitter();
-        this.annotationClick = new EventEmitter();
-        this.annotationMove = new EventEmitter();
-        this.zoomServiceInstance = new EventEmitter();
-        this.brushServiceInstance = new EventEmitter();
-        this._alive = true;
-        this.svcConfig = this.chartService.config;
-        this.hasSeriesData = this.svcConfig.pipe(map((_) => { var _a, _b; return ((_a = _.series) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = _.series) === null || _b === void 0 ? void 0 : _b.some((_) => { var _a; return ((_a = _.data) === null || _a === void 0 ? void 0 : _a.length) > 0; })); }));
-    }
-    set config(config) {
-        var _a;
-        this.chartService.setConfig(config);
-        this.zoomService.setBroadcastChannel((_a = config === null || config === void 0 ? void 0 : config.zoom) === null || _a === void 0 ? void 0 : _a.syncChannel);
-    }
-    resetZoom() {
-        this.scaleService.resetZoom();
-    }
-    // setZoom() {
-    //   this.zoomService.fireZoom()
-    // }
-    ngOnChanges(changes) {
-    }
-    ngOnInit() {
-        this.zoomServiceInstance.emit(this.zoomService);
-        this.brushServiceInstance.emit(this.brushService);
-        this.chartService.pointerMove
-            .pipe(takeWhile(() => this._alive), withLatestFrom(this.scaleService.scales, this.chartService.config))
-            .subscribe((data) => {
-            var _a;
-            const [event, { x, y }, config] = data;
-            const tooltipTracking = (_a = config === null || config === void 0 ? void 0 : config.tooltip) === null || _a === void 0 ? void 0 : _a.tracking;
-            if (tooltipTracking === TooltipTracking.y) {
-                const result = new Map();
-                y.forEach((value, key) => {
-                    if (value.options.scaleType.type === ScaleType.band) {
-                        return;
-                    }
-                    result.set(key, value.scale.invert(event.offsetY));
-                });
-                this.pointerMove.emit({
-                    event: event,
-                    target: result
-                });
-            }
-            else {
-                const result = new Map();
-                x.forEach((value, key) => {
-                    if (value.options.scaleType.type === ScaleType.band) {
-                        return;
-                    }
-                    result.set(key, value.scale.invert(event.offsetX));
-                });
-                this.pointerMove.emit({
-                    event: event,
-                    target: result
-                });
-            }
-        });
-        this.chartService.plotBandEvent
-            .pipe(takeWhile(() => this._alive))
-            .subscribe((_) => {
-            this.plotBandsMove.emit(_);
-        });
-        this.chartService.plotLineMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
-            this.plotLinesMove.emit(_);
-        });
-        this.chartService.pointMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
-            this.pointMove.emit(_);
-        });
-        this.chartService.chartClick
-            .pipe(takeWhile(() => this._alive)).subscribe((_) => {
-            this.chartClick.emit(_);
-        });
-        this.chartService.chartContextMenu
-            .pipe(takeWhile(() => this._alive)).subscribe((_) => {
-            this.chartContextMenu.emit(_);
-        });
-        this.chartService.plotBandClick
-            .pipe(takeWhile(() => this._alive))
-            .subscribe((_) => {
-            this.plotBandClick.emit(_);
-        });
-        this.chartService.plotBandContextMenu
-            .pipe(takeWhile(() => this._alive))
-            .subscribe((_) => {
-            this.plotBandContextMenu.emit(_);
-        });
-        this.chartService.annotationContextMenu
-            .pipe(takeWhile(() => this._alive))
-            .subscribe((_) => {
-            this.annotationContextMenu.emit(_);
-        });
-        this.chartService.annotationClick
-            .pipe(takeWhile(() => this._alive))
-            .subscribe((_) => {
-            this.annotationClick.emit(_);
-        });
-        this.chartService.annotationMove
-            .pipe(takeWhile(() => this._alive))
-            .subscribe((_) => {
-            this.annotationMove.emit(_);
-        });
-    }
-    ngAfterViewInit() {
-    }
-    ngOnDestroy() {
-        this._alive = false;
-    }
-}
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: BrushService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove", zoomServiceInstance: "zoomServiceInstance", brushServiceInstance: "brushServiceInstance" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto justify-content-center\">\n    <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n      <div #ref><ng-content></ng-content></div>\n      <span *ngIf=\"!ref.hasChildNodes()\">\n        No data\n      </span>\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-svg-chart', providers: [ChartService, ZoomService, ScaleService, BrushService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto justify-content-center\">\n    <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n      <div #ref><ng-content></ng-content></div>\n      <span *ngIf=\"!ref.hasChildNodes()\">\n        No data\n      </span>\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }, { type: BrushService }, { type: ScaleService }]; }, propDecorators: { pointerMove: [{
-                type: Output
-            }], plotBandsMove: [{
-                type: Output
-            }], plotBandClick: [{
-                type: Output
-            }], plotBandContextMenu: [{
-                type: Output
-            }], plotLinesMove: [{
-                type: Output
-            }], pointMove: [{
-                type: Output
-            }], chartClick: [{
-                type: Output
-            }], chartContextMenu: [{
-                type: Output
-            }], annotationContextMenu: [{
-                type: Output
-            }], annotationClick: [{
-                type: Output
-            }], annotationMove: [{
-                type: Output
-            }], zoomServiceInstance: [{
-                type: Output
-            }], brushServiceInstance: [{
-                type: Output
-            }], config: [{
-                type: Input
-            }] } });
-
-class BandseriesComponent extends SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element) {
-        super(svc, cdr, scaleService, zoomService, element);
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-    }
-    ngOnInit() {
-        this.x = this.scaleService.scales.pipe(map(_ => { var _a; return (_a = _.x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
-        this.y = this.scaleService.scales.pipe(map(_ => { var _a; return (_a = _.y.get(this.series.yAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
-    }
-}
-BandseriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BandseriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BandseriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BandseriesComponent, selector: "svg:svg[teta-bandseries]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{x: x | async, y: y | async} as scales\">\n  <ng-container *ngFor=\"let band of _series.data\">\n    <svg:rect [attr.x]=\"scales.x(band.x)\"\n              [attr.y]=\"scales.y(band.y) - scales.y.bandwidth() / 2\"\n              [attr.width]=\"scales.x(band.x1) - scales.x(band.x)\"\n              fill=\"red\"\n              [attr.height]=\"scales.y.bandwidth()\">\n    </svg:rect>\n    <svg:text\n      text-anchor=\"middle\"\n      dominant-baseline=\"middle\"\n      class=\"label font-caption fill-text-90\"\n      [attr.x]=\"scales.x(band.x) + (scales.x(band.x1) - scales.x(band.x)) / 2\"\n      [attr.y]=\"scales.y(band.y)\">{{band.y}}\n    </svg:text>\n  </ng-container>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BandseriesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'svg:svg[teta-bandseries]', template: "<ng-container *ngIf=\"{x: x | async, y: y | async} as scales\">\n  <ng-container *ngFor=\"let band of _series.data\">\n    <svg:rect [attr.x]=\"scales.x(band.x)\"\n              [attr.y]=\"scales.y(band.y) - scales.y.bandwidth() / 2\"\n              [attr.width]=\"scales.x(band.x1) - scales.x(band.x)\"\n              fill=\"red\"\n              [attr.height]=\"scales.y.bandwidth()\">\n    </svg:rect>\n    <svg:text\n      text-anchor=\"middle\"\n      dominant-baseline=\"middle\"\n      class=\"label font-caption fill-text-90\"\n      [attr.x]=\"scales.x(band.x) + (scales.x(band.x1) - scales.x(band.x)) / 2\"\n      [attr.y]=\"scales.y(band.y)\">{{band.y}}\n    </svg:text>\n  </ng-container>\n\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
-
-class ChartModule {
-}
-ChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, declarations: [ChartComponent,
-        SeriesHostComponent,
-        ChartContainerComponent,
-        LegendComponent,
-        SeriesBaseComponent,
-        LinearSeriesBase,
-        LineSeriesComponent,
-        GridlinesComponent,
-        XAxisComponent,
-        YAxisComponent,
-        PlotlineComponent,
-        PlotBandComponent,
-        BarSeriesComponent,
-        TooltipComponent,
-        ZoomableDirective,
-        BrushableDirective,
-        AreaSeriesComponent,
-        ScatterSeriesComponent,
-        BlockSeriesComponent,
-        BlockAreaSeriesComponent,
-        AnnotationComponent,
-        CrosshairComponent,
-        DraggablePointDirective,
-        BandseriesComponent], imports: [CommonModule, LetModule], exports: [ChartComponent,
-        LegendComponent,
-        SeriesBaseComponent,
-        LineSeriesComponent,
-        BarSeriesComponent,
-        ScatterSeriesComponent,
-        AreaSeriesComponent,
-        BlockSeriesComponent,
-        BlockAreaSeriesComponent] });
-ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, imports: [CommonModule, LetModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ChartComponent,
-                        SeriesHostComponent,
-                        ChartContainerComponent,
-                        LegendComponent,
-                        SeriesBaseComponent,
-                        LinearSeriesBase,
-                        LineSeriesComponent,
-                        GridlinesComponent,
-                        XAxisComponent,
-                        YAxisComponent,
-                        PlotlineComponent,
-                        PlotBandComponent,
-                        BarSeriesComponent,
-                        TooltipComponent,
-                        ZoomableDirective,
-                        BrushableDirective,
-                        AreaSeriesComponent,
-                        ScatterSeriesComponent,
-                        BlockSeriesComponent,
-                        BlockAreaSeriesComponent,
-                        AnnotationComponent,
-                        CrosshairComponent,
-                        DraggablePointDirective,
-                        BandseriesComponent,
-                    ],
-                    exports: [
-                        ChartComponent,
-                        LegendComponent,
-                        SeriesBaseComponent,
-                        LineSeriesComponent,
-                        BarSeriesComponent,
-                        ScatterSeriesComponent,
-                        AreaSeriesComponent,
-                        BlockSeriesComponent,
-                        BlockAreaSeriesComponent,
-                    ],
-                    imports: [CommonModule, LetModule],
-                }]
-        }] });
-
-class PlotBand {
-    constructor(options) {
-        this.id = options === null || options === void 0 ? void 0 : options.id;
-        this.name = options === null || options === void 0 ? void 0 : options.name;
-        this.from = options === null || options === void 0 ? void 0 : options.from;
-        this.to = options === null || options === void 0 ? void 0 : options.to;
-        this.label = options === null || options === void 0 ? void 0 : options.label;
-        this.showGrabbers =
-            (options === null || options === void 0 ? void 0 : options.showGrabbers) != null ? options.showGrabbers : true;
-        this.draggable = (options === null || options === void 0 ? void 0 : options.draggable) != null ? options === null || options === void 0 ? void 0 : options.draggable : false;
-        this.resizable = (options === null || options === void 0 ? void 0 : options.resizable) != null ? options === null || options === void 0 ? void 0 : options.resizable : true;
-        this.min = options === null || options === void 0 ? void 0 : options.min;
-        this.max = options === null || options === void 0 ? void 0 : options.max;
-        this.style = options === null || options === void 0 ? void 0 : options.style;
-    }
-}
-
-class PlotLine {
-    constructor(options) {
-        this.id = options === null || options === void 0 ? void 0 : options.id;
-        this.name = options === null || options === void 0 ? void 0 : options.name;
-        this.value = options === null || options === void 0 ? void 0 : options.value;
-        this.label = options === null || options === void 0 ? void 0 : options.label;
-        this.min = options === null || options === void 0 ? void 0 : options.min;
-        this.max = options === null || options === void 0 ? void 0 : options.max;
-        this.draggable = options === null || options === void 0 ? void 0 : options.draggable;
-        this.style = options === null || options === void 0 ? void 0 : options.style;
-    }
-}
-
-/*
- * Public API Surface of chart
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AreaSeriesComponent, Axis, AxisOrientation, BarSeriesComponent, BlockAreaSeriesComponent, BlockSeriesComponent, BroadcastService, BrushMessage, BrushService, BrushType, ChartBounds, ChartComponent, ChartModule, ChartService, ClipPointsDirection, DragPointType, FillDirection, FillType, LegendComponent, LineSeriesComponent, PlotBand, PlotLine, ScaleService, ScaleType, ScatterSeriesComponent, SeriesBaseComponent, SeriesType, TooltipTracking, ZoomBehaviorType, ZoomMessage, ZoomService, ZoomType, generateTicks, getTextWidth };
-//# sourceMappingURL=tetacom-svg-charts.mjs.map