intelica-library-ui 0.1.86 → 0.1.88

package/fesm2022/intelica-library-ui.mjs

@@ -158,13 +158,15 @@ const secure = !domain.includes("localhost");
 const CookieAttributesGeneral = { domain: domain, path: "/", secure: secure };
 
 const Color = {
-    mastercard: '#ff7f00',
-    visa: '#17375E',
-    amex: '#348AD5',
-    orange: '#ff7f00',
-    blue: '#17375E',
-    gray: '#D3D3D3',
-    gray3: '#a6a5a1',
+    mastercard: "#ff7f00",
+    visa: "#17375E",
+    amex: "#348AD5",
+    orange: "#ff7f00",
+    orangeDark: "#CC4900",
+    blue: "#17375E",
+    gray: "#D3D3D3",
+    gray3: "#a6a5a1",
+    gray5: "#e9e9e9",
 };
 const getColor = (name) => {
     return Color[name];
@@ -2548,10 +2550,15 @@ class EchartComponent {
     refreshChart() {
         this.chart.setOption(this.config);
     }
+    resize() {
+        if (this.chart) {
+            setTimeout(() => {
+                this.chart.resize();
+            }, 1);
+        }
+    }
     initChart(chartElement) {
-        const observer = new ResizeObserver(() => {
-            this.chart.resize();
-        });
+        const observer = new ResizeObserver(this.resize);
         this.chart = echarts.init(chartElement);
         this.chart.setOption(this.config);
         this.chart.on('click', (params) => {
@@ -3134,13 +3141,13 @@ class EchartService {
             },
             axisLine: {
                 show: false,
-                lineStyle: { color: getColor('gray'), type: 'dashed' },
+                lineStyle: { color: getColor("gray"), type: "dashed" },
             },
             splitLine: {
                 show: showSplitLine,
                 lineStyle: {
                     color: Color.gray,
-                    type: 'dashed',
+                    type: "dashed",
                     width: 1,
                 },
             },
@@ -3153,10 +3160,10 @@ class EchartService {
         };
     }
     getCategoryAxisConfiguration(data) {
-        return this.getDefultAxisConfiguration('category', data, true);
+        return this.getDefultAxisConfiguration("category", data, true);
     }
     getValueAxisConfiguration(showAxis = false, format = false, showAxisLines = false) {
-        let axisConfiguration = this.getDefultAxisConfiguration('value', undefined, showAxis, showAxisLines);
+        let axisConfiguration = this.getDefultAxisConfiguration("value", undefined, showAxis, showAxisLines);
         if (format) {
             axisConfiguration.axisLabel.formatter = (value) => this._sharedService.FormatNumberWithSuffix(value);
         }
@@ -3173,18 +3180,18 @@ class EchartService {
     }
     getGridConfiguration() {
         return {
-            left: '10%',
-            right: '10%',
-            bottom: '10%',
+            left: "0%",
+            right: "0%",
+            //bottom: '0%',
             containLabel: true,
         };
     }
     getLegendConfiguration() {
         return {
-            orient: 'horizontal', // 'horizontal | vertical'
-            icon: 'circle',
+            orient: "horizontal", // 'horizontal | vertical'
+            icon: "circle",
             bottom: 5,
-            align: 'auto',
+            align: "auto",
             itemGap: 20,
             textStyle: { color: Color.blue, fontSize: 14 },
         };
@@ -3197,15 +3204,15 @@ class EchartService {
             yAxis: this.getValueAxisConfiguration(),
             series: [
                 ...series.map((item) => ({
-                    type: 'bar',
+                    type: "bar",
                     name: item.name,
                     itemStyle: { color: item.color },
                     data: item.value,
-                    barWidth: '25%',
-                    barGap: '0%',
+                    barWidth: "25%",
+                    barGap: "0%",
                     label: {
                         show: true,
-                        position: 'top',
+                        position: "top",
                         color: Color.blue,
                         fontSize: 12,
                         formatter: labelConfig,
@@ -3213,8 +3220,8 @@ class EchartService {
                 })),
             ],
             tooltip: {
-                trigger: 'item',
-                backgroundColor: '#FFFFFF',
+                trigger: "item",
+                backgroundColor: "#FFFFFF",
                 borderWidth: 2,
                 textStyle: { fontSize: 12 },
                 formatter: tooltipConfig,
@@ -3226,10 +3233,10 @@ class EchartService {
     getBarChartStackOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig, showLegend);
         barBase.series.forEach((serie, index) => {
-            serie.barWidth = '50%';
-            serie.barGap = '0%';
-            serie.barCategoryGap = '10%';
-            serie.stack = 'total';
+            serie.barWidth = "50%";
+            serie.barGap = "0%";
+            serie.barCategoryGap = "10%";
+            serie.stack = "total";
             if (index < series.length - 1) {
                 serie.label = undefined;
             }
@@ -3240,9 +3247,9 @@ class EchartService {
         let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig, showLegend);
         barBase.xAxis = this.getValueAxisConfiguration();
         barBase.yAxis = this.getCategoryAxisConfiguration(categories);
-        barBase.series.forEach((serie) => {
+        barBase.series.forEach(serie => {
             if (serie.label) {
-                serie.label.position = 'right';
+                serie.label.position = "right";
             }
         });
         return barBase;
@@ -3250,12 +3257,12 @@ class EchartService {
     getBarChartHorizontalStackOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         let barBase = this.getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig, showLegend);
         barBase.series.forEach((serie, index) => {
-            serie.barWidth = '50%';
-            serie.barGap = '0%';
-            serie.barCategoryGap = '10%';
-            serie.stack = 'total';
+            serie.barWidth = "50%";
+            serie.barGap = "0%";
+            serie.barCategoryGap = "10%";
+            serie.stack = "total";
             if (serie.label) {
-                serie.label.position = 'right';
+                serie.label.position = "right";
             }
             if (index < series.length - 1) {
                 serie.label = undefined;
@@ -3272,21 +3279,19 @@ class EchartService {
             barBase.yAxis.axisLabel.color = Color.blue;
             barBase.yAxis.axisLabel.fontSize = 12;
             barBase.yAxis.axisLabel.width = categoryWidth;
-            barBase.yAxis.axisLabel.overflow = 'break';
-            barBase.yAxis.axisLabel.align = 'left';
-            barBase.yAxis.axisLabel.verticalAlign =
-                'middle';
-            barBase.yAxis.axisLabel.margin =
-                categoryWidth + 30;
+            barBase.yAxis.axisLabel.overflow = "break";
+            barBase.yAxis.axisLabel.align = "left";
+            barBase.yAxis.axisLabel.verticalAlign = "middle";
+            barBase.yAxis.axisLabel.margin = categoryWidth + 30;
             barBase.yAxis.axisLabel.lineHeight = 16;
-            barBase.grid.top = '0%';
+            barBase.grid.top = "0%";
             barBase.grid.left = -1 * categoryWidth + 60;
             barBase.grid.right = 20;
-            barBase.grid.bottom = '0%';
+            barBase.grid.bottom = "0%";
             barBase.grid.containLabel = true;
         }
         barBase.series.forEach((serie, index) => {
-            serie.barWidth = '75%';
+            serie.barWidth = "75%";
         });
         return barBase;
     }
@@ -3297,48 +3302,48 @@ class EchartService {
             yAxis: this.getValueAxisConfiguration(true, true, true),
             series: [
                 ...series.map((item, seriesIndex) => ({
-                    type: 'line',
+                    type: "line",
                     name: item.name,
                     data: item.value,
                     itemStyle: { color: item.color },
-                    symbol: 'circle',
+                    symbol: "circle",
                     symbolSize: 14,
                     emphasis: {
                         itemStyle: {
                             color: item.color,
-                            borderColor: item.color + '40', // 40 ( hexadecimal ) = .25 ( decimal )
+                            borderColor: item.color + "40", // 40 ( hexadecimal ) = .25 ( decimal )
                             borderWidth: 16,
                         },
                     },
                 })),
             ],
             tooltip: {
-                trigger: 'item',
-                backgroundColor: '#FFFFFF',
+                trigger: "item",
+                backgroundColor: "#FFFFFF",
                 borderWidth: 2,
                 textStyle: { fontSize: 12 },
                 formatter: tooltipConfig,
             },
             dataZoom: [
                 {
-                    type: 'inside', // inside | slider
+                    type: "inside", // inside | slider
                     show: true,
                     height: 12,
                     bottom: 10,
-                    backgroundColor: '#ddd',
-                    borderColor: 'transparent',
-                    fillerColor: 'rgba(150, 150, 150, 0.5)',
-                    handleSize: '80%',
+                    backgroundColor: "#ddd",
+                    borderColor: "transparent",
+                    fillerColor: "rgba(150, 150, 150, 0.5)",
+                    handleSize: "80%",
                     handleStyle: {
-                        color: '#A0A0A0',
-                        borderColor: 'transparent',
+                        color: "#A0A0A0",
+                        borderColor: "transparent",
                         shadowBlur: 2,
-                        shadowColor: 'rgba(0, 0, 0, 0.2)',
+                        shadowColor: "rgba(0, 0, 0, 0.2)",
                     },
                     showDataShadow: false,
                 },
                 {
-                    type: 'inside',
+                    type: "inside",
                     showDataShadow: false,
                 },
             ],
@@ -3350,13 +3355,13 @@ class EchartService {
         return {
             series: [
                 {
-                    data: data.map((item) => ({
+                    data: data.map(item => ({
                         ...item,
                         itemStyle: { color: item.color },
                     })),
-                    name: 'Pie Chart',
-                    type: 'pie',
-                    radius: ['40%', '70%'],
+                    name: "Pie Chart",
+                    type: "pie",
+                    radius: ["40%", "70%"],
                     avoidLabelOverlap: false,
                     emphasis: {
                         scale: true,
@@ -3368,7 +3373,7 @@ class EchartService {
                     },
                     label: {
                         show: true,
-                        position: 'outside',
+                        position: "outside",
                         color: Color.blue,
                         fontSize: 14,
                         formatter: labelConfig,
@@ -3376,43 +3381,43 @@ class EchartService {
                 },
             ],
             tooltip: {
-                trigger: 'item',
+                trigger: "item",
                 formatter: tooltipConfig,
                 // extraCssText: this.chartService.getTooltipCssText(),
             },
             legend: {
-                orient: 'horizontal', // 'horizontal | vertical'
-                icon: 'circle',
+                orient: "horizontal", // 'horizontal | vertical'
+                icon: "circle",
                 bottom: 5,
-                align: 'auto',
+                align: "auto",
                 itemGap: 20,
                 textStyle: { color: Color.blue, fontSize: 14 },
             },
         };
     }
-    getRateDoughnutPieOptions(letter, value, color) {
+    getRateDoughnutPieOptions(letter, value, textSize, 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',
+                name: "placeholder",
                 value: placeholderValue - value,
-                itemStyle: { color: Color.gray },
+                itemStyle: { color: Color.gray5 },
             },
         ];
         return {
             tooltip: {
-                trigger: 'none',
+                trigger: "none",
             },
             series: [
                 {
-                    name: 'RateDoughnutPie',
-                    type: 'pie',
+                    name: "RateDoughnutPie",
+                    type: "pie",
                     tooltip: {
-                        trigger: 'none',
+                        trigger: "none",
                     },
-                    radius: ['70%', '60%'],
+                    radius: ["80%", "60%"],
                     data: data,
                     startAngle: 0,
                     selectedMode: false,
@@ -3421,20 +3426,26 @@ class EchartService {
                         show: true,
                         formatter: letter,
                         color: color,
-                        fontSize: '40',
-                        position: 'center',
+                        position: "center",
+                        fontWeight: "bold",
+                        fontSize: textSize,
+                        fontFamily: "Arial",
+                        lineHeight: textSize * -0.22,
+                        align: "center",
+                        verticalAlign: "middle",
+                        backgroundColor: "transparent",
                     },
                 },
             ],
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EchartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EchartService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EchartService, providedIn: "root" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EchartService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: "root",
                 }]
         }] });