@tetacom/svg-charts 1.0.2 → 1.1.3

package/fesm2015/tetacom-svg-charts.mjs

@@ -0,0 +1,1912 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, HostListener, ChangeDetectorRef, Directive, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { BehaviorSubject, Subject, map, filter, shareReplay, combineLatest, withLatestFrom, tap, merge, takeWhile } from 'rxjs';
+import * as d3 from 'd3';
+import { zoomTransform, zoomIdentity } from 'd3';
+import { maxIndex } from 'd3-array';
+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 = 30;
+        this.bottom = 0;
+        this.left = 0;
+        this.top = (options === null || options === void 0 ? void 0 : options.top) || this.top;
+        this.right = (options === null || options === void 0 ? void 0 : options.right) || this.right;
+        this.bottom = (options === null || options === void 0 ? void 0 : options.bottom) || this.bottom;
+        this.left = (options === null || options === void 0 ? void 0 : options.left) || this.left;
+    }
+}
+
+var TooltipTracking;
+(function (TooltipTracking) {
+    TooltipTracking[TooltipTracking["x"] = 0] = "x";
+    TooltipTracking[TooltipTracking["y"] = 1] = "y";
+})(TooltipTracking || (TooltipTracking = {}));
+
+const defaultChartConfig = {
+    zoom: {
+        enable: true,
+        type: ZoomType.x,
+    },
+    bounds: new ChartBounds(),
+    legend: {
+        enable: true,
+    },
+    tooltip: {
+        enable: true,
+        showMarkers: true,
+        tracking: TooltipTracking.x,
+    },
+    xAxis: [],
+    yAxis: [],
+    series: [],
+    gridLines: true,
+};
+
+var ScaleType;
+(function (ScaleType) {
+    ScaleType[ScaleType["linear"] = 0] = "linear";
+    ScaleType[ScaleType["log"] = 1] = "log";
+    ScaleType[ScaleType["pow"] = 2] = "pow";
+    ScaleType[ScaleType["sqrt"] = 3] = "sqrt";
+    ScaleType[ScaleType["time"] = 4] = "time";
+    ScaleType[ScaleType["category"] = 5] = "category";
+})(ScaleType || (ScaleType = {}));
+
+const defaultAxisConfig = {
+    visible: true,
+    zoom: true,
+    scaleType: {
+        type: ScaleType.linear,
+    },
+};
+
+var SeriesType;
+(function (SeriesType) {
+    SeriesType[SeriesType["line"] = 0] = "line";
+    SeriesType[SeriesType["bar"] = 1] = "bar";
+    SeriesType[SeriesType["scatter"] = 2] = "scatter";
+})(SeriesType || (SeriesType = {}));
+
+const defaultSeriesConfig = {
+    data: [],
+    type: SeriesType.line,
+    xAxisIndex: 0,
+    yAxisIndex: 0,
+};
+
+class ChartService {
+    constructor() {
+        this.config$ = new BehaviorSubject(defaultChartConfig);
+        this.size$ = new BehaviorSubject(new DOMRectReadOnly());
+        this.pointerMove$ = new BehaviorSubject(null);
+        this.tooltips$ = new Subject();
+        this.plotBandEvent$ = new Subject();
+        this.plotLineMove$ = new Subject();
+        this.pointMove$ = new Subject();
+        this.config = this.config$
+            .asObservable()
+            .pipe(map(this.setDefaults), map(this.setpreparationData));
+        this.size = this.size$.asObservable().pipe(filter((_) => {
+            return _.height > 0 && _.width > 0;
+        }));
+        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.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'; }));
+    }
+    setConfig(config) {
+        this.config$.next(config);
+    }
+    setSize(size) {
+        this.size$.next(size);
+    }
+    setPointerMove(event) {
+        this.pointerMove$.next(event);
+    }
+    setTooltip(tooltip) {
+        this.tooltips$.next(tooltip);
+    }
+    emitPlotband(event) {
+        this.plotBandEvent$.next(event);
+    }
+    emitPlotline(event) {
+        this.plotLineMove$.next(event);
+    }
+    emitPoint(event) {
+        this.pointMove$.next(event);
+    }
+    setDefaults(config) {
+        const defaultConfig = (defaultConfig) => {
+            return (source) => {
+                return Object.assign({}, defaultConfig, source);
+            };
+        };
+        config = Object.assign({}, defaultChartConfig, config);
+        config.xAxis = config.xAxis.map(defaultConfig(defaultAxisConfig));
+        config.yAxis = config.yAxis.map(defaultConfig(defaultAxisConfig));
+        config.series = config.series.map(defaultConfig(defaultSeriesConfig));
+        config.tooltip = Object.assign({}, defaultChartConfig.tooltip, config.tooltip);
+        return config;
+    }
+    setpreparationData(config) {
+        var _a, _b;
+        if (config.inverted) {
+            config.series = (_a = config.series) === null || _a === void 0 ? void 0 : _a.map((serie) => {
+                var _a;
+                return Object.assign(Object.assign({}, serie), { 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 });
+                    }) });
+            });
+        }
+        if ((_b = 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ChartService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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 = {}));
+
+const getTextWidth = (inputText, backupRatio = 0.5, fontSize = 11) => {
+    let text = inputText !== null && inputText !== void 0 ? inputText : '';
+    text = text.toString();
+    return fontSize * backupRatio * text.length;
+};
+
+function generateTicks(extremes) {
+    const [min, max] = extremes;
+    const tickCount = 10;
+    const tickStep = (max - min) / tickCount;
+    const ticks = d3
+        .range(min, max + tickStep, tickStep)
+        .filter((step) => step <= max);
+    return ticks;
+}
+
+class AxisSizeBuilder {
+    constructor() {
+        this.titlePadding = 8;
+        this.basePadding = 16;
+        this.backupRatio = 0.58;
+    }
+    build(settings) {
+        let finalPadding = this.basePadding;
+        if (settings.orientation === AxisOrientation.y) {
+            const formatter = settings.defaultFormatter();
+            finalPadding += settings.options.title ? this.titlePadding : 0;
+            const maxElementLengthIndex = maxIndex(settings.tickValues, (_) => formatter(_).length);
+            finalPadding += getTextWidth(formatter(settings.tickValues[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 (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.defaultFormatters = new Map()
+            .set(ScaleType.linear, d3.format(',.2f'))
+            .set(ScaleType.time, d3.timeFormat('%B %d, %Y'))
+            .set(ScaleType.log, d3.format(',.2f'))
+            .set(ScaleType.pow, d3.format(',.2f'))
+            .set(ScaleType.sqrt, d3.format(',.2f'));
+        this.chartConfig = config;
+    }
+    /**
+     * Factory for creating x,y axes
+     * @param {AxisOrientation} orientation
+     * Axis type
+     * @param {IChartConfig} config
+     * Chart config
+     * @param {number} index
+     * Index axis
+     * @param {boolean} isFake
+     * @return {Axis}
+     * New generated axis
+     */
+    static createAxis(orientation, config, index, isFake = false) {
+        const axis = new Axis(config);
+        axis.setLocate(orientation);
+        axis.setIndex(index);
+        axis.setOptions();
+        axis.setExtremes();
+        axis.setTicksValues();
+        axis.setSelfSize();
+        axis._isFake = isFake;
+        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);
+    }
+    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 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 isFake() {
+        return this._isFake;
+    }
+    defaultFormatter() {
+        return this.defaultFormatters.get(this.options.scaleType.type);
+    }
+}
+
+var BrushType;
+(function (BrushType) {
+    BrushType[BrushType["x"] = 0] = "x";
+    BrushType[BrushType["y"] = 1] = "y";
+    BrushType[BrushType["xy"] = 2] = "xy";
+})(BrushType || (BrushType = {}));
+
+class BroadcastService {
+    constructor() {
+        this.emitter = new Subject();
+    }
+    broadcast(value) {
+        this.emitter.next(value);
+    }
+    subscribeToChannel(channel) {
+        return this.emitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel), shareReplay(1));
+    }
+}
+BroadcastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BroadcastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BroadcastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BroadcastService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BroadcastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ZoomService {
+    constructor(broadcastService) {
+        this.broadcastService = broadcastService;
+        this.broadcastSubscription = [];
+        this.zoomed$ = new BehaviorSubject(null);
+        this.zoomed = this.zoomed$.asObservable().pipe(shareReplay(1));
+    }
+    applyZoom(svgElement, config, size, axis) {
+        var _a, _b, _c, _d;
+        const enable = ((_a = axis === null || axis === void 0 ? void 0 : axis.options) === null || _a === void 0 ? void 0 : _a.zoom) || ((_b = config === null || config === void 0 ? void 0 : config.zoom) === null || _b === void 0 ? void 0 : _b.enable);
+        const fakeAxis = Axis.createAxis((config === null || config === void 0 ? void 0 : config.zoom.type) === ZoomType.x ? AxisOrientation.x : AxisOrientation.y, config, 0, true);
+        const _axis = axis ? axis : fakeAxis;
+        const zoom = d3
+            .zoom()
+            .scaleExtent([1, 50])
+            .extent([
+            [0, 0],
+            [size.width, size.height],
+        ]);
+        if ((_c = config === null || config === void 0 ? void 0 : config.zoom) === null || _c === void 0 ? void 0 : _c.enable) {
+            this.zoomed
+                .pipe(filter((_) => {
+                var _a, _b;
+                return (((_a = _ === null || _ === void 0 ? void 0 : _.target) === null || _a === void 0 ? void 0 : _a.orientation) === AxisOrientation.x &&
+                    (_ === null || _ === void 0 ? void 0 : _.target.index) === 0 &&
+                    (config === null || config === void 0 ? void 0 : config.zoom.type) === ZoomType.x &&
+                    _axis.orientation === AxisOrientation.x) ||
+                    (((_b = _ === null || _ === void 0 ? void 0 : _.target) === null || _b === void 0 ? void 0 : _b.orientation) === AxisOrientation.y &&
+                        (_ === null || _ === void 0 ? void 0 : _.target.index) === 0 &&
+                        (config === null || config === void 0 ? void 0 : config.zoom.type) === ZoomType.y &&
+                        _axis.orientation === AxisOrientation.y);
+            }), filter((_) => { var _a; return ((_a = _ === null || _ === void 0 ? void 0 : _.event) === null || _a === void 0 ? void 0 : _a.type) === 'end'; }), map((_) => {
+                const eventTransform = _ === null || _ === void 0 ? void 0 : _.event.transform;
+                const currentTransform = zoomTransform(svgElement.nativeElement);
+                if (currentTransform !== eventTransform) {
+                    d3.select(svgElement.nativeElement).call(zoom.transform, eventTransform);
+                }
+            }))
+                .subscribe();
+        }
+        const zoomed = (event) => {
+            var _a;
+            if (enable) {
+                if (event.sourceEvent) {
+                    this.zoomed$.next({
+                        event,
+                        target: _axis,
+                    });
+                    const message = {
+                        event: event,
+                        axis: _axis,
+                    };
+                    this.broadcastService.broadcast({
+                        channel: (_a = config === null || config === void 0 ? void 0 : config.zoom) === null || _a === void 0 ? void 0 : _a.syncChannel,
+                        message,
+                    });
+                }
+            }
+        };
+        if (enable) {
+            const element = d3.select(svgElement.nativeElement);
+            zoom.on('start zoom end', zoomed);
+            element.call(zoom);
+            const subscription = this.broadcastService
+                .subscribeToChannel((_d = config === null || config === void 0 ? void 0 : config.zoom) === null || _d === void 0 ? void 0 : _d.syncChannel)
+                .pipe(filter((_) => {
+                var _a, _b, _c, _d;
+                if ('axis' in _.message) {
+                    return (_axis.index === ((_b = (_a = _.message) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.index) &&
+                        _axis.orientation === ((_d = (_c = _.message) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.orientation));
+                }
+                if ('selection' in _.message) {
+                    return (_axis.index === 0 && _axis.orientation === AxisOrientation.x);
+                }
+                return false;
+            }), map((broadcaseMessage) => {
+                var _a, _b, _c, _d;
+                if ('axis' in broadcaseMessage.message) {
+                    const currentTransform = d3.zoomTransform(svgElement.nativeElement);
+                    if (currentTransform !== ((_a = broadcaseMessage.message.event) === null || _a === void 0 ? void 0 : _a.transform)) {
+                        d3.select(svgElement.nativeElement).call(zoom.transform, (_b = broadcaseMessage.message.event) === null || _b === void 0 ? void 0 : _b.transform, null, {});
+                    }
+                }
+                if ('selection' in broadcaseMessage.message) {
+                    const s = broadcaseMessage.message.selection;
+                    const domain = broadcaseMessage.message.brushScale.domain();
+                    const scale = (domain[1] - domain[0]) / (s[1] - s[0]);
+                    let transform = zoomIdentity.scale(scale);
+                    if (((_c = broadcaseMessage.message) === null || _c === void 0 ? void 0 : _c.brushType) === BrushType.x) {
+                        transform = transform.translate(-broadcaseMessage.message.brushScale(s[0]), 0);
+                    }
+                    if (((_d = broadcaseMessage.message) === null || _d === void 0 ? void 0 : _d.brushType) === BrushType.y) {
+                        transform = transform.translate(0, -broadcaseMessage.message.brushScale(s[0]));
+                    }
+                    d3.select(svgElement.nativeElement).call(zoom.transform, transform, null, {});
+                }
+                this.broadcastSubscription.push(subscription);
+            }))
+                .subscribe();
+        }
+    }
+}
+ZoomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomService, deps: [{ token: BroadcastService }], target: i0.ɵɵFactoryTarget.Injectable });
+ZoomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: BroadcastService }]; } });
+
+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.category, d3.scaleOrdinal)
+            .set(ScaleType.log, d3.scaleLog)
+            .set(ScaleType.pow, d3.scalePow)
+            .set(ScaleType.sqrt, d3.scaleSqrt);
+        this.xAxisMap = combineLatest([
+            this.chartService.size,
+            this.chartService.config,
+        ]).pipe(map((data) => {
+            const [, config] = data;
+            const map = new Map();
+            config.xAxis.map((_, index) => {
+                map.set(index, Axis.createAxis(AxisOrientation.x, config, index));
+            });
+            return map;
+        }));
+        this.yAxisMap = combineLatest([
+            this.chartService.size,
+            this.chartService.config,
+        ]).pipe(map((data) => {
+            const [, config] = data;
+            const map = new Map();
+            config.yAxis.map((_, index) => {
+                map.set(index, Axis.createAxis(AxisOrientation.y, config, index));
+            });
+            return map;
+        }));
+        this.xScaleMap = combineLatest([
+            this.chartService.size,
+            this.chartService.config,
+            this.zoomService.zoomed,
+        ]).pipe(withLatestFrom(this.yAxisMap, this.xAxisMap), map((data) => {
+            var _a;
+            const [[size, config, zoom], yAxes, xAxes] = data;
+            const map = new Map();
+            const left = [...yAxes.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 = [...yAxes.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;
+            xAxes.forEach((axis) => {
+                var _a, _b;
+                let domain = axis.extremes;
+                if (axis === null || axis === void 0 ? void 0 : axis.options.inverted) {
+                    domain = [...axis.extremes].reverse();
+                }
+                const scale = this.scaleMapping
+                    .get(axis.options.scaleType.type)()
+                    .domain(domain)
+                    .range([0, finalWidth]);
+                if (axis.options.scaleType.type === ScaleType.log) {
+                    scale.base(axis.options.scaleType.base);
+                }
+                map.set(axis.index, scale);
+                const hasCache = this.transformCacheX.has(axis.index);
+                const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.x ||
+                    ((_b = zoom.target) === null || _b === void 0 ? void 0 : _b.index) !== axis.index;
+                if (hasCache && shouldRestore) {
+                    const restoredTransform = this.transformCacheX.get(axis.index);
+                    map.set(axis.index, restoredTransform.rescaleX(scale));
+                }
+            });
+            if (zoom) {
+                const event = zoom.event;
+                if (((_a = zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) === AxisOrientation.x) {
+                    const currentScale = map.get(zoom.target.index);
+                    const rescaled = event.transform.rescaleX(currentScale);
+                    map.set(zoom.target.index, rescaled);
+                    const axis = xAxes.get(zoom.target.index);
+                    this.transformCacheX.set(axis.index, event.transform);
+                }
+            }
+            return map;
+        }), shareReplay(1));
+        this.yScaleMap = combineLatest([
+            this.chartService.size,
+            this.chartService.config,
+            this.zoomService.zoomed,
+        ]).pipe(withLatestFrom(this.yAxisMap, this.xAxisMap), map((data) => {
+            var _a;
+            const [[size, config, zoom], yAxes, xAxes] = data;
+            const map = new Map();
+            const top = [...xAxes.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 = [...xAxes.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;
+            yAxes.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([0, finalHeight]);
+                if (axis.options.scaleType.type === ScaleType.log) {
+                    scale.base(axis.options.scaleType.base);
+                }
+                map.set(axis.index, scale);
+                const hasCache = this.transformCacheY.has(axis.index);
+                const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.y ||
+                    ((_b = zoom.target) === null || _b === void 0 ? void 0 : _b.index) !== axis.index;
+                if (hasCache && shouldRestore) {
+                    const restoredTransform = this.transformCacheY.get(axis.index);
+                    map.set(axis.index, restoredTransform.rescaleY(scale));
+                }
+            });
+            if (zoom) {
+                const event = zoom.event;
+                if (((_a = zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) === AxisOrientation.y) {
+                    const currentScale = map.get(zoom.target.index);
+                    const rescaled = event.transform.rescaleY(currentScale);
+                    map.set(zoom.target.index, rescaled);
+                    const axis = yAxes.get(zoom.target.index);
+                    this.transformCacheY.set(axis.index, event.transform);
+                }
+            }
+            return map;
+        }), shareReplay(1));
+    }
+}
+ScaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScaleService, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Injectable });
+ScaleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScaleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScaleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }]; } });
+
+class BrushService {
+    constructor(broadcastService) {
+        this.broadcastService = broadcastService;
+        this.brushMap = new Map()
+            .set(BrushType.x, d3.brushX())
+            .set(BrushType.y, d3.brushY());
+    }
+    applyBrush(svgElement, config, brushScale) {
+        var _a, _b, _c, _d, _e;
+        (_a = this.broadcastSubscribtion) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        if ((_b = config.brush) === null || _b === void 0 ? void 0 : _b.enable) {
+            const 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);
+            const container = d3.select(svgElement.nativeElement);
+            const brushBehavior = brush.on('start brush end', (_) => {
+                var _a, _b, _c;
+                if (_.sourceEvent) {
+                    const [from, to] = _.selection;
+                    if (to - from < 5) {
+                        container.call(brush.move, [from, to]);
+                        return;
+                    }
+                    const brushMessage = {
+                        event: _,
+                        selection: [brushScale.invert(from), brushScale.invert(to)],
+                        brushType: (_b = (_a = config === null || config === void 0 ? void 0 : config.brush) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : BrushType.x,
+                        brushScale,
+                    };
+                    this.broadcastService.broadcast({
+                        channel: (_c = config === null || config === void 0 ? void 0 : config.zoom) === null || _c === void 0 ? void 0 : _c.syncChannel,
+                        message: brushMessage,
+                    });
+                }
+            });
+            setTimeout(() => {
+                container.call(brushBehavior);
+                container.call(brush.move, brushScale.domain().map(brushScale), {});
+            }, 0);
+            this.broadcastSubscribtion = this.broadcastService
+                .subscribeToChannel((_e = config === null || config === void 0 ? void 0 : config.zoom) === null || _e === void 0 ? void 0 : _e.syncChannel)
+                .pipe(map((_) => {
+                if ('axis' in _.message) {
+                    if (_.message.axis.orientation === AxisOrientation.x &&
+                        _.message.axis.index === 0) {
+                        const rescaled = _.message.event.transform.rescaleX(brushScale);
+                        const domain = rescaled.domain();
+                        container.call(brush.move, [
+                            brushScale(domain[0]),
+                            brushScale(domain[1]),
+                        ]);
+                    }
+                }
+            }))
+                .subscribe();
+        }
+    }
+}
+BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, deps: [{ token: BroadcastService }], target: i0.ɵɵFactoryTarget.Injectable });
+BrushService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: BroadcastService }]; } });
+
+class TooltipComponent {
+    constructor(svc, cdr, zoomService, sanitizer, _zone) {
+        this.svc = svc;
+        this.cdr = cdr;
+        this.zoomService = zoomService;
+        this.sanitizer = sanitizer;
+        this._zone = _zone;
+        this.tooltips = [];
+        this.alive = true;
+    }
+    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.getPoisition(_);
+        }), tap(() => this.cdr.detectChanges()));
+        const transformHtml = (html) => {
+            return this.sanitizer.bypassSecurityTrustHtml(html);
+        };
+        const defaultFormatter = (tooltips) => {
+            let html = '';
+            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: ${(_b = _.point.x) === null || _b === void 0 ? void 0 : _b.toFixed(2)} 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 = merge(this.svc.pointerMove.pipe(tap((_) => (this.tooltips = []))), this.svc.tooltips).pipe(takeWhile((_) => this.alive), filter((data) => !(data instanceof MouseEvent)), map((tooltip) => {
+            if (tooltip) {
+                this.tooltips.push(tooltip);
+            }
+            const formatted = formatter
+                ? formatter(this.tooltips)
+                : defaultFormatter(this.tooltips);
+            return formatted;
+        }));
+    }
+    getPoisition(event) {
+        const centerX = this.size.width / 2;
+        const centerY = this.size.height / 2;
+        const padding = { x: 10, y: 10 };
+        const scene = {
+            left: event.pageX > centerX ? 'initial' : `${event.pageX + padding.x}px`,
+            top: event.pageY > centerY ? 'initial' : `${event.pageY + padding.y}px`,
+            bottom: event.pageY > centerY
+                ? `${window.innerHeight - event.pageY}px`
+                : 'initial',
+            right: event.pageX > centerX
+                ? `${window.innerWidth - event.pageX + padding.x}px`
+                : 'initial',
+        };
+        return scene;
+    }
+    ngOnDestroy() {
+        this.alive = false;
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, ngImport: i0, template: "<ng-container *ngIf=\"position | async as p\">\n\n  <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2 padding-2 border-radius-1\"\n       [style.position]=\"'fixed'\"\n       [style.opacity]=\"display | async\"\n       style=\"pointer-events: none; min-width: 200px;\"\n       [style.left]=\"p.left\"\n       [style.top]=\"p.top\"\n       [style.bottom]=\"p.bottom\"\n       [style.right]=\"p.right\"\n       [innerHTML]=\"displayTooltips | async\">\n  </div>\n</ng-container>\n\n", styles: [":host{position:absolute;z-index:2}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"position | async as p\">\n\n  <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2 padding-2 border-radius-1\"\n       [style.position]=\"'fixed'\"\n       [style.opacity]=\"display | async\"\n       style=\"pointer-events: none; min-width: 200px;\"\n       [style.left]=\"p.left\"\n       [style.top]=\"p.top\"\n       [style.bottom]=\"p.bottom\"\n       [style.right]=\"p.right\"\n       [innerHTML]=\"displayTooltips | async\">\n  </div>\n</ng-container>\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 }]; }, propDecorators: { size: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }] } });
+
+class YAxisComponent {
+    constructor() {
+        this._alive = true;
+    }
+    set scale(scale) {
+        this._scale = scale;
+        this.draw();
+    }
+    get scale() {
+        return this._scale;
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._alive = false;
+    }
+    ngAfterViewInit() {
+        this.draw();
+    }
+    getLabelTransform() {
+        return `translate(${this.axis.options.opposite
+            ? this.axis.selfSize - 24
+            : -this.axis.selfSize + 24}, ${this.size.height / 2}) rotate(${this.axis.options.opposite ? '90' : '-90'})`;
+    }
+    draw() {
+        var _a, _b;
+        if (!this.node || !this.axis) {
+            return;
+        }
+        const axis = this.axis.options.opposite
+            ? d3
+                .axisRight(this.scale)
+                .tickFormat((_a = this.axis.options.tickFormat) !== null && _a !== void 0 ? _a : this.axis.defaultFormatter())
+            : d3
+                .axisLeft(this.scale)
+                .tickFormat((_b = this.axis.options.tickFormat) !== null && _b !== void 0 ? _b : this.axis.defaultFormatter());
+        d3.select(this.node.nativeElement)
+            .call(axis)
+            .call((_) => _.select('.domain').remove());
+    }
+}
+YAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: YAxisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+YAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: YAxisComponent, selector: "[teta-y-axis]", inputs: { axis: "axis", scale: "scale", size: "size" }, viewQueries: [{ propertyName: "node", first: true, predicate: ["svg"], descendants: true }], ngImport: i0, template: "<svg:g #svg></svg:g>\n<svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n  <text dy=\"-8px\" text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n</svg:g>\n", styles: [":host{shape-rendering:crispEdges}::ng-deep .tick text{fill:var(--color-text-70)}::ng-deep .tick line{stroke:var(--color-text-20)}:host .label-axis{fill:var(--color-text-70)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: YAxisComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[teta-y-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:g #svg></svg:g>\n<svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n  <text dy=\"-8px\" text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n</svg:g>\n", styles: [":host{shape-rendering:crispEdges}::ng-deep .tick text{fill:var(--color-text-70)}::ng-deep .tick line{stroke:var(--color-text-20)}:host .label-axis{fill:var(--color-text-70)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { axis: [{
+                type: Input
+            }], scale: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], node: [{
+                type: ViewChild,
+                args: ['svg', { static: false }]
+            }] } });
+
+class XAxisComponent {
+    constructor() {
+        this._alive = true;
+    }
+    set scale(scale) {
+        this._scale = scale;
+        this.draw();
+    }
+    get scale() {
+        return this._scale;
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._alive = false;
+    }
+    ngAfterViewInit() {
+        this.draw();
+    }
+    draw() {
+        var _a, _b;
+        if (!this.node || !this.axis) {
+            return;
+        }
+        const axis = this.axis.options.opposite
+            ? d3
+                .axisTop(this.scale)
+                .tickFormat((_a = this.axis.options.tickFormat) !== null && _a !== void 0 ? _a : this.axis.defaultFormatter())
+            : d3
+                .axisBottom(this.scale)
+                .tickFormat((_b = this.axis.options.tickFormat) !== null && _b !== void 0 ? _b : this.axis.defaultFormatter());
+        d3.select(this.node.nativeElement)
+            .call(axis)
+            .call((_) => _.select('.domain').remove());
+    }
+}
+XAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: XAxisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+XAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: XAxisComponent, selector: "[teta-x-axis]", inputs: { axis: "axis", scale: "scale", size: "size" }, viewQueries: [{ propertyName: "node", first: true, predicate: ["svg"], descendants: true }], ngImport: i0, template: "<svg:g #svg></svg:g>\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: XAxisComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[teta-x-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:g #svg></svg:g>\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { axis: [{
+                type: Input
+            }], scale: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], node: [{
+                type: ViewChild,
+                args: ['svg']
+            }] } });
+
+class GridlinesComponent {
+    constructor() { }
+    draw() {
+        this.tickYValues = this.yScaleMap.get(0).ticks();
+        this.tickXValues = this.xScaleMap.get(0).ticks();
+    }
+    ngOnChanges(changes) {
+        if (changes.hasOwnProperty('xScaleMap') &&
+            changes.hasOwnProperty('yScaleMap')) {
+            this.draw();
+        }
+    }
+}
+GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size", xScaleMap: "xScaleMap", yScaleMap: "yScaleMap" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let tick of tickYValues\">\n  <svg:line [attr.x1]=\"0\" stroke=\"red\"\n            [attr.y1]=\"yScaleMap.get(0)(tick)\"\n            [attr.x2]=\"size?.width\"\n            [attr.y2]=\"yScaleMap.get(0)(tick)\"></svg:line>\n</ng-container>\n\n<ng-container *ngFor=\"let tick of tickXValues\">\n  <svg:line [attr.x1]=\"xScaleMap.get(0)(tick)\"\n            stroke=\"red\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"xScaleMap.get(0)(tick)\"\n            [attr.y2]=\"size?.height\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let tick of tickYValues\">\n  <svg:line [attr.x1]=\"0\" stroke=\"red\"\n            [attr.y1]=\"yScaleMap.get(0)(tick)\"\n            [attr.x2]=\"size?.width\"\n            [attr.y2]=\"yScaleMap.get(0)(tick)\"></svg:line>\n</ng-container>\n\n<ng-container *ngFor=\"let tick of tickXValues\">\n  <svg:line [attr.x1]=\"xScaleMap.get(0)(tick)\"\n            stroke=\"red\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"xScaleMap.get(0)(tick)\"\n            [attr.y2]=\"size?.height\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { size: [{
+                type: Input
+            }], xScaleMap: [{
+                type: Input
+            }], yScaleMap: [{
+                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');
+        const drag = 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') };
+            }
+        })
+            .on('start drag end', (event, d) => {
+            d.value = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
+            this.emit({
+                event,
+                target: d,
+            });
+            this.cdr.detectChanges();
+        });
+        plotlineElement.datum(this.plotLine);
+        grabElement.datum(this.plotLine);
+        if (this.plotLine.draggable) {
+            grabElement.call(drag);
+        }
+    }
+    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: "13.0.1", 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: "12.0.0", version: "13.0.1", 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<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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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<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;
+    }
+    click(event) {
+        this.emit({
+            target: this.plotBand,
+            event
+        });
+    }
+    emit(event) {
+        this.chartService.emitPlotband(event);
+    }
+    ngAfterViewInit() {
+        this.domain = this.scale.domain();
+        const plotbandElement = d3
+            .select(this.element.nativeElement)
+            .select('.plotband');
+        // .on('click', (event, d: PlotBand) => {
+        //   this.emit({
+        //     event,
+        //     target: d,
+        //   });
+        // });
+        const grabElements = d3
+            .select(this.element.nativeElement)
+            .selectAll('.grabber');
+        const drag = 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') };
+            }
+        })
+            .on('start drag end', (event, d) => {
+            let bandSize = parseFloat(plotbandElement.attr(this.axis.orientation === AxisOrientation.x ? 'width' : 'height'));
+            d.to = this.scale.invert(event[AxisOrientation[this.axis.orientation]] +
+                (this.axis.orientation === AxisOrientation.x ? bandSize : 0));
+            d.from = this.scale.invert(event[AxisOrientation[this.axis.orientation]] +
+                (this.axis.orientation === AxisOrientation.y ? bandSize : 0));
+            this.emit({
+                event,
+                target: d,
+            });
+            this.cdr.detectChanges();
+        });
+        let grabberKey;
+        const resize = d3
+            .drag()
+            .on('start drag end', (event, d) => {
+            requestAnimationFrame(() => {
+                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.domain);
+                const max = Math.max(...this.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);
+        }
+    }
+    get bandSize() {
+        return Math.abs(this.scale(this.plotBand.to) - this.scale(this.plotBand.from));
+    }
+    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);
+    }
+    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: "13.0.1", 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: "12.0.0", version: "13.0.1", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)" } }, ngImport: i0, template: "<svg:rect\n          class=\"plotband\"\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 ? to : null\"\n          [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'red'\"\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\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\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=\"grabber\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\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}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PlotBandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[teta-plot-band]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n          class=\"plotband\"\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 ? to : null\"\n          [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'red'\"\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\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\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=\"grabber\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\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}\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']]
+            }] } });
+
+class SeriesBaseComponent {
+    constructor(svc, cdr, scaleService, zoomService, element) {
+        this.svc = svc;
+        this.cdr = cdr;
+        this.scaleService = scaleService;
+        this.zoomService = zoomService;
+        this.element = element;
+    }
+    ngOnInit() { }
+}
+SeriesBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesBaseComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SeriesBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SeriesBaseComponent, selector: "ng-component", inputs: { config: "config", series: "series", size: "size", rect: "rect" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], series: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rect: [{
+                type: Input
+            }] } });
+
+var DragPointType;
+(function (DragPointType) {
+    DragPointType[DragPointType["x"] = 0] = "x";
+    DragPointType[DragPointType["y"] = 1] = "y";
+    DragPointType[DragPointType["xy"] = 2] = "xy";
+})(DragPointType || (DragPointType = {}));
+
+class LineSeriesComponent 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.transform = this.svc.pointerMove.pipe(withLatestFrom(this.scaleService.xScaleMap, this.scaleService.yScaleMap), map((data) => {
+            const [event, x, y] = data;
+            return this.getTransform(event, x, y);
+        }), tap(() => this.cdr.detectChanges()));
+        this.path = combineLatest([
+            this.scaleService.xScaleMap,
+            this.scaleService.yScaleMap,
+        ]).pipe(map((data) => {
+            const [x, y] = data;
+            this.x = x.get(this.series.xAxisIndex);
+            this.y = y.get(this.series.yAxisIndex);
+            const line = d3
+                .line()
+                .defined((point) => point.x !== null && point.y !== null && !isNaN(point.x) && !isNaN(point.y))
+                .x((point) => this.x(point.x))
+                .y((point) => this.y(point.y));
+            return line(this.series.data);
+        }));
+    }
+    ngAfterViewInit() {
+        var _a;
+        const drag = (node, event, d) => {
+            var _a, _b, _c, _d;
+            if (((_a = d.marker) === null || _a === void 0 ? void 0 : _a.dragType) === DragPointType.x ||
+                ((_b = d.marker) === null || _b === void 0 ? void 0 : _b.dragType) === DragPointType.xy) {
+                d.x = this.x.invert(event.x);
+            }
+            if (((_c = d.marker) === null || _c === void 0 ? void 0 : _c.dragType) === DragPointType.y ||
+                ((_d = d.marker) === null || _d === void 0 ? void 0 : _d.dragType) === DragPointType.xy) {
+                d.y = this.y.invert(event.y);
+            }
+            this.svc.emitPoint({
+                target: {
+                    series: this.series,
+                    point: d,
+                },
+                event,
+            });
+            this.cdr.detectChanges();
+        };
+        const dragMarkers = d3
+            .drag()
+            .subject(function (event, d) {
+            const node = d3.select(this);
+            return { x: node.attr('cx'), y: node.attr('cy') };
+        })
+            .on('start drag end', function (event, d) {
+            const node = d3.select(this);
+            drag(node, event, d);
+        });
+        const draggableMarkers = (_a = this.series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => { var _a; return (_ === null || _ === void 0 ? void 0 : _.marker) && ((_a = _ === null || _ === void 0 ? void 0 : _.marker) === null || _a === void 0 ? void 0 : _a.draggable); });
+        const element = d3
+            .select(this.element.nativeElement)
+            .selectAll('.draggable-marker')
+            .data(draggableMarkers);
+        element.call(dragMarkers);
+        this.svgElement = d3
+            .select(this.element.nativeElement)
+            .select('.line')
+            .node();
+    }
+    getMarkers() {
+        var _a;
+        return (_a = this.series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => _ === null || _ === void 0 ? void 0 : _.marker);
+    }
+    getTransform(event, x, y) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const mouse = [event === null || event === void 0 ? void 0 : event.offsetX, event === null || event === void 0 ? void 0 : event.offsetY];
+        const foundX = x.get(this.series.xAxisIndex);
+        const foundY = y.get(this.series.yAxisIndex);
+        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];
+            const x0 = foundX.invert(pointer);
+            const rightId = bisect(this.series.data, x0);
+            const range = foundY.range();
+            const intersect = lineIntersection(pointer, range[0], pointer, range[1], foundX((_c = this.series.data[rightId - 1]) === null || _c === void 0 ? void 0 : _c.x), foundY((_d = this.series.data[rightId - 1]) === null || _d === void 0 ? void 0 : _d.y), foundX((_e = this.series.data[rightId]) === null || _e === void 0 ? void 0 : _e.x), foundY((_f = this.series.data[rightId]) === null || _f === void 0 ? void 0 : _f.y));
+            this.svc.setTooltip({
+                point: { x: foundX.invert(intersect.x), y: foundY.invert(intersect.y) },
+                series: this.series,
+            });
+            return {
+                x: intersect.x,
+                y: intersect.y,
+            };
+        }
+        if (tooltipTracking === TooltipTracking.y) {
+            const bisect = d3.bisector((_) => _.y).right;
+            const y0 = foundY.invert(mouse[1]);
+            const rightId = bisect(this.series.data, y0);
+            const range = foundX.range();
+            const intersect = lineIntersection(range[0], mouse[1], range[1], mouse[1], foundX((_g = this.series.data[rightId - 1]) === null || _g === void 0 ? void 0 : _g.x), foundY((_h = this.series.data[rightId - 1]) === null || _h === void 0 ? void 0 : _h.y), foundX((_j = this.series.data[rightId]) === null || _j === void 0 ? void 0 : _j.x), foundY((_k = this.series.data[rightId]) === null || _k === void 0 ? void 0 : _k.y));
+            this.svc.setTooltip({
+                point: {
+                    x: foundX.invert(intersect.x),
+                    y: foundY.invert(intersect.y),
+                },
+                series: this.series,
+            });
+            return {
+                x: intersect.x,
+                y: intersect.y,
+            };
+        }
+    }
+}
+LineSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", 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: "12.0.0", version: "13.0.1", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "\n  <svg:path\n    class=\"line\"\n    [attr.d]=\"path | async\"\n    [attr.stroke]=\"series.color\"\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 !== undefined && t.y!== undefined\"\n      r=\"3\"\n      [attr.fill]=\"series.color\"\n      [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n    >\n    </svg:circle>\n  </ng-container>\n\n  <ng-container *ngIf=\"getMarkers() as markers\">\n      <svg:circle\n        class=\"marker\"\n        *ngFor=\"let point of markers\"\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: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LineSeriesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n  <svg:path\n    class=\"line\"\n    [attr.d]=\"path | async\"\n    [attr.stroke]=\"series.color\"\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 !== undefined && t.y!== undefined\"\n      r=\"3\"\n      [attr.fill]=\"series.color\"\n      [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n    >\n    </svg:circle>\n  </ng-container>\n\n  <ng-container *ngIf=\"getMarkers() as markers\">\n      <svg:circle\n        class=\"marker\"\n        *ngFor=\"let point of markers\"\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: [".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;
+    }
+    ngOnInit() {
+        // const x = this.scaleService.xScaleMap.get(this.series.xAxisIndex);
+        // const y = this.scaleService.yScaleMap.get(this.series.yAxisIndex);
+        //
+        // const domain = this.series.data?.map((_: BasePoint) => _.x);
+        // const range = [x(domain[0]), x(domain[domain?.length - 1])];
+        //
+        // this.scaleBand = d3.scaleBand<number>().domain(domain).range(range);
+        //
+        // this.y = y;
+    }
+    width() {
+        return this.scaleBand.bandwidth();
+    }
+    height(point) {
+        return Math.abs(this.y(0) - this.y(point.y));
+    }
+    getX(point) {
+        return this.scaleBand(point.x);
+    }
+    getY(point) {
+        return this.y(point.y);
+    }
+    ngOnChanges(changes) { }
+}
+BarSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", 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: "12.0.0", version: "13.0.1", type: BarSeriesComponent, selector: "svg:svg[teta-bar-series]", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg:rect *ngFor=\"let point of series.data\" [attr.y]=\"getY(point)\" [attr.x]=\"getX(point)\" [attr.width]=\"width()\"\n          [attr.height]=\"height(point)\"\n          [attr.fill]=\"point.color\"></svg:rect>\n", styles: [""], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BarSeriesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'svg:svg[teta-bar-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect *ngFor=\"let point of series.data\" [attr.y]=\"getY(point)\" [attr.x]=\"getX(point)\" [attr.width]=\"width()\"\n          [attr.height]=\"height(point)\"\n          [attr.fill]=\"point.color\"></svg:rect>\n", styles: [""] }]
+        }], 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.transform = this.svc.pointerMove.pipe(withLatestFrom(this.scaleService.xScaleMap, this.scaleService.yScaleMap), map((data) => {
+            const [event, x, y] = data;
+            return this.getTransform(event, x, y);
+        }), tap(() => this.cdr.detectChanges()));
+        this.x = this.scaleService.xScaleMap.pipe(map(_ => _.get(this.series.xAxisIndex)));
+        this.y = this.scaleService.yScaleMap.pipe(map(_ => _.get(this.series.yAxisIndex)));
+        // this.path = combineLatest([
+        //   ,
+        //   this.scaleService.yScaleMap,
+        // ]).pipe(
+        //   map((data: [Map<number, any>, Map<number, any>]) => {
+        //     const [x, y] = data;
+        //     this.x = x.get(this.series.xAxisIndex);
+        //     this.y = y.get(this.series.yAxisIndex);
+        //
+        //     const line = d3
+        //       .line<BasePoint>()
+        //       .defined((point) => point.x !== null || point.y !== null)
+        //       .x((point) => this.x(point.x))
+        //       .y((point) => this.y(point.y));
+        //
+        //     return line(this.series.data);
+        //   })
+        // );
+    }
+    ngAfterViewInit() {
+        // const drag = (node, event: d3.D3DragEvent<any, any, any>, d: BasePoint) => {
+        //   if (
+        //     d.marker?.dragType === DragPointType.x ||
+        //     d.marker?.dragType === DragPointType.xy
+        //   ) {
+        //     d.x = this.x.invert(event.x);
+        //   }
+        //
+        //   if (
+        //     d.marker?.dragType === DragPointType.y ||
+        //     d.marker?.dragType === DragPointType.xy
+        //   ) {
+        //     d.y = this.y.invert(event.y);
+        //   }
+        //
+        //   this.svc.emitPoint({
+        //     target: {
+        //       series: this.series,
+        //       point: d,
+        //     },
+        //     event,
+        //   });
+        //
+        //   this.cdr.detectChanges();
+        // };
+        // // const dragMarkers = d3
+        // //   .drag()
+        // //   .subject(function (event, d: BasePoint) {
+        // //     const node = d3.select(this);
+        // //     return { x: node.attr('cx'), y: node.attr('cy') };
+        // //   })
+        // //   .on(
+        // //     'start drag end',
+        // //     function (event: d3.D3DragEvent<any, any, any>, d: BasePoint) {
+        // //       const node = d3.select(this);
+        // //
+        // //       drag(node, event, d);
+        // //     }
+        // //   );
+        //
+        // const draggableMarkers = this.series.data?.filter(
+        //   (_) => _?.marker && _?.marker?.draggable
+        // );
+        //
+        // const element = d3
+        //   .select(this.element.nativeElement)
+        //   .selectAll('.draggable-marker')
+        //   .data(draggableMarkers);
+        //
+        // element.call(dragMarkers as any);
+        //
+        // this.svgElement = d3
+        //   .select(this.element.nativeElement)
+        //   .select('.line')
+        //   .node() as SVGGeometryElement;
+    }
+    getMarkers() {
+        var _a;
+        return (_a = this.series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => _ === null || _ === void 0 ? void 0 : _.marker);
+    }
+    getTransform(event, x, y) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const mouse = [event === null || event === void 0 ? void 0 : event.offsetX, event === null || event === void 0 ? void 0 : event.offsetY];
+        const foundX = x.get(this.series.xAxisIndex);
+        const foundY = y.get(this.series.yAxisIndex);
+        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];
+            const x0 = foundX.invert(pointer);
+            const rightId = bisect(this.series.data, x0);
+            const range = foundY.range();
+            const intersect = lineIntersection(pointer, range[0], pointer, range[1], foundX((_c = this.series.data[rightId - 1]) === null || _c === void 0 ? void 0 : _c.x), foundY((_d = this.series.data[rightId - 1]) === null || _d === void 0 ? void 0 : _d.y), foundX((_e = this.series.data[rightId]) === null || _e === void 0 ? void 0 : _e.x), foundY((_f = this.series.data[rightId]) === null || _f === void 0 ? void 0 : _f.y));
+            this.svc.setTooltip({
+                point: { x: foundX.invert(intersect.x), y: foundY.invert(intersect.y) },
+                series: this.series,
+            });
+            return {
+                x: intersect.x,
+                y: intersect.y,
+            };
+        }
+        if (tooltipTracking === TooltipTracking.y) {
+            const bisect = d3.bisector((_) => _.y).right;
+            const y0 = foundY.invert(mouse[1]);
+            const rightId = bisect(this.series.data, y0);
+            const range = foundX.range();
+            const intersect = lineIntersection(range[0], mouse[1], range[1], mouse[1], foundX((_g = this.series.data[rightId - 1]) === null || _g === void 0 ? void 0 : _g.x), foundY((_h = this.series.data[rightId - 1]) === null || _h === void 0 ? void 0 : _h.y), foundX((_j = this.series.data[rightId]) === null || _j === void 0 ? void 0 : _j.x), foundY((_k = this.series.data[rightId]) === null || _k === void 0 ? void 0 : _k.y));
+            this.svc.setTooltip({
+                point: {
+                    x: foundX.invert(intersect.x),
+                    y: foundY.invert(intersect.y),
+                },
+                series: this.series,
+            });
+            return {
+                x: intersect.x,
+                y: intersect.y,
+            };
+        }
+    }
+}
+ScatterSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", 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: "12.0.0", version: "13.0.1", 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  <svg:circle\n    class=\"line\"\n    *ngFor=\"let point of series.data\"\n    [attr.cx]=\"scales.x(point.x)\"\n    [attr.cy]=\"scales.y(point.y)\"\n    r=\"1\"\n    [attr.stroke]=\"series.color\"\n    [attr.fill]=\"series.color\"\n    [attr.stroke-width]=\"series.style?.strokeWidth\">\n  </svg:circle>\n</ng-container>\n<!--<ng-container *ngIf=\"transform | async as t\">-->\n<!--  <svg:circle-->\n<!--    *ngIf=\"t.x !== undefined && t.y!== undefined\"-->\n<!--    r=\"3\"-->\n<!--    [attr.fill]=\"series.color\"-->\n<!--    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"-->\n<!--  >-->\n<!--  </svg:circle>-->\n<!--</ng-container>-->\n\n<!--<ng-container *ngIf=\"getMarkers() as markers\">-->\n<!--  <svg:circle-->\n<!--    class=\"marker\"-->\n<!--    *ngFor=\"let point of markers\"-->\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: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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  <svg:circle\n    class=\"line\"\n    *ngFor=\"let point of series.data\"\n    [attr.cx]=\"scales.x(point.x)\"\n    [attr.cy]=\"scales.y(point.y)\"\n    r=\"1\"\n    [attr.stroke]=\"series.color\"\n    [attr.fill]=\"series.color\"\n    [attr.stroke-width]=\"series.style?.strokeWidth\">\n  </svg:circle>\n</ng-container>\n<!--<ng-container *ngIf=\"transform | async as t\">-->\n<!--  <svg:circle-->\n<!--    *ngIf=\"t.x !== undefined && t.y!== undefined\"-->\n<!--    r=\"3\"-->\n<!--    [attr.fill]=\"series.color\"-->\n<!--    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"-->\n<!--  >-->\n<!--  </svg:circle>-->\n<!--</ng-container>-->\n\n<!--<ng-container *ngIf=\"getMarkers() as markers\">-->\n<!--  <svg:circle-->\n<!--    class=\"marker\"-->\n<!--    *ngFor=\"let point of markers\"-->\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: [".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 SeriesHostComponent {
+    constructor(viewContainerRef, chartService) {
+        this.viewContainerRef = viewContainerRef;
+        this.chartService = chartService;
+        this.defaultSeriesTypeMapping = new Map()
+            .set(SeriesType.line, LineSeriesComponent)
+            .set(SeriesType.bar, BarSeriesComponent)
+            .set(SeriesType.scatter, ScatterSeriesComponent);
+        this._init = false;
+        this.chartService.size
+            .pipe(tap(() => {
+            var _a;
+            (_a = this._componentRef) === null || _a === void 0 ? void 0 : _a.injector.get(ChangeDetectorRef).detectChanges();
+        }))
+            .subscribe();
+    }
+    ngOnInit() {
+        if (!SeriesBaseComponent.isPrototypeOf(this.series.component)) {
+            this.series.component =
+                this.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._componentRef.instance.size = this.size;
+        this._componentRef.instance.rect = this.rect;
+        this._init = true;
+    }
+    ngOnDestroy() { }
+    ngOnChanges(changes) {
+        if (this._init && changes.hasOwnProperty('series')) {
+            this._componentRef.instance.config = this.config;
+            this._componentRef.instance.series = this.series;
+            this._componentRef.instance.size = this.size;
+            this._componentRef.instance.rect = this.rect;
+            this._componentRef.injector.get(ChangeDetectorRef).markForCheck();
+            this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
+        }
+    }
+}
+SeriesHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesHostComponent, deps: [{ token: i0.ViewContainerRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
+SeriesHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: { config: "config", series: "series", size: "size", rect: "rect" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[teta-series-host]',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: ChartService }]; }, propDecorators: { config: [{
+                type: Input
+            }], series: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rect: [{
+                type: Input
+            }] } });
+
+class ZoomableDirective {
+    constructor(element, svc) {
+        this.element = element;
+        this.svc = svc;
+        this.zoomable = false;
+    }
+    ngOnInit() {
+        var _a, _b, _c, _d;
+        let enable = ((_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);
+        if (enable) {
+            this.zoomable = true;
+            this.svc.applyZoom(this.element, this.config, this.size, this.axis);
+        }
+    }
+    ngAfterViewInit() { }
+}
+ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Directive });
+ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size" }, host: { properties: { "class.zoomable": "this.zoomable" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaZoomable]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }]; }, propDecorators: { config: [{
+                type: Input
+            }], axis: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], zoomable: [{
+                type: HostBinding,
+                args: ['class.zoomable']
+            }] } });
+
+class BrushableDirective {
+    constructor(brushService, chartService, element) {
+        this.brushService = brushService;
+        this.chartService = chartService;
+        this.element = element;
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        this.brushService.applyBrush(this.element, this.config, this.brushScale);
+    }
+}
+BrushableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushableDirective, deps: [{ token: BrushService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BrushableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: BrushableDirective, selector: "svg:svg[tetaBrushable]", inputs: { config: "config", size: "size", brushScale: "brushScale" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'svg:svg[tetaBrushable]',
+                }]
+        }], ctorParameters: function () { return [{ type: BrushService }, { type: ChartService }, { type: i0.ElementRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], brushScale: [{
+                type: Input
+            }] } });
+
+class ChartContainerComponent {
+    constructor(_svc, _cdr, _scaleService, _zoomService, _elementRef) {
+        this._svc = _svc;
+        this._cdr = _cdr;
+        this._scaleService = _scaleService;
+        this._zoomService = _zoomService;
+        this._elementRef = _elementRef;
+        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.yAxisMap = this._scaleService.yAxisMap;
+        this.xAxisMap = this._scaleService.xAxisMap;
+        this.yScaleMap = this._scaleService.yScaleMap;
+        this.xScaleMap = this._scaleService.xScaleMap;
+        this.brushScale = this._scaleService.xScaleMap.pipe(map((map) => {
+            return map.get(0);
+        }));
+        this.visibleRect = combineLatest([
+            this.size,
+            this.xAxisMap,
+            this.yAxisMap,
+            this._zoomService.zoomed,
+        ]).pipe(map((data) => {
+            const [size, x, y] = data;
+            const yAxesArray = [...y.values()];
+            const xAxesArray = [...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,
+                y: top,
+                width: size.width - left - right + 1,
+                height: size.height - top - bottom + 1,
+            };
+        }), tap((_) => this._cdr.detectChanges()));
+    }
+    ngOnInit() {
+        this.uniqId = (Date.now() + Math.random()).toString(36);
+        this._observer = new ResizeObserver((entries) => {
+            if (!Array.isArray(entries) || !entries.length) {
+                return;
+            }
+            this._svc.setSize(entries[0].contentRect);
+        });
+        this._observer.observe(this._elementRef.nativeElement);
+    }
+    ngAfterViewInit() { }
+    getTranslate(axis, size) {
+        return combineLatest([this.xAxisMap, this.yAxisMap]).pipe(map((data) => {
+            const [x, y] = data;
+            const xAxesArray = [...x.values()];
+            const yAxesArray = [...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, 0);
+            const nonOppisteTranslateY = nonOppositeOffsetY.reduce((acc, curr) => acc + curr.selfSize, 0);
+            const oppositeTranslateX = oppositeOffsetX.reduce((acc, curr) => acc + curr.selfSize, 0);
+            const nonOppisteTranslateX = nonOppositeOffsetX.reduce((acc, curr) => acc + curr.selfSize, 0);
+            const left = yAxesArray
+                .filter((_) => _.options.visible && _.options.opposite !== true)
+                .reduce((acc, curr) => acc + curr.selfSize, 0);
+            const top = xAxesArray
+                .filter((_) => _.options.visible && _.options.opposite === true)
+                .reduce((acc, curr) => acc + curr.selfSize, 0);
+            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;
+    }
+    mouseMove(event) {
+        this._svc.setPointerMove(event);
+    }
+    mouseLeave(event) {
+        this._svc.setPointerMove(event);
+    }
+    id() {
+        return this.uniqId;
+    }
+}
+ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  xAxisMap: xAxisMap | async,\n  yAxisMap: yAxisMap | async,\n  xScaleMap: xScaleMap | async,\n  yScaleMap: yScaleMap | async\n} as data\">\n\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\" [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n  <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n    <g class=\"y-axis-container\">\n      <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue; trackBy: identify\">\n        <g\n          teta-y-axis\n          [axis]=\"item.value\"\n          [scale]=\"data.yScaleMap.get(item.key)\"\n          [size]=\"data.size\"\n          [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n        <rect\n          tetaZoomable\n          fill-opacity=\"0\"\n          [axis]=\"item.value\"\n          [config]=\"config | async\"\n          [size]=\"data.size\"\n          [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n          [attr.y]=\"0\"\n          [attr.height]=\"data.size.width\"\n          [attr.width]=\"item.value.selfSize\"\n          [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n      </ng-container>\n    </g>\n    <g class=\"x-axis-container\">\n      <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue; trackBy: identify\">\n        <g\n          teta-x-axis\n          [axis]=\"item.value\"\n          [scale]=\"data.xScaleMap.get(item.key)\"\n          [size]=\"data.size\"\n          [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n\n        <rect\n          tetaZoomable\n          fill-opacity=\"0\"\n          [axis]=\"item.value\"\n          [config]=\"config | async\"\n          [size]=\"data.size\"\n          [attr.x]=\"0\"\n          [attr.y]=\"0\"\n          [attr.width]=\"data.size.width\"\n          [attr.height]=\"item.value.selfSize\"\n          [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n      </ng-container>\n    </g>\n  </svg>\n  <ng-container *ngIf=\"visibleRect | async as rect\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      [size]=\"data.size\"\n      [brushScale]=\"brushScale | async\"\n      [config]=\"config | async\"\n      [attr.width]=\"rect.width\"\n      [attr.height]=\"rect.height\"\n      [attr.transform]=\"'translate('+ rect.x +', '+ rect.y +')'\"\n      [attr.viewBox]=\"'0 0 ' + rect.width + ' ' + rect.height\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      <g>\n        <g>\n          <g class=\"gridlines\"\n             teta-gridlines\n             [size]=\"data.size\"\n             [xScaleMap]=\"data.xScaleMap\"\n             [yScaleMap]=\"data.yScaleMap\"></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.xScaleMap.get(i)\"\n                 [size]=\"data.size\"\n                 [axis]=\"data.xAxisMap.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.yScaleMap.get(i)\"\n                 [size]=\"data.size\"\n                 [axis]=\"data.yAxisMap.get(i)\"></g>\n            </ng-container>\n          </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.xScaleMap.get(i)\"\n                 [size]=\"data.size\"\n                 [axis]=\"data.xAxisMap.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.yScaleMap.get(i)\"\n                 [size]=\"data.size\"\n                 [axis]=\"data.yAxisMap.get(i)\"></g>\n            </ng-container>\n          </g>\n          <g class=\"series-container\">\n            <g teta-series-host\n               *ngFor=\"let series of data.config.series\"\n               [config]=\"data.config\"\n               [series]=\"series\"\n               [size]=\"data.size\"></g>\n          </g>\n        </g>\n      </g>\n    </svg>\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}\n"], components: [{ type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "scale", "size"] }, { type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "scale", "size"] }, { type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size", "xScaleMap", "yScaleMap"] }, { type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series", "size", "rect"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { type: BrushableDirective, selector: "svg:svg[tetaBrushable]", inputs: ["config", "size", "brushScale"] }], pipes: { "async": i4.AsyncPipe, "keyvalue": i4.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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  xAxisMap: xAxisMap | async,\n  yAxisMap: yAxisMap | async,\n  xScaleMap: xScaleMap | async,\n  yScaleMap: yScaleMap | async\n} as data\">\n\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\" [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n  <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n    <g class=\"y-axis-container\">\n      <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue; trackBy: identify\">\n        <g\n          teta-y-axis\n          [axis]=\"item.value\"\n          [scale]=\"data.yScaleMap.get(item.key)\"\n          [size]=\"data.size\"\n          [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n        <rect\n          tetaZoomable\n          fill-opacity=\"0\"\n          [axis]=\"item.value\"\n          [config]=\"config | async\"\n          [size]=\"data.size\"\n          [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n          [attr.y]=\"0\"\n          [attr.height]=\"data.size.width\"\n          [attr.width]=\"item.value.selfSize\"\n          [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n      </ng-container>\n    </g>\n    <g class=\"x-axis-container\">\n      <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue; trackBy: identify\">\n        <g\n          teta-x-axis\n          [axis]=\"item.value\"\n          [scale]=\"data.xScaleMap.get(item.key)\"\n          [size]=\"data.size\"\n          [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n\n        <rect\n          tetaZoomable\n          fill-opacity=\"0\"\n          [axis]=\"item.value\"\n          [config]=\"config | async\"\n          [size]=\"data.size\"\n          [attr.x]=\"0\"\n          [attr.y]=\"0\"\n          [attr.width]=\"data.size.width\"\n          [attr.height]=\"item.value.selfSize\"\n          [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n      </ng-container>\n    </g>\n  </svg>\n  <ng-container *ngIf=\"visibleRect | async as rect\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      [size]=\"data.size\"\n      [brushScale]=\"brushScale | async\"\n      [config]=\"config | async\"\n      [attr.width]=\"rect.width\"\n      [attr.height]=\"rect.height\"\n      [attr.transform]=\"'translate('+ rect.x +', '+ rect.y +')'\"\n      [attr.viewBox]=\"'0 0 ' + rect.width + ' ' + rect.height\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      <g>\n        <g>\n          <g class=\"gridlines\"\n             teta-gridlines\n             [size]=\"data.size\"\n             [xScaleMap]=\"data.xScaleMap\"\n             [yScaleMap]=\"data.yScaleMap\"></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.xScaleMap.get(i)\"\n                 [size]=\"data.size\"\n                 [axis]=\"data.xAxisMap.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.yScaleMap.get(i)\"\n                 [size]=\"data.size\"\n                 [axis]=\"data.yAxisMap.get(i)\"></g>\n            </ng-container>\n          </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.xScaleMap.get(i)\"\n                 [size]=\"data.size\"\n                 [axis]=\"data.xAxisMap.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.yScaleMap.get(i)\"\n                 [size]=\"data.size\"\n                 [axis]=\"data.yAxisMap.get(i)\"></g>\n            </ng-container>\n          </g>\n          <g class=\"series-container\">\n            <g teta-series-host\n               *ngFor=\"let series of data.config.series\"\n               [config]=\"data.config\"\n               [series]=\"series\"\n               [size]=\"data.size\"></g>\n          </g>\n        </g>\n      </g>\n    </svg>\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}\n"] }]
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
+
+class LegendComponent {
+    constructor() {
+        this.sizeMapping = new Map()
+            .set(SeriesType.line, 2)
+            .set(SeriesType.bar, 12);
+        this.classLegend = true;
+    }
+    getHeight(serie) {
+        var _a;
+        return this.sizeMapping.get((_a = serie.type) !== null && _a !== void 0 ? _a : SeriesType.line);
+    }
+}
+LegendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", 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\">\n      <div class=\"legend-icon-form\" [style.height.px]=\"getHeight(serie)\" [style.background-color]=\"serie.color\"></div>\n      <div class=\"legend-label\">{{ 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"], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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\">\n      <div class=\"legend-icon-form\" [style.height.px]=\"getHeight(serie)\" [style.background-color]=\"serie.color\"></div>\n      <div class=\"legend-label\">{{ 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 []; }, propDecorators: { series: [{
+                type: Input
+            }], classLegend: [{
+                type: HostBinding,
+                args: ['class.padding-bottom-4']
+            }] } });
+
+class ChartComponent {
+    constructor(_svc, _zoomService) {
+        this._svc = _svc;
+        this._zoomService = _zoomService;
+        this.plotBandsMove = new EventEmitter();
+        this.plotBandsClick = new EventEmitter();
+        this.plotLinesMove = new EventEmitter();
+        this.pointMove = new EventEmitter();
+        this._alive = true;
+        this.svcConfig = this._svc.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) {
+        this._svc.setConfig(config);
+    }
+    ngOnChanges(changes) { }
+    ngOnInit() {
+        this._svc.plotBandEvent
+            .pipe(takeWhile(() => this._alive))
+            .subscribe((_) => {
+            this.plotBandsMove.emit(_);
+        });
+        this._svc.plotLineMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
+            this.plotLinesMove.emit(_);
+        });
+        this._svc.pointMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
+            this.pointMove.emit(_);
+        });
+        this._svc.plotBandClick
+            .pipe(takeWhile(() => this._alive))
+            .subscribe((_) => {
+            this.plotBandsClick.emit(_);
+        });
+    }
+    ngAfterViewInit() { }
+    ngOnDestroy() {
+        var _a;
+        this._alive = false;
+        (_a = this._zoomService.broadcastSubscription) === null || _a === void 0 ? void 0 : _a.forEach((sub) => {
+            sub.unsubscribe();
+        });
+    }
+}
+ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Component });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { plotBandsMove: "plotBandsMove", plotBandsClick: "plotBandsClick", plotLinesMove: "plotLinesMove", pointMove: "pointMove" }, 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\"></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 align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], components: [{ type: ChartContainerComponent, selector: "teta-chart-container" }, { type: LegendComponent, selector: "teta-legend", inputs: ["series"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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\"></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 align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }]; }, propDecorators: { plotBandsMove: [{
+                type: Output
+            }], plotBandsClick: [{
+                type: Output
+            }], plotLinesMove: [{
+                type: Output
+            }], pointMove: [{
+                type: Output
+            }], config: [{
+                type: Input
+            }] } });
+
+class ChartModule {
+}
+ChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, declarations: [ChartComponent,
+        SeriesHostComponent,
+        ChartContainerComponent,
+        LegendComponent,
+        SeriesBaseComponent,
+        LineSeriesComponent,
+        GridlinesComponent,
+        XAxisComponent,
+        YAxisComponent,
+        PlotlineComponent,
+        PlotBandComponent,
+        BarSeriesComponent,
+        TooltipComponent,
+        ZoomableDirective,
+        BrushableDirective,
+        ScatterSeriesComponent], imports: [CommonModule], exports: [ChartComponent] });
+ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ChartComponent,
+                        SeriesHostComponent,
+                        ChartContainerComponent,
+                        LegendComponent,
+                        SeriesBaseComponent,
+                        LineSeriesComponent,
+                        GridlinesComponent,
+                        XAxisComponent,
+                        YAxisComponent,
+                        PlotlineComponent,
+                        PlotBandComponent,
+                        BarSeriesComponent,
+                        TooltipComponent,
+                        ZoomableDirective,
+                        BrushableDirective,
+                        ScatterSeriesComponent,
+                    ],
+                    exports: [ChartComponent],
+                    imports: [CommonModule],
+                }]
+        }] });
+
+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
+ */
+window.__zone_symbol__BLACK_LISTED_EVENTS = ['mousemove'];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AxisOrientation, BrushType, ChartBounds, ChartComponent, ChartModule, ChartService, DragPointType, PlotBand, PlotLine, ScaleType, SeriesType, TooltipTracking, ZoomType };
+//# sourceMappingURL=tetacom-svg-charts.mjs.map