barsa-echarts 2.0.37 → 2.0.39

package/fesm2022/barsa-echarts.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewChild, Input, Directive, NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, ViewChild, Directive, NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from 'barsa-novin-ray-core';
-import { BaseComponent, BaseDirective, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
+import { BaseComponent, BaseDirective, BarsaApi, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -64,12 +64,16 @@ class MicroChartBulletComponent extends BaseComponent {
         }
     }
     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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: MicroChartBulletComponent, selector: "be-micro-chart-bullet", inputs: { chartInstanceId: "chartInstanceId", parentMoId: "parentMoId", 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: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { chartInstanceId: [{
+                type: Input
+            }], parentMoId: [{
+                type: Input
+            }], deltaDom: [{
                 type: ViewChild,
                 args: ['deltaBox']
             }], range: [{
@@ -89,37 +93,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             }] } });
 
 class ChartBaseDirective extends BaseDirective {
-    constructor(_el, renderer2) {
+    constructor(_el, renderer2, _cdr) {
         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 = [];
+        this._cdr = _cdr;
     }
     ngOnInit() {
         // set some style to chart
@@ -128,138 +106,43 @@ class ChartBaseDirective extends BaseDirective {
         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);
+        this._loadChartInstance(this.chartInstanceId, this.parentMoId);
+    }
+    _renderChart() {
         setTimeout(() => {
             head.load(['Lib/Echarts/echarts.My.min.js'], () => {
                 const elDom = this._el.nativeElement;
                 this.chart = echarts.init(elDom);
-                this._renderChart();
+                this.chart.setOption(this.chartOption);
             });
         }, 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
+    _loadChartInstance(chartInstanceId, parentMoId = null) {
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [chartInstanceId, parentMoId],
+            Method: 'BarsaGetChartOptions',
+            SuccessFn: (chartOption) => {
+                this.chartOption = BarsaApi.Ext.decode(chartOption);
+                this._renderChart();
+                this._cdr.detectChanges();
             },
-            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);
+            FailFn: () => { }
         });
-        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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ChartBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: ChartBaseDirective, selector: "[echartRenderer]", inputs: { chartInstanceId: "chartInstanceId", parentMoId: "parentMoId" }, exportAs: ["echartRenderer"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MicroChartLineBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ChartBaseDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[beMicroChartLine]'
+                    selector: '[echartRenderer]',
+                    exportAs: 'echartRenderer'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { line: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { chartInstanceId: [{
+                type: Input
+            }], parentMoId: [{
                 type: Input
             }] } });
 
@@ -268,72 +151,15 @@ class MicroChartLineComponent extends BaseComponent {
         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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartLineComponent, selector: "be-micro-chart-line", inputs: { chartInstanceId: "chartInstanceId", parentMoId: "parentMoId" }, usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"top-labels\">\n    <span>{{ lastValue }}{{ line?.suffix }}</span>\n    <span>{{ firstValue }}{{ line?.suffix }}</span>\n</div> -->\n\n<div class=\"chart\">\n    <div *untilInView=\"el\" echartRenderer [chartInstanceId]=\"chartInstanceId\" [parentMoId]=\"parentMoId\"></div>\n</div>\n<!-- \n<div class=\"bottom-labels\">\n    <span>{{ lastLabel }}</span>\n    <span>{{ firstLabel }}</span>\n</div> -->\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: ChartBaseDirective, selector: "[echartRenderer]", inputs: ["chartInstanceId", "parentMoId"], exportAs: ["echartRenderer"] }], 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: [{
+            args: [{ selector: 'be-micro-chart-line', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div class=\"top-labels\">\n    <span>{{ lastValue }}{{ line?.suffix }}</span>\n    <span>{{ firstValue }}{{ line?.suffix }}</span>\n</div> -->\n\n<div class=\"chart\">\n    <div *untilInView=\"el\" echartRenderer [chartInstanceId]=\"chartInstanceId\" [parentMoId]=\"parentMoId\"></div>\n</div>\n<!-- \n<div class=\"bottom-labels\">\n    <span>{{ lastLabel }}</span>\n    <span>{{ firstLabel }}</span>\n</div> -->\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: { chartInstanceId: [{
                 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: [{
+            }], parentMoId: [{
                 type: Input
             }] } });
 
@@ -343,84 +169,14 @@ class MicroChartStackbarComponent extends BaseComponent {
         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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartStackbarComponent, selector: "be-micro-chart-stackbar", inputs: { chartInstanceId: "chartInstanceId", parentMoId: "parentMoId" }, usesInheritance: true, ngImport: i0, template: "<div *untilInView=\"el\" echartRenderer class=\"chart\" [chartInstanceId]=\"chartInstanceId\" [parentMoId]=\"parentMoId\"></div>\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: ChartBaseDirective, selector: "[echartRenderer]", inputs: ["chartInstanceId", "parentMoId"], exportAs: ["echartRenderer"] }], 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: [{
+            args: [{ selector: 'be-micro-chart-stackbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *untilInView=\"el\" echartRenderer class=\"chart\" [chartInstanceId]=\"chartInstanceId\" [parentMoId]=\"parentMoId\"></div>\n", styles: [":host{display:block;width:100%;height:100%}.chart{width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { chartInstanceId: [{
                 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: [{
+            }], parentMoId: [{
                 type: Input
             }] } });
 
@@ -428,111 +184,16 @@ 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartCircularComponent, selector: "be-micro-chart-circular", inputs: { chartInstanceId: "chartInstanceId", parentMoId: "parentMoId" }, usesInheritance: true, ngImport: i0, template: "<div *untilInView=\"el\" echartRenderer [chartInstanceId]=\"chartInstanceId\" [parentMoId]=\"parentMoId\"></div>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: ChartBaseDirective, selector: "[echartRenderer]", inputs: ["chartInstanceId", "parentMoId"], exportAs: ["echartRenderer"] }], 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
-            }
-        };
-    }
-    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: [{
+            args: [{ selector: 'be-micro-chart-circular', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *untilInView=\"el\" echartRenderer [chartInstanceId]=\"chartInstanceId\" [parentMoId]=\"parentMoId\"></div>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { chartInstanceId: [{
                 type: Input
-            }], chartData: [{
+            }], parentMoId: [{
                 type: Input
             }] } });
 
@@ -542,100 +203,16 @@ class MicroChartComparisonComponent extends BaseComponent {
         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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartComparisonComponent, selector: "be-micro-chart-comparison", inputs: { chartInstanceId: "chartInstanceId", parentMoId: "parentMoId", size: "size" }, usesInheritance: true, ngImport: i0, template: "<div *untilInView=\"el\" echartRenderer [chartInstanceId]=\"chartInstanceId\" [parentMoId]=\"parentMoId\"></div>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: ChartBaseDirective, selector: "[echartRenderer]", inputs: ["chartInstanceId", "parentMoId"], exportAs: ["echartRenderer"] }], 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: [{
+            args: [{ selector: 'be-micro-chart-comparison', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *untilInView=\"el\" echartRenderer [chartInstanceId]=\"chartInstanceId\" [parentMoId]=\"parentMoId\"></div>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { chartInstanceId: [{
                 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
-        };
-    }
-    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: [{
+            }], parentMoId: [{
                 type: Input
-            }], line: [{
+            }], size: [{
                 type: Input
             }] } });
 
@@ -650,66 +227,27 @@ class MicroChartAreaComponent extends BaseComponent {
         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;
+        if (this.chartData) {
+            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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartAreaComponent, selector: "be-micro-chart-area", inputs: { chartInstanceId: "chartInstanceId", parentMoId: "parentMoId", size: "size", chartData: "chartData" }, usesInheritance: true, ngImport: i0, template: "<!-- @if (size === 'l') {\n<div class=\"right-labels\">\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastValue }}{{ chartData?.line?.suffix }}</span>\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastLabel }}</span>\n</div>\n} @if (size === 's') {\n<div class=\"top-labels\">\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastValue }}{{ suffix }}</span>\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstValue }}{{ suffix }}</span>\n</div>\n} -->\n\n<div *untilInView=\"el\" echartRenderer [chartInstanceId]=\"chartInstanceId\" [parentMoId]=\"parentMoId\"></div>\n<!-- \n@if (size === 'l') {\n<div class=\"left-labels\">\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstValue }}{{ suffix }}</span>\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\n</div>\n} @if (size === 's') {\n<div class=\"bottom-labels\">\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastLabel }}</span>\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\n</div>\n} -->\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: ChartBaseDirective, selector: "[echartRenderer]", inputs: ["chartInstanceId", "parentMoId"], exportAs: ["echartRenderer"] }], 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: [{
+            args: [{ selector: 'be-micro-chart-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- @if (size === 'l') {\n<div class=\"right-labels\">\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastValue }}{{ chartData?.line?.suffix }}</span>\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastLabel }}</span>\n</div>\n} @if (size === 's') {\n<div class=\"top-labels\">\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastValue }}{{ suffix }}</span>\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstValue }}{{ suffix }}</span>\n</div>\n} -->\n\n<div *untilInView=\"el\" echartRenderer [chartInstanceId]=\"chartInstanceId\" [parentMoId]=\"parentMoId\"></div>\n<!-- \n@if (size === 'l') {\n<div class=\"left-labels\">\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstValue }}{{ suffix }}</span>\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\n</div>\n} @if (size === 's') {\n<div class=\"bottom-labels\">\n    <span [style.color]=\"chartData.lastValueColor\">{{ lastLabel }}</span>\n    <span [style.color]=\"chartData.firstValueColor\">{{ firstLabel }}</span>\n</div>\n} -->\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: { chartInstanceId: [{
                 type: Input
-            }], chartData: [{
+            }], parentMoId: [{
                 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: [{
+            }], size: [{
+                type: Input
+            }], chartData: [{
                 type: Input
             }] } });
 
@@ -719,12 +257,17 @@ class MicroChartBarComponent extends BaseComponent {
         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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: MicroChartBarComponent, selector: "be-micro-chart-bar", inputs: { chartInstanceId: "chartInstanceId", parentMoId: "parentMoId", size: "size", extraData: "extraData" }, viewQueries: [{ propertyName: "eChartBase", first: true, predicate: ["echartRenderer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    *untilInView=\"el\"\n    echartRenderer\n    #echartRenderer=\"echartRenderer\"\n    [ngClass]=\"size === 'l' ? 'flex-50' : 'flex-100'\"\n    [chartInstanceId]=\"chartInstanceId\"\n    [parentMoId]=\"parentMoId\"\n></div>\n<!-- @if (size === 'l') {\n<div class=\"chart-desc\">\n    <h2>{{ extraData.value }}{{ extraData.suffix }}</h2>\n</div>\n} -->\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: ChartBaseDirective, selector: "[echartRenderer]", inputs: ["chartInstanceId", "parentMoId"], exportAs: ["echartRenderer"] }], 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: [{
+            args: [{ selector: 'be-micro-chart-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *untilInView=\"el\"\n    echartRenderer\n    #echartRenderer=\"echartRenderer\"\n    [ngClass]=\"size === 'l' ? 'flex-50' : 'flex-100'\"\n    [chartInstanceId]=\"chartInstanceId\"\n    [parentMoId]=\"parentMoId\"\n></div>\n<!-- @if (size === 'l') {\n<div class=\"chart-desc\">\n    <h2>{{ extraData.value }}{{ extraData.suffix }}</h2>\n</div>\n} -->\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: { eChartBase: [{
+                type: ViewChild,
+                args: ['echartRenderer']
+            }], chartInstanceId: [{
+                type: Input
+            }], parentMoId: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -732,82 +275,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 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,
@@ -816,15 +283,9 @@ const components = [
     MicroChartStackbarComponent,
     MicroChartCircularComponent,
     MicroChartLineComponent,
-    MicroChartAreaBaseDirective,
-    MicroChartLineBaseDirective,
-    MicroChartStackbarBaseDirective,
-    MicroChartComparisonBaseDirective,
     MicroChartCircularComponent,
-    MicroChartBarBaseDirective,
-    MicroChartCircularBaseDirective,
     MicroChartBulletComponent,
-    ChartLineTimeBaseDirective
+    ChartBaseDirective
 ];
 class BarsaEchartsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaEchartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -835,30 +296,18 @@ class BarsaEchartsModule {
             MicroChartStackbarComponent,
             MicroChartCircularComponent,
             MicroChartLineComponent,
-            MicroChartAreaBaseDirective,
-            MicroChartLineBaseDirective,
-            MicroChartStackbarBaseDirective,
-            MicroChartComparisonBaseDirective,
             MicroChartCircularComponent,
-            MicroChartBarBaseDirective,
-            MicroChartCircularBaseDirective,
             MicroChartBulletComponent,
-            ChartLineTimeBaseDirective], imports: [CommonModule, BarsaNovinRayCoreModule], exports: [MicroChartComparisonComponent,
+            ChartBaseDirective], imports: [CommonModule, BarsaNovinRayCoreModule], exports: [MicroChartComparisonComponent,
             MicroChartAreaComponent,
             MicroChartBarComponent,
             MicroChartAreaComponent,
             MicroChartStackbarComponent,
             MicroChartCircularComponent,
             MicroChartLineComponent,
-            MicroChartAreaBaseDirective,
-            MicroChartLineBaseDirective,
-            MicroChartStackbarBaseDirective,
-            MicroChartComparisonBaseDirective,
             MicroChartCircularComponent,
-            MicroChartBarBaseDirective,
-            MicroChartCircularBaseDirective,
             MicroChartBulletComponent,
-            ChartLineTimeBaseDirective] }); }
+            ChartBaseDirective] }); }
     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: [{
@@ -875,5 +324,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BarsaEchartsModule, ChartLineTimeBaseDirective, MicroChartAreaBaseDirective, MicroChartAreaComponent, MicroChartBarBaseDirective, MicroChartBarComponent, MicroChartBulletComponent, MicroChartCircularBaseDirective, MicroChartCircularComponent, MicroChartComparisonBaseDirective, MicroChartComparisonComponent, MicroChartLineBaseDirective, MicroChartLineComponent, MicroChartStackbarBaseDirective, MicroChartStackbarComponent };
+export { BarsaEchartsModule, ChartBaseDirective, MicroChartAreaComponent, MicroChartBarComponent, MicroChartBulletComponent, MicroChartCircularComponent, MicroChartComparisonComponent, MicroChartLineComponent, MicroChartStackbarComponent };
 //# sourceMappingURL=barsa-echarts.mjs.map