intelica-library-ui 0.1.89 → 0.1.91

package/fesm2022/intelica-library-ui.mjs

@@ -2525,8 +2525,8 @@ class EchartComponent {
     config;
     id;
     containerStyle = {
-        width: '100%',
-        height: '400px',
+        width: "100%",
+        height: "400px",
     };
     event = new EventEmitter();
     chart;
@@ -2537,13 +2537,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);
     }
@@ -2558,10 +2558,10 @@ class EchartComponent {
         }
     }
     initChart(chartElement) {
-        const observer = new ResizeObserver(this.resize);
+        const observer = new ResizeObserver(() => this.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);
@@ -2571,7 +2571,7 @@ class EchartComponent {
 }
 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]
@@ -3168,15 +3168,6 @@ class EchartService {
         }
         return axisConfiguration;
     }
-    getTooltipFormatter(color, title, body) {
-        return `
-	 	<div style="font-size: 12px; color: ${color}; border-radius: 6px; min-width: 120px; text-align: center;">
-			<b style=" font-size: 13px;">${title} </b><br>
-			<hr style="border: 1px solid ${color}; margin: 4px 0;">
-			${body}
-		</div>
-	  `;
-    }
     getGridConfiguration() {
         return {
             left: "0%",
@@ -3195,8 +3186,33 @@ class EchartService {
             textStyle: { color: Color.blue, fontSize: 14 },
         };
     }
+    /**
+     *
+     * @param color - Color of the tooltip
+     * @param title - Title of the tooltip
+     * @param body - Body of the tooltip
+     * @returns - Tooltip HTML string
+     */
+    getTooltipFormatter(color, title, body) {
+        return `
+	 	<div style="font-size: 12px; color: ${color}; border-radius: 6px; min-width: 120px; text-align: center;">
+			<b style=" font-size: 13px;">${title} </b><br>
+			<hr style="border: 1px solid ${color}; margin: 4px 0;">
+			${body}
+		</div>
+	  `;
+    }
     /// Charts Configuration
     /// BAR CHARTS
+    /**
+     *
+     * @param categories - Array of categories for the x-axis
+     * @param series - Array of series data, each containing name, value, and color
+     * @param labelConfig - Optional label configuration for the bars
+     * @param tooltipConfig - Optional tooltip configuration for the bars
+     * @param showLegend - Optional flag to show the legend
+     * @returns - EChartsOption - Configuration object for the bar chart
+     */
     getBarChartOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         return {
             xAxis: this.getCategoryAxisConfiguration(categories),
@@ -3229,6 +3245,15 @@ class EchartService {
             legend: showLegend ? this.getLegendConfiguration() : undefined,
         };
     }
+    /**
+     *
+     * @param categories - Array of categories for the x-axis
+     * @param series - Array of series data, each containing name, value, and color
+     * @param labelConfig - Optional label configuration for the bars
+     * @param tooltipConfig - Optional tooltip configuration for the bars
+     * @param showLegend - Optional flag to show the legend
+     * @returns - EChartsOption - Configuration object for the bar chart
+     */
     getBarChartStackOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig, showLegend);
         barBase.series.forEach((serie, index) => {
@@ -3242,6 +3267,15 @@ class EchartService {
         });
         return barBase;
     }
+    /**
+     *
+     * @param categories - Array of categories for the y-axis
+     * @param series - Array of series data, each containing name, value, and color
+     * @param labelConfig - Optional label configuration for the bars
+     * @param tooltipConfig - Optional tooltip configuration for the bars
+     * @param showLegend - Optional flag to show the legend
+     * @returns - EChartsOption - Configuration object for the bar chart
+     */
     getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig, showLegend);
         barBase.xAxis = this.getValueAxisConfiguration();
@@ -3251,8 +3285,23 @@ class EchartService {
                 serie.label.position = "right";
             }
         });
+        if (barBase.grid) {
+            barBase.grid.left = "10%";
+            barBase.grid.right = "10%";
+            barBase.grid.bottom = "10%";
+            barBase.grid.containLabel = true;
+        }
         return barBase;
     }
+    /**
+     *
+     * @param categories - Array of categories for the y-axis
+     * @param series - Array of series data, each containing name, value, and color
+     * @param labelConfig - Optional label configuration for the bars
+     * @param tooltipConfig - Optional tooltip configuration for the bars
+     * @param showLegend - Optional flag to show the legend
+     * @returns - EChartsOption - Configuration object for the bar chart
+     */
     getBarChartHorizontalStackOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         let barBase = this.getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig, showLegend);
         barBase.series.forEach((serie, index) => {
@@ -3267,13 +3316,26 @@ class EchartService {
                 serie.label = undefined;
             }
         });
+        if (barBase.grid) {
+            barBase.grid.left = "10%";
+            barBase.grid.right = "10%";
+            barBase.grid.bottom = "10%";
+            barBase.grid.containLabel = true;
+        }
         return barBase;
     }
+    /**
+     *
+     * @param categories - Array of categories for the y-axis
+     * @param series - Array of series data, each containing name, value, and color
+     * @param labelConfig - Optional label configuration for the bars
+     * @param tooltipConfig - Optional tooltip configuration for the bars
+     * @param showLegend - Optional flag to show the legend
+     * @returns - EChartsOption - Configuration object for the bar chart
+     */
     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;
@@ -3295,6 +3357,15 @@ class EchartService {
         return barBase;
     }
     /// LINE CHARTS
+    /**
+     *
+     * @param categories - Array of categories for the x-axis
+     * @param series - Array of series data, each containing name, value, and color
+     * @param labelConfig - Optional label configuration for the lines
+     * @param tooltipConfig - Optional tooltip configuration for the lines
+     * @param showLegend - Optional flag to show the legend
+     * @returns - EChartsOption - Configuration object for the line chart
+     */
     getLineChartOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         return {
             xAxis: this.getCategoryAxisConfiguration(categories),
@@ -3350,6 +3421,13 @@ class EchartService {
         };
     }
     /// PIE CHARTS
+    /**
+     *
+     * @param data - Array of series data, each containing name, value, and color
+     * @param labelConfig - Optional label configuration
+     * @param tooltipConfig - Optional tooltip configuration
+     * @returns - EChartsOption - Configuration object for the pie
+     */
     getDoughnutPieOptions(data, labelConfig, tooltipConfig) {
         return {
             series: [
@@ -3394,6 +3472,14 @@ class EchartService {
             },
         };
     }
+    /**
+     *
+     * @param letter - text to show in the center of the pie
+     * @param value - rate	value
+     * @param textSize - size of the letter
+     * @param color - color of the letter and pie
+     * @returns
+     */
     getRateDoughnutPieOptions(letter, value, textSize, color) {
         const power = Math.ceil(Math.log10(value));
         const placeholderValue = Math.pow(10, power);