@masterteam/dashboard-builder 0.0.21 → 0.0.23

package/fesm2022/masterteam-dashboard-builder.mjs

@@ -439,8 +439,7 @@ class DashboardStoreService {
     /** Dynamic key-value store */
     dynamicStore = signal({}, ...(ngDevMode ? [{ debugName: "dynamicStore" }] : /* istanbul ignore next */ []));
     /** Language code */
-    languageCode = signal(document.dir == 'ltr' ? 'ar' :
-        'en', ...(ngDevMode ? [{ debugName: "languageCode" }] : /* istanbul ignore next */ []));
+    languageCode = signal(document.dir == 'rtl' ? 'ar' : 'en', ...(ngDevMode ? [{ debugName: "languageCode" }] : /* istanbul ignore next */ []));
     /** Direction */
     direction = signal(document.dir || 'ltr', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
     /** Inside Report Viewer flag - controls text truncation in charts */
@@ -7749,16 +7748,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  *
  * Number, currency, and date formatting utilities.
  */
-/**
- * Get current language code from localStorage
- */
-function getLanguageCode() {
-    return localStorage.getItem('langCode') || 'en';
-}
 /**
  * Format large numbers with suffixes (K, M, B, T)
  */
-function formatCurrency(value, config) {
+function formatCurrency(value, config, langCode = 'en') {
     if (value === null || value === undefined) {
         return '_';
     }
@@ -7766,7 +7759,6 @@ function formatCurrency(value, config) {
     if (isNaN(numValue)) {
         return String(value);
     }
-    const langCode = getLanguageCode();
     const decimals = config?.decimals ?? 1;
     const arabicSuffixes = {
         thousand: ' ألف',
@@ -7830,7 +7822,7 @@ function formatPercentage(value, decimals = 1) {
 /**
  * Format number with locale
  */
-function formatNumber(value, options) {
+function formatNumber(value, options, langCode = 'en') {
     if (value === null || value === undefined) {
         return '_';
     }
@@ -7838,14 +7830,13 @@ function formatNumber(value, options) {
     if (isNaN(numValue)) {
         return String(value);
     }
-    const langCode = getLanguageCode();
     const locale = langCode === 'ar' ? 'ar-SA' : 'en-US';
     return new Intl.NumberFormat(locale, options).format(numValue);
 }
 /**
  * Format date
  */
-function formatDate(value, format) {
+function formatDate(value, format, langCode = 'en') {
     if (!value) {
         return '_';
     }
@@ -7853,7 +7844,6 @@ function formatDate(value, format) {
     if (isNaN(date.getTime())) {
         return String(value);
     }
-    const langCode = getLanguageCode();
     const locale = langCode === 'ar' ? 'ar-SA' : 'en-US';
     const formatOptions = {
         short: { day: 'numeric', month: 'numeric', year: '2-digit' },
@@ -7880,15 +7870,15 @@ function createAxisFormatter(config) {
 /**
  * Formatter for ECharts tooltip values
  */
-function createTooltipFormatter(config) {
+function createTooltipFormatter(config, langCode = 'en') {
     return (value) => {
         switch (config?.type) {
             case 'currency':
-                return formatCurrency(value, { handleLang: true });
+                return formatCurrency(value, { handleLang: true }, langCode);
             case 'percentage':
                 return formatPercentage(value);
             default:
-                return formatNumber(value);
+                return formatNumber(value, undefined, langCode);
         }
     };
 }
@@ -7945,13 +7935,13 @@ function formatWordsUnderBar(text, maxCharsPerLine = 10, insideReport = false) {
 /**
  * Format date to month name
  */
-function formatDateToMonth(dateValue, shortFormat = false) {
+function formatDateToMonth(dateValue, shortFormat = false, langCode = 'en') {
     try {
         const date = dateValue instanceof Date ? dateValue : new Date(dateValue);
         if (isNaN(date.getTime())) {
             return String(dateValue);
         }
-        return date.toLocaleString('default', {
+        return date.toLocaleString(langCode === 'ar' ? 'ar-SA' : 'en-US', {
             month: shortFormat ? 'short' : 'long',
         });
     }
@@ -7965,21 +7955,20 @@ function formatDateToMonth(dateValue, shortFormat = false) {
  * @param value - The X-axis category value (typically a date string)
  * @param configFormat - Configuration object with type and format options
  */
-function formatXAxis(value, configFormat) {
+function formatXAxis(value, configFormat, langCode = 'en') {
     if (!configFormat || !configFormat.type) {
         return String(value);
     }
     switch (configFormat.type) {
         case 'dateToMonth':
         case 'month':
-            return formatDateToMonth(value, configFormat.shortFormate);
+            return formatDateToMonth(value, configFormat.shortFormate, langCode);
         case 'date':
             try {
                 const date = value instanceof Date ? value : new Date(value);
                 if (isNaN(date.getTime())) {
                     return String(value);
                 }
-                const langCode = getLanguageCode();
                 const locale = langCode === 'ar' ? 'ar-SA' : 'en-US';
                 // Use Intl.DateTimeFormat for custom formatting
                 if (configFormat.customDateFormat) {
@@ -8028,9 +8017,9 @@ const generalConfiguration = {
 /**
  * Format value based on config format (matches old Formater function)
  */
-function formatValue(value, configFormat) {
+function formatValue(value, configFormat, langCode = 'en') {
     if (configFormat?.type === 'currency') {
-        return formatCurrency(value, configFormat);
+        return formatCurrency(value, configFormat, langCode);
     }
     else if (configFormat?.type === 'percentage') {
         return ((value ? Number(value.toFixed(2)) : value) || 0) + '%';
@@ -8048,7 +8037,7 @@ function formatValue(value, configFormat) {
                 return value;
             }
             const shortMonth = configFormat?.shortFormate !== false;
-            return date.toLocaleString('default', {
+            return date.toLocaleString(langCode === 'ar' ? 'ar-SA' : 'en-US', {
                 month: shortMonth ? 'short' : 'long',
             });
         }
@@ -8236,12 +8225,11 @@ function sortDataTableView(data, sortConfig) {
 /**
  * Get localized title from object
  */
-function getLocalizedTitle(titleObj) {
+function getLocalizedTitle(titleObj, langCode = 'en') {
     if (!titleObj)
         return '';
     if (typeof titleObj === 'string')
         return titleObj;
-    const langCode = getLanguageCode();
     return titleObj[langCode] || titleObj.en || '';
 }
 /**
@@ -8985,7 +8973,7 @@ class BarChartHandler {
      * Returns ECharts option directly (exactly like old BarChartService.handleBarChart)
      */
     handleBarChart(dataResponse, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const insideReportViewer = this.storeService.insideReportViewer();
         const clientConfig = config.clientConfig || {};
         const configAsType = clientConfig.configAsType || {};
@@ -9148,7 +9136,9 @@ class BarChartHandler {
                         fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.label,
                         formatter: (params) => {
                             const total = params.value;
-                            return total ? formatNumber(total, clientConfig?.['format']) : '';
+                            return total
+                                ? formatNumber(total, clientConfig?.['format'], languageCode)
+                                : '';
                         },
                     },
                     showBackground: configAsType?.['Background']?.show,
@@ -9163,7 +9153,7 @@ class BarChartHandler {
                 formatter: (params) => {
                     return params
                         .map((param) => {
-                        const value = formatNumber(param.value, clientConfig?.['format']);
+                        const value = formatNumber(param.value, clientConfig?.['format'], languageCode);
                         const showValueOnlyInTooltip = barOverride?.showValueOnlyInTooltip;
                         if (showValueOnlyInTooltip) {
                             return value;
@@ -9215,29 +9205,14 @@ class BarChartHandler {
             }
             if (isHorizontal) {
                 if (languageCode === 'ar') {
-                    lastItem.itemStyle.borderRadius = [
-                        borderRadius,
-                        0,
-                        0,
-                        borderRadius,
-                    ];
+                    lastItem.itemStyle.borderRadius = [borderRadius, 0, 0, borderRadius];
                 }
                 else {
-                    lastItem.itemStyle.borderRadius = [
-                        0,
-                        borderRadius,
-                        borderRadius,
-                        0,
-                    ];
+                    lastItem.itemStyle.borderRadius = [0, borderRadius, borderRadius, 0];
                 }
             }
             else {
-                lastItem.itemStyle.borderRadius = [
-                    borderRadius,
-                    borderRadius,
-                    0,
-                    0,
-                ];
+                lastItem.itemStyle.borderRadius = [borderRadius, borderRadius, 0, 0];
             }
         }
         const xAxisLabels = xAxisData;
@@ -9271,7 +9246,7 @@ class BarChartHandler {
      * Format X axis value using the formatXAxis utility
      */
     formatXAxisValue(value, formatConfig) {
-        return formatXAxis(value, formatConfig);
+        return formatXAxis(value, formatConfig, this.storeService.languageCode());
     }
     /**
      * Resolve bar corner radius with backward-compatible values:
@@ -9280,7 +9255,9 @@ class BarChartHandler {
      * - number/string => that numeric value
      */
     resolveBarBorderRadius(borderRadius) {
-        if (borderRadius === undefined || borderRadius === null || borderRadius === true) {
+        if (borderRadius === undefined ||
+            borderRadius === null ||
+            borderRadius === true) {
             return 8;
         }
         if (borderRadius === false) {
@@ -9336,7 +9313,7 @@ class BarChartHandler {
                                 type: 'currency',
                                 showCurrency: barOverride.showCurrency || false,
                                 handleLang: true,
-                            });
+                            }, this.storeService.languageCode());
                         case 'percentage':
                             return ((value ? Math.round(value) : value) || 0) + '%';
                         case 'number':
@@ -9509,7 +9486,7 @@ class BarChartHandler {
      * Transforms bar chart data into entity preview format (flat array of properties)
      */
     handleEntityPreviewWithFormula(dataResponse, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const clientConfig = config.clientConfig || {};
         const configAsType = clientConfig.configAsType || {};
         const defaultColor = configAsType?.['defaultColors']?.[0] || '#4caf50';
@@ -9548,7 +9525,7 @@ class BarChartHandler {
                 label = labelMap.get(key?.toLowerCase());
             }
             // Format the value using the configured format
-            const formattedValue = formatValue(bar.value, clientConfig?.['format']);
+            const formattedValue = formatValue(bar.value, clientConfig?.['format'], languageCode);
             // Get color from barTypes array or defaultColors
             const barColor = bar.color ||
                 colorMap.get(key?.toLowerCase()) ||
@@ -9585,12 +9562,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Exactly matches old DountChartService.handleDonutChart implementation.
  */
 class PieChartHandler {
+    storeService = inject(DashboardStoreService);
     /**
      * handleDonutChart - matches functionName from CHART_TYPES
      * Returns ECharts option directly (exactly like old DountChartService.handleDonutChart)
      */
     handleDonutChart(dataResponse, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const clientConfig = config.clientConfig || {};
         const configAsType = clientConfig.configAsType || {};
         const pieOverride = clientConfig.pieConfigOverried;
@@ -9661,7 +9639,7 @@ class PieChartHandler {
         // Calculate total and remaining value
         const actualTotal = seriesData.reduce((sum, item) => (item.isStaticProperty === true ? sum : sum + item.value), 0);
         const remainingValue = actualTotal;
-        const formattedTotal = formatNumber(remainingValue, clientConfig?.['format']);
+        const formattedTotal = formatNumber(remainingValue, clientConfig?.['format'], languageCode);
         // Apply color and label overrides based on conditions for all slices (before building legends)
         seriesData.forEach((item, index) => {
             if (item.isStaticProperty)
@@ -9711,7 +9689,7 @@ class PieChartHandler {
                         if (params.data?.isStaticProperty === true && isPercentage) {
                             return ''; // Hide label for remaining area
                         }
-                        return formatNumber(params.value, clientConfig?.['format']);
+                        return formatNumber(params.value, clientConfig?.['format'], languageCode);
                     }),
         };
         // Build legends
@@ -9784,7 +9762,7 @@ class PieChartHandler {
                     if (params.data?.isStaticProperty === true && isPercentage) {
                         return ''; // Hide tooltip for remaining area
                     }
-                    const value = formatNumber(params.value, clientConfig?.['format']);
+                    const value = formatNumber(params.value, clientConfig?.['format'], languageCode);
                     return `${params.name}: ${value} (${params.percent}%)`;
                 },
                 backgroundColor: '#fff',
@@ -10123,7 +10101,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 class StackBarChartHandler {
     storeService = inject(DashboardStoreService);
     resolveStackBarBorderRadius(borderRadius) {
-        if (borderRadius === undefined || borderRadius === null || borderRadius === true) {
+        if (borderRadius === undefined ||
+            borderRadius === null ||
+            borderRadius === true) {
             return 8;
         }
         if (borderRadius === false) {
@@ -10164,7 +10144,7 @@ class StackBarChartHandler {
      * handleStackBarChart - matches functionName from CHART_TYPES
      */
     handleStackBarChart(dataResponse, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const isNormalization = config.clientConfig?.configAsType?.['isNormalization'];
         const valuesArray = dataResponse.values || [];
         const isSingleDefault = valuesArray?.some((value) => value.category === 'Default');
@@ -10464,7 +10444,7 @@ class StackBarChartHandler {
                         const rawValue = params.data.originalValue;
                         if (rawValue === 0)
                             return '';
-                        return formatNumber(rawValue, clientConfig?.['format']);
+                        return formatNumber(rawValue, clientConfig?.['format'], languageCode);
                     },
                     fontFamily: generalConfiguration?.fontConfig?.fontFamily,
                     fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.label,
@@ -10521,7 +10501,7 @@ class StackBarChartHandler {
                     show: configAsType?.['label']?.['showTotalInTop'],
                     position: isHorizontal ? 'right' : 'top',
                     formatter: (params) => {
-                        return formatNumber(params.data.originalTotal, clientConfig?.['format']);
+                        return formatNumber(params.data.originalTotal, clientConfig?.['format'], languageCode);
                     },
                     fontFamily: generalConfiguration?.fontConfig?.fontFamily,
                     fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.label,
@@ -10562,7 +10542,7 @@ class StackBarChartHandler {
                             return;
                         const series = allSeriesData[param.seriesIndex];
                         const rawValue = param.data?.originalValue ?? param.value;
-                        const formattedValue = formatNumber(rawValue, clientConfig?.['format']);
+                        const formattedValue = formatNumber(rawValue, clientConfig?.['format'], languageCode);
                         if (series?.barType === 'lineAccumulated') {
                             tooltipHtml +=
                                 languageCode === 'ar'
@@ -10622,7 +10602,7 @@ class StackBarChartHandler {
                     formatter: (value) => {
                         const yAxisFormat = clientConfig?.['stackBarConfigOverride']?.['yAxisFormat'];
                         if (yAxisFormat) {
-                            return formatNumber(value, yAxisFormat);
+                            return formatNumber(value, yAxisFormat, languageCode);
                         }
                         return value;
                     },
@@ -10785,12 +10765,13 @@ class StackBarChartHandler {
                 if (!yAxis.axisLabel) {
                     yAxis.axisLabel = {};
                 }
-                yAxis.axisLabel.fontFamily = generalConfiguration?.fontConfig?.fontFamily;
+                yAxis.axisLabel.fontFamily =
+                    generalConfiguration?.fontConfig?.fontFamily;
                 if (!yAxis.axisLabel.formatter) {
                     yAxis.axisLabel.formatter = (value) => {
                         const yAxisFormat = stackBarOverride?.yAxisFormat;
                         if (yAxisFormat) {
-                            return formatNumber(value, yAxisFormat);
+                            return formatNumber(value, yAxisFormat, languageCode);
                         }
                         return value;
                     };
@@ -11070,12 +11051,13 @@ function groupDatesByYearAndMonth(data, valueAggregator = (values) => values.red
  * Matches exactly the old GaugeChartService behavior.
  */
 class GaugeChartHandler {
+    storeService = inject(DashboardStoreService);
     /**
      * handleGaugeChart - matches functionName from CHART_TYPES
      * Returns ECharts config directly (exactly like old GaugeChartService)
      */
     handleGaugeChart(dataResponse, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const clientConfig = config.clientConfig || {};
         const configAsType = clientConfig.configAsType || {};
         const overrideLabels = configAsType?.['overrideLabels'];
@@ -11127,7 +11109,7 @@ class GaugeChartHandler {
             labelFontSize: 11,
             totalValueFontSize: 30,
             labelFormatter: (params) => {
-                return formatNumber(params.value, clientConfig?.['format']);
+                return formatNumber(params.value, clientConfig?.['format'], languageCode);
             },
         };
         const noData = seriesData.length === 0;
@@ -11184,6 +11166,7 @@ const generalConfig = {
     },
 };
 class TableViewHandler {
+    storeService = inject(DashboardStoreService);
     /**
      * handleTableView - matches functionName from CHART_TYPES
      * Returns data directly (not wrapped in { type, data, config })
@@ -11203,7 +11186,7 @@ class TableViewHandler {
      * Returns eCharts bar chart config directly (like old HandleProjectsByExecutionPeriod)
      */
     handleProjectsByExecutionPeriod(dataResponse, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const projects = dataResponse.values || [];
         const ONE_DAY = 1000 * 3600 * 24;
         const today = new Date();
@@ -11341,7 +11324,7 @@ class TableViewHandler {
                             fontFamily: generalConfig?.fontConfig?.fontFamily,
                             fontSize: generalConfig?.fontConfig?.fontSizeConfig?.label,
                             formatter: (params) => {
-                                return formatNumber(params.value, format);
+                                return formatNumber(params.value, format, languageCode);
                             },
                         },
                         startDateForPeriod: item?.startDateForPeriod,
@@ -11358,7 +11341,7 @@ class TableViewHandler {
                 axisPointer: { type: 'shadow' },
                 formatter: (params) => {
                     const groupData = groupedProjects[params[0].dataIndex];
-                    let tooltip = `${params[0].marker} ${groupData.label?.[languageCode]}: ${formatNumber(params[0].value, format)}<br/>`;
+                    let tooltip = `${params[0].marker} ${groupData.label?.[languageCode]}: ${formatNumber(params[0].value, format, languageCode)}<br/>`;
                     if (groupData.projects.length > 0) {
                         tooltip +=
                             languageCode === 'ar' ? ' المشاريع <br/>' : 'Projects:<br/>';
@@ -11396,12 +11379,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Returns EXACT same format as old OverviewCardService.
  */
 class OverviewCardHandler {
+    storeService = inject(DashboardStoreService);
     /**
      * handleOverviewCard - matches functionName from CHART_TYPES
      * Returns EXACT same format as old OverviewCardService
      */
     handleOverviewCard(data, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const clientConfig = config.clientConfig || {};
         const configAsType = clientConfig.configAsType || {};
         const format = clientConfig?.['format'];
@@ -11464,7 +11448,7 @@ class OverviewCardHandler {
         const resultObj = getConfig(clientConfig.title?.[languageCode] || '', configAsType?.['subTitle']?.[languageCode] || '', value, isClickable, value);
         // Format the value
         if (value !== null && value !== undefined) {
-            resultObj.value = formatNumber(value, format);
+            resultObj.value = formatNumber(value, format, languageCode);
         }
         // Handle currency tooltip (same as old)
         if (format?.type === 'currency' && format?.showCurrencyTooltip) {
@@ -12053,12 +12037,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Returns ECharts config directly (not wrapped in { type, data, chartOptions }).
  */
 class LineChartHandler {
+    storeService = inject(DashboardStoreService);
     /**
      * handleLineChart - matches functionName from CHART_TYPES
      * Returns ECharts config directly with noData, width, divClass properties
      */
     handleLineChart(dataResponse, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const clientConfig = config.clientConfig || {};
         const configAsType = clientConfig.configAsType || {};
         const format = clientConfig?.['format'];
@@ -12109,7 +12094,9 @@ class LineChartHandler {
                     show: configAsType?.['label']?.show,
                     position: 'top',
                     formatter: (params) => {
-                        return params.value ? formatNumber(params.value, format) : '';
+                        return params.value
+                            ? formatNumber(params.value, format, languageCode)
+                            : '';
                     },
                 },
             };
@@ -12183,7 +12170,7 @@ class LineChartHandler {
                 fontSize: 11,
                 fontFamily: 'inherit',
                 color: '#666',
-                formatter: (value) => formatNumber(value, format),
+                formatter: (value) => formatNumber(value, format, languageCode),
             },
             splitLine: {
                 lineStyle: {
@@ -12207,7 +12194,7 @@ class LineChartHandler {
                 params.forEach((param) => {
                     result += `<div style="display: flex; align-items: center; gap: 6px">`;
                     result += `<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: ${param.color}"></span>`;
-                    result += `<span>${param.seriesName}: ${formatNumber(param.value, format)}</span>`;
+                    result += `<span>${param.seriesName}: ${formatNumber(param.value, format, languageCode)}</span>`;
                     result += `</div>`;
                 });
                 return result;
@@ -12293,6 +12280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Returns ECharts options directly (matching old SnapShotService format).
  */
 class SnapshotHandler {
+    storeService = inject(DashboardStoreService);
     /**
      * handleSnapShot - matches functionName from CHART_TYPES
      * Returns ECharts option directly (same as old SnapShotService)
@@ -12314,7 +12302,7 @@ class SnapshotHandler {
     handleSnapShotLineChart(data, config) {
         const propsForView = config.serviceConfig?.query?.['selectedProperties'] || [];
         const xAxisLabels = data.map((item) => item.timeFrame?.key || '');
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const clientConfig = config.clientConfig || {};
         const configAsType = clientConfig['configAsType'] || {};
         const overrideLabels = configAsType['overrideLabels'];
@@ -12347,7 +12335,9 @@ class SnapshotHandler {
                     position: 'top',
                     formatter: (params) => {
                         const value = params.value;
-                        return value ? formatValue(value, clientConfig['format']) : '';
+                        return value
+                            ? formatValue(value, clientConfig['format'], languageCode)
+                            : '';
                     },
                 },
             };
@@ -12394,7 +12384,7 @@ class SnapshotHandler {
                 formatter: function (params) {
                     let tooltipHtml = `${params[0].name}<br/>`;
                     params.forEach((param) => {
-                        const value = formatValue(param?.value, clientConfig['format']);
+                        const value = formatValue(param?.value, clientConfig['format'], languageCode);
                         tooltipHtml +=
                             languageCode === 'ar'
                                 ? `${param.marker} ${param.seriesName}&nbsp;&nbsp;${value}<br/>`
@@ -12491,7 +12481,7 @@ class SnapshotHandler {
         const configAsType = clientConfig['configAsType'] || {};
         const propsForView = configAsType['propsForView'] || [];
         const xAxisLabels = data.map((item) => item.timeFrame?.key || '');
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const seriesData = propsForView.map((prop) => {
             const dataValues = data.map((item) => item[prop?.key]?.rawValue);
             return {
@@ -12539,7 +12529,7 @@ class SnapshotHandler {
                 formatter: function (params) {
                     let tooltipHtml = `${params[0].name}<br/>`;
                     params.forEach((param) => {
-                        const value = formatValue(param?.value, clientConfig['format']);
+                        const value = formatValue(param?.value, clientConfig['format'], languageCode);
                         tooltipHtml +=
                             languageCode === 'ar'
                                 ? `${param.marker} ${param.seriesName}&nbsp;&nbsp;${value}<br/>`
@@ -12644,13 +12634,14 @@ function convertDateToString(date) {
     return `${year}-${month}-${day}`;
 }
 class ComparisonChartHandler {
+    storeService = inject(DashboardStoreService);
     /**
      * Main handler for comparison charts
      * Returns ECharts config directly with noData, width, divClass properties
      * (matches old ComparisonChartService.handleComparisonChart format)
      */
     handle(dataResponse, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const labels = dataResponse?.labels || [];
         const values = dataResponse?.values || [];
         const noData = values?.length === 0;
@@ -12691,7 +12682,7 @@ class ComparisonChartHandler {
                         fontFamily: generalConfiguration?.fontConfig?.fontFamily,
                         fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.label,
                         formatter: (params) => {
-                            return formatValue(params.value, config.clientConfig?.['format']);
+                            return formatValue(params.value, config.clientConfig?.['format'], languageCode);
                         },
                     },
                 });
@@ -12766,8 +12757,8 @@ class ComparisonChartHandler {
                     params.forEach((param) => {
                         tooltipHtml +=
                             languageCode === 'ar'
-                                ? `${param.marker} ${param.seriesName}&nbsp;&nbsp;${formatValue(param.value, config.clientConfig?.['format'])}<br/>`
-                                : `${param.marker} ${param.seriesName} ${formatValue(param.value, config.clientConfig?.['format'])}<br/>`;
+                                ? `${param.marker} ${param.seriesName}&nbsp;&nbsp;${formatValue(param.value, config.clientConfig?.['format'], languageCode)}<br/>`
+                                : `${param.marker} ${param.seriesName} ${formatValue(param.value, config.clientConfig?.['format'], languageCode)}<br/>`;
                     });
                     return tooltipHtml;
                 },
@@ -12883,7 +12874,7 @@ class ComparisonChartHandler {
      */
     parseComparisonData(dataResponse, config) {
         const items = [];
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const _configAsType = config.clientConfig?.configAsType || {};
         if (Array.isArray(dataResponse?.categories)) {
             dataResponse.categories.forEach((cat, index) => {
@@ -12926,7 +12917,6 @@ class ComparisonChartHandler {
      */
     parseYoYData(dataResponse, _config) {
         const items = [];
-        const _languageCode = getLanguageCode();
         if (dataResponse?.years) {
             Object.entries(dataResponse.years).forEach(([year, data]) => {
                 if (Array.isArray(data)) {
@@ -12955,7 +12945,6 @@ class ComparisonChartHandler {
      */
     parsePlannedActualData(dataResponse, config) {
         const items = [];
-        const _languageCode = getLanguageCode();
         const configAsType = config.clientConfig?.configAsType || {};
         const plannedKey = configAsType['plannedKey'] || 'planned';
         const actualKey = configAsType['actualKey'] || 'actual';
@@ -12982,7 +12971,7 @@ class ComparisonChartHandler {
      * Build comparison bar chart
      */
     buildComparisonChart(items, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const isRTL = languageCode === 'ar';
         const configAsType = config.clientConfig?.configAsType || {};
         const colors = configAsType['defaultColors'] || [
@@ -13013,14 +13002,14 @@ class ComparisonChartHandler {
                         return '';
                     let result = `<div style="font-weight:bold;margin-bottom:4px">${params[0].axisValue}</div>`;
                     params.forEach((p) => {
-                        result += `<div>${p.marker} ${p.seriesName}: ${formatNumber(p.value)}</div>`;
+                        result += `<div>${p.marker} ${p.seriesName}: ${formatNumber(p.value, undefined, languageCode)}</div>`;
                     });
                     // Add variance if available
                     const item = items.find((i) => i.category === params[0].axisValue);
                     if (item?.variance !== undefined) {
                         const sign = item.variance >= 0 ? '+' : '';
                         const color = item.variance >= 0 ? '#4caf50' : '#f44336';
-                        result += `<div style="margin-top:4px;color:${color}">Variance: ${sign}${formatNumber(item.variance)} (${sign}${item.variancePercent?.toFixed(1)}%)</div>`;
+                        result += `<div style="margin-top:4px;color:${color}">Variance: ${sign}${formatNumber(item.variance, undefined, languageCode)} (${sign}${item.variancePercent?.toFixed(1)}%)</div>`;
                     }
                     return result;
                 },
@@ -13048,7 +13037,7 @@ class ComparisonChartHandler {
             yAxis: {
                 type: 'value',
                 axisLabel: {
-                    formatter: (value) => formatNumber(value),
+                    formatter: (value) => formatNumber(value, undefined, languageCode),
                     fontFamily: '"Cairo", sans-serif',
                 },
             },
@@ -13084,7 +13073,7 @@ class ComparisonChartHandler {
                         return '';
                     let result = `<div style="font-weight:bold">${params[0].axisValue}</div>`;
                     params.forEach((p) => {
-                        result += `<div>${p.marker} ${p.seriesName}: ${formatNumber(p.value)}</div>`;
+                        result += `<div>${p.marker} ${p.seriesName}: ${formatNumber(p.value, undefined, this.storeService.languageCode())}</div>`;
                     });
                     return result;
                 },
@@ -13110,7 +13099,7 @@ class ComparisonChartHandler {
             yAxis: {
                 type: 'value',
                 axisLabel: {
-                    formatter: (value) => formatNumber(value),
+                    formatter: (value) => formatNumber(value, undefined, this.storeService.languageCode()),
                     fontFamily: '"Cairo", sans-serif',
                 },
             },
@@ -13121,7 +13110,7 @@ class ComparisonChartHandler {
      * Build Planned vs Actual chart with variance indicators
      */
     buildPlannedActualChart(items, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const isRTL = languageCode === 'ar';
         const configAsType = config.clientConfig?.configAsType || {};
         const plannedColor = configAsType['plannedColor'] || '#2196f3';
@@ -13137,13 +13126,13 @@ class ComparisonChartHandler {
                     const item = items.find((i) => i.category === params[0].axisValue);
                     let result = `<div style="font-weight:bold;margin-bottom:4px">${params[0].axisValue}</div>`;
                     params.forEach((p) => {
-                        result += `<div>${p.marker} ${p.seriesName}: ${formatNumber(p.value)}</div>`;
+                        result += `<div>${p.marker} ${p.seriesName}: ${formatNumber(p.value, undefined, languageCode)}</div>`;
                     });
                     if (item?.variance !== undefined) {
                         const sign = item.variance >= 0 ? '+' : '';
                         const color = item.variance >= 0 ? '#4caf50' : '#f44336';
                         result += `<div style="margin-top:4px;padding-top:4px;border-top:1px solid #eee;color:${color}">`;
-                        result += `Variance: ${sign}${formatNumber(item.variance)} (${sign}${item.variancePercent?.toFixed(1)}%)`;
+                        result += `Variance: ${sign}${formatNumber(item.variance, undefined, languageCode)} (${sign}${item.variancePercent?.toFixed(1)}%)`;
                         result += `</div>`;
                     }
                     return result;
@@ -13176,7 +13165,7 @@ class ComparisonChartHandler {
             yAxis: {
                 type: 'value',
                 axisLabel: {
-                    formatter: (value) => formatNumber(value),
+                    formatter: (value) => formatNumber(value, undefined, languageCode),
                     fontFamily: '"Cairo", sans-serif',
                 },
             },
@@ -13278,6 +13267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Used for listOfLevelCards, levelCardsWithFilter components.
  */
 class LevelCardHandler {
+    storeService = inject(DashboardStoreService);
     /**
      * handlelevelCards - matches functionName from CHART_TYPES
      * Returns data directly like old LevelCardService:
@@ -13377,7 +13367,7 @@ class LevelCardHandler {
      * Parse level cards with filter (values array format)
      */
     parseLevelCardsWithFilter(dataResponse, _config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const cards = [];
         if (dataResponse?.values && Array.isArray(dataResponse.values)) {
             dataResponse.values.forEach((value, index) => {
@@ -13412,7 +13402,7 @@ class LevelCardHandler {
      * Parse a single card detail
      */
     parseCardDetail(detail, _config, index) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         if (!detail)
             return null;
         // Extract level info
@@ -13780,13 +13770,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Returns ECharts options directly (matching old RingGaugeChartService format).
  */
 class RingGaugeChartHandler {
+    storeService = inject(DashboardStoreService);
     colorByPropMap = null;
     /**
      * handleRingGaugeChart - matches functionName from CHART_TYPES
      * Returns ECharts option directly (same as old RingGaugeChartService)
      */
     handleRingGaugeChart(dataResponse, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const clientConfig = config.clientConfig || {};
         const configAsType = clientConfig['configAsType'] || {};
         const showLegend = configAsType['legend']?.show;
@@ -13906,7 +13897,7 @@ class RingGaugeChartHandler {
                     color: 'inherit',
                     fontSize: 14,
                     formatter: (value) => {
-                        return formatValue(value, clientConfig['format']);
+                        return formatValue(value, clientConfig['format'], languageCode);
                     },
                 },
                 radius: [`${innerRadius}%`, `${outerRadius}%`],
@@ -13938,7 +13929,7 @@ class RingGaugeChartHandler {
             </div>`;
                     });
                     if (centerValue !== null && centerProperty) {
-                        const formattedCenterValue = formatValue(centerValue, clientConfig['format']);
+                        const formattedCenterValue = formatValue(centerValue, clientConfig['format'], languageCode);
                         tooltipContent += `<div style="margin: 5px 0; margin-top: 10px; border-top: 1px solid #ddd; padding-top: 5px;">
               <span style="display:inline-block;width:10px;height:10px;background-color:${statusColor};border-radius:50%;margin-right:8px;"></span>
               <span>${centerLabel}: ${formattedCenterValue}</span>
@@ -13995,7 +13986,7 @@ class RingGaugeChartHandler {
         };
         // Add center value graphic if centerProperty exists
         if (centerValue !== null && centerProperty) {
-            const formattedCenterValue = formatValue(centerValue, clientConfig['format']);
+            const formattedCenterValue = formatValue(centerValue, clientConfig['format'], languageCode);
             const itemSpacing = 15;
             const totalItems = visibleIndex + 1;
             const totalSpacing = (totalItems - 1) * itemSpacing;
@@ -14211,6 +14202,7 @@ function lowercaseFirstLetter(str) {
     return str.charAt(0).toLowerCase() + str.slice(1);
 }
 class SPlusChartHandler {
+    storeService = inject(DashboardStoreService);
     generalService = inject(GeneralService);
     /**
      * Handle S+ Gauge Chart - returns ECharts option directly
@@ -14441,7 +14433,7 @@ class SPlusChartHandler {
      * Parse progress data
      */
     parseProgressData(dataResponse, _config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const items = [];
         const dataArray = Array.isArray(dataResponse)
             ? dataResponse
@@ -14475,7 +14467,7 @@ class SPlusChartHandler {
      * Parse KPI data
      */
     parseKPIData(dataResponse, _config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const kpis = [];
         const dataArray = Array.isArray(dataResponse)
             ? dataResponse
@@ -14510,7 +14502,7 @@ class SPlusChartHandler {
      * Parse milestone data
      */
     parseMilestoneData(dataResponse, _config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const milestones = [];
         const dataArray = Array.isArray(dataResponse)
             ? dataResponse
@@ -14531,7 +14523,7 @@ class SPlusChartHandler {
      * Build progress bar chart
      */
     buildProgressChart(items, config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const isRTL = languageCode === 'ar';
         const configAsType = config.clientConfig?.configAsType || {};
         const plannedColor = configAsType['plannedColor'] || '#90caf9';
@@ -14624,7 +14616,7 @@ class SPlusChartHandler {
      * Build weighted progress chart with summary gauge
      */
     buildWeightedProgressChart(items, weightedPlanned, weightedActual, _config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const variance = weightedActual - weightedPlanned;
         const gaugeColor = variance >= 0 ? '#4caf50' : variance >= -10 ? '#ff9800' : '#f44336';
         return {
@@ -14767,6 +14759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Shows current phase, completed phases, and upcoming phases.
  */
 class PhaseGateStepperHandler {
+    storeService = inject(DashboardStoreService);
     /**
      * handlePhaseGateStepperCard - matches functionName from CHART_TYPES
      * Returns data directly matching old PhaseGateStepperService format
@@ -14804,7 +14797,7 @@ class PhaseGateStepperHandler {
      * Parse phase gate data from API response
      */
     parsePhaseGateData(dataResponse, _config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const steps = [];
         // Handle array format
         const dataArray = Array.isArray(dataResponse)
@@ -14960,7 +14953,7 @@ class PhaseGateStepperHandler {
      * Build table columns from steps
      */
     buildTableColumns(steps, _config) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const columns = [
             {
                 key: 'property',
@@ -14984,7 +14977,7 @@ class PhaseGateStepperHandler {
      * Build table rows from steps
      */
     buildTableRows(steps) {
-        const languageCode = getLanguageCode();
+        const languageCode = this.storeService.languageCode();
         const rows = [];
         // Collect all unique property keys
         const allProperties = new Set();
@@ -15075,7 +15068,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  */
 class ChartDataService {
     http = inject(LimitedHttpService);
-    transloco = inject(TranslocoService);
     itemStore = inject(DashboardItemStoreService);
     // URL Configuration from localStorage
     urlPrefix = '';
@@ -15471,12 +15463,6 @@ class ChartDataService {
         console.warn(`Unknown handler function: ${handlerKey}`);
         return this.createPassthroughResult(data, config);
     }
-    /**
-     * Get language code
-     */
-    getLanguageCode() {
-        return (this.transloco.getActiveLang() || localStorage.getItem('langCode') || 'en');
-    }
     /**
      * Trigger refresh for a specific item
      */
@@ -18791,8 +18777,8 @@ function isMobilePlatform() {
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 }
 class EntityPreviewCardComponent {
-    storeService = inject(DashboardItemStoreService);
-    transloco = inject(TranslocoService);
+    itemStoreService = inject(DashboardItemStoreService);
+    dashboardStoreService = inject(DashboardStoreService);
     subscription = new Subscription();
     /** Dashboard ID for this card */
     dashboardId = input.required(...(ngDevMode ? [{ debugName: "dashboardId" }] : /* istanbul ignore next */ []));
@@ -18802,7 +18788,7 @@ class EntityPreviewCardComponent {
     props = signal([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
     /** Card title */
     title = computed(() => {
-        const languageCode = this.getLanguageCode();
+        const languageCode = this.dashboardStoreService.languageCode();
         return this.configurationItem()?.clientConfig?.title?.[languageCode] || '';
     }, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     ngOnInit() {
@@ -18816,13 +18802,13 @@ class EntityPreviewCardComponent {
      */
     subscribeToStore(dashboardId) {
         // Subscribe to ConfigurationItem
-        this.subscription.add(this.storeService
+        this.subscription.add(this.itemStoreService
             .selectItemProperty$(dashboardId, 'ConfigurationItem')
             .subscribe((config) => {
             this.configurationItem.set(config || null);
         }));
         // Subscribe to DataHandled
-        this.subscription.add(this.storeService
+        this.subscription.add(this.itemStoreService
             .selectItemProperty$(dashboardId, 'DataHandled')
             .subscribe((data) => {
             const values = data?.values;
@@ -18857,12 +18843,6 @@ class EntityPreviewCardComponent {
             this.props.set(processedProps);
         }));
     }
-    /**
-     * Get current language code
-     */
-    getLanguageCode() {
-        return (this.transloco.getActiveLang() || localStorage.getItem('langCode') || 'en');
-    }
     normalizeEntityProperty(prop) {
         const resolvedName = this.resolveEntityName(prop);
         if (!resolvedName) {
@@ -18892,7 +18872,7 @@ class EntityPreviewCardComponent {
         }
         if (value && typeof value === 'object') {
             const localized = value;
-            const languageCode = this.getLanguageCode();
+            const languageCode = this.dashboardStoreService.languageCode();
             const candidate = localized[languageCode] ?? localized['en'] ?? localized['ar'];
             if (typeof candidate === 'string') {
                 return candidate.trim();
@@ -21509,5 +21489,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionsSettings, BarChartHandler, BarControlUi, CHART_TYPES, CardContentComponent, CardFilterComponent, CardInfoComponent, ChartCardComponent, ChartDataService, ChartSettingsDrawer, ChartViewer, ComparisonChartHandler, DashboardBuilder, DashboardBuilderService, DashboardItem, DashboardItemStoreService, DashboardList, DashboardStoreService, DashboardViewer, DataSourceSettings, DefaultControlUi, DisplaySettings, DynamicFiltersComponent, DynamicFiltersConfig, EChartComponent, PropertiesCardComponent as EntitiesPreviewCardComponent, EntityInfoComponent, EntityPreviewCardComponent, FilterByGroupPipe, GaugeChartHandler, GeneralSettings, GetChartActionsPipe, HTTPMethod, HeaderCardComponent, LevelCardHandler, LineChartHandler, ListStatisticCardComponent, ManageBreadcrumb, ManageFilterOnPage, ManageItem, ManageItemService, ManagePages, MapChartHandler, OverviewCardHandler, PhaseGateStepperHandler, PieChartHandler, PieControlUi, PropertiesCardComponent, RingGaugeChartHandler, SPlusChartHandler, SkeletonCardComponent, SnapshotHandler, SplitterChartHandler, StackBarChartHandler, StackBarControlUi, StaticFiltersComponent, StatisticCardComponent, TableCardComponent, TableViewHandler, TimelineHandler, TopbarCardComponent, addCommasToNumber, axisFormatters, cloneDeep$1 as cloneDeep, createAxisFormatter, createTooltipFormatter, dynamicReorder, dynamicTextReplace, formatCurrency, formatDate, formatNumber, formatPercentage, formatValue, formatWordsUnderBar, formatXAxis, generalConfiguration, getColorFromConditions, getLanguageCode, getLocalizedTitle, getNestedData, groupDatesByYearAndMonth, handleFilterForCard, handleFilterForSnapshot, handleFiltersForCustom, isMobilePlatform$1 as isMobilePlatform, sortChartData, sortDataTableView, switchAllKeysSmall$1 as switchAllKeysSmall, switchAllKeysToLower };
+export { ActionsSettings, BarChartHandler, BarControlUi, CHART_TYPES, CardContentComponent, CardFilterComponent, CardInfoComponent, ChartCardComponent, ChartDataService, ChartSettingsDrawer, ChartViewer, ComparisonChartHandler, DashboardBuilder, DashboardBuilderService, DashboardItem, DashboardItemStoreService, DashboardList, DashboardStoreService, DashboardViewer, DataSourceSettings, DefaultControlUi, DisplaySettings, DynamicFiltersComponent, DynamicFiltersConfig, EChartComponent, PropertiesCardComponent as EntitiesPreviewCardComponent, EntityInfoComponent, EntityPreviewCardComponent, FilterByGroupPipe, GaugeChartHandler, GeneralSettings, GetChartActionsPipe, HTTPMethod, HeaderCardComponent, LevelCardHandler, LineChartHandler, ListStatisticCardComponent, ManageBreadcrumb, ManageFilterOnPage, ManageItem, ManageItemService, ManagePages, MapChartHandler, OverviewCardHandler, PhaseGateStepperHandler, PieChartHandler, PieControlUi, PropertiesCardComponent, RingGaugeChartHandler, SPlusChartHandler, SkeletonCardComponent, SnapshotHandler, SplitterChartHandler, StackBarChartHandler, StackBarControlUi, StaticFiltersComponent, StatisticCardComponent, TableCardComponent, TableViewHandler, TimelineHandler, TopbarCardComponent, addCommasToNumber, axisFormatters, cloneDeep$1 as cloneDeep, createAxisFormatter, createTooltipFormatter, dynamicReorder, dynamicTextReplace, formatCurrency, formatDate, formatNumber, formatPercentage, formatValue, formatWordsUnderBar, formatXAxis, generalConfiguration, getColorFromConditions, getLocalizedTitle, getNestedData, groupDatesByYearAndMonth, handleFilterForCard, handleFilterForSnapshot, handleFiltersForCustom, isMobilePlatform$1 as isMobilePlatform, sortChartData, sortDataTableView, switchAllKeysSmall$1 as switchAllKeysSmall, switchAllKeysToLower };
 //# sourceMappingURL=masterteam-dashboard-builder.mjs.map