intelica-library-ui 0.1.78 → 0.1.80

package/fesm2022/intelica-library-ui.mjs

@@ -156,6 +156,19 @@ const domain = window.location.hostname.split(".").slice(-2).join(".");
 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',
+};
+const getColor = (name) => {
+    return Color[name];
+};
+
 class FeatureFlagService {
     _http = inject(HttpClient);
     _configService = inject(ConfigService);
@@ -3097,30 +3110,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
         }] });
 
 class EchartService {
-    getDefaultSeriesColors() {
+    _sharedService = inject(SharedService);
+    /// Chart Generals
+    getDefultAxisConfiguration(type, data, showAxis = true, showSplitLine = false) {
         return {
-            mastercard: "#ff7f00",
-            visa: "#17375E",
-            amex: "#348AD5",
-            orange: "#ff7f00",
-            blue: "#17375E",
-            gray: "#D3D3D3",
-            gray3: "#a6a5a1",
-        };
-    }
-    getTooltipCssText() {
-        return `border-color: ${this.getDefaultSeriesColors()["blue"]};`;
-    }
-    getTooltipFormatter(htmlContent) {
-        return `
-		<div>
-			${htmlContent}
-		</div>
-		`;
-    }
-    getDefultAxisConfiguration(type, show = true, data) {
-        let axis = {
-            show: show,
+            show: showAxis,
             type: type,
             data: data,
             axisTick: {
@@ -3128,31 +3122,148 @@ class EchartService {
             },
             axisLine: {
                 show: false,
+                lineStyle: { color: getColor('gray'), type: 'dashed' },
             },
             splitLine: {
-                show: false,
+                show: showSplitLine,
+                lineStyle: {
+                    color: Color.gray,
+                    type: 'dashed',
+                    width: 1,
+                },
             },
             axisLabel: {
-                color: this.getDefaultSeriesColors()["blue"],
-                fontSize: 12,
+                show: showAxis,
+                color: Color.gray3,
+                fontSize: 14,
+                padding: 10,
             },
         };
-        return axis;
+    }
+    getCategoryAxisConfiguration(data) {
+        return this.getDefultAxisConfiguration('category', data, true);
+    }
+    getValueAxisConfiguration(showAxis = false, format = false, showAxisLines = false) {
+        let axisConfiguration = this.getDefultAxisConfiguration('value', undefined, showAxis, showAxisLines);
+        if (format) {
+            axisConfiguration.axisLabel.formatter = (value) => this._sharedService.FormatNumberWithSuffix(value);
+        }
+        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: '10%',
+            right: '10%',
+            bottom: '10%',
+            containLabel: true,
+        };
+    }
+    getLegendConfiguration() {
+        return {
+            orient: 'horizontal', // 'horizontal | vertical'
+            icon: 'circle',
+            bottom: 5,
+            align: 'auto',
+            itemGap: 20,
+            textStyle: { color: Color.blue, fontSize: 14 },
+        };
+    }
+    /// Charts Configuration
+    getBarChartOptions(categories, series, labelConfig, tooltipConfig) {
+        return {
+            xAxis: this.getCategoryAxisConfiguration(categories),
+            yAxis: this.getValueAxisConfiguration(),
+            series: [
+                ...series.map((item) => ({
+                    type: 'bar',
+                    name: item.name,
+                    itemStyle: { color: item.color },
+                    data: item.value,
+                    barWidth: '25%',
+                    barGap: '0%',
+                    label: {
+                        show: true,
+                        position: 'top',
+                        color: Color.blue,
+                        fontSize: 12,
+                        formatter: labelConfig,
+                    },
+                })),
+            ],
+            tooltip: {
+                trigger: 'item',
+                backgroundColor: '#FFFFFF',
+                borderWidth: 2,
+                textStyle: { fontSize: 12 },
+                formatter: tooltipConfig,
+            },
+            grid: this.getGridConfiguration(),
+            legend: this.getLegendConfiguration(),
+        };
+    }
+    getBarChartStackOptions(categories, series, labelConfig, tooltipConfig) {
+        let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig);
+        barBase.series.forEach((serie, index) => {
+            serie.barWidth = '50%';
+            serie.barGap = '0%';
+            serie.barCategoryGap = '10%';
+            serie.stack = 'total';
+            if (index < series.length - 1) {
+                serie.label = undefined;
+            }
+        });
+        return barBase;
+    }
+    getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig) {
+        let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig);
+        barBase.xAxis = this.getValueAxisConfiguration();
+        barBase.yAxis = this.getCategoryAxisConfiguration(categories);
+        barBase.series.forEach((serie) => {
+            if (serie.label) {
+                serie.label.position = 'right';
+            }
+        });
+        return barBase;
+    }
+    getBarChartHorizontalStackOptions(categories, series, labelConfig, tooltipConfig) {
+        let barBase = this.getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig);
+        barBase.series.forEach((serie, index) => {
+            serie.barWidth = '50%';
+            serie.barGap = '0%';
+            serie.barCategoryGap = '10%';
+            serie.stack = 'total';
+            if (serie.label) {
+                serie.label.position = 'right';
+            }
+            if (index < series.length - 1) {
+                serie.label = undefined;
+            }
+        });
+        return barBase;
     }
     getRateDoughnutPie(data) {
-        const rateData = data.find(d => d.name.toLowerCase() !== "placeholder");
+        const rateData = data.find((d) => d.name.toLowerCase() !== 'placeholder');
         return {
             tooltip: {
-                trigger: "none",
+                trigger: 'none',
             },
             series: [
                 {
-                    name: "RateDoughnutPie",
-                    type: "pie",
+                    name: 'RateDoughnutPie',
+                    type: 'pie',
                     tooltip: {
-                        trigger: "none",
+                        trigger: 'none',
                     },
-                    radius: ["70%", "60%"],
+                    radius: ['70%', '60%'],
                     data: data,
                     startAngle: 0,
                     selectedMode: false,
@@ -3163,20 +3274,20 @@ class EchartService {
                             return `${rateData.name}`;
                         },
                         color: rateData.itemStyle.color,
-                        fontSize: "40",
-                        position: "center",
+                        fontSize: '40',
+                        position: 'center',
                     },
                 },
             ],
         };
     }
     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',
                 }]
         }] });
 
@@ -5603,5 +5714,5 @@ const IntelicaTheme = definePreset(Aura, {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DynamicInputValidation, EchartComponent, EchartService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, ItemSplitDirective, LanguageService, ModalDialogComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RowResumenComponent, SearchComponent, SharedService, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TemplateMenuComponent, TermGuard, TermPipe, TermService, decryptData, encryptData };
+export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, Color, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DynamicInputValidation, EchartComponent, EchartService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, ItemSplitDirective, LanguageService, ModalDialogComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RowResumenComponent, SearchComponent, SharedService, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TemplateMenuComponent, TermGuard, TermPipe, TermService, decryptData, encryptData, getColor };
 //# sourceMappingURL=intelica-library-ui.mjs.map