intelica-library-ui 0.1.85 → 0.1.87

package/fesm2022/intelica-library-ui.mjs

@@ -2548,10 +2548,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) => {
@@ -3191,7 +3196,7 @@ class EchartService {
     }
     /// Charts Configuration
     /// BAR CHARTS
-    getBarChartOptions(categories, series, labelConfig, tooltipConfig) {
+    getBarChartOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         return {
             xAxis: this.getCategoryAxisConfiguration(categories),
             yAxis: this.getValueAxisConfiguration(),
@@ -3220,11 +3225,11 @@ class EchartService {
                 formatter: tooltipConfig,
             },
             grid: this.getGridConfiguration(),
-            legend: this.getLegendConfiguration(),
+            legend: showLegend ? this.getLegendConfiguration() : undefined,
         };
     }
-    getBarChartStackOptions(categories, series, labelConfig, tooltipConfig) {
-        let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig);
+    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%';
@@ -3236,8 +3241,8 @@ class EchartService {
         });
         return barBase;
     }
-    getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig) {
-        let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig);
+    getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
+        let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig, showLegend);
         barBase.xAxis = this.getValueAxisConfiguration();
         barBase.yAxis = this.getCategoryAxisConfiguration(categories);
         barBase.series.forEach((serie) => {
@@ -3247,8 +3252,8 @@ class EchartService {
         });
         return barBase;
     }
-    getBarChartHorizontalStackOptions(categories, series, labelConfig, tooltipConfig) {
-        let barBase = this.getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig);
+    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%';
@@ -3263,8 +3268,35 @@ class EchartService {
         });
         return barBase;
     }
+    getBarChartTopOptions(categories, series, categoryWidth = 240, labelConfig, tooltipConfig, showLegend = false) {
+        let barBase = this.getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig, showLegend);
+        if (barBase.yAxis) {
+            // (barBase.yAxis as YAXisComponentOption).show = true;
+            // (barBase.yAxis as YAXisComponentOption).splitLine!.show = true;
+            barBase.yAxis.inverse = true;
+            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.lineHeight = 16;
+            barBase.grid.top = '0%';
+            barBase.grid.left = -1 * categoryWidth + 60;
+            barBase.grid.right = 20;
+            barBase.grid.bottom = '0%';
+            barBase.grid.containLabel = true;
+        }
+        barBase.series.forEach((serie, index) => {
+            serie.barWidth = '75%';
+        });
+        return barBase;
+    }
     /// LINE CHARTS
-    getLineChartOptions(categories, series, labelConfig, tooltipConfig) {
+    getLineChartOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         return {
             xAxis: this.getCategoryAxisConfiguration(categories),
             yAxis: this.getValueAxisConfiguration(true, true, true),
@@ -3315,7 +3347,7 @@ class EchartService {
                     showDataShadow: false,
                 },
             ],
-            legend: this.getLegendConfiguration(),
+            legend: showLegend ? this.getLegendConfiguration() : undefined,
         };
     }
     /// PIE CHARTS