intelica-library-ui 0.1.82 → 0.1.83

package/fesm2022/intelica-library-ui.mjs

@@ -3182,6 +3182,7 @@ class EchartService {
         };
     }
     /// Charts Configuration
+    /// BAR CHARTS
     getBarChartOptions(categories, series, labelConfig, tooltipConfig) {
         return {
             xAxis: this.getCategoryAxisConfiguration(categories),
@@ -3254,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',
@@ -3274,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',
                     },