barsa-echarts 0.0.2

package/fesm2015/barsa-echarts.mjs

@@ -0,0 +1,878 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild, Input, Directive, NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i1$1 from 'barsa-novin-ray-core';
+import { BaseComponent, BaseDirective, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class MicroChartBulletComponent extends BaseComponent {
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        this.suffix = '';
+        this.separatorLinesFakeArray = [];
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.delta = Math.abs(this.value - this.target);
+        this.forecastWidth = this.getWidth(this.forecast);
+        this.deltaWidth = this.getWidth(this.delta);
+        this.valueWidth = this.getWidth(this.value);
+        this.targetWidth = this.getWidth(this.target, true);
+        this.deltaBackgroundColor = this.getBackgroundColor('delta');
+        this.forecastBackgroundColor = this.getBackgroundColor('forecast');
+        this.valueBackgroundColor = this.getBackgroundColor('value');
+        this.targetWithSuffix = this.getValueWithSuffix(this.target);
+        this.deltaWithSuffix = this.getValueWithSuffix(this.delta);
+        this.valueWithSuffix = this.getValueWithSuffix(this.value);
+        this.fakeArray();
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.deltaDom) {
+            const deltaLeft = this.value >= this.target ? this.getWidth(this.target) : this.getWidth(this.target - this.delta);
+            this.renderer.setStyle(this.deltaDom.nativeElement, 'left', deltaLeft);
+            const deltaPointerDom = this.deltaDom.nativeElement.querySelector('.pointer');
+            const deltaPointerLeft = this.value >= this.target ? '' : '0';
+            this.renderer.setStyle(deltaPointerDom, 'left', deltaPointerLeft);
+        }
+    }
+    getWidth(value, isTarget) {
+        if (value) {
+            let width = (value / this.range) * 100;
+            width = isTarget ? width - 2 : width;
+            return width.toString() + '%';
+        }
+        else {
+            return '0';
+        }
+    }
+    getValueWithSuffix(value) {
+        return value.toString() + (this.suffix || '');
+    }
+    getBackgroundColor(item) {
+        if (item === 'forecast') {
+            return this.forecast >= this.target ? '#a1dbb1' : '#fda8ab';
+        }
+        else {
+            return this.value >= this.target ? '#3fa45b' : '#dc0d0e';
+        }
+    }
+    fakeArray() {
+        for (let i = 0; i < this.separatorLines; i++) {
+            this.separatorLinesFakeArray.push(i);
+        }
+    }
+}
+MicroChartBulletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartBulletComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+MicroChartBulletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartBulletComponent, selector: "be-micro-chart-bullet", inputs: { range: "range", value: "value", forecast: "forecast", target: "target", suffix: "suffix", separatorLines: "separatorLines", isDelta: "isDelta" }, viewQueries: [{ propertyName: "deltaDom", first: true, predicate: ["deltaBox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\r\n    <div class=\"range\">\r\n        <div class=\"target\" *ngIf=\"target\" #target [style.left]=\"targetWidth\">\r\n            <span>{{ targetWithSuffix }}</span>\r\n        </div>\r\n        <div\r\n            class=\"forecast\"\r\n            *ngIf=\"forecast\"\r\n            [style.background-color]=\"forecastBackgroundColor\"\r\n            [style.width]=\"forecastWidth\"\r\n        ></div>\r\n\r\n        <div\r\n            class=\"delta\"\r\n            #deltaBox\r\n            *ngIf=\"isDelta && delta; else valueBox\"\r\n            [style.background-color]=\"deltaBackgroundColor\"\r\n            [style.width]=\"deltaWidth\"\r\n        >\r\n            <span [style.color]=\"valueBackgroundColor\">{{ deltaWithSuffix + '\u25B2' }}</span>\r\n            <div class=\"pointer\" [style.background-color]=\"deltaBackgroundColor\"></div>\r\n        </div>\r\n\r\n        <ng-template #valueBox>\r\n            <div class=\"value\" *ngIf=\"value\" [style.background-color]=\"valueBackgroundColor\" [style.width]=\"valueWidth\">\r\n                <span [style.color]=\"valueBackgroundColor\">{{ valueWithSuffix }}</span>\r\n                <div class=\"pointer\" [style.background-color]=\"valueBackgroundColor\"></div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!--  separator lines-->\r\n    </div>\r\n    <div class=\"separator-lines\" *ngIf=\"separatorLines\">\r\n        <div *ngFor=\"let i of separatorLinesFakeArray\" class=\"separator-line\"></div>\r\n    </div>\r\n</div>\r\n", styles: [".separator-lines,.range .value,.range .target,.range .forecast,.range{margin-bottom:auto;margin-top:auto;top:0;bottom:0}:host{display:flex;width:100%;height:100%;align-items:center}.chart-container{height:15px;width:100%;position:relative}.range{width:100%;position:absolute;background-color:#e6eee8;z-index:2}.range .forecast{position:absolute;left:0}.range .target{position:absolute;z-index:5;width:2%;height:24px;background-color:#000}.range .target span{position:absolute;bottom:-20px;right:-10px}.range .value{position:absolute;left:0;height:7px}.range .value .pointer{position:absolute;width:2px;height:20px;bottom:0}.range .value span{position:absolute;bottom:19px;right:-6px}.range .delta{position:absolute;height:15px}.range .delta .pointer{position:absolute;width:2px;height:20px;bottom:0}.range .delta span{position:absolute;bottom:19px}.separator-lines{position:absolute;display:flex;justify-content:space-between;height:20px;width:100%}.separator-lines .separator-line{background-color:#e9730c;width:2px}.separator-lines .separator-line:first-child,.separator-lines .separator-line:last-child{background-color:#c21a1a!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartBulletComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'be-micro-chart-bullet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\">\r\n    <div class=\"range\">\r\n        <div class=\"target\" *ngIf=\"target\" #target [style.left]=\"targetWidth\">\r\n            <span>{{ targetWithSuffix }}</span>\r\n        </div>\r\n        <div\r\n            class=\"forecast\"\r\n            *ngIf=\"forecast\"\r\n            [style.background-color]=\"forecastBackgroundColor\"\r\n            [style.width]=\"forecastWidth\"\r\n        ></div>\r\n\r\n        <div\r\n            class=\"delta\"\r\n            #deltaBox\r\n            *ngIf=\"isDelta && delta; else valueBox\"\r\n            [style.background-color]=\"deltaBackgroundColor\"\r\n            [style.width]=\"deltaWidth\"\r\n        >\r\n            <span [style.color]=\"valueBackgroundColor\">{{ deltaWithSuffix + '\u25B2' }}</span>\r\n            <div class=\"pointer\" [style.background-color]=\"deltaBackgroundColor\"></div>\r\n        </div>\r\n\r\n        <ng-template #valueBox>\r\n            <div class=\"value\" *ngIf=\"value\" [style.background-color]=\"valueBackgroundColor\" [style.width]=\"valueWidth\">\r\n                <span [style.color]=\"valueBackgroundColor\">{{ valueWithSuffix }}</span>\r\n                <div class=\"pointer\" [style.background-color]=\"valueBackgroundColor\"></div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!--  separator lines-->\r\n    </div>\r\n    <div class=\"separator-lines\" *ngIf=\"separatorLines\">\r\n        <div *ngFor=\"let i of separatorLinesFakeArray\" class=\"separator-line\"></div>\r\n    </div>\r\n</div>\r\n", styles: [".separator-lines,.range .value,.range .target,.range .forecast,.range{margin-bottom:auto;margin-top:auto;top:0;bottom:0}:host{display:flex;width:100%;height:100%;align-items:center}.chart-container{height:15px;width:100%;position:relative}.range{width:100%;position:absolute;background-color:#e6eee8;z-index:2}.range .forecast{position:absolute;left:0}.range .target{position:absolute;z-index:5;width:2%;height:24px;background-color:#000}.range .target span{position:absolute;bottom:-20px;right:-10px}.range .value{position:absolute;left:0;height:7px}.range .value .pointer{position:absolute;width:2px;height:20px;bottom:0}.range .value span{position:absolute;bottom:19px;right:-6px}.range .delta{position:absolute;height:15px}.range .delta .pointer{position:absolute;width:2px;height:20px;bottom:0}.range .delta span{position:absolute;bottom:19px}.separator-lines{position:absolute;display:flex;justify-content:space-between;height:20px;width:100%}.separator-lines .separator-line{background-color:#e9730c;width:2px}.separator-lines .separator-line:first-child,.separator-lines .separator-line:last-child{background-color:#c21a1a!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { deltaDom: [{
+                type: ViewChild,
+                args: ['deltaBox']
+            }], range: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], forecast: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], separatorLines: [{
+                type: Input
+            }], isDelta: [{
+                type: Input
+            }] } });
+
+class ChartBaseDirective extends BaseDirective {
+    constructor(el, renderer2) {
+        super();
+        this.el = el;
+        this.renderer2 = renderer2;
+        this.tooltip = {
+            trigger: 'item',
+            responsive: true,
+            position: 'top',
+            formatter: '{c}',
+            backgroundColor: '#fafcfe',
+            borderColor: '#c8e2f7',
+            borderWidth: '0.8',
+            textStyle: {
+                color: '#5d6f80'
+            }
+        };
+        this.grid = {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0
+        };
+        this.xAxis = {
+            data: [],
+            type: 'value'
+        };
+        this.yAxis = {
+            data: [],
+            type: 'category'
+        };
+        this.series = [];
+    }
+    ngOnInit() {
+        // set some style to chart
+        super.ngOnInit();
+        const elDom = this.el.nativeElement;
+        this.renderer2.setStyle(elDom, 'width', '100%');
+        this.renderer2.setStyle(elDom, 'height', '100%');
+        this.renderer2.setStyle(elDom, 'display', 'block');
+        // initialize echart micro-charts
+        this._initializeOptions();
+    }
+    ngAfterViewInit() {
+        this.setOptions(this.options);
+        setTimeout(() => {
+            const elDom = this.el.nativeElement;
+            this.chart = echarts.init(elDom);
+            this._renderChart();
+        }, 300);
+    }
+    _renderChart() {
+        this.chart.setOption(this.options);
+    }
+    _initializeOptions() {
+        this.options = {
+            grid: this.grid,
+            xAxis: this.xAxis,
+            yAxis: this.yAxis,
+            series: this.series,
+            tooltip: this.tooltip
+        };
+    }
+}
+ChartBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChartBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+ChartBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: ChartBaseDirective, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChartBaseDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+
+class MicroChartBaseDirective extends ChartBaseDirective {
+    constructor(el, renderer2) {
+        super(el, renderer2);
+        this.el = el;
+        this.renderer2 = renderer2;
+        this.xAxis = {
+            data: [],
+            type: 'value',
+            axisLine: {
+                show: false
+            },
+            axisLabel: {
+                show: false
+            },
+            splitLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            max: 100
+        };
+        this.yAxis = {
+            data: [],
+            type: 'category',
+            axisLabel: {
+                show: false
+            },
+            axisLine: {
+                show: false
+            },
+            splitLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            }
+        };
+    }
+}
+MicroChartBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+MicroChartBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartBaseDirective, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartBaseDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+
+class MicroChartLineBaseDirective extends MicroChartBaseDirective {
+    constructor(el, renderer2) {
+        super(el, renderer2);
+        this.el = el;
+        this.renderer2 = renderer2;
+    }
+    setOptions(options) {
+        this._scaleDownLineData();
+        // initialize series
+        this._initSeries(options);
+        // set input data
+        this.line.data.forEach((item) => {
+            var _a, _b;
+            (_b = (_a = this.xAxis) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.push(item.label);
+            const dataObj = {
+                value: item.value,
+                symbol: 'none'
+            };
+            options.series[0].data.push(dataObj);
+        });
+        this.xAxis.max = undefined;
+        this.xAxis.type = 'category';
+        // set custom yAxis
+        this.yAxis.min = 0;
+        this.yAxis.max = 6;
+        this.yAxis.type = 'value';
+    }
+    /* eslint-disable */
+    _scaleDownLineData() {
+        const maxValue = Math.max.apply(Math, this.line.data.map((dataItem) => dataItem.value));
+        return this.line.data.forEach((dataItem) => {
+            dataItem.value *= 6 / maxValue;
+        });
+    }
+    _initSeries(options) {
+        var _a;
+        options.series = [
+            {
+                type: 'line',
+                color: (_a = this.line) === null || _a === void 0 ? void 0 : _a.color,
+                data: [],
+                label: {
+                    show: false
+                }
+            }
+        ];
+    }
+}
+MicroChartLineBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartLineBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+MicroChartLineBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartLineBaseDirective, selector: "[beMicroChartLine]", inputs: { line: "line" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartLineBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beMicroChartLine]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { line: [{
+                type: Input
+            }] } });
+
+class MicroChartLineComponent extends BaseComponent {
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.getFirstAndLastValues();
+    }
+    getFirstAndLastValues() {
+        const dataLength = this.line.data.length;
+        this.firstValue = this.line.data[0].value.toString();
+        this.lastValue = this.line.data[dataLength - 1].value.toString();
+        this.firstLabel = this.line.data[0].label;
+        this.lastLabel = this.line.data[dataLength - 1].label;
+    }
+}
+MicroChartLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartLineComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MicroChartLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartLineComponent, selector: "be-micro-chart-line", inputs: { line: "line" }, usesInheritance: true, ngImport: i0, template: "<div class=\"top-labels\">\r\n    <span>{{ lastValue }}{{ line?.suffix }}</span>\r\n    <span>{{ firstValue }}{{ line?.suffix }}</span>\r\n</div>\r\n\r\n<div class=\"chart\">\r\n    <div *untilInView=\"el\" beMicroChartLine [line]=\"line\"></div>\r\n</div>\r\n\r\n<div class=\"bottom-labels\">\r\n    <span>{{ lastLabel }}</span>\r\n    <span>{{ firstLabel }}</span>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}.chart{width:100%;height:52%}span{margin:0;font-size:10px}.top-labels{width:100%;height:23%;display:flex;justify-content:space-between}.bottom-labels{width:100%;height:25%;display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: MicroChartLineBaseDirective, selector: "[beMicroChartLine]", inputs: ["line"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'be-micro-chart-line', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"top-labels\">\r\n    <span>{{ lastValue }}{{ line?.suffix }}</span>\r\n    <span>{{ firstValue }}{{ line?.suffix }}</span>\r\n</div>\r\n\r\n<div class=\"chart\">\r\n    <div *untilInView=\"el\" beMicroChartLine [line]=\"line\"></div>\r\n</div>\r\n\r\n<div class=\"bottom-labels\">\r\n    <span>{{ lastLabel }}</span>\r\n    <span>{{ firstLabel }}</span>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}.chart{width:100%;height:52%}span{margin:0;font-size:10px}.top-labels{width:100%;height:23%;display:flex;justify-content:space-between}.bottom-labels{width:100%;height:25%;display:flex;justify-content:space-between}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { line: [{
+                type: Input
+            }] } });
+
+class MicroChartStackbarBaseDirective extends MicroChartBaseDirective {
+    constructor(el, renderer2) {
+        super(el, renderer2);
+        this.el = el;
+        this.renderer2 = renderer2;
+    }
+    setOptions(options) {
+        this.chartData.data.forEach((dataItem) => {
+            const dataConfig = this.creatData(dataItem);
+            options.series.push(dataConfig);
+        });
+    }
+    creatData(dataItem) {
+        return {
+            name: 'Direct',
+            barWidth: 15,
+            type: 'bar',
+            stack: 'total',
+            emphasis: {
+                focus: 'series'
+            },
+            data: [
+                {
+                    value: dataItem.value,
+                    itemStyle: {
+                        color: dataItem.color
+                    }
+                }
+            ],
+            label: {
+                show: true,
+                formatter: (d) => d.data.value.toString() + this.chartData.suffix,
+                fontSize: 10
+            }
+        };
+    }
+}
+MicroChartStackbarBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartStackbarBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+MicroChartStackbarBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartStackbarBaseDirective, selector: "[beMicroChartStackbar]", inputs: { chartData: "chartData" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartStackbarBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beMicroChartStackbar]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { chartData: [{
+                type: Input
+            }] } });
+
+class MicroChartStackbarComponent extends BaseComponent {
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+}
+MicroChartStackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartStackbarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MicroChartStackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartStackbarComponent, selector: "be-micro-chart-stackbar", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<div *untilInView=\"el\" beMicroChartStackbar class=\"chart\" [chartData]=\"data\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%}.chart{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: MicroChartStackbarBaseDirective, selector: "[beMicroChartStackbar]", inputs: ["chartData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartStackbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'be-micro-chart-stackbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *untilInView=\"el\" beMicroChartStackbar class=\"chart\" [chartData]=\"data\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%}.chart{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MicroChartCircularBaseDirective extends MicroChartBaseDirective {
+    constructor(el, renderer2) {
+        super(el, renderer2);
+        this.el = el;
+        this.renderer2 = renderer2;
+    }
+    setOptions(options) {
+        // remove extra data from circular chart
+        this._initSeries(options);
+        // add data to series
+        options.series[0].data.push({ value: this.data });
+    }
+    _initSeries(options) {
+        options.series = [
+            {
+                type: 'gauge',
+                progress: {
+                    show: true,
+                    width: 5
+                },
+                axisLine: {
+                    lineStyle: {
+                        width: 5
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+                splitLine: {
+                    show: false,
+                    length: 15,
+                    lineStyle: {
+                        width: 2,
+                        color: '#999'
+                    }
+                },
+                axisLabel: {
+                    distance: 30,
+                    color: '#999',
+                    fontSize: 10,
+                    show: false
+                },
+                anchor: {
+                    show: true,
+                    showAbove: true,
+                    size: 15,
+                    itemStyle: {
+                        borderWidth: 1
+                    }
+                },
+                title: {
+                    show: false
+                },
+                detail: {
+                    valueAnimation: true,
+                    fontSize: 12,
+                    offsetCenter: [0, '70%']
+                },
+                data: []
+            }
+        ];
+    }
+}
+MicroChartCircularBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartCircularBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+MicroChartCircularBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartCircularBaseDirective, selector: "[beMicroChartCircular]", inputs: { data: "data" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartCircularBaseDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[beMicroChartCircular]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MicroChartCircularComponent extends BaseComponent {
+    constructor(el) {
+        super();
+        this.el = el;
+        this.data = 50;
+    }
+}
+MicroChartCircularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartCircularComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MicroChartCircularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartCircularComponent, selector: "be-micro-chart-circular", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<div *untilInView=\"el\" beMicroChartCircular [data]=\"data\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: MicroChartCircularBaseDirective, selector: "[beMicroChartCircular]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartCircularComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'be-micro-chart-circular', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *untilInView=\"el\" beMicroChartCircular [data]=\"data\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MicroChartComparisonBaseDirective extends MicroChartBaseDirective {
+    constructor(el, renderer2) {
+        super(el, renderer2);
+        this.el = el;
+        this.renderer2 = renderer2;
+    }
+    setOptions(options) {
+        // initialize series
+        this._initValues(options);
+        // set custom xAxis
+        this.xAxis.type = 'value';
+        this.xAxis.boundaryGap = ['0%', '50%'];
+        // set custom yAxis
+        this.yAxis.type = 'category';
+        this.yAxis.offset = 6;
+        this.yAxis.axisLabel = {
+            show: true,
+            inside: true,
+            lineHeight: 16
+        };
+        // set custom grid
+        this.grid.top = 10;
+        const textStyle = {
+            verticalAlign: 'bottom',
+            fontSize: 12,
+            fontWeight: 'bold'
+        };
+        this.chartData.data.forEach((item) => {
+            var _a, _b;
+            const seriesData = {
+                value: item.value,
+                itemStyle: {
+                    color: item.color
+                },
+                label: {
+                    position: ['100', '0%']
+                }
+            };
+            options.series[0].data.push(seriesData);
+            const yAxisData = { value: item.label, textStyle };
+            (_b = (_a = this.yAxis) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.push(yAxisData);
+        });
+        // if we have double tile
+        if (this.size === 'l') {
+            this.grid.left = 50;
+            this.yAxis.axisLabel.inside = false;
+            this.yAxis.axisLabel.lineHeight = undefined;
+            options.series[0].label.position = 'right';
+            this.yAxis.offset = -2;
+            options.series[0].showBackground = false;
+            this.xAxis.max = 112;
+            options.series[0].data.map((dataItem) => {
+                delete dataItem.label.offset;
+                dataItem.label.position = ['100%', '0%'];
+            });
+        }
+        options.series[0].label.formatter = (d) => d.data.value + this.chartData.suffix;
+    }
+    _initValues(options) {
+        var _a;
+        options.series = [
+            {
+                showBackground: true,
+                barWidth: (_a = this.chartData.barWidth) !== null && _a !== void 0 ? _a : 3,
+                type: 'bar',
+                data: [],
+                label: {
+                    show: true,
+                    position: 'top',
+                    distance: 0,
+                    valueAnimation: true,
+                    fontFamily: 'monospace',
+                    formatter: (d) => d.data.value + '%',
+                    lineHeight: -10
+                }
+            }
+        ];
+        options.plotOptions = {
+            bar: {
+                horizontal: true,
+                distributed: true
+            }
+        };
+    }
+}
+MicroChartComparisonBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartComparisonBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+MicroChartComparisonBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartComparisonBaseDirective, selector: "[beMicroChartComparison]", inputs: { size: "size", chartData: "chartData" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartComparisonBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beMicroChartComparison]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { size: [{
+                type: Input
+            }], chartData: [{
+                type: Input
+            }] } });
+
+class MicroChartComparisonComponent extends BaseComponent {
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+}
+MicroChartComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartComparisonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MicroChartComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartComparisonComponent, selector: "be-micro-chart-comparison", inputs: { data: "data", size: "size" }, usesInheritance: true, ngImport: i0, template: "<div *untilInView=\"el\" beMicroChartComparison [chartData]=\"data\" [size]=\"size\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: MicroChartComparisonBaseDirective, selector: "[beMicroChartComparison]", inputs: ["size", "chartData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartComparisonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'be-micro-chart-comparison', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *untilInView=\"el\" beMicroChartComparison [chartData]=\"data\" [size]=\"size\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class MicroChartAreaBaseDirective extends MicroChartBaseDirective {
+    constructor(el, renderer2) {
+        super(el, renderer2);
+        this.el = el;
+        this.renderer2 = renderer2;
+        this.areas = [];
+    }
+    /* eslint-disable */
+    setOptions(options) {
+        this._scaleDownLineData();
+        // set custom xAxis
+        this.xAxis.type = 'category';
+        this.line.data.forEach((item) => {
+            var _a, _b;
+            (_b = (_a = this.xAxis) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.push(item.label);
+        });
+        this.xAxis.max = undefined;
+        this.xAxis.boundaryGap = false;
+        // set custom yAxis
+        this.yAxis.splitLine = { show: false };
+        this.yAxis.type = 'value';
+        this.yAxis.splitNumber = 3;
+        this.yAxis.min = 0;
+        this.yAxis.max = 6;
+        // handel area
+        this.areas.forEach((area) => {
+            const line = this._createItem(area.color, area.data.map((c) => ({
+                value: c,
+                symbol: 'none'
+            })));
+            this.series.push(line);
+        });
+        // handel line
+        const seriesItem = this._createSeriesItem(this.line.data.map((item) => ({
+            value: item.value,
+            symbol: 'none'
+        })));
+        this.series.push(seriesItem);
+    }
+    _scaleDownLineData() {
+        const maxValue = Math.max.apply(Math, this.line.data.map((dataItem) => dataItem.value));
+        return this.line.data.forEach((dataItem) => {
+            dataItem.value *= 6 / maxValue;
+        });
+    }
+    _createSeriesItem(data) {
+        var _a;
+        return {
+            type: 'line',
+            data,
+            lineStyle: { width: 1 },
+            color: ((_a = this.line) === null || _a === void 0 ? void 0 : _a.color) || 'black',
+            label: {
+                show: false
+            }
+        };
+    }
+    _createItem(color = '', data, name = 'none', stack = 'none') {
+        return {
+            name,
+            type: 'line',
+            stack,
+            areaStyle: {
+                color
+            },
+            itemStyle: {
+                color
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data
+        };
+    }
+}
+MicroChartAreaBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartAreaBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+MicroChartAreaBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartAreaBaseDirective, selector: "[beMicroChartArea]", inputs: { areas: "areas", line: "line" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartAreaBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beMicroChartArea]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { areas: [{
+                type: Input
+            }], line: [{
+                type: Input
+            }] } });
+
+class MicroChartAreaComponent extends BaseComponent {
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+    ngOnInit() {
+        var _a, _b;
+        super.ngOnInit();
+        this.suffix = (_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.line) === null || _b === void 0 ? void 0 : _b.suffix;
+        this.getFirstAndLastValues();
+    }
+    getFirstAndLastValues() {
+        const dataLength = this.chartData.line.data.length;
+        this.firstValue = this.chartData.line.data[0].value.toString();
+        this.lastValue = this.chartData.line.data[dataLength - 1].value.toString();
+        this.firstLabel = this.chartData.line.data[0].label;
+        this.lastLabel = this.chartData.line.data[dataLength - 1].label;
+    }
+}
+MicroChartAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartAreaComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MicroChartAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartAreaComponent, selector: "be-micro-chart-area", inputs: { size: "size", chartData: "chartData" }, usesInheritance: true, ngImport: i0, template: "<div class=\"right-labels\" *ngIf=\"size === 'l'\">\r\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastValue }}{{ chartData?.line?.suffix }}</span>\r\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastLabel }}</span>\r\n</div>\r\n\r\n<div class=\"top-labels\" *ngIf=\"size === 's'\">\r\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastValue }}{{ suffix }}</span>\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstValue }}{{ suffix }}</span>\r\n</div>\r\n\r\n<div *untilInView=\"el\" beMicroChartArea [areas]=\"chartData.areas\" [line]=\"chartData.line\"></div>\r\n\r\n<div class=\"left-labels\" *ngIf=\"size === 'l'\">\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstValue }}{{ suffix }}</span>\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\r\n</div>\r\n<div class=\"bottom-labels\" *ngIf=\"size === 's'\">\r\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastLabel }}</span>\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}span{margin:0;font-size:10px}.top-labels{width:100%;height:23%;display:flex;justify-content:space-between}.bottom-labels{width:100%;height:25%;display:flex;justify-content:space-between}.right-labels{min-width:40px;display:flex;flex-direction:column;justify-content:space-between;text-align:right}.left-labels{min-width:40px;display:flex;flex-direction:column;justify-content:space-between;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: MicroChartAreaBaseDirective, selector: "[beMicroChartArea]", inputs: ["areas", "line"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'be-micro-chart-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"right-labels\" *ngIf=\"size === 'l'\">\r\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastValue }}{{ chartData?.line?.suffix }}</span>\r\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastLabel }}</span>\r\n</div>\r\n\r\n<div class=\"top-labels\" *ngIf=\"size === 's'\">\r\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastValue }}{{ suffix }}</span>\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstValue }}{{ suffix }}</span>\r\n</div>\r\n\r\n<div *untilInView=\"el\" beMicroChartArea [areas]=\"chartData.areas\" [line]=\"chartData.line\"></div>\r\n\r\n<div class=\"left-labels\" *ngIf=\"size === 'l'\">\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstValue }}{{ suffix }}</span>\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\r\n</div>\r\n<div class=\"bottom-labels\" *ngIf=\"size === 's'\">\r\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastLabel }}</span>\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}span{margin:0;font-size:10px}.top-labels{width:100%;height:23%;display:flex;justify-content:space-between}.bottom-labels{width:100%;height:25%;display:flex;justify-content:space-between}.right-labels{min-width:40px;display:flex;flex-direction:column;justify-content:space-between;text-align:right}.left-labels{min-width:40px;display:flex;flex-direction:column;justify-content:space-between;text-align:left}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { size: [{
+                type: Input
+            }], chartData: [{
+                type: Input
+            }] } });
+
+class MicroChartBarBaseDirective extends MicroChartBaseDirective {
+    constructor(el, renderer2) {
+        super(el, renderer2);
+        this.el = el;
+        this.renderer2 = renderer2;
+    }
+    setOptions(options) {
+        // initialize series
+        this._initSeries(options);
+        // set custom grid
+        this.grid.bottom = 20;
+        // set custom xAxis
+        this.xAxis.type = 'category';
+        this.xAxis.max = undefined;
+        if (this.xAxis.axisLabel) {
+            this.xAxis.axisLabel.show = true;
+        }
+        this.data.forEach((dataItem) => {
+            var _a, _b;
+            (_b = (_a = this === null || this === void 0 ? void 0 : this.xAxis) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.push(dataItem.label);
+            const dataSeriesItem = { value: dataItem.value, itemStyle: { color: dataItem.color } };
+            options.series[0].data.push(dataSeriesItem);
+        });
+        // set custom yAxis
+        this.yAxis.type = 'value';
+    }
+    _initSeries(options) {
+        options.series = [
+            {
+                type: 'bar',
+                data: []
+            }
+        ];
+    }
+}
+MicroChartBarBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartBarBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+MicroChartBarBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartBarBaseDirective, selector: "[beMicroChartBar]", inputs: { data: "data" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartBarBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beMicroChartBar]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MicroChartBarComponent extends BaseComponent {
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+}
+MicroChartBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MicroChartBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroChartBarComponent, selector: "be-micro-chart-bar", inputs: { data: "data", size: "size", extraData: "extraData" }, usesInheritance: true, ngImport: i0, template: "<div *untilInView=\"el\" beMicroChartBar [ngClass]=\"size === 'l' ? 'flex-50' : 'flex-100'\" [data]=\"data\"></div>\r\n<div class=\"chart-desc\" *ngIf=\"size === 'l'\">\r\n    <h2>{{ extraData.value }}{{ extraData.suffix }}</h2>\r\n</div>\r\n", styles: [":host{display:flex;width:100%;height:100%}.flex-50,.flex-100{flex:50%}.chart-desc{flex:50%;display:flex;align-items:flex-end;justify-content:flex-end}.chart-desc h2{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: MicroChartBarBaseDirective, selector: "[beMicroChartBar]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroChartBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'be-micro-chart-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *untilInView=\"el\" beMicroChartBar [ngClass]=\"size === 'l' ? 'flex-50' : 'flex-100'\" [data]=\"data\"></div>\r\n<div class=\"chart-desc\" *ngIf=\"size === 'l'\">\r\n    <h2>{{ extraData.value }}{{ extraData.suffix }}</h2>\r\n</div>\r\n", styles: [":host{display:flex;width:100%;height:100%}.flex-50,.flex-100{flex:50%}.chart-desc{flex:50%;display:flex;align-items:flex-end;justify-content:flex-end}.chart-desc h2{margin:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], extraData: [{
+                type: Input
+            }] } });
+
+class ChartLineTimeBaseDirective extends ChartBaseDirective {
+    constructor(groupbyPipe, el, renderer2) {
+        super(el, renderer2);
+        this.groupbyPipe = groupbyPipe;
+        this.el = el;
+        this.renderer2 = renderer2;
+        this.xAxis = [];
+        this.yAxis = [];
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        const { chartOption } = changes;
+        if (chartOption) {
+            let options = chartOption.currentValue;
+            options = Object.assign(Object.assign({}, options), { toolbox: {
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: 'none'
+                        },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                } });
+            this._setTooltipFormatter(options, 'series', 'tooltip');
+            this._setTooltipFormatter(options, 'xAxis', 'axisLabel');
+            this._setTooltipFormatter(options, 'yAxis', 'tooltip');
+            if (!chartOption.firstChange) {
+                this._renderChart();
+            }
+        }
+    }
+    setOptions(options) {
+        this.options = Object.assign(Object.assign(Object.assign({}, options), this.chartOption), { toolbox: {
+                feature: {
+                    dataZoom: {
+                        yAxisIndex: 'none'
+                    },
+                    restore: {},
+                    saveAsImage: {}
+                }
+            } });
+        // set input data
+    }
+    _setTooltipFormatter(options, prop, prop2) {
+        const arr = options[prop];
+        if (Array.isArray(arr)) {
+            arr.forEach((c) => {
+                const obj2 = c[prop2];
+                if (obj2 &&
+                    obj2.formatter &&
+                    (obj2.formatter.indexOf('=>') > -1 || obj2.formatter.indexOf('function') > -1)) {
+                    // eslint-disable-next-line no-eval
+                    obj2.formatter = eval(obj2.formatter);
+                }
+            });
+        }
+    }
+}
+ChartLineTimeBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChartLineTimeBaseDirective, deps: [{ token: i1$1.GroupByPipe }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+ChartLineTimeBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: ChartLineTimeBaseDirective, selector: "[beChartLineTime]", inputs: { chartOption: "chartOption" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChartLineTimeBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beChartLineTime]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.GroupByPipe }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { chartOption: [{
+                type: Input
+            }] } });
+
+const components = [
+    MicroChartComparisonComponent,
+    MicroChartAreaComponent,
+    MicroChartBarComponent,
+    MicroChartAreaComponent,
+    MicroChartStackbarComponent,
+    MicroChartCircularComponent,
+    MicroChartLineComponent,
+    MicroChartAreaBaseDirective,
+    MicroChartLineBaseDirective,
+    MicroChartStackbarBaseDirective,
+    MicroChartComparisonBaseDirective,
+    MicroChartCircularComponent,
+    MicroChartBarBaseDirective,
+    MicroChartCircularBaseDirective,
+    MicroChartBulletComponent,
+    ChartLineTimeBaseDirective
+];
+class BarsaEchartsModule {
+}
+BarsaEchartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaEchartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BarsaEchartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: BarsaEchartsModule, declarations: [MicroChartComparisonComponent,
+        MicroChartAreaComponent,
+        MicroChartBarComponent,
+        MicroChartAreaComponent,
+        MicroChartStackbarComponent,
+        MicroChartCircularComponent,
+        MicroChartLineComponent,
+        MicroChartAreaBaseDirective,
+        MicroChartLineBaseDirective,
+        MicroChartStackbarBaseDirective,
+        MicroChartComparisonBaseDirective,
+        MicroChartCircularComponent,
+        MicroChartBarBaseDirective,
+        MicroChartCircularBaseDirective,
+        MicroChartBulletComponent,
+        ChartLineTimeBaseDirective], imports: [CommonModule, BarsaNovinRayCoreModule], exports: [MicroChartComparisonComponent,
+        MicroChartAreaComponent,
+        MicroChartBarComponent,
+        MicroChartAreaComponent,
+        MicroChartStackbarComponent,
+        MicroChartCircularComponent,
+        MicroChartLineComponent,
+        MicroChartAreaBaseDirective,
+        MicroChartLineBaseDirective,
+        MicroChartStackbarBaseDirective,
+        MicroChartComparisonBaseDirective,
+        MicroChartCircularComponent,
+        MicroChartBarBaseDirective,
+        MicroChartCircularBaseDirective,
+        MicroChartBulletComponent,
+        ChartLineTimeBaseDirective] });
+BarsaEchartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaEchartsModule, imports: [CommonModule, BarsaNovinRayCoreModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaEchartsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule, BarsaNovinRayCoreModule],
+                    declarations: [...components],
+                    exports: [...components]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BarsaEchartsModule, ChartLineTimeBaseDirective, MicroChartAreaBaseDirective, MicroChartAreaComponent, MicroChartBarBaseDirective, MicroChartBarComponent, MicroChartBulletComponent, MicroChartCircularBaseDirective, MicroChartCircularComponent, MicroChartComparisonBaseDirective, MicroChartComparisonComponent, MicroChartLineBaseDirective, MicroChartLineComponent, MicroChartStackbarBaseDirective, MicroChartStackbarComponent };
+//# sourceMappingURL=barsa-echarts.mjs.map