barsa-echarts 1.0.456 → 2.0.1

package/{fesm2020 → fesm2022}/barsa-echarts.mjs

@@ -1,878 +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 * as i1 from 'barsa-novin-ray-core';
 import { BaseComponent, BaseDirective, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
-import * as i1 from '@angular/common';
+import * as i1$1 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 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);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartBulletComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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        @if (target) {\r\n        <div class=\"target\" #target [style.left]=\"targetWidth\">\r\n            <span>{{ targetWithSuffix }}</span>\r\n        </div>\r\n        } @if (forecast) {\r\n        <div class=\"forecast\" [style.background-color]=\"forecastBackgroundColor\" [style.width]=\"forecastWidth\"></div>\r\n        } @if (isDelta && delta) {\r\n        <div class=\"delta\" #deltaBox [style.background-color]=\"deltaBackgroundColor\" [style.width]=\"deltaWidth\">\r\n            <span [style.color]=\"valueBackgroundColor\">{{ deltaWithSuffix + '\u25B2' }}</span>\r\n            <div class=\"pointer\" [style.background-color]=\"deltaBackgroundColor\"></div>\r\n        </div>\r\n        } @else { @if (value) {\r\n        <div class=\"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        } }\r\n\r\n        <!--  separator lines-->\r\n    </div>\r\n    @if (separatorLines) {\r\n    <div class=\"separator-lines\">\r\n        @for (i of separatorLinesFakeArray; track i) {\r\n        <div class=\"separator-line\"></div>\r\n        }\r\n    </div>\r\n    }\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", 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        @if (target) {\r\n        <div class=\"target\" #target [style.left]=\"targetWidth\">\r\n            <span>{{ targetWithSuffix }}</span>\r\n        </div>\r\n        } @if (forecast) {\r\n        <div class=\"forecast\" [style.background-color]=\"forecastBackgroundColor\" [style.width]=\"forecastWidth\"></div>\r\n        } @if (isDelta && delta) {\r\n        <div class=\"delta\" #deltaBox [style.background-color]=\"deltaBackgroundColor\" [style.width]=\"deltaWidth\">\r\n            <span [style.color]=\"valueBackgroundColor\">{{ deltaWithSuffix + '\u25B2' }}</span>\r\n            <div class=\"pointer\" [style.background-color]=\"deltaBackgroundColor\"></div>\r\n        </div>\r\n        } @else { @if (value) {\r\n        <div class=\"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        } }\r\n\r\n        <!--  separator lines-->\r\n    </div>\r\n    @if (separatorLines) {\r\n    <div class=\"separator-lines\">\r\n        @for (i of separatorLinesFakeArray; track i) {\r\n        <div class=\"separator-line\"></div>\r\n        }\r\n    </div>\r\n    }\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: () => [{ 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(_el);
-        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(() => {
-            head.load(['Lib/Echarts/echarts.My.min.js'], () => {
-                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 ChartBaseDirective extends BaseDirective {
+    constructor(_el, renderer2) {
+        super(_el);
+        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(() => {
+            head.load(['Lib/Echarts/echarts.My.min.js'], () => {
+                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
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ChartBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: ChartBaseDirective, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ChartBaseDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ 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 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
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartBaseDirective, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartBaseDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ 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) => {
-            this.xAxis?.data?.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) {
-        options.series = [
-            {
-                type: 'line',
-                color: this.line?.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 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) => {
+            this.xAxis?.data?.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) {
+        options.series = [
+            {
+                type: 'line',
+                color: this.line?.color,
+                data: [],
+                label: {
+                    show: false
+                }
+            }
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartLineBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartLineBaseDirective, selector: "[beMicroChartLine]", inputs: { line: "line" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartLineBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beMicroChartLine]'
+                }]
+        }], ctorParameters: () => [{ 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 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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartLineComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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.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: "17.3.5", 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: () => [{ 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 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
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartStackbarBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartStackbarBaseDirective, selector: "[beMicroChartStackbar]", inputs: { chartData: "chartData" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartStackbarBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beMicroChartStackbar]'
+                }]
+        }], ctorParameters: () => [{ 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 MicroChartStackbarComponent extends BaseComponent {
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartStackbarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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.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: "17.3.5", 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: () => [{ 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 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: []
+            }
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartCircularBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartCircularBaseDirective, selector: "[beMicroChartCircular]", inputs: { data: "data" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartCircularBaseDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[beMicroChartCircular]' }]
+        }], ctorParameters: () => [{ 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 MicroChartCircularComponent extends BaseComponent {
+    constructor(el) {
+        super();
+        this.el = el;
+        this.data = 50;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartCircularComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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.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: "17.3.5", 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: () => [{ 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) => {
-            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 };
-            this.yAxis?.data?.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) {
-        options.series = [
-            {
-                showBackground: true,
-                barWidth: this.chartData.barWidth ?? 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 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) => {
+            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 };
+            this.yAxis?.data?.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) {
+        options.series = [
+            {
+                showBackground: true,
+                barWidth: this.chartData.barWidth ?? 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
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartComparisonBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartComparisonBaseDirective, selector: "[beMicroChartComparison]", inputs: { size: "size", chartData: "chartData" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartComparisonBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beMicroChartComparison]'
+                }]
+        }], ctorParameters: () => [{ 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 MicroChartComparisonComponent extends BaseComponent {
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartComparisonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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.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: "17.3.5", 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: () => [{ 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) => {
-            this.xAxis?.data?.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) {
-        return {
-            type: 'line',
-            data,
-            lineStyle: { width: 1 },
-            color: this.line?.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 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) => {
+            this.xAxis?.data?.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) {
+        return {
+            type: 'line',
+            data,
+            lineStyle: { width: 1 },
+            color: this.line?.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
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartAreaBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartAreaBaseDirective, selector: "[beMicroChartArea]", inputs: { areas: "areas", line: "line" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartAreaBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beMicroChartArea]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { areas: [{
+                type: Input
+            }], line: [{
+                type: Input
             }] } });
 
-class MicroChartAreaComponent extends BaseComponent {
-    constructor(el) {
-        super();
-        this.el = el;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.suffix = this.chartData?.line?.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 MicroChartAreaComponent extends BaseComponent {
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.suffix = this.chartData?.line?.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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartAreaComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: MicroChartAreaComponent, selector: "be-micro-chart-area", inputs: { size: "size", chartData: "chartData" }, usesInheritance: true, ngImport: i0, template: "@if (size === 'l') {\r\n<div class=\"right-labels\">\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} @if (size === 's') {\r\n<div class=\"top-labels\">\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\r\n<div *untilInView=\"el\" beMicroChartArea [areas]=\"chartData.areas\" [line]=\"chartData.line\"></div>\r\n\r\n@if (size === 'l') {\r\n<div class=\"left-labels\">\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstValue }}{{ suffix }}</span>\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\r\n</div>\r\n} @if (size === 's') {\r\n<div class=\"bottom-labels\">\r\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastLabel }}</span>\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\r\n</div>\r\n}\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.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: "17.3.5", ngImport: i0, type: MicroChartAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'be-micro-chart-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (size === 'l') {\r\n<div class=\"right-labels\">\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} @if (size === 's') {\r\n<div class=\"top-labels\">\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\r\n<div *untilInView=\"el\" beMicroChartArea [areas]=\"chartData.areas\" [line]=\"chartData.line\"></div>\r\n\r\n@if (size === 'l') {\r\n<div class=\"left-labels\">\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstValue }}{{ suffix }}</span>\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\r\n</div>\r\n} @if (size === 's') {\r\n<div class=\"bottom-labels\">\r\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastLabel }}</span>\r\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\r\n</div>\r\n}\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: () => [{ 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) => {
-            this?.xAxis?.data?.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 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) => {
+            this?.xAxis?.data?.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: []
+            }
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartBarBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartBarBaseDirective, selector: "[beMicroChartBar]", inputs: { data: "data" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartBarBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beMicroChartBar]'
+                }]
+        }], ctorParameters: () => [{ 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 MicroChartBarComponent extends BaseComponent {
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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@if (size === 'l') {\r\n<div class=\"chart-desc\">\r\n    <h2>{{ extraData.value }}{{ extraData.suffix }}</h2>\r\n</div>\r\n}\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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: "17.3.5", 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@if (size === 'l') {\r\n<div class=\"chart-desc\">\r\n    <h2>{{ extraData.value }}{{ extraData.suffix }}</h2>\r\n</div>\r\n}\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: () => [{ 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 = {
-                ...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 = {
-            ...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
+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 = {
+                ...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 = {
+            ...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);
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ChartLineTimeBaseDirective, deps: [{ token: i1.GroupByPipe }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: ChartLineTimeBaseDirective, selector: "[beChartLineTime]", inputs: { chartOption: "chartOption" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ChartLineTimeBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[beChartLineTime]'
+                }]
+        }], ctorParameters: () => [{ type: i1.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]
-                }]
+const components = [
+    MicroChartComparisonComponent,
+    MicroChartAreaComponent,
+    MicroChartBarComponent,
+    MicroChartAreaComponent,
+    MicroChartStackbarComponent,
+    MicroChartCircularComponent,
+    MicroChartLineComponent,
+    MicroChartAreaBaseDirective,
+    MicroChartLineBaseDirective,
+    MicroChartStackbarBaseDirective,
+    MicroChartComparisonBaseDirective,
+    MicroChartCircularComponent,
+    MicroChartBarBaseDirective,
+    MicroChartCircularBaseDirective,
+    MicroChartBulletComponent,
+    ChartLineTimeBaseDirective
+];
+class BarsaEchartsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaEchartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.5", 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] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaEchartsModule, imports: [CommonModule, BarsaNovinRayCoreModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", 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.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { BarsaEchartsModule, ChartLineTimeBaseDirective, MicroChartAreaBaseDirective, MicroChartAreaComponent, MicroChartBarBaseDirective, MicroChartBarComponent, MicroChartBulletComponent, MicroChartCircularBaseDirective, MicroChartCircularComponent, MicroChartComparisonBaseDirective, MicroChartComparisonComponent, MicroChartLineBaseDirective, MicroChartLineComponent, MicroChartStackbarBaseDirective, MicroChartStackbarComponent };