@qrvey/utils 1.2.9-3 → 1.2.9-32

package/src/dates/relative/interfaces/index.ts

@@ -2,6 +2,8 @@ export * from './AbsoluteStatement';
 export * from './Anchor';
 export * from './RelativeCursor';
 export * from './IRelativeCursorInfo';
+export * from './IRelativeUnit';
+export * from './IRelativeUnitInfo';
 export * from './RelativeInput';
 export * from './RelativeStatement';
 export * from './RelativeToAbsoluteStruct';

package/src/filters/adapters/FDToFlatUI.ts

@@ -47,7 +47,7 @@ function FD21ToFlatUI(scopes: IFSScope[] = [], datasetsInfo: IDataset[] = []): I
                     dataset.filters.forEach(filter => {
                         const datasetInfo: IDataset = datasetsInfo.find(dInfo => dInfo.qrveyid === dataset.qrveyid && dInfo.linkid === dataset.linkid);
                         let columnInfo: IColumn;
-                        if (!isEmpty(datasetInfo)) columnInfo = datasetInfo.options.find(cInfo => cInfo.id === filter.column.id && cInfo.dataset?.qrveyid === filter.column.qrveyid && cInfo.dataset?.linkid === filter.column.linkid);
+                        if (!isEmpty(datasetInfo)) columnInfo = datasetInfo.options.find(cInfo => cInfo.id === filter.column.id && cInfo.qrveyid === filter.column.qrveyid && cInfo.linkid === filter.column.linkid);
                         const info = !isEmpty(filter.extras.info) ? { icon: filter.extras.info.icon, label: filter.extras.info.label } : undefined;
                         const property = adaptDateGroupingProperty(filter.property);
 

package/src/filters/adapters/FDToUI.ts

@@ -11,7 +11,6 @@ import { FILTER_SECTION } from "../constants/common/FILTER_SECTION";
 import { IFUScope } from "../interfaces/ui/IFUScope";
 import { FILTER_STRUCTURE_VERSION } from "../constants/common/FILTER_STRUCTURE_VERSION";
 import { IColumn } from "../../columns/interfaces/IColumn";
-import { _get } from "../../general/object/get";
 
 /**
  * Generates a UI filter structure from Filter Data structure.
@@ -71,8 +70,8 @@ export function FDToUI(filterData: IFSData, datasetsInfo: IDataset[] = []): IFUD
                             id: filter.column.id,
                             label: columnInfo?.label,
                             linked: columnInfo?.linked,
-                            linkid: columnInfo?.dataset?.linkid || datasetInfo?.linkid,
-                            outputFormat: _get(datasetInfo, 'outputFormat'),
+                            linkid: columnInfo?.linkid || datasetInfo?.linkid,
+                            outputFormat: columnInfo?.outputFormat,
                             qrveyid: filter.column.qrveyid,
                             type: columnInfo?.type || filter.column.type,
                         },

package/src/filters/adapters/logicToFlatUI.ts

@@ -103,7 +103,7 @@ function getFilterByExpression(expression: OLD_IFilterExpression, scopeItem: OLD
                 enabled: true,
                 displayed: true,
                 qrveyid: uiExtras.column?.qrveyid,
-                label: _get( uiExtras.column?.dataset, 'name') || uiExtras.column?.dataset?.label,
+                label: _get(uiExtras.column, 'dataset.name') || uiExtras.column?.label,
                 linkid: uiExtras.column?.linkid,
             },
         },

package/src/filters/helpers/builder/getFilterBuilderGeneralConfig.ts

@@ -11,6 +11,7 @@ export function getFilterBuilderGeneralConfig(config: any = {}): IFilterBuilderG
         apiKey: getAttribute(config, 'api_key') || config.apiKey,
         appid: getAttribute(config, 'app_id') || config.appid,
         domain: config.domain,
+        i18n: config.i18n,
         qv_token: config.qv_token,
         timezoneControl: getAttribute(config, 'timezone_control') || config.timezoneControl,
         userid: getAttribute(config, 'user_id') || config.userid,

package/src/filters/helpers/ui/getQrveyIdsByUIFilters.ts

@@ -0,0 +1,22 @@
+
+import { isEmpty } from "../../../general/mix/isEmpty";
+import { IFSData } from "../../interfaces/common/IFSData";
+
+/**
+ * Gets a collection of Qrvey IDs in the UI Filter structure.
+ * Looks around all filter structure finding the qrveyid propertty in each dataset
+ * @param uiFilter 
+ */
+export function getQrveyIdsByUIFilters(uiFilter: IFSData): string[] {
+    const qrveyids = [];
+    if (isEmpty(uiFilter)) return qrveyids;
+
+    uiFilter.scopes.forEach(scope => {
+        if (!isEmpty(scope.datasets)) {
+            scope.datasets.forEach(dataset => {
+                if (!isEmpty(dataset)) qrveyids.push(dataset.qrveyid);
+            });
+        }
+    });
+    return qrveyids;
+}

package/src/filters/helpers/ui/getUIValues.ts

@@ -23,7 +23,6 @@ import { getI18nDateGroupLabel, IDateColumnPropertyType } from "../../..";
  */
 export function getUIValues(filter: IFSFilter, settings?: IFUUIValueSettings): IFUValue[] {
     settings = getUiValuesSettings(settings);
-
     switch (filter.validator) {
         case FILTER_VALIDATOR.AFTER:
         case FILTER_VALIDATOR.GREATER_THAN:
@@ -50,15 +49,20 @@ export function getUIValues(filter: IFSFilter, settings?: IFUUIValueSettings): I
         case FILTER_VALIDATOR.IS_NULL:
         case FILTER_VALIDATOR.IS_NOT_NULL:
             return [{
-                value: FILTER_VALIDATOR_INFO[filter.validator].label,
+                value: settings?.translate ? settings.translate('filter.validators.' + filter.validator.toLowerCase() + '_label') : FILTER_VALIDATOR_INFO[filter.validator].label,
                 enabled: settings.addEnableds ? (filter.values as IFSValue[])[0]?.enabled : undefined,
             }];
         case FILTER_VALIDATOR.IN:
-            return (filter.values as IFSValueRelativeDate[]).map(value => ({
-                value: 
-                `${RELATIVE_CURSOR_INFO[value.cursor].label} ${value.cursor !== RELATIVE_CURSOR.THIS && value.number > 1 ? value.number : ''} ${getValueUiUnitRelativeDate(value)} ${value.cursor !== RELATIVE_CURSOR.THIS ? `from ${value.anchor || 'current date'}`: ''}`,
-                enabled: settings.addEnableds ? filter.enabled : undefined,
-            }));
+            return (filter.values as IFSValueRelativeDate[]).map(value => {
+                const cursor = settings?.translate ? settings.translate(RELATIVE_CURSOR_INFO[value.cursor].i18nLabelPath) : RELATIVE_CURSOR_INFO[value.cursor].i18nLabelPath;
+                const from = settings?.translate ? settings.translate('filter.relative_container.from_label') : 'from';
+                const anchor = settings?.translate ?  settings?.translate('filter.relative_container.current_date') : 'current date';
+                return {
+                    value: 
+                    `${cursor} ${value.cursor !== RELATIVE_CURSOR.THIS && value.number > 1 ? value.number : ''} ${getValueUiUnitRelativeDate(value, settings)} ${value.cursor !== RELATIVE_CURSOR.THIS ? `${from} ${value.anchor || anchor}`: ''}`,
+                    enabled: settings.addEnableds ? filter.enabled : undefined,
+                };
+            });
         default:
             if (filter.column.type === COLUMN.RANKING && isEmpty(filter.column.aggregate)) {
                 return getRankingUIValues(filter.values as IFSValueRanking[][], settings.addEnableds, settings.rankingGroupIndex);
@@ -84,8 +88,9 @@ function getUiValuesSettings(settings: IFUUIValueSettings): IFUUIValueSettings {
     };
 }
 
-function getValueUiUnitRelativeDate(relative: IFSValueRelativeDate) {
-    return relative.cursor !== RELATIVE_CURSOR.THIS && relative.number > 1 ? `${relative.unit}s`: relative.unit;
+function getValueUiUnitRelativeDate(relative: IFSValueRelativeDate, settings: IFUUIValueSettings) {
+    const unit = settings.translate ? `${settings.translate(`common.units.${relative.unit}`)}` : relative.unit;
+    return relative.cursor !== RELATIVE_CURSOR.THIS && relative.number > 1 ? `${unit}s`: unit;
 }
 
 function getRankingUIValues(values: IFSValueRanking[][], addEnableds = false, rankingGroupIndex?: number) {

package/src/filters/helpers/ui/getUpdatedUIFilters.ts

@@ -0,0 +1,36 @@
+import { IColumn } from "../../../columns/interfaces/IColumn";
+import { isEmpty } from "../../../general/mix/isEmpty";
+import { IDataset } from "../../../qrvey/interfaces/IDataset";
+import { IFUData } from "../../interfaces/ui/IFUData";
+
+/**
+ * Gets a new UI Filter structure with a datasets/columns info updates
+ * @param data The UI Filter structure
+ * @param datasets An array of datasets/column info used for updating the data
+ * @returns A new UI FIlter structure
+ */
+export function getUpdatedUIFilters(data: IFUData, datasets: IDataset[] = []): IFUData {
+    if (isEmpty(data) || isEmpty(datasets)) return data;
+
+    const updatedScopes = data.scopes.map(scopes => {
+        scopes.datasets = scopes.datasets.map(dataset => {
+            const datasetInfo: IDataset = datasets.find(dInfo => dInfo.qrveyid === dataset.qrveyid && dInfo.linkid === dataset.linkid);
+            if (!isEmpty(datasetInfo)) dataset.label = datasetInfo.label;
+            dataset.filters = dataset.filters.map(filter => {
+                let columnInfo: IColumn;
+                if (!isEmpty(datasetInfo)) columnInfo = datasetInfo.options.find(cInfo => cInfo.id === filter.column.id && cInfo.qrveyid === filter.column.qrveyid && cInfo.linkid === filter.column.linkid);
+                if (!isEmpty(columnInfo)) {
+                    filter.column.formulaType = columnInfo.formulaType;
+                    filter.column.geogroup = columnInfo.geogroup;
+                    filter.column.label = columnInfo.label;
+                    filter.column.outputFormat = columnInfo.outputFormat;
+                    filter.column.type = columnInfo.type;
+                }
+                return filter;
+            });
+            return dataset;
+        });
+        return scopes;
+    });
+    return { ...data, scopes: updatedScopes };
+}

package/src/filters/helpers/ui/index.ts

@@ -2,7 +2,10 @@ export * from './excludeUIFiltersByAggregate';
 export * from './excludeUIFlatFiltersByScopes';
 export * from './getFilterPropertyLabel';
 export * from './getOutputFormatByColumn';
+export * from './getQrveyIdsByUIFilters';
 export * from './getUIFlatFilterByParams';
 export * from './getUIFlatFiltersByParams';
 export * from './getUIFlatFiltersByScopes';
 export * from './getUIValues';
+export * from './getUpdatedUIFilters';
+export * from './transformFilterValues';

package/src/filters/helpers/ui/transformFilterValues.ts

@@ -0,0 +1,29 @@
+import { isEmpty } from "../../../general/mix/isEmpty";
+import { transformValue } from "../../../qrvey/helpers/transformValue";
+import { IFSFilter } from "../../interfaces/common/IFSFilter";
+import { IFSValue } from "../../interfaces/common/IFSValue";
+import { IFSValueRange } from "../../interfaces/common/IFSValueRange";
+import { IFValue } from "../../interfaces/IFValue";
+import { IFUTransformFilterValuesSettings } from "../../interfaces/ui/IFUTransformFilterValuesSettings";
+import { isRangeValidator } from "../common/isRangeValidator";
+import { isRegularValidator } from "../common/isRegularValidator";
+
+export function transformFilterValues(filter: IFSFilter, settings: IFUTransformFilterValuesSettings): IFValue[] {
+    const transformValueSettings = { ...settings, column: filter.column, property: filter.property };
+    if (isEmpty(filter)) return [];
+
+    if (isRegularValidator(filter.validator)) {
+        return (filter.values as IFSValue[]).map((value: IFSValue) => ({
+            ...value,
+            value: transformValue(value.value, transformValueSettings),
+         }));
+    } else if (isRangeValidator(filter.validator)) {
+        return (filter.values as IFSValueRange[]).map((value: IFSValueRange) => ({
+            ...value,
+            min: transformValue(value.min, transformValueSettings),
+            max: transformValue(value.max, transformValueSettings)
+         }));
+    } else {
+        return filter.values;
+    }
+}

package/src/filters/interfaces/OLD_IFilterDetail.ts

@@ -1,4 +1,5 @@
 import { IColumn } from "../../columns/interfaces/IColumn";
+import { IDataset } from "../../qrvey/interfaces/IDataset";
 import { IFSFilterExtrasInfo } from "./common/IFSFilterExtrasInfo";
 import { IFDateSection } from "./IFDateSection";
 import { IFOperator } from "./IFOperator";
@@ -11,7 +12,7 @@ import { IFUChartSettings } from "./ui/IFUChartSettings";
 import { IFUValue } from "./ui/IFUValue";
 
 export interface OLD_IFilterDetail {
-    column?: IColumn;
+    column?: IColumn & { dataset: IDataset };
     dateSection?: IFDateSection;
     enabled?: boolean;
     lookupDisplayIndex?: number;

package/src/filters/interfaces/builder/IFilterBuilderConfig.ts

@@ -1,4 +1,3 @@
-import { IResourceI18n } from "../../../globalization/interfaces/IResourceI18n";
 import { IFBLogic } from "../backend/IFBLogic";
 import { IFBUserFilters } from "../backend/IFBUserFilters";
 import { IFSColumn } from "../common/IFSColumn";
@@ -16,7 +15,6 @@ import { IFilterBuilderSettings } from "./IFilterBuilderSettings";
  * Structure for the configuration of the Filter Builder
  */
 export interface IFilterBuilderConfig {
-    i18n?: IResourceI18n; // Globalization object
     datasets?: string[]; // Qrvey IDs for displaying their columns in the colum selector. No qrveyids, the column list is not render
     filterData?: IFSData; // The Filter Data structure
     filterLabel?: string; // A label for the filter. If filterLabel is provided the old filterLabel is replaced by the new one

package/src/filters/interfaces/builder/IFilterBuilderGeneralConfig.ts

@@ -1,3 +1,5 @@
+import { II18nConfig } from "../../../globalization/interfaces/II18nConfig";
+
 /**
  * Structure for the Fiter Builder General config
  */
@@ -6,6 +8,7 @@ export interface IFilterBuilderGeneralConfig {
     appid: string; // App ID
     domain: string; // The domain of the environment
     qv_token?: string; // Qrvey Token for RLS
-    timezoneControl?: string;
+    timezoneControl?: string; // Offset number for Timezone
+    i18n?: II18nConfig; // The i18n configuration;
     userid: string; // User ID
 }

package/src/filters/interfaces/panel/IFPSettingsGeneral.ts

@@ -5,8 +5,9 @@
     canCollapse?: boolean; // Validates if the component can be collapsed. True: It can collapse; False: It cannot collapse
     collapsed?: boolean; // True: The component is collapsed; False: The component is not collapsed.
     colorModeDisplayed?: boolean; // True: Display the color of each filter scopes; False: Hide the color.
+    dynamicFilters?: boolean; // True: The filters should be filtered by given params from config or listener.
     enabled?: boolean; // True: The scope filters are applied. False: The scope filters are not applied.
     iconDisplayed?: boolean; // True: Display the icons linked with each scope; false: Do not display the icons.
     readonly?: boolean; // True: validates read only, any event could be executed.
-    dynamicFilters?: boolean; // True: The filters should be filtered by given params from config or listener.
+    updateFilterInfo?: boolean; // True: Update info of the datasets and columns stored in the filter structure
 }

package/src/filters/interfaces/panel/IFilterPanelConfig.ts

@@ -1,4 +1,4 @@
-import { IResourceI18n } from "../../../globalization";
+import { II18nConfig } from "../../../globalization/interfaces/II18nConfig";
 import { IFilterBuilderConfig } from "../builder/IFilterBuilderConfig";
 import { IFUDataStore } from "../ui/IFUDataStore";
 
@@ -7,5 +7,5 @@ import { IFUDataStore } from "../ui/IFUDataStore";
  */
 export interface IFilterPanelConfig extends IFUDataStore {
     filterBuilderConfig?: IFilterBuilderConfig; // Filter Builder config object
-    i18n?: IResourceI18n;
+    i18n?: II18nConfig; // The i18n configuration;
 }

package/src/filters/interfaces/ui/IFUTransformFilterValuesSettings.ts

@@ -0,0 +1,8 @@
+import { II18nConfig } from "../../../globalization/interfaces/II18nConfig";
+import { II18nServiceTranslate } from "../../../globalization/interfaces/II18nServiceTranslate";
+
+export interface IFUTransformFilterValuesSettings {
+    translate: II18nServiceTranslate; // Function for getting translations
+    i18n: II18nConfig; // I18n configuration
+    suffixTranslateLabel?: string // The i18n label for the suffix values.
+}

package/src/filters/interfaces/ui/index.ts

@@ -19,7 +19,8 @@ export * from './IFUDataset';
 export * from './IFUFilter';
 export * from './IFUFilterExtras';
 export * from './IFUFlattenedFilter';
-export * from './IFUScope';
 export * from './IFUParamsToGetFilter';
-export * from './IFUValue';
+export * from './IFUScope';
+export * from './IFUTransformFilterValuesSettings';
 export * from './IFUUIValueSettings';
+export * from './IFUValue';

package/src/format/definition.ts

@@ -55,3 +55,53 @@ export function supportNumericFormatting(chartType: ChartType): boolean {
   }
 
 export const isTextColumn = (column: any): boolean => textFields.includes(column.type) || column.formulaType === 'string' || column.formulaType === 'boolean';
+
+export const currencyISO = [
+  { text: 'Default', label: 'USD' },
+  { text: '$ (USD)', label: 'USD' },
+  { text: '€ (EUR)', label: 'EUR' },
+  { text: '¥ (JPY)', label: 'JPY' },
+  { text: '£ (GBP)', label: 'GBP' },
+  { text: '₩ (WON)', label: 'WON' },
+  { text: '$ (AUD)', label: 'AUD' },
+  { text: '$ (CAD)', label: 'CAD' },
+  { text: 'CHF (CHF)', label: 'CHF' },
+  { text: '¥ (CNY)', label: 'CNY' },
+  { text: 'kr (SEK)', label: 'SEK' },
+  { text: '$ (MXN)', label: 'MXN' },
+  { text: '$ (NZD)', label: 'NZD' },
+  { text: '$ (SGD)', label: 'SGD' },
+  { text: '$ (HKD)', label: 'HKD' },
+  { text: 'kr (NOK)', label: 'NOK' },
+  { text: '₩ (KRW)', label: 'KRW' },
+  { text: '₺ (TRY)', label: 'TRY' },
+  { text: '₹ (INR)', label: 'INR' },
+  { text: '₽ (RUB)', label: 'RUB' },
+  { text: 'R$ (BRL)', label: 'BRL' },
+  { text: 'R (ZAR)', label: 'ZAR' },
+  { text: 'kr (DKK)', label: 'DKK' },
+  { text: 'zł (PLN)', label: 'PLN' },
+  { text: 'NT$ (TWD)', label: 'TWD' },
+  { text: '฿ (THB)', label: 'THB' },
+  { text: 'RM (MYR)', label: 'MYR' }
+];
+
+export const enum LOCALE_FORMATS {
+  DECIMAL = 'Decimal',
+  CURRENCY = 'Currency',
+  PERCENTAGE = 'Percentage',
+  SCIENTIFIC = 'Scientific',
+  ABBREVIATED = 'Abbreviated'
+}
+export const enum LOCALE_STYLES {
+  DECIMAL = 'decimal',
+  PERCENT = 'percent',
+  CURRENCY = 'currency',
+  SCIENTIFIC = 'scientific',
+  COMPACT = 'compact'
+}
+
+export const LANG_DEFAULT = 'en-US';
+export const CURRENCY_DEFAULT = { text: '$ (USD)', label: 'USD' };
+export const DATETIME_OPTIONS = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
+

package/src/format/format.ts

@@ -6,6 +6,8 @@ import { isEmpty } from '../general/mix/isEmpty';
 import { _get } from '../general/object/get';
 import { COLUMN } from '../columns/constants/COLUMN';
 import { FORMULA } from '../formulas/constants/FORMULA';
+import { IFormatConfig } from '..';
+import { formatWithLocale } from './localization';
 
 dayjs.extend(advancedFormat); // Add support to advanced formats https://day.js.org/docs/en/plugin/advanced-format
 
@@ -82,22 +84,24 @@ export function formatFileSize(bytes: number): string {
     return megaBytes < 10 ? `${fixDecimals(megaBytes)} MB` : `${Math.round(megaBytes)} MB`;
 }
 
-export const formatValue = (value: any, outputFormat: any = 'None', config?): any => {
-    if (isEmpty(value) || typeof value === 'object' && isEmpty(value[0])) return value;
-    switch (outputFormat.type) {
-        case 'DATE':
-        case 'DATETIME':
-            return formatDate(value, outputFormat.format);
-        case 'NUMERIC': {
-            const parse = parseFloat(value);
-            return isNaN(parse) ? value : formatNumber(parse, outputFormat, config);
-        }
-        case 'IMAGEUPLOAD':
-        case 'FILEUPLOAD':
-            return formatFileSize(parseFloat(value));
-        default:
-            return typeof value === 'number' ? value.toFixed(0) : value;
+export const addFormat = (value: any, outputFormat: any = 'None', config?: IFormatConfig): any => {
+  if (isEmpty(value) || typeof value === 'object' && isEmpty(value[0])) return value;
+  switch (outputFormat.type) {
+    case 'DATE':
+    case 'DATETIME':
+      return config?.lang && outputFormat.format === 'Default' ? formatWithLocale(value, outputFormat, config) : formatDate(value, outputFormat.format);
+    case 'NUMERIC': {
+      const parse = parseFloat(value);
+      const withLocale = outputFormat !== 'None' && config?.lang;
+      return isNaN(parse) ? value : withLocale ? formatWithLocale(value, outputFormat, config)
+       : formatNumber(parse, outputFormat, config);
     }
+    case 'IMAGEUPLOAD':
+    case 'FILEUPLOAD':
+      return formatFileSize(parseFloat(value));
+    default:
+      return typeof value === 'number' ? value.toFixed(0) : value;
+  }
 };
 
 export const parseFormulaType = (type: string) => {

package/src/format/index.ts

@@ -1 +1,2 @@
 export * from './format';
+export * from './localization';

package/src/format/localization.ts

@@ -0,0 +1,75 @@
+import { DATETIME_COLUMN_FORMAT } from '..';
+import { isEmpty } from '../general/mix/isEmpty';
+import { IFormatConfig, IFormatOutputFormat } from '../interfaces';
+import { currencyISO, LOCALE_FORMATS, LOCALE_STYLES, LANG_DEFAULT, CURRENCY_DEFAULT, DATETIME_OPTIONS } from './definition';
+
+export const getLang = (locale: string | Record<string, any>) => {
+    if (!locale) return;
+    else if(typeof locale === 'object') return locale;
+    else return { lang: locale === "browser" ? window.navigator.language : locale };
+};
+
+export const chooseLang = (config: Record<string, any>): string => {
+    const lang: string | Record<string, any> = (
+        config?.i18n?.lang ||
+        config.lang
+    );
+    return (<any>lang)?.lang || lang || LANG_DEFAULT;
+};
+
+export const formatWithLocale = (value: any, outputFormat: IFormatOutputFormat, config: IFormatConfig = {}): any => {
+    switch (outputFormat.type) {
+      case 'DATE':
+      case 'DATETIME':
+        return formatLocaleDate(value, outputFormat, config);
+      case 'NUMERIC':
+        return formatLocaleNumber(value, outputFormat, config);
+    }
+};
+
+function formatLocaleDate(value: any, outputFormat: IFormatOutputFormat, config: IFormatConfig) {
+    const { lang = LANG_DEFAULT, options } = config;
+    const dateParam = new Date(value);
+    let langOpts = options;
+    if (outputFormat?.originalFormat) {
+        const { format } = outputFormat.originalFormat;
+        if (DATETIME_COLUMN_FORMAT.includes(format)) langOpts = DATETIME_OPTIONS;
+    }
+    try {
+        return new Intl.DateTimeFormat([lang, LANG_DEFAULT], langOpts).format(dateParam);
+    } catch (error) {
+        return isEmpty(dateParam) ? value : new Intl.DateTimeFormat(LANG_DEFAULT, langOpts).format(dateParam);
+    }
+}
+
+function formatLocaleNumber(value: any, outputFormat: IFormatOutputFormat, config: IFormatConfig,) {
+    const { lang = LANG_DEFAULT, options } = config;
+    const langOpts = options || getLocaleOptions(outputFormat);
+    const valueToFormat = outputFormat?.format === LOCALE_FORMATS.PERCENTAGE ? value/100 : value;
+    try {
+        return new Intl.NumberFormat([lang, LANG_DEFAULT], langOpts).format(valueToFormat);
+    } catch (e) {
+        return new Intl.NumberFormat(LANG_DEFAULT, langOpts).format(valueToFormat);
+    }
+}
+
+function getLocaleOptions(outputFormat: IFormatOutputFormat) {
+    const { format, decimals, currency } = outputFormat;
+    switch(format) {
+        case LOCALE_FORMATS.CURRENCY: {
+            let iso = isEmpty(currency) ? CURRENCY_DEFAULT : currencyISO.find(item => item.text === currency.text);
+            if(isEmpty(iso)) {
+                iso = currencyISO.find(item => {
+                    const symbol = item.text.split(' ')[0];
+                    return symbol === currency.label;
+                });
+            }
+            return { style: LOCALE_STYLES.CURRENCY, currency: iso.label, maximumFractionDigits: decimals, minimumFractionDigits: decimals, currencyDisplay: 'narrowSymbol' };
+        }
+        case LOCALE_FORMATS.SCIENTIFIC: return { style: LOCALE_STYLES.DECIMAL,
+             notation: LOCALE_STYLES.SCIENTIFIC, maximumFractionDigits: decimals, minimumFractionDigits: decimals };
+        case LOCALE_FORMATS.PERCENTAGE: return { style: LOCALE_STYLES.PERCENT, maximumFractionDigits: decimals, minimumFractionDigits: decimals };
+        case LOCALE_FORMATS.ABBREVIATED: return { notation: LOCALE_STYLES.COMPACT, maximumFractionDigits: decimals, minimumFractionDigits: decimals };
+        default: return { style: LOCALE_STYLES.DECIMAL, maximumFractionDigits: decimals, minimumFractionDigits: decimals };
+    }
+}

package/src/globalization/helpers/getI18nCalendar.ts

@@ -0,0 +1,68 @@
+import { II18nCalendarProperties } from "../interfaces/calendar/II18nCalendarProperties";
+import { II18nServiceTranslate } from "../interfaces/II18nServiceTranslate";
+import { I18nService } from "../service/i18nextBuilder";
+
+export function getI18nCalendar(locale: I18nService | II18nServiceTranslate): II18nCalendarProperties {
+    const localeOverride = locale instanceof I18nService ? locale : typeof locale === 'function' ? { translate: locale } : undefined;
+    if (!localeOverride) return undefined;
+
+    return {
+      clear: localeOverride.translate('common.calendar.clear'),
+      days: [
+        localeOverride.translate('common.day_names.sunday_dddd'), 
+        localeOverride.translate('common.day_names.monday_dddd'), 
+        localeOverride.translate('common.day_names.tuesday_dddd'), 
+        localeOverride.translate('common.day_names.wednesday_dddd'), 
+        localeOverride.translate('common.day_names.thursday_dddd'), 
+        localeOverride.translate('common.day_names.friday_dddd'),
+        localeOverride.translate('common.day_names.saturday_dddd')
+      ],
+      daysMin: [
+        localeOverride.translate('common.day_names.sunday_dd'), 
+        localeOverride.translate('common.day_names.monday_dd'), 
+        localeOverride.translate('common.day_names.tuesday_dd'), 
+        localeOverride.translate('common.day_names.wednesday_dd'), 
+        localeOverride.translate('common.day_names.thursday_dd'), 
+        localeOverride.translate('common.day_names.friday_dd'),
+        localeOverride.translate('common.day_names.saturday_dd')
+      ],
+      daysShort: [
+        localeOverride.translate('common.day_names.sunday_ddd'), 
+        localeOverride.translate('common.day_names.monday_ddd'), 
+        localeOverride.translate('common.day_names.tuesday_ddd'), 
+        localeOverride.translate('common.day_names.wednesday_ddd'), 
+        localeOverride.translate('common.day_names.thursday_ddd'), 
+        localeOverride.translate('common.day_names.friday_ddd'),
+        localeOverride.translate('common.day_names.saturday_ddd')
+      ],
+      months: [
+        localeOverride.translate('common.date_grouping.january_mmmm'), 
+        localeOverride.translate('common.date_grouping.february_mmmm'), 
+        localeOverride.translate('common.date_grouping.march_mmmm'), 
+        localeOverride.translate('common.date_grouping.april_mmmm'), 
+        localeOverride.translate('common.date_grouping.may_mmmm'), 
+        localeOverride.translate('common.date_grouping.june_mmmm'),
+        localeOverride.translate('common.date_grouping.july_mmmm'),
+        localeOverride.translate('common.date_grouping.august_mmmm'),
+        localeOverride.translate('common.date_grouping.september_mmmm'),
+        localeOverride.translate('common.date_grouping.october_mmmm'),
+        localeOverride.translate('common.date_grouping.november_mmmm'),
+        localeOverride.translate('common.date_grouping.december_mmmm')
+      ],
+      monthsShort: [
+        localeOverride.translate('common.date_grouping.january_mmm'), 
+        localeOverride.translate('common.date_grouping.february_mmm'), 
+        localeOverride.translate('common.date_grouping.march_mmm'), 
+        localeOverride.translate('common.date_grouping.april_mmm'), 
+        localeOverride.translate('common.date_grouping.may_mmm'), 
+        localeOverride.translate('common.date_grouping.june_mmm'),
+        localeOverride.translate('common.date_grouping.july_mmm'),
+        localeOverride.translate('common.date_grouping.august_mmm'),
+        localeOverride.translate('common.date_grouping.september_mmm'),
+        localeOverride.translate('common.date_grouping.october_mmm'),
+        localeOverride.translate('common.date_grouping.november_mmm'),
+        localeOverride.translate('common.date_grouping.december_mmm')
+      ],
+      today: localeOverride.translate('common.calendar.today')
+    };
+}

package/src/globalization/helpers/getI18nDateGroupLabel.ts

@@ -7,6 +7,8 @@ import { isTokenLabel } from "../../tokens/isTokenLabel";
 import { II18nServiceTranslate } from "../interfaces/II18nServiceTranslate";
 
 export function getI18nDateGroupLabel(label: string, dateGroup: IDateColumnPropertyType, translate?: II18nServiceTranslate): string {
+    if (isEmpty(label)) return label;
+
     if (dateGroup === DATE_GROUPING_PROPERTY.MONTH)
         return getI18nMonthLabel(label, translate);
     else if (dateGroup === DATE_GROUPING_PROPERTY.QUARTER)

package/src/globalization/helpers/getReverseI18nGroupLabel.ts

@@ -8,6 +8,8 @@ import { isTokenLabel } from "../../tokens/isTokenLabel";
 import { II18nServiceTranslate } from "../interfaces/II18nServiceTranslate";
 
 export function getReverseI18nGroupLabel(label: string, dateGroup: IDateColumnPropertyType, translate?: II18nServiceTranslate): string {
+    if (isEmpty(label)) return label;
+
     if (dateGroup === DATE_GROUPING_PROPERTY.MONTH)
         return getReverseI18nMonthLabel(label, translate);
     else if (dateGroup === DATE_GROUPING_PROPERTY.QUARTER)

package/src/globalization/helpers/index.ts

@@ -1,2 +1,3 @@
+export * from './getI18nCalendar';
 export * from './getI18nDateGroupLabel';
 export * from './getReverseI18nGroupLabel';

package/src/globalization/interfaces/II18nConfig.ts

@@ -0,0 +1,7 @@
+import { II18nResource } from "./II18nResource";
+
+export interface II18nConfig {
+    lang?: string; // Language format for getting stored traslations of the labels (en-US)
+    locale?: string; // Language format for transform number and date values (en-US)
+    lang_object?: II18nResource; // Oject Structure to translate labels
+}

package/src/globalization/interfaces/{IResourceI18n.ts → II18nResource.ts}

@@ -10,8 +10,9 @@ import { II18nFilterDisplay } from './filters/II18nFilterDisplay';
 import { II18nBucketBuilder } from './bucket_builder/II18nBucketBuilder';
 import { II18nCrossTabs } from './cross_tabs';
 import { II18nChartBuilder } from '.';
+import { II18nStyleThemes } from './style_themes/II18nStyleThemes';
 
-export interface IResourceI18n {
+export interface II18nResource {
     bucket_builder?: II18nBucketBuilder;
     chart_builder?: II18nChartBuilder;
     common?: II18nCommon;
@@ -23,5 +24,6 @@ export interface IResourceI18n {
     filter_panel?: II18nFilterPanel;
     formula_builder?: II18nFormulaBuilder;
     panel?: II18nPanel;
+    style_themes?: II18nStyleThemes;
     table_charts?: II18nTableCharts;
 }

package/src/globalization/interfaces/bucket_builder/II18nBucketBuilderMessages.ts

@@ -1,7 +1,8 @@
 export interface II18nBucketBuilderMessages {
     added: string;
     bad_configuration_object: string;
-    duplicated: string;
     deleted: string;
+    duplicated: string;
     edited: string;
+    insufficient_values: string;
 }

package/src/globalization/interfaces/bucket_builder/II18nBucketBuilderModalBucket.ts

@@ -2,4 +2,6 @@ export interface II18nBucketBuilderModalBucket {
     add_bucketed_column: string;
     loading: string;
     title: string;
+    information_text_link: string,
+    information_text_text: string,
 }

package/src/globalization/interfaces/calendar/II18nCalendar.ts

@@ -0,0 +1,7 @@
+export interface II18nCalendar {
+    clear: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+    today: string;
+}