intelica-library-ui 0.1.106 → 0.1.108

package/fesm2022/intelica-library-ui.mjs

@@ -2612,6 +2612,7 @@ class EchartComponent {
     platformId;
     config;
     id;
+    renderer = "canvas";
     containerStyle = {
         width: "100%",
         height: "400px",
@@ -2647,7 +2648,7 @@ class EchartComponent {
     }
     initChart(chartElement) {
         const observer = new ResizeObserver(() => this.resize());
-        this.chart = echarts.init(chartElement);
+        this.chart = echarts.init(chartElement, null, { renderer: this.renderer });
         this.chart.setOption(this.config);
         this.chart.on("click", params => {
             this.event.emit(params);
@@ -2655,7 +2656,7 @@ class EchartComponent {
         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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: EchartComponent, isStandalone: true, selector: "intelica-echart", inputs: { config: "config", id: "id", renderer: "renderer", 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EchartComponent, decorators: [{
             type: Component,
@@ -2667,6 +2668,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }], id: [{
                 type: Input
+            }], renderer: [{
+                type: Input
             }], containerStyle: [{
                 type: Input
             }], event: [{
@@ -3450,10 +3453,14 @@ class EchartService {
      * @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;">
+        const titleHtml = title.length > 0
+            ? `
 			<b style=" font-size: 13px;">${title} </b><br>
-			<hr style="border: 1px solid ${color}; margin: 4px 0;">
+			<hr style="border: 1px solid ${color}; margin: 4px 0;">`
+            : "";
+        return `
+	 	<div style="font-size: 12px; boder-color: ${color}; color: ${color}; border-radius: 6px; min-width: 120px; text-align: center;">
+			${titleHtml}
 			${body}
 		</div>
 	  `;
@@ -3479,7 +3486,7 @@ class EchartService {
                     name: item.name,
                     itemStyle: { color: item.color },
                     data: item.value,
-                    barWidth: "25%",
+                    // barWidth: "33%",
                     barGap: "0%",
                     label: {
                         show: true,
@@ -3513,8 +3520,8 @@ 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.barWidth = "50%";
+            // serie.barGap = "0%";
             serie.barCategoryGap = "10%";
             serie.stack = "total";
             if (index < series.length - 1) {
@@ -3561,8 +3568,8 @@ 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.barWidth = "50%";
+            // serie.barGap = "0%";
             serie.barCategoryGap = "10%";
             serie.stack = "total";
             if (serie.label) {
@@ -3608,7 +3615,7 @@ class EchartService {
             barBase.grid.containLabel = true;
         }
         barBase.series.forEach((serie, index) => {
-            serie.barWidth = "75%";
+            // serie.barWidth = "75%";
         });
         return barBase;
     }