@tetacom/svg-charts 1.0.1

package/dist/fesm2015/tetacom-svg-charts.mjs

@@ -0,0 +1,1589 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef, Directive, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { Subject, map, filter, merge, of, tap, takeWhile } from 'rxjs';
+import * as d3 from 'd3';
+import { zoomIdentity } from 'd3';
+import { maxIndex } from 'd3-array';
+import { throttleTime } from 'rxjs/operators';
+import * as i3 from '@angular/platform-browser';
+
+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);
+            // add negative axis!
+            this.extremes = d3.extent(data, accessor);
+        }
+        if (hasMin) {
+            this.extremes[0] = options === null || options === void 0 ? void 0 : options.min;
+        }
+        if (hasMax) {
+            this.extremes[1] = options === null || options === void 0 ? void 0 : options.max;
+        }
+        return this.extremes;
+    }
+}
+
+var AxisType;
+(function (AxisType) {
+    AxisType[AxisType["number"] = 0] = "number";
+    AxisType[AxisType["time"] = 1] = "time";
+    AxisType[AxisType["category"] = 2] = "category";
+    AxisType[AxisType["log"] = 3] = "log";
+    AxisType[AxisType["pow"] = 4] = "pow";
+})(AxisType || (AxisType = {}));
+
+class Axis {
+    constructor(config) {
+        this._extremes = [0, 0];
+        this.defaultFormatters = new Map()
+            .set(AxisType.number, d3.format(',.2f'))
+            .set(AxisType.time, d3.timeFormat('%B %d, %Y'))
+            .set(AxisType.log, 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
+     * @return {Axis}
+     * New generated axis
+     */
+    static createAxis(orientation, config, index) {
+        const axis = new Axis(config);
+        axis.setLocate(orientation);
+        axis.setIndex(index);
+        axis.setExtremes();
+        axis.setTicksValues();
+        axis.setSelfSize();
+        return axis;
+    }
+    /**
+     *
+     * @param {orientation} orientation
+     * Set locate axis x or y
+     */
+    setLocate(orientation) {
+        this._orientation = orientation;
+    }
+    /**
+     *
+     * @param {number | string} 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);
+        this._extremes = d3.nice(this._extremes[0], this._extremes[1], 10);
+    }
+    setSelfSize() {
+        const builder = new AxisSizeBuilder();
+        this._selfSize = builder.build(this);
+    }
+    setTicksValues() {
+        const ticks = generateTicks(this._extremes);
+        this._ticksValues = ticks;
+    }
+    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.orientation === AxisOrientation.x
+            ? this.chartConfig.xAxis[this.index]
+            : this.chartConfig.yAxis[this.index];
+    }
+    defaultFormatter() {
+        return this.defaultFormatters.get(this.options.type);
+    }
+}
+
+class AxesService {
+    constructor() {
+        this.yAxis = new Map();
+        this.xAxis = new Map();
+    }
+    init(config) {
+        config === null || config === void 0 ? void 0 : config.yAxis.forEach((_, index) => {
+            const axis = Axis.createAxis(AxisOrientation.y, config, index);
+            this.yAxis.set(index, axis);
+        });
+        config === null || config === void 0 ? void 0 : config.xAxis.forEach((_, index) => {
+            const axis = Axis.createAxis(AxisOrientation.x, config, index);
+            this.xAxis.set(index, axis);
+        });
+    }
+}
+AxesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AxesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AxesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AxesService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AxesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ScaleService {
+    constructor(axesService) {
+        this.axesService = axesService;
+        this.yScales = new Map();
+        this.xScales = new Map();
+        this.scaleMapping = new Map()
+            .set(AxisType.number, d3.scaleLinear)
+            .set(AxisType.time, d3.scaleTime)
+            .set(AxisType.category, d3.scaleOrdinal)
+            .set(AxisType.log, d3.scaleLog);
+    }
+    createScales(size, config) {
+        this.yScales.clear();
+        this.xScales.clear();
+        const topBound = [...this.axesService.xAxis.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 bottomBound = [...this.axesService.xAxis.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 leftBound = [...this.axesService.yAxis.values()]
+            .filter((_) => { var _a; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && _.options.opposite !== true; })
+            .reduce((acc, cur) => acc + cur.selfSize, 0);
+        const rightBound = [...this.axesService.yAxis.values()]
+            .filter((_) => { var _a; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && _.options.opposite; })
+            .reduce((acc, cur) => acc + cur.selfSize, 0);
+        this.axesService.yAxis.forEach((axis) => {
+            const scale = this.getScale(axis).range([
+                0,
+                size.height - topBound - bottomBound,
+            ]);
+            this.yScales.set(axis.index, scale);
+        });
+        this.axesService.xAxis.forEach((axis) => {
+            const scale = this.getScale(axis).range([
+                0,
+                size.width - leftBound - rightBound,
+            ]);
+            this.xScales.set(axis.index, scale);
+        });
+    }
+    getScale(axis) {
+        var _a;
+        return this.scaleMapping
+            .get((_a = axis.options) === null || _a === void 0 ? void 0 : _a.type)()
+            .domain(axis.orientation === AxisOrientation.y
+            ? [...axis.extremes].reverse()
+            : axis.extremes);
+    }
+}
+ScaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScaleService, deps: [{ token: AxesService }], 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: AxesService }]; } });
+
+class ChartService {
+    constructor(axesService, scaleService) {
+        this.axesService = axesService;
+        this.scaleService = scaleService;
+        this.size$ = new Subject();
+        this.pointerMove$ = new Subject();
+        this.tooltips$ = new Subject();
+        this.plotbandMove$ = new Subject();
+        this.plotlineMove$ = new Subject();
+        this.pointMove$ = new Subject();
+        this.size = this.size$.asObservable();
+        this.pointerMove = this.pointerMove$.asObservable();
+        this.tooltips = this.tooltips$.asObservable();
+        this.plotbandMove = this.plotbandMove$.asObservable();
+        this.plotlineMove = this.plotlineMove$.asObservable();
+        this.pointMove = this.pointMove$.asObservable();
+        this.size
+            .pipe(map((size) => {
+            this.scaleService.createScales(size, this._config);
+        }))
+            .subscribe();
+    }
+    init(config) {
+        var _a, _b;
+        this._config = config;
+        if (config.inverted) {
+            this._config.series = (_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.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 });
+                    }) });
+            });
+        }
+        this.axesService.init(this._config);
+    }
+    setSize(size) {
+        this.size$.next(size);
+    }
+    setPointerMove(event) {
+        this.pointerMove$.next({ event });
+    }
+    setTooltip(tooltip) {
+        this.tooltips$.next(tooltip);
+    }
+    emitPlotband(event) {
+        this.plotbandMove$.next(event);
+    }
+    emitPlotline(event) {
+        this.plotlineMove$.next(event);
+    }
+    emitPoint(event) {
+        this.pointMove$.next(event);
+    }
+    get config() {
+        return this._config;
+    }
+}
+ChartService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartService, deps: [{ token: AxesService }, { token: ScaleService }], 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 [{ type: AxesService }, { type: ScaleService }]; } });
+
+var ZoomType;
+(function (ZoomType) {
+    ZoomType[ZoomType["x"] = 0] = "x";
+    ZoomType[ZoomType["y"] = 1] = "y";
+    ZoomType[ZoomType["xy"] = 2] = "xy";
+})(ZoomType || (ZoomType = {}));
+
+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));
+    }
+}
+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(scaleService, broadcastService, chartService) {
+        this.scaleService = scaleService;
+        this.broadcastService = broadcastService;
+        this.chartService = chartService;
+        this.zoomed$ = new Subject();
+        this.x = new Map();
+        this.y = new Map();
+        this.initialZoom = zoomIdentity;
+        this.zoomed = this.zoomed$.asObservable();
+        merge(of(1), this.chartService.size)
+            .pipe(map((_) => {
+            this.x = new Map(this.scaleService.xScales);
+            this.y = new Map(this.scaleService.yScales);
+            if (this.svg) {
+                const currentTransform = d3.zoomTransform(this.svg.node());
+                this.setZoom(currentTransform);
+            }
+        }))
+            .subscribe();
+    }
+    applyZoom(svgElement, config, size) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        (_a = this.broadcastSubscribtion) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.svg = d3.select(svgElement.nativeElement);
+        const zoomType = (_b = config === null || config === void 0 ? void 0 : config.zoom) === null || _b === void 0 ? void 0 : _b.type;
+        const enable = (_c = config === null || config === void 0 ? void 0 : config.zoom) === null || _c === void 0 ? void 0 : _c.enable;
+        const zoomed = (event) => {
+            var _a, _b, _c, _d;
+            const { transform } = event;
+            if (zoomType === ZoomType.x || zoomType === ZoomType.xy) {
+                for (let [index, scale] of this.x.entries()) {
+                    this.scaleService.xScales.set(index, transform.rescaleX(scale));
+                }
+            }
+            if (zoomType === ZoomType.y || zoomType === ZoomType.xy) {
+                for (let [index, scale] of this.y.entries()) {
+                    this.scaleService.yScales.set(index, transform.rescaleY(scale));
+                }
+            }
+            if (enable) {
+                this.zoomed$.next({ event });
+                if (event.sourceEvent) {
+                    this.broadcastService.broadcast({
+                        channel: (_a = config === null || config === void 0 ? void 0 : config.zoom) === null || _a === void 0 ? void 0 : _a.syncChannel,
+                        message: event,
+                        domain: this.scaleService[((_b = config === null || config === void 0 ? void 0 : config.zoom) === null || _b === void 0 ? void 0 : _b.type) === ZoomType.x ? 'xScales' : 'yScales']
+                            .get((_d = (_c = config.brush) === null || _c === void 0 ? void 0 : _c.axisIndex) !== null && _d !== void 0 ? _d : 0)
+                            .domain(),
+                    });
+                }
+            }
+        };
+        if (enable) {
+            this.zoom = d3
+                .zoom()
+                .scaleExtent([1, Infinity])
+                .extent([
+                [0, 0],
+                [size.width, size.height],
+            ]);
+            this.zoom.on('start zoom end', zoomed);
+            this.svg.call(this.zoom);
+            this.svg.call(this.zoom.transform, this.initialZoom);
+            const sc = ((_d = config === null || config === void 0 ? void 0 : config.zoom) === null || _d === void 0 ? void 0 : _d.type) === ZoomType.x
+                ? this.x.get((_f = (_e = config.brush) === null || _e === void 0 ? void 0 : _e.axisIndex) !== null && _f !== void 0 ? _f : 0)
+                : this.y.get((_h = (_g = config.brush) === null || _g === void 0 ? void 0 : _g.axisIndex) !== null && _h !== void 0 ? _h : 0);
+            this.broadcastSubscribtion = this.broadcastService
+                .subscribeToChannel((_j = config === null || config === void 0 ? void 0 : config.zoom) === null || _j === void 0 ? void 0 : _j.syncChannel)
+                .pipe(map((_) => {
+                const currentTransform = d3.zoomTransform(this.svg.node());
+                const { message } = _;
+                if (currentTransform !== (message === null || message === void 0 ? void 0 : message.transform)) {
+                    if (message.selection) {
+                        const s = message.selection;
+                        const domain = sc.domain();
+                        const scale = (domain[1] - domain[0]) / (s[1] - s[0]);
+                        let transform = zoomIdentity.scale(scale);
+                        if ((message === null || message === void 0 ? void 0 : message.brushType) === BrushType.x) {
+                            transform = transform.translate(-sc(s[0]), 0);
+                        }
+                        if ((message === null || message === void 0 ? void 0 : message.brushType) === BrushType.y) {
+                            transform = transform.translate(0, -sc(s[0]));
+                        }
+                        this.setZoom(transform);
+                        return;
+                    }
+                    this.setZoom(message === null || message === void 0 ? void 0 : message.transform);
+                }
+            }))
+                .subscribe();
+        }
+    }
+    setZoom(transform) {
+        var _a;
+        // requestAnimationFrame(() => {
+        //
+        // });
+        (_a = this.svg) === null || _a === void 0 ? void 0 : _a.call(this.zoom.transform, transform);
+    }
+}
+ZoomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomService, deps: [{ token: ScaleService }, { token: BroadcastService }, { token: ChartService }], 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: ScaleService }, { type: BroadcastService }, { type: ChartService }]; } });
+
+class BrushService {
+    constructor(broadcastService, scaleService) {
+        this.broadcastService = broadcastService;
+        this.scaleService = scaleService;
+        this.brushMap = new Map()
+            .set(BrushType.x, d3.brushX())
+            .set(BrushType.y, d3.brushY());
+        this.scaleMap = new Map()
+            .set(BrushType.x, 'xScales')
+            .set(BrushType.y, 'yScales');
+    }
+    applyBrush(svgElement, config, size) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        (_a = this.broadcastSubscribtion) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        if ((_b = config.brush) === null || _b === void 0 ? void 0 : _b.enable) {
+            const s = this.scaleService[this.scaleMap.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)].get((_f = (_e = config === null || config === void 0 ? void 0 : config.brush) === null || _e === void 0 ? void 0 : _e.axisIndex) !== null && _f !== void 0 ? _f : 0);
+            const brush = this.brushMap.get((_h = (_g = config === null || config === void 0 ? void 0 : config.brush) === null || _g === void 0 ? void 0 : _g.type) !== null && _h !== void 0 ? _h : 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;
+                    }
+                    this.broadcastService.broadcast({
+                        channel: (_a = config === null || config === void 0 ? void 0 : config.zoom) === null || _a === void 0 ? void 0 : _a.syncChannel,
+                        message: Object.assign(Object.assign({}, _), { selection: [s.invert(from), s.invert(to)], brushType: (_c = (_b = config === null || config === void 0 ? void 0 : config.brush) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : BrushType.x }),
+                    });
+                }
+            });
+            container.call(brushBehavior);
+            setTimeout(() => {
+                container.call(brush.move, s.domain().map(s), {});
+            });
+            this.broadcastSubscribtion = this.broadcastService
+                .subscribeToChannel((_j = config === null || config === void 0 ? void 0 : config.zoom) === null || _j === void 0 ? void 0 : _j.syncChannel)
+                .pipe(map((_) => {
+                var _a, _b, _c, _d, _e;
+                if ((_a = _.message) === null || _a === void 0 ? void 0 : _a.transform) {
+                    const s = this.scaleService[this.scaleMap.get((_c = (_b = config === null || config === void 0 ? void 0 : config.brush) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : BrushType.x)].get((_e = (_d = config === null || config === void 0 ? void 0 : config.brush) === null || _d === void 0 ? void 0 : _d.axisIndex) !== null && _e !== void 0 ? _e : 0);
+                    const domain = _.domain;
+                    container.call(brush.move, [s(domain[0]), s(domain[1])]);
+                }
+            }))
+                .subscribe();
+        }
+    }
+}
+BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, deps: [{ token: BroadcastService }, { token: ScaleService }], 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 }, { type: ScaleService }]; } });
+
+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;
+    }
+}
+
+class TooltipComponent {
+    constructor(svc, cdr, zoomService, sanitizer) {
+        this.svc = svc;
+        this.cdr = cdr;
+        this.zoomService = zoomService;
+        this.sanitizer = sanitizer;
+        this.tooltips = [];
+        this.alive = true;
+    }
+    ngOnInit() {
+        var _a, _b;
+        this.display = merge(this.svc.pointerMove, this.zoomService.zoomed).pipe(map(({ event }) => {
+            const opacity = (event === null || event === void 0 ? void 0 : event.type) === 'mousemove' ? 1 : 0;
+            return opacity;
+        }), tap(() => {
+            requestAnimationFrame(() => {
+                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.svc.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((_) => !_['event']), 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 }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size" }, 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;\"\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}.chart-tooltip{transition:all .1s ease}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-tooltip', 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;\"\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}.chart-tooltip{transition:all .1s ease}\n"] }]
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }]; }, propDecorators: { size: [{
+                type: Input
+            }] } });
+
+class YAxisComponent {
+    constructor(scaleService, chartService, cdr, zoomService) {
+        this.scaleService = scaleService;
+        this.chartService = chartService;
+        this.cdr = cdr;
+        this.zoomService = zoomService;
+        this._alive = true;
+        merge(this.zoomService.zoomed, this.chartService.size)
+            .pipe(takeWhile(() => this._alive), tap((_) => {
+            this.draw();
+            this.cdr.markForCheck();
+        }))
+            .subscribe();
+    }
+    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;
+        const scale = this.scaleService.yScales.get(this.axis.index);
+        const axis = this.axis.options.opposite
+            ? d3
+                .axisRight(scale)
+                // .tickValues(this.axis.tickValues)
+                .tickFormat((_a = this.axis.options.tickFormat) !== null && _a !== void 0 ? _a : this.axis.defaultFormatter())
+            : d3
+                .axisLeft(scale)
+                // .tickValues(this.axis.tickValues)
+                .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: [{ token: ScaleService }, { token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }], 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", 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 [{ type: ScaleService }, { type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }]; }, propDecorators: { axis: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], node: [{
+                type: ViewChild,
+                args: ['svg']
+            }] } });
+
+class XAxisComponent {
+    constructor(scaleService, chartService, cdr, zoomService) {
+        this.scaleService = scaleService;
+        this.chartService = chartService;
+        this.cdr = cdr;
+        this.zoomService = zoomService;
+        this._alive = true;
+        merge(this.zoomService.zoomed, this.chartService.size)
+            .pipe(takeWhile(() => this._alive), tap((_) => {
+            this.draw();
+            this.cdr.detectChanges();
+        }))
+            .subscribe();
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._alive = false;
+    }
+    ngAfterViewInit() {
+        this.draw();
+    }
+    draw() {
+        var _a, _b;
+        const scale = this.scaleService.xScales.get(this.axis.index);
+        const axis = this.axis.options.opposite
+            ? d3
+                .axisTop(scale)
+                .tickFormat((_a = this.axis.options.tickFormat) !== null && _a !== void 0 ? _a : this.axis.defaultFormatter())
+            : d3
+                .axisBottom(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: [{ token: ScaleService }, { token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }], 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", 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 [{ type: ScaleService }, { type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }]; }, propDecorators: { axis: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], node: [{
+                type: ViewChild,
+                args: ['svg']
+            }] } });
+
+class GridlinesComponent {
+    constructor(scaleService, axesService, chartService, zoomService, cdr) {
+        this.scaleService = scaleService;
+        this.axesService = axesService;
+        this.chartService = chartService;
+        this.zoomService = zoomService;
+        this.cdr = cdr;
+        merge(this.chartService.size, this.zoomService.zoomed)
+            .pipe(tap(() => {
+            this.draw();
+            this.cdr.detectChanges();
+        }))
+            .subscribe();
+    }
+    draw() {
+        this.y = this.scaleService.yScales.get(0);
+        this.x = this.scaleService.xScales.get(0);
+        this.tickYValues = this.y.ticks();
+        this.tickXValues = this.x.ticks();
+    }
+    ngOnInit() {
+        this.draw();
+    }
+}
+GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: AxesService }, { token: ChartService }, { token: ZoomService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngFor=\"let tick of tickYValues\">\n  <svg:line [attr.x1]=\"0\" stroke=\"red\" [attr.y1]=\"y(tick)\" [attr.x2]=\"size?.width\" [attr.y2]=\"y(tick)\"></svg:line>\n</ng-container>\n\n<ng-container *ngFor=\"let tick of tickXValues\">\n  <svg:line [attr.x1]=\"x(tick)\" stroke=\"red\" [attr.y1]=\"0\" [attr.x2]=\"x(tick)\" [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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[teta-gridlines]', template: "<ng-container *ngFor=\"let tick of tickYValues\">\n  <svg:line [attr.x1]=\"0\" stroke=\"red\" [attr.y1]=\"y(tick)\" [attr.x2]=\"size?.width\" [attr.y2]=\"y(tick)\"></svg:line>\n</ng-container>\n\n<ng-container *ngFor=\"let tick of tickXValues\">\n  <svg:line [attr.x1]=\"x(tick)\" stroke=\"red\" [attr.y1]=\"0\" [attr.x2]=\"x(tick)\" [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 [{ type: ScaleService }, { type: AxesService }, { type: ChartService }, { type: ZoomService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
+                type: Input
+            }] } });
+
+class PlotlineComponent {
+    constructor(cdr, zoomService, scaleService, chartService, element) {
+        this.cdr = cdr;
+        this.zoomService = zoomService;
+        this.scaleService = scaleService;
+        this.chartService = chartService;
+        this.element = element;
+        this.orientation = AxisOrientation;
+        this.zoomService.zoomed.subscribe(() => {
+            this.scale = this.scaleService[this.axis.orientation === AxisOrientation.x ? 'xScales' : 'yScales'].get(this.axis.index);
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnInit() {
+        this.scale = this.scaleService[this.axis.orientation === AxisOrientation.x ? 'xScales' : 'yScales'].get(this.axis.index);
+        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" }, 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
+            }] } });
+
+class PlotbandComponent {
+    constructor(scaleService, zoomService, chartService, cdr, element) {
+        this.scaleService = scaleService;
+        this.zoomService = zoomService;
+        this.chartService = chartService;
+        this.cdr = cdr;
+        this.element = element;
+        this.orientation = AxisOrientation;
+        this.zoomService.zoomed.subscribe(() => {
+            this.scale = this.scaleService[this.axis.orientation === AxisOrientation.x ? 'xScales' : 'yScales'].get(this.axis.index);
+            this.cdr.detectChanges();
+        });
+    }
+    emit(event) {
+        this.chartService.emitPlotband(event);
+    }
+    ngOnInit() {
+        this.scale = this.scaleService[this.axis.orientation === AxisOrientation.x ? 'xScales' : 'yScales'].get(this.axis.index);
+        this.domain = this.scale.domain();
+        const plotbandElement = d3
+            .select(this.element.nativeElement)
+            .select('.plotband');
+        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) => {
+            requestAnimationFrame(() => {
+                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", size: "size" }, ngImport: i0, template: "<svg:rect class=\"plotband\"\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          [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          [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          [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          [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 rect:hover{cursor:grab}:host rect:active{cursor:grabbing}: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: PlotbandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[teta-plot-band]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect class=\"plotband\"\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          [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          [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          [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          [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 rect:hover{cursor:grab}:host rect:active{cursor:grabbing}:host .x-grabber{cursor:col-resize}:host .y-grabber{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
+            }], size: [{
+                type: Input
+            }] } });
+
+class SeriesBaseComponent {
+    constructor(svc, cdr, scaleService, zoomService, element) {
+        this.svc = svc;
+        this.cdr = cdr;
+        this.scaleService = scaleService;
+        this.zoomService = zoomService;
+        this.element = element;
+        this.zoomService.zoomed
+            .pipe(tap((_) => {
+            this.cdr.detectChanges();
+        }))
+            .subscribe();
+    }
+    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: { series: "series", size: "size" }, 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: { series: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+var TooltipTracking;
+(function (TooltipTracking) {
+    TooltipTracking[TooltipTracking["x"] = 0] = "x";
+    TooltipTracking[TooltipTracking["y"] = 1] = "y";
+})(TooltipTracking || (TooltipTracking = {}));
+
+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.display = this.zoomService.zoomed.pipe(map(({ event }) => {
+            return (event === null || event === void 0 ? void 0 : event.type) === 'end' ? 1 : 0;
+        }));
+        this.transform = this.svc.pointerMove.pipe(filter(({ event }) => event), map(({ event }) => {
+            return this.getTransform(event);
+        }), tap((_) => this.cdr.detectChanges()));
+    }
+    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();
+    }
+    getPath() {
+        this.x = this.scaleService.xScales.get(this.series.xAxisIndex);
+        this.y = this.scaleService.yScales.get(this.series.yAxisIndex);
+        const line = d3
+            .line()
+            .defined((point) => point.x !== null || point.y !== null)
+            .x((point) => this.x(point.x))
+            .y((point) => this.y(point.y));
+        const path = line(this.series.data);
+        return path;
+    }
+    getMarkers() {
+        var _a;
+        return (_a = this.series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => _ === null || _ === void 0 ? void 0 : _.marker);
+    }
+    getTransform(event) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const mouse = d3.pointer(event);
+        const foundX = this.scaleService.xScales.get(this.series.xAxisIndex);
+        const foundY = this.scaleService.yScales.get(this.series.yAxisIndex);
+        const tooltipTracking = (_b = (_a = this.svc.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 x0 = foundX.invert(mouse[0]);
+            const rightId = bisect(this.series.data, x0);
+            const range = foundY.range();
+            const intersect = lineIntersection(mouse[0], range[0], mouse[0], 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));
+            console.log(intersect);
+            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: "<svg:path\n  class=\"line\"\n  [attr.d]=\"getPath()\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n    [attr.opacity]=\"display | async\">\n  </svg:circle>\n</ng-container>\n\n<ng-container *ngIf=\"getMarkers() as markers\">\n\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\n\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: "<svg:path\n  class=\"line\"\n  [attr.d]=\"getPath()\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n    [attr.opacity]=\"display | async\">\n  </svg:circle>\n</ng-container>\n\n<ng-container *ngIf=\"getMarkers() as markers\">\n\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\n\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
+
+class BarSeriesComponent extends SeriesBaseComponent {
+    constructor(svc, cdr, scaleService, zoomService, element) {
+        super(svc, cdr, scaleService, zoomService, element);
+        this.svc = svc;
+        this.cdr = cdr;
+        this.scaleService = scaleService;
+        this.zoomService = zoomService;
+        this.element = element;
+    }
+    ngOnInit() {
+        var _a;
+        const x = this.scaleService.xScales.get(this.series.xAxisIndex);
+        const y = this.scaleService.yScales.get(this.series.yAxisIndex);
+        const domain = (_a = this.series.data) === null || _a === void 0 ? void 0 : _a.map((_) => _.x);
+        const range = [x(domain[0]), x(domain[(domain === null || domain === void 0 ? void 0 : domain.length) - 1])];
+        this.scaleBand = d3.scaleBand().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) {
+        console.log(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 }]; } });
+
+var SeriesType;
+(function (SeriesType) {
+    SeriesType[SeriesType["line"] = 0] = "line";
+    SeriesType[SeriesType["bar"] = 1] = "bar";
+})(SeriesType || (SeriesType = {}));
+
+class SeriesHostComponent {
+    constructor(viewContainerRef, chartService) {
+        this.viewContainerRef = viewContainerRef;
+        this.chartService = chartService;
+        this.defaultSeriesTypeMapping = new Map()
+            .set(SeriesType.line, LineSeriesComponent)
+            .set(SeriesType.bar, BarSeriesComponent);
+        this._init = false;
+        this.chartService.size
+            .pipe(throttleTime(100, null, { trailing: true }), 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.series = this.series;
+        this._componentRef.instance.size = this.size;
+        this._init = true;
+    }
+    ngOnDestroy() { }
+    ngOnChanges(changes) {
+        if (this._init && changes.hasOwnProperty('series')) {
+            this._componentRef.instance.series = this.series;
+            this._componentRef.instance.size = this.size;
+            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: { series: "series", size: "size" }, 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: { series: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+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.size);
+    }
+}
+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" }, 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
+            }] } });
+
+class ZoomableDirective {
+    constructor(element, svc, chartService) {
+        this.element = element;
+        this.svc = svc;
+        this.chartService = chartService;
+        this.zoomable = false;
+    }
+    ngOnInit() {
+        var _a, _b, _c, _d;
+        if (((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.zoom) === null || _b === void 0 ? void 0 : _b.enable) || ((_d = (_c = this.axis) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.zoom)) {
+            this.zoomable = true;
+            this.svc.applyZoom(this.element, this.chartService.config, this.size);
+        }
+    }
+    ngAfterViewInit() { }
+}
+ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ChartService }], 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 }, { type: ChartService }]; }, propDecorators: { config: [{
+                type: Input
+            }], axis: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], zoomable: [{
+                type: HostBinding,
+                args: ['class.zoomable']
+            }] } });
+
+class ChartContainerComponent {
+    constructor(_svc, _cdr, _elementRef, _axesService) {
+        this._svc = _svc;
+        this._cdr = _cdr;
+        this._elementRef = _elementRef;
+        this._axesService = _axesService;
+        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.size = this._svc.size.pipe(throttleTime(100, undefined, { trailing: true }), tap(() => {
+            setTimeout(() => {
+                this._cdr.detectChanges();
+            });
+        }));
+        this.yAxes = this._axesService.yAxis;
+        this.xAxes = this._axesService.xAxis;
+        this.uniqId = (Date.now() + Math.random()).toString(36);
+    }
+    ngOnInit() {
+        this._observer = new ResizeObserver((entries) => {
+            this._svc.setSize(entries[0].contentRect);
+        });
+        this._observer.observe(this._elementRef.nativeElement);
+        this._svc.init(this.config);
+    }
+    oppositeFilter(axis) {
+        return (_) => _.options.opposite && _.options.visible && axis.index <= _.index;
+    }
+    nonOppositeFilter(axis) {
+        return (_) => _.options.opposite !== true && _.options.visible && _.index <= axis.index;
+    }
+    getVisibleRect(size) {
+        const yAxesArray = [...this.yAxes.values()];
+        const xAxesArray = [...this.xAxes.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);
+        const rect = {
+            left,
+            top,
+            width: size.width - left - right + 1,
+            height: size.height - top - bottom + 1,
+        };
+        return rect;
+    }
+    getYAxisTranslate(axis, size) {
+        const yAxesArray = [...this.yAxes.values()];
+        const translateOpposite = yAxesArray
+            .filter(this.nonOppositeFilter(axis))
+            .reduce(this.sumSize, 0);
+        const translateNonOpposite = yAxesArray
+            .filter(this.oppositeFilter(axis))
+            .reduce(this.sumSize, 0);
+        return `translate(${axis.options.opposite
+            ? size.width - translateNonOpposite
+            : translateOpposite}, 0)`;
+    }
+    getXAxisTranslate(axis, size) {
+        const xAxesArray = [...this.xAxes.values()];
+        const translateNonOpposite = xAxesArray
+            .filter(this.nonOppositeFilter(axis))
+            .reduce(this.sumSize, 0);
+        const translateOpposite = xAxesArray
+            .filter(this.oppositeFilter(axis))
+            .reduce(this.sumSize, 0);
+        return `translate(0, ${axis.options.opposite
+            ? translateOpposite
+            : size.height - translateNonOpposite})`;
+    }
+    getTranslate(axis, size) {
+        const xAxesArray = [...this.xAxes.values()];
+        const yAxesArray = [...this.yAxes.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)';
+    }
+    mouseMove(event) {
+        this._svc.setPointerMove(event);
+    }
+    mouseLeave(event) {
+        this._svc.setPointerMove(event);
+    }
+    id() {
+        return this.uniqId;
+    }
+    ngAfterContentChecked() { }
+    ngAfterViewChecked() { }
+    ngOnChanges(changes) { }
+}
+ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: AxesService }], target: i0.ɵɵFactoryTarget.Component });
+ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartContainerComponent, selector: "teta-chart-container", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"size | async as s\">\n  <teta-tooltip [size]=\"s\"></teta-tooltip>\n  <svg\n       [tetaZoomable]\n       [tetaBrushable]\n       [size]=\"s\"\n       [config]=\"config\"\n       [attr.width]=\"s.width\"\n       [attr.height]=\"s.height\"\n       [attr.viewBox]=\"'0 0 '+s.width+' '+s.height\"\n       (mouseleave)=\"mouseLeave($event)\"\n       (mousemove)=\"mouseMove($event)\">\n    <ng-container *ngIf=\"getVisibleRect(s) as rect\">\n      <defs>\n        <clipPath [attr.id]=\"'visible-window-' + id()\">\n          <rect [attr.x]=\"rect.left\" [attr.y]=\"rect.top\" [attr.width]=\"rect.width\" [attr.height]=\"rect.height\"></rect>\n        </clipPath>\n      </defs>\n\n      <g class=\"y-axis-container\">\n        <g *ngFor=\"let item of yAxes | keyvalue\"\n           teta-y-axis\n           [axis]=\"item.value\"\n           [size]=\"s\"\n           [attr.transform]=\"getTranslate(item.value, s)\"></g>\n      </g>\n      <g class=\"x-axis-container\">\n        <g *ngFor=\"let item of xAxes | keyvalue\"\n           teta-x-axis\n\n           [axis]=\"item.value\"\n           [size]=\"s\"\n           [attr.transform]=\"getTranslate(item.value, s)\"></g>\n      </g>\n      <g [attr.clip-path]=\"'url(#visible-window-'+ id() +')'\">\n        <g [attr.transform]=\"'translate('+ rect.left +', '+ rect.top +')'\">\n          <g class=\"gridlines\" teta-gridlines [size]=\"s\"></g>\n\n          <g class=\"x-axis-plotline-container\">\n            <ng-container *ngFor=\"let axis of config.xAxis; let i = index\">\n              <g teta-plot-line *ngFor=\"let plotline of axis.plotlines\" [plotline]=\"plotline\" [size]=\"s\"\n                 [axis]=\"xAxes.get(i)\"></g>\n            </ng-container>\n          </g>\n\n          <g class=\"y-axis-plotline-container\">\n            <ng-container *ngFor=\"let axis of config.yAxis; let i = index\">\n              <g teta-plot-line *ngFor=\"let plotline of axis.plotlines\" [plotline]=\"plotline\" [size]=\"s\"\n                 [axis]=\"yAxes.get(i)\"></g>\n            </ng-container>\n          </g>\n\n          <g class=\"x-axis-plotband-container\">\n            <ng-container *ngFor=\"let axis of config.xAxis; let i = index\">\n              <g teta-plot-band *ngFor=\"let plotband of axis.plotbands\" [plotband]=\"plotband\" [size]=\"s\"\n                 [axis]=\"xAxes.get(i)\"></g>\n            </ng-container>\n          </g>\n          <g class=\"y-axis-plotband-container\">\n            <ng-container *ngFor=\"let axis of config.yAxis; let i = index\">\n              <g teta-plot-band *ngFor=\"let plotband of axis.plotbands\" [plotband]=\"plotband\" [size]=\"s\"\n                 [axis]=\"yAxes.get(i)\"></g>\n            </ng-container>\n          </g>\n          <g class=\"series-tooltip-line-marker\"></g>\n          <g class=\"series-container\">\n            <g teta-series-host\n               *ngFor=\"let series of config.series\"\n               [series]=\"series\"\n               [size]=\"s\"></g>\n          </g>\n        </g>\n      </g>\n    </ng-container>\n  </svg>\n\n\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"] }, { type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotline", "size", "axis"] }, { type: PlotbandComponent, selector: "[teta-plot-band]", inputs: ["plotband", "axis", "size"] }, { type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["series", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: BrushableDirective, selector: "svg:svg[tetaBrushable]", inputs: ["config", "size"] }, { type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], 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=\"size | async as s\">\n  <teta-tooltip [size]=\"s\"></teta-tooltip>\n  <svg\n       [tetaZoomable]\n       [tetaBrushable]\n       [size]=\"s\"\n       [config]=\"config\"\n       [attr.width]=\"s.width\"\n       [attr.height]=\"s.height\"\n       [attr.viewBox]=\"'0 0 '+s.width+' '+s.height\"\n       (mouseleave)=\"mouseLeave($event)\"\n       (mousemove)=\"mouseMove($event)\">\n    <ng-container *ngIf=\"getVisibleRect(s) as rect\">\n      <defs>\n        <clipPath [attr.id]=\"'visible-window-' + id()\">\n          <rect [attr.x]=\"rect.left\" [attr.y]=\"rect.top\" [attr.width]=\"rect.width\" [attr.height]=\"rect.height\"></rect>\n        </clipPath>\n      </defs>\n\n      <g class=\"y-axis-container\">\n        <g *ngFor=\"let item of yAxes | keyvalue\"\n           teta-y-axis\n           [axis]=\"item.value\"\n           [size]=\"s\"\n           [attr.transform]=\"getTranslate(item.value, s)\"></g>\n      </g>\n      <g class=\"x-axis-container\">\n        <g *ngFor=\"let item of xAxes | keyvalue\"\n           teta-x-axis\n\n           [axis]=\"item.value\"\n           [size]=\"s\"\n           [attr.transform]=\"getTranslate(item.value, s)\"></g>\n      </g>\n      <g [attr.clip-path]=\"'url(#visible-window-'+ id() +')'\">\n        <g [attr.transform]=\"'translate('+ rect.left +', '+ rect.top +')'\">\n          <g class=\"gridlines\" teta-gridlines [size]=\"s\"></g>\n\n          <g class=\"x-axis-plotline-container\">\n            <ng-container *ngFor=\"let axis of config.xAxis; let i = index\">\n              <g teta-plot-line *ngFor=\"let plotline of axis.plotlines\" [plotline]=\"plotline\" [size]=\"s\"\n                 [axis]=\"xAxes.get(i)\"></g>\n            </ng-container>\n          </g>\n\n          <g class=\"y-axis-plotline-container\">\n            <ng-container *ngFor=\"let axis of config.yAxis; let i = index\">\n              <g teta-plot-line *ngFor=\"let plotline of axis.plotlines\" [plotline]=\"plotline\" [size]=\"s\"\n                 [axis]=\"yAxes.get(i)\"></g>\n            </ng-container>\n          </g>\n\n          <g class=\"x-axis-plotband-container\">\n            <ng-container *ngFor=\"let axis of config.xAxis; let i = index\">\n              <g teta-plot-band *ngFor=\"let plotband of axis.plotbands\" [plotband]=\"plotband\" [size]=\"s\"\n                 [axis]=\"xAxes.get(i)\"></g>\n            </ng-container>\n          </g>\n          <g class=\"y-axis-plotband-container\">\n            <ng-container *ngFor=\"let axis of config.yAxis; let i = index\">\n              <g teta-plot-band *ngFor=\"let plotband of axis.plotbands\" [plotband]=\"plotband\" [size]=\"s\"\n                 [axis]=\"yAxes.get(i)\"></g>\n            </ng-container>\n          </g>\n          <g class=\"series-tooltip-line-marker\"></g>\n          <g class=\"series-container\">\n            <g teta-series-host\n               *ngFor=\"let series of config.series\"\n               [series]=\"series\"\n               [size]=\"s\"></g>\n          </g>\n        </g>\n      </g>\n    </ng-container>\n  </svg>\n\n\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: i0.ElementRef }, { type: AxesService }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class LegendComponent {
+    constructor() {
+        this.sizeMapping = new Map()
+            .set(SeriesType.line, 2)
+            .set(SeriesType.bar, 12);
+        this.classLegend = true;
+    }
+    ngOnInit() {
+        var _a;
+        this.series = (_a = this.series) === null || _a === void 0 ? void 0 : _a.filter((_) => _.showInLegend !== false);
+    }
+    getHeight(serie) {
+        return this.sizeMapping.get(serie.type);
+    }
+}
+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: "<div *ngFor=\"let serie of series\">\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", 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"] }], 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: "<div *ngFor=\"let serie of series\">\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", 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.plotLinesMove = new EventEmitter();
+        this.pointMove = new EventEmitter();
+    }
+    set config(config) {
+        this._config = Object.assign({
+            bounds: new ChartBounds(),
+        }, config);
+    }
+    get config() {
+        return this._config;
+    }
+    ngOnChanges(changes) { }
+    ngOnInit() {
+        this.svc.plotbandMove.subscribe((_) => {
+            this.plotBandsMove.emit(_);
+        });
+        this.svc.plotlineMove.subscribe((_) => {
+            this.plotLinesMove.emit(_);
+        });
+        this.svc.pointMove.subscribe((_) => {
+            this.pointMove.emit(_);
+        });
+    }
+    ngAfterViewInit() { }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.zoomService.broadcastSubscribtion) === null || _a === void 0 ? void 0 : _a.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-chart", inputs: { config: "config" }, outputs: { plotBandsMove: "plotBandsMove", plotLinesMove: "plotLinesMove", pointMove: "pointMove" }, providers: [
+        ChartService,
+        ZoomService,
+        ScaleService,
+        AxesService,
+        BrushService,
+    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"column column_auto\">\n  <teta-chart-container class=\"chart-container\" [config]=\"config\"></teta-chart-container>\n</div>\n\n<teta-legend *ngIf=\"config.legend?.enable === true\" [series]=\"config.series\"></teta-legend>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}\n"], components: [{ type: ChartContainerComponent, selector: "teta-chart-container", inputs: ["config"] }, { type: LegendComponent, selector: "teta-legend", inputs: ["series"] }], 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: ChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-chart', providers: [
+                        ChartService,
+                        ZoomService,
+                        ScaleService,
+                        AxesService,
+                        BrushService,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"column column_auto\">\n  <teta-chart-container class=\"chart-container\" [config]=\"config\"></teta-chart-container>\n</div>\n\n<teta-legend *ngIf=\"config.legend?.enable === true\" [series]=\"config.series\"></teta-legend>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }]; }, propDecorators: { plotBandsMove: [{
+                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], 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,
+                    ],
+                    exports: [ChartComponent],
+                    imports: [CommonModule],
+                }]
+        }] });
+
+/*
+ * Public API Surface of chart
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChartComponent, ChartModule, ChartService };
+//# sourceMappingURL=tetacom-svg-charts.mjs.map