intelica-library-ui 0.1.81 → 0.1.83

package/fesm2022/intelica-library-ui.mjs

@@ -2515,8 +2515,8 @@ class EchartComponent {
     config;
     id;
     containerStyle = {
-        width: "100%",
-        height: "400px",
+        width: '100%',
+        height: '400px',
     };
     event = new EventEmitter();
     chart;
@@ -2527,13 +2527,13 @@ class EchartComponent {
     ngAfterViewInit() {
         const chartElement = this.el.nativeElement.querySelector(`#${this.id}_plot`);
         if (!this.config) {
-            throw new Error("Chart configuration is not set");
+            throw new Error('Chart configuration is not set');
         }
         if (!isPlatformBrowser(this.platformId)) {
-            throw new Error("Platform is not browser");
+            throw new Error('Platform is not browser');
         }
         if (!chartElement) {
-            throw new Error("Plot area not found");
+            throw new Error('Plot area not found');
         }
         this.initChart(chartElement);
     }
@@ -2541,18 +2541,22 @@ class EchartComponent {
         this.chart.setOption(this.config);
     }
     initChart(chartElement) {
+        const observer = new ResizeObserver(() => {
+            this.chart.resize();
+        });
         this.chart = echarts.init(chartElement);
         this.chart.setOption(this.config);
-        this.chart.on("click", params => {
+        this.chart.on('click', (params) => {
             this.event.emit(params);
         });
+        observer.observe(chartElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EchartComponent, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: EchartComponent, isStandalone: true, selector: "intelica-echart", inputs: { config: "config", id: "id", containerStyle: "containerStyle" }, outputs: { event: "event" }, ngImport: i0, template: "<div [id]=\"id + '_plot'\" class=\"chart\" [ngStyle]=\"containerStyle\"></div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EchartComponent, decorators: [{
             type: Component,
-            args: [{ selector: "intelica-echart", imports: [CommonModule], template: "<div [id]=\"id + '_plot'\" class=\"chart\" [ngStyle]=\"containerStyle\"></div>\r\n" }]
+            args: [{ selector: 'intelica-echart', imports: [CommonModule], template: "<div [id]=\"id + '_plot'\" class=\"chart\" [ngStyle]=\"containerStyle\"></div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -3178,6 +3182,7 @@ class EchartService {
         };
     }
     /// Charts Configuration
+    /// BAR CHARTS
     getBarChartOptions(categories, series, labelConfig, tooltipConfig) {
         return {
             xAxis: this.getCategoryAxisConfiguration(categories),
@@ -3250,8 +3255,117 @@ class EchartService {
         });
         return barBase;
     }
-    getRateDoughnutPie(data) {
-        const rateData = data.find((d) => d.name.toLowerCase() !== 'placeholder');
+    /// LINE CHARTS
+    getLineChartOptions(categories, series, labelConfig, tooltipConfig) {
+        return {
+            xAxis: this.getCategoryAxisConfiguration(categories),
+            yAxis: this.getValueAxisConfiguration(true, true, true),
+            series: [
+                ...series.map((item, seriesIndex) => ({
+                    type: 'line',
+                    name: item.name,
+                    data: item.value,
+                    itemStyle: { color: item.color },
+                    symbol: 'circle',
+                    symbolSize: 14,
+                    emphasis: {
+                        itemStyle: {
+                            color: item.color,
+                            borderColor: item.color + '40', // 40 ( hexadecimal ) = .25 ( decimal )
+                            borderWidth: 16,
+                        },
+                    },
+                })),
+            ],
+            tooltip: {
+                trigger: 'item',
+                backgroundColor: '#FFFFFF',
+                borderWidth: 2,
+                textStyle: { fontSize: 12 },
+                formatter: tooltipConfig,
+            },
+            dataZoom: [
+                {
+                    type: 'inside', // inside | slider
+                    show: true,
+                    height: 12,
+                    bottom: 10,
+                    backgroundColor: '#ddd',
+                    borderColor: 'transparent',
+                    fillerColor: 'rgba(150, 150, 150, 0.5)',
+                    handleSize: '80%',
+                    handleStyle: {
+                        color: '#A0A0A0',
+                        borderColor: 'transparent',
+                        shadowBlur: 2,
+                        shadowColor: 'rgba(0, 0, 0, 0.2)',
+                    },
+                    showDataShadow: false,
+                },
+                {
+                    type: 'inside',
+                    showDataShadow: false,
+                },
+            ],
+            legend: this.getLegendConfiguration(),
+        };
+    }
+    /// PIE CHARTS
+    getDoughnutPieOptions(data, labelConfig, tooltipConfig) {
+        return {
+            series: [
+                {
+                    data: data.map((item) => ({
+                        ...item,
+                        itemStyle: { color: item.color },
+                    })),
+                    name: 'Pie Chart',
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    avoidLabelOverlap: false,
+                    emphasis: {
+                        scale: true,
+                    },
+                    labelLine: {
+                        show: true,
+                        length: 15,
+                        length2: 20,
+                    },
+                    label: {
+                        show: true,
+                        position: 'outside',
+                        color: Color.blue,
+                        fontSize: 14,
+                        formatter: labelConfig,
+                    },
+                },
+            ],
+            tooltip: {
+                trigger: 'item',
+                formatter: tooltipConfig,
+                // extraCssText: this.chartService.getTooltipCssText(),
+            },
+            legend: {
+                orient: 'horizontal', // 'horizontal | vertical'
+                icon: 'circle',
+                bottom: 5,
+                align: 'auto',
+                itemGap: 20,
+                textStyle: { color: Color.blue, fontSize: 14 },
+            },
+        };
+    }
+    getRateDoughnutPieOptions(letter, value, color) {
+        const power = Math.ceil(Math.log10(value));
+        const placeholderValue = Math.pow(10, power);
+        const data = [
+            { name: letter, value: value, itemStyle: { color: color } },
+            {
+                name: 'placeholder',
+                value: placeholderValue - value,
+                itemStyle: { color: Color.gray },
+            },
+        ];
         return {
             tooltip: {
                 trigger: 'none',
@@ -3270,10 +3384,8 @@ class EchartService {
                     silent: true,
                     label: {
                         show: true,
-                        formatter: function (_) {
-                            return `${rateData.name}`;
-                        },
-                        color: rateData.itemStyle.color,
+                        formatter: letter,
+                        color: color,
                         fontSize: '40',
                         position: 'center',
                     },