@tetacom/svg-charts 1.0.2 → 1.1.3

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

@@ -1,1603 +0,0 @@
-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 ?? '';
-    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?.min != null;
-        const hasMax = 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?.min;
-        }
-        if (hasMax) {
-            this.extremes[1] = 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() {
-        const linkedFilter = (serie) => serie[this._orientation === AxisOrientation.y ? 'yAxisIndex' : 'xAxisIndex'] === this._index;
-        return this.chartConfig?.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?.yAxis.forEach((_, index) => {
-            const axis = Axis.createAxis(AxisOrientation.y, config, index);
-            this.yAxis.set(index, axis);
-        });
-        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((_) => _.options?.visible && _.options?.opposite)
-            .reduce((acc, cur) => acc + cur.selfSize, 0);
-        const bottomBound = [...this.axesService.xAxis.values()]
-            .filter((_) => _.options?.visible && _.options?.opposite !== true)
-            .reduce((acc, cur) => acc + cur.selfSize, 0);
-        const leftBound = [...this.axesService.yAxis.values()]
-            .filter((_) => _.options?.visible && _.options.opposite !== true)
-            .reduce((acc, cur) => acc + cur.selfSize, 0);
-        const rightBound = [...this.axesService.yAxis.values()]
-            .filter((_) => _.options?.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) {
-        return this.scaleMapping
-            .get(axis.options?.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) {
-        this._config = config;
-        if (config.inverted) {
-            this._config.series = this._config?.series?.map((serie) => {
-                return {
-                    ...serie,
-                    data: serie?.data?.map((point) => {
-                        return {
-                            ...point,
-                            x: point?.y,
-                            y: 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) {
-        this.broadcastSubscribtion?.unsubscribe();
-        this.svg = d3.select(svgElement.nativeElement);
-        const zoomType = config?.zoom?.type;
-        const enable = config?.zoom?.enable;
-        const zoomed = (event) => {
-            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: config?.zoom?.syncChannel,
-                        message: event,
-                        domain: this.scaleService[config?.zoom?.type === ZoomType.x ? 'xScales' : 'yScales']
-                            .get(config.brush?.axisIndex ?? 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 = config?.zoom?.type === ZoomType.x
-                ? this.x.get(config.brush?.axisIndex ?? 0)
-                : this.y.get(config.brush?.axisIndex ?? 0);
-            this.broadcastSubscribtion = this.broadcastService
-                .subscribeToChannel(config?.zoom?.syncChannel)
-                .pipe(map((_) => {
-                const currentTransform = d3.zoomTransform(this.svg.node());
-                const { message } = _;
-                if (currentTransform !== 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?.brushType === BrushType.x) {
-                            transform = transform.translate(-sc(s[0]), 0);
-                        }
-                        if (message?.brushType === BrushType.y) {
-                            transform = transform.translate(0, -sc(s[0]));
-                        }
-                        this.setZoom(transform);
-                        return;
-                    }
-                    this.setZoom(message?.transform);
-                }
-            }))
-                .subscribe();
-        }
-    }
-    setZoom(transform) {
-        // requestAnimationFrame(() => {
-        //
-        // });
-        this.svg?.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) {
-        this.broadcastSubscribtion?.unsubscribe();
-        if (config.brush?.enable) {
-            const s = this.scaleService[this.scaleMap.get(config?.brush?.type ?? BrushType.x)].get(config?.brush?.axisIndex ?? 0);
-            const brush = this.brushMap.get(config?.brush?.type ?? BrushType.x);
-            const container = d3.select(svgElement.nativeElement);
-            const brushBehavior = brush.on('start brush end', (_) => {
-                if (_.sourceEvent) {
-                    const [from, to] = _.selection;
-                    if (to - from < 5) {
-                        container.call(brush.move, [from, to]);
-                        return;
-                    }
-                    this.broadcastService.broadcast({
-                        channel: config?.zoom?.syncChannel,
-                        message: {
-                            ..._,
-                            selection: [s.invert(from), s.invert(to)],
-                            brushType: config?.brush?.type ?? BrushType.x,
-                        },
-                    });
-                }
-            });
-            container.call(brushBehavior);
-            setTimeout(() => {
-                container.call(brush.move, s.domain().map(s), {});
-            });
-            this.broadcastSubscribtion = this.broadcastService
-                .subscribeToChannel(config?.zoom?.syncChannel)
-                .pipe(map((_) => {
-                if (_.message?.transform) {
-                    const s = this.scaleService[this.scaleMap.get(config?.brush?.type ?? BrushType.x)].get(config?.brush?.axisIndex ?? 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?.top || this.top;
-        this.right = options?.right || this.right;
-        this.bottom = options?.bottom || this.bottom;
-        this.left = 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() {
-        this.display = merge(this.svc.pointerMove, this.zoomService.zoomed).pipe(map(({ event }) => {
-            const opacity = 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((_) => {
-                const indicatorStyle = `display:block; width: 10px; height: 2px; background-color: ${_?.series?.color}`;
-                html += `<div class="display-flex align-center"><span class="margin-right-1" style="${indicatorStyle}"></span>
-          <span class="font-title-3">${_.series.name}
-          <span class="font-body-3">x: ${_.point.x?.toFixed(2)} y: ${_.point.y?.toFixed(2)}</span></span></div>`;
-            });
-            return transformHtml(html);
-        };
-        const formatter = this.svc.config?.tooltip?.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() {
-        const scale = this.scaleService.yScales.get(this.axis.index);
-        const axis = this.axis.options.opposite
-            ? d3
-                .axisRight(scale)
-                // .tickValues(this.axis.tickValues)
-                .tickFormat(this.axis.options.tickFormat ?? this.axis.defaultFormatter())
-            : d3
-                .axisLeft(scale)
-                // .tickValues(this.axis.tickValues)
-                .tickFormat(this.axis.options.tickFormat ?? 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() {
-        const scale = this.scaleService.xScales.get(this.axis.index);
-        const axis = this.axis.options.opposite
-            ? d3
-                .axisTop(scale)
-                .tickFormat(this.axis.options.tickFormat ?? this.axis.defaultFormatter())
-            : d3
-                .axisBottom(scale)
-                .tickFormat(this.axis.options.tickFormat ?? 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(() => {
-                if (event?.type === 'start') {
-                    const { grabber } = event?.sourceEvent?.target?.dataset;
-                    grabberKey = grabber;
-                }
-                const min = Math.min(...this.domain);
-                const max = Math.max(...this.domain);
-                const minValue = d.min ?? min;
-                const maxValue = d.max ?? 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) {
-        if (d.style?.plotband?.patternImage) {
-            return `url(#${d.style.plotband?.patternImage})`;
-        }
-        return d.style.plotband?.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?.type === 'end' ? 1 : 0;
-        }));
-        this.transform = this.svc.pointerMove.pipe(filter(({ event }) => event), map(({ event }) => {
-            return this.getTransform(event);
-        }), tap((_) => this.cdr.detectChanges()));
-    }
-    ngAfterViewInit() {
-        const drag = (node, event, d) => {
-            if (d.marker?.dragType === DragPointType.x ||
-                d.marker?.dragType === DragPointType.xy) {
-                d.x = this.x.invert(event.x);
-            }
-            if (d.marker?.dragType === DragPointType.y ||
-                d.marker?.dragType === DragPointType.xy) {
-                d.y = this.y.invert(event.y);
-            }
-            this.svc.emitPoint({
-                target: {
-                    series: this.series,
-                    point: d,
-                },
-                event,
-            });
-            this.cdr.detectChanges();
-        };
-        const dragMarkers = d3
-            .drag()
-            .subject(function (event, d) {
-            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 = this.series.data?.filter((_) => _?.marker && _?.marker?.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() {
-        return this.series.data?.filter((_) => _?.marker);
-    }
-    getTransform(event) {
-        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 = this.svc.config?.tooltip?.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(this.series.data[rightId - 1]?.x), foundY(this.series.data[rightId - 1]?.y), foundX(this.series.data[rightId]?.x), foundY(this.series.data[rightId]?.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(this.series.data[rightId - 1]?.x), foundY(this.series.data[rightId - 1]?.y), foundX(this.series.data[rightId]?.x), foundY(this.series.data[rightId]?.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() {
-        const x = this.scaleService.xScales.get(this.series.xAxisIndex);
-        const y = this.scaleService.yScales.get(this.series.yAxisIndex);
-        const domain = this.series.data?.map((_) => _.x);
-        const range = [x(domain[0]), x(domain[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(() => {
-            this._componentRef?.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() {
-        if (this.config?.zoom?.enable || this.axis?.options?.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() {
-        this.series = this.series?.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() {
-        this.zoomService.broadcastSubscribtion?.unsubscribe();
-    }
-}
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { plotBandsMove: "plotBandsMove", 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-svg-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],
-                }]
-        }] });
-
-class Plotband {
-    constructor(options) {
-        this.id = options?.id;
-        this.from = options?.from;
-        this.to = options?.to;
-        this.label = options?.label;
-        this.showGrabbers =
-            options?.showGrabbers != null ? options.showGrabbers : true;
-        this.draggable = options?.draggable != null ? options?.draggable : false;
-        this.resizable = options?.resizable != null ? options?.resizable : true;
-        this.min = options?.min;
-        this.max = options?.max;
-        this.style = options?.style;
-    }
-}
-
-class PlotLine {
-    constructor(options) {
-        this.id = options?.id;
-        this.value = options?.value;
-        this.label = options?.label;
-        this.min = options?.min;
-        this.max = options?.max;
-        this.draggable = options?.draggable;
-        this.style = options?.style;
-    }
-}
-
-/*
- * Public API Surface of chart
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AxisOrientation, AxisType, BrushType, ChartBounds, ChartComponent, ChartModule, ChartService, DragPointType, PlotLine, Plotband, SeriesType, TooltipTracking, ZoomType };
-//# sourceMappingURL=tetacom-svg-charts.mjs.map