@thoughtspot/ts-chart-sdk 0.0.2-alpha.24 → 0.0.2-alpha.25

package/src/utils/number-formatting/number-formatting.spec.ts

@@ -0,0 +1,243 @@
+import { create, LogLevel, logMethods } from '../../main/logger';
+import {
+    ColumnFormat,
+    CurrencyFormatType,
+    FormatType,
+} from '../../types/answer-column.types';
+import {
+    CategoryType,
+    FormatConfig,
+    NegativeValueFormat,
+    Unit,
+} from '../../types/number-formatting.types';
+import { initGlobalize } from '../globalize-Initializer/globalize-utils';
+import * as globalizeUtils from '../globalize-Initializer/globalize-utils';
+import {
+    formatCurrencyWithCustomPattern,
+    getFormattedValue,
+} from './number-formatting';
+
+jest.mock('../../main/util', () => ({
+    getQueryParam: jest.fn().mockReturnValue('true'),
+}));
+
+describe('formatCurrencyWithCustomPattern', () => {
+    beforeAll(() => {
+        initGlobalize('en-US');
+    });
+    test('formats value with a custom pattern and currency symbol', () => {
+        const value = 12345.678;
+        const currencyCode = 'USD';
+        const formatPattern = '#,##0.00';
+
+        const result = formatCurrencyWithCustomPattern(
+            value,
+            currencyCode,
+            formatPattern,
+        );
+        expect(result).toBe('$12,345.68');
+    });
+});
+
+describe('getFormattedValue', () => {
+    beforeAll(() => {
+        initGlobalize('en-US');
+    });
+    const columnFormatConfig: ColumnFormat = {
+        type: FormatType.CURRENCY,
+        currencyFormat: {
+            type: CurrencyFormatType.ISO_CODE,
+            column: '',
+            isoCode: 'USD',
+        },
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('uses Number Fromatting as default configuration when formatConfigProp &  columnFormatConfig are null', () => {
+        const result = getFormattedValue(12345, {}, {} as ColumnFormat);
+        expect(result).toBe('12.35K');
+    });
+
+    test('use Custom Formatting as default configuration when only formatConfigProp is null', () => {
+        const result = getFormattedValue(12345, {}, columnFormatConfig);
+        expect(result).toBe('$12.35K');
+    });
+
+    test('formats special values (NaN, Infinity)', () => {
+        expect(getFormattedValue(NaN, {}, {} as ColumnFormat)).toBe('NaN');
+        expect(getFormattedValue(Infinity, {}, {} as ColumnFormat)).toBe(
+            'Infinity',
+        );
+        expect(getFormattedValue(-Infinity, {}, {} as ColumnFormat)).toBe(
+            '-Infinity',
+        );
+    });
+
+    test('formats number category values with units and trailing zeroes', () => {
+        const formatConfig: FormatConfig = {
+            category: CategoryType.Number,
+            numberFormatConfig: {
+                unit: Unit.Thousands,
+                decimals: 2,
+                toSeparateThousands: true,
+                negativeValueFormat: NegativeValueFormat.PrefixDash,
+            },
+        };
+        const result = getFormattedValue(
+            -12345,
+            formatConfig,
+            {} as ColumnFormat,
+        );
+        expect(result).toBe('-12.35K'); // Update based on actual expected output
+    });
+
+    test('formats percentage values correctly', () => {
+        const formatConfig: FormatConfig = {
+            category: CategoryType.Percentage,
+            percentageFormatConfig: { decimals: 2, removeTrailingZeroes: true },
+        };
+        const result = getFormattedValue(
+            0.1234,
+            formatConfig,
+            {} as ColumnFormat,
+        );
+        expect(result).toBe('12.34%');
+    });
+
+    test('formats currency values with compact units', () => {
+        const formatConfig: FormatConfig = {
+            category: CategoryType.Currency,
+            currencyFormatConfig: {
+                locale: 'USD',
+                toSeparateThousands: true,
+            },
+        };
+        const result = getFormattedValue(
+            12345.678,
+            formatConfig,
+            {} as ColumnFormat,
+        );
+        // eslint-disable-next-line security/detect-unsafe-regex
+        expect(result).toMatch(/^\$\d+,\d+(\.\d+)?$/); // Update expected value
+    });
+
+    test('formats currency values with user Locale', () => {
+        jest.spyOn(
+            globalizeUtils,
+            'getDefaultCurrencyCode',
+        ).mockImplementationOnce(() => 'INR');
+        const formatConfig: FormatConfig = {
+            category: CategoryType.Currency,
+            currencyFormatConfig: {
+                unit: Unit.Thousands,
+                decimals: 2,
+                locale: CurrencyFormatType.USER_LOCALE,
+                toSeparateThousands: true,
+            },
+        };
+        const result = getFormattedValue(
+            12345.678,
+            formatConfig,
+            {} as ColumnFormat,
+        );
+        expect(result).toMatch('₹12.35K'); // Update expected value
+    });
+
+    test('should normalize category to CategoryType.Number when it is a number', () => {
+        // Mock formatConfig with category as a number
+        const formatConfig: FormatConfig = {
+            category: 12345 as any,
+            numberFormatConfig: {
+                unit: Unit.Thousands,
+                decimals: 2,
+                toSeparateThousands: true,
+                negativeValueFormat: NegativeValueFormat.PrefixDash,
+            },
+        };
+
+        const result = getFormattedValue(
+            1000,
+            formatConfig,
+            {} as ColumnFormat,
+        );
+
+        expect(result).toBe('1.00K'); // Update based on actual expected output
+    });
+
+    test('falls back to default formatting for unsupported categories', () => {
+        const formatConfig: FormatConfig = { category: 'Unknown' as any };
+        const result = getFormattedValue(
+            12345.678,
+            formatConfig,
+            {} as ColumnFormat,
+        );
+        expect(result).toBe('12,345.678'); // Update based on fallback behavior
+    });
+
+    test('formats custom pattern correctly', () => {
+        const formatConfig: FormatConfig = {
+            category: CategoryType.Custom,
+            customFormatConfig: { format: '#,##0.00' },
+        };
+        const result = getFormattedValue(
+            12345.678,
+            formatConfig,
+            {} as ColumnFormat,
+        );
+        expect(result).toBe('12,345.68'); // Update based on actual output
+    });
+
+    test('formats custom pattern with valid customColumn format', () => {
+        const formatConfig: FormatConfig = {
+            category: CategoryType.Custom,
+            customFormatConfig: { format: '#,##0.00' },
+        };
+        const result = getFormattedValue(
+            12345.678,
+            formatConfig,
+            columnFormatConfig,
+        );
+        expect(result).toBe('$12,345.68'); // Update based on actual output
+    });
+
+    test('logs error for invalid custom format patterns', () => {
+        const formatConfig: FormatConfig = {
+            category: CategoryType.Custom,
+            customFormatConfig: { format: 'invalid-format' },
+        };
+        const error = jest.fn();
+        logMethods[LogLevel.ERROR] = error;
+        const logger = create('TestLogger');
+        logger.error = error;
+
+        getFormattedValue(12345.678, formatConfig, {} as ColumnFormat);
+        expect(logger.error).toHaveBeenCalled();
+
+        jest.restoreAllMocks();
+    });
+
+    test('handles currency formatting failure', () => {
+        const formatConfig: FormatConfig = {
+            category: CategoryType.Currency,
+        };
+        jest.spyOn(
+            globalizeUtils,
+            'globalizeCurrencyFormatter',
+        ).mockImplementationOnce(() => {
+            throw new Error('Currency format error');
+        });
+
+        const error = jest.fn();
+        logMethods[LogLevel.ERROR] = error;
+        const logger = create('TestLogger');
+        logger.error = error;
+
+        getFormattedValue(12345.678, formatConfig, {} as ColumnFormat);
+        expect(logger.error).toHaveBeenCalled();
+
+        jest.restoreAllMocks();
+    });
+});

package/src/utils/number-formatting/number-formatting.ts

@@ -0,0 +1,268 @@
+/**
+ * @file: Number Formatting Utils
+ *
+ * @author Yashvardhan Nehra <yashvardhan.nehra@thoughtspot.com>
+ *
+ * Copyright: ThoughtSpot Inc. 2024
+ */
+import _ from 'lodash';
+import { create } from '../../main/logger';
+import {
+    ColumnFormat,
+    CurrencyFormat,
+    CurrencyFormatType,
+} from '../../types/answer-column.types';
+import {
+    CategoryType,
+    FormatConfig,
+    Unit,
+} from '../../types/number-formatting.types';
+import {
+    formatNumberSafely,
+    getDefaultCurrencyCode,
+    globalizeCurrencyFormatter,
+    globalizeNumberFormatter,
+    sanitizeFormat,
+    validateNumberFormat,
+} from '../globalize-Initializer/globalize-utils';
+import {
+    defaultFormatConfig,
+    formatNegativeValue,
+    formatSpecialDataValue,
+    getLocaleName,
+    mapFormatterConfig,
+    UNITS_TO_DIVIDING_FACTOR,
+    UNITS_TO_SUFFIX,
+} from './number-formatting-utils';
+
+const logger = create('number-formatting');
+
+const CURRENCY_CODE_EXTRACTOR_REGEX = /[\d.,]+/g;
+
+/**
+ * Formats a number with a custom pattern and combines it with a currency symbol.
+ *
+ * @param value - The numeric value to format.
+ * @param currencyCode - The ISO currency code (e.g., 'USD').
+ * @param formatPattern - The custom format pattern (e.g., '#,##0.00').
+ * @returns The formatted value with the currency symbol.
+ */
+export const formatCurrencyWithCustomPattern = (
+    value: number,
+    currencyCode: string,
+    formatPattern: string,
+): string => {
+    // Sanitize the custom format pattern
+    const sanitizedPattern = sanitizeFormat(formatPattern);
+
+    // Create a custom number formatter
+    const customFormatter = globalizeNumberFormatter({
+        ...({ raw: sanitizedPattern } as any),
+    });
+
+    const formattedValue = customFormatter(value);
+
+    const currencyFormatter = globalizeCurrencyFormatter(currencyCode, {
+        style: 'symbol',
+    });
+
+    const currencySymbol = currencyFormatter(0).replace(
+        CURRENCY_CODE_EXTRACTOR_REGEX,
+        '',
+    ); // Extract the currency symbol
+
+    // Combine the custom formatted value with the currency symbol
+    return `${currencySymbol}${formattedValue}`;
+};
+
+/**
+ * Formats a value based on the provided format configuration and column settings.
+ *
+ * @param value - The value to format (can be a string or number).
+ * @param formatConfigProp - The format configuration for the value.
+ * @param columnFormatConfig - The column-specific formatting settings.
+ * @returns The formatted value as a string.
+ */
+export const getFormattedValue = (
+    value: string | number,
+    formatConfigProp: FormatConfig,
+    columnFormatConfig: ColumnFormat,
+): string => {
+    let formatConfig = _.cloneDeep(formatConfigProp);
+
+    // Use default configuration if none is provided
+    if (_.isNil(formatConfig) || _.isEmpty(formatConfig)) {
+        formatConfig = defaultFormatConfig(columnFormatConfig);
+    }
+    // Normalize category to a proper type
+    if (typeof formatConfig.category === 'number') {
+        formatConfig.category = CategoryType.Number;
+    }
+
+    // Handle special data values (e.g., NaN, Infinity)
+    const specialVal = formatSpecialDataValue(value);
+    if (specialVal) {
+        return specialVal;
+    }
+
+    // Convert value to a float
+    const floatValue = parseFloat(value.toString());
+    const absFloatValue = Math.abs(floatValue);
+
+    switch (formatConfig.category) {
+        case CategoryType.Number: {
+            const configDetails = formatConfig.numberFormatConfig || {};
+            const formatterConfigMap = mapFormatterConfig(
+                absFloatValue,
+                configDetails,
+            );
+            const compactValue =
+                absFloatValue /
+                UNITS_TO_DIVIDING_FACTOR[
+                    formatterConfigMap.unitDetails as Unit
+                ];
+            const suffix = UNITS_TO_SUFFIX[formatterConfigMap.unitDetails];
+            const formattedValue = formatNumberSafely(
+                {
+                    style: 'decimal',
+                    maximumFractionDigits: formatterConfigMap.decimalDetails,
+                    minimumFractionDigits:
+                        formatterConfigMap.shouldRemoveTrailingZeros
+                            ? 0
+                            : formatterConfigMap.decimalDetails,
+                    useGrouping: configDetails.toSeparateThousands || false,
+                },
+                compactValue,
+            );
+            const absFormattedValue = `${formattedValue}${suffix}`;
+
+            if (absFloatValue !== floatValue) {
+                return formatNegativeValue(
+                    absFormattedValue,
+                    configDetails.negativeValueFormat,
+                );
+            }
+            return absFormattedValue;
+        }
+        case CategoryType.Percentage: {
+            const configDetails = formatConfig.percentageFormatConfig;
+            const decimalDetails = configDetails?.decimals || 0;
+            return formatNumberSafely(
+                {
+                    style: 'percent',
+                    maximumFractionDigits: decimalDetails,
+                    minimumFractionDigits: configDetails?.removeTrailingZeroes
+                        ? 0
+                        : decimalDetails,
+                },
+                floatValue,
+            );
+        }
+        case CategoryType.Currency: {
+            const configDetails = formatConfig.currencyFormatConfig || {};
+            const formatterConfigMap = mapFormatterConfig(
+                absFloatValue,
+                configDetails,
+            );
+            const compactValue =
+                floatValue /
+                UNITS_TO_DIVIDING_FACTOR[formatterConfigMap.unitDetails];
+
+            let locale = configDetails.locale || getDefaultCurrencyCode();
+            if (locale === CurrencyFormatType.USER_LOCALE) {
+                locale = getLocaleName({
+                    type: locale,
+                } as CurrencyFormat);
+            }
+            try {
+                const formatter = globalizeCurrencyFormatter(locale, {
+                    style: 'symbol',
+                    maximumFractionDigits: formatterConfigMap.decimalDetails,
+                    minimumFractionDigits:
+                        formatterConfigMap.shouldRemoveTrailingZeros
+                            ? 0
+                            : formatterConfigMap.decimalDetails,
+                    useGrouping: configDetails.toSeparateThousands || false,
+                });
+
+                const formattedValue = formatter(compactValue);
+                const currencyCode = formattedValue.replace(
+                    CURRENCY_CODE_EXTRACTOR_REGEX,
+                    '',
+                );
+                /**
+                 * When we format the value in Millions, Billions etc,
+                 * we have to handle the scenario of the unit suffix, currencycode and the formatted
+                 * value We test the presence of numeric character with the help of regex and then
+                 * we append the apt suffix and currencyCode to the formatted value
+                 */
+                const suffix = !_.isNil(floatValue)
+                    ? UNITS_TO_SUFFIX[formatterConfigMap.unitDetails]
+                    : '';
+                if (/[0-9]$/.test(formattedValue.charAt(0))) {
+                    return `${formattedValue.replace(
+                        currencyCode,
+                        '',
+                    )}${suffix}${currencyCode}`;
+                }
+                return `${formattedValue}${suffix}`;
+            } catch (e) {
+                logger.error(
+                    'Corrupted format config passed, formatting using default config',
+                    formatConfig,
+                    e,
+                );
+            }
+            break;
+        }
+        case CategoryType.Custom: {
+            const formatPattern = formatConfig.customFormatConfig?.format;
+            const currencyCode = columnFormatConfig.currencyFormat?.isoCode;
+            if (
+                !_.isNil(formatPattern) &&
+                validateNumberFormat(sanitizeFormat(formatPattern))
+            ) {
+                const sanitizedPattern = sanitizeFormat(formatPattern);
+                if (!_.isNil(currencyCode)) {
+                    /**
+                     * Globalize does not consider format pattern while formatting the currency,
+                     * only the currency specific rules are considered, so need to combine. That's
+                     * what we do in this formatCurrency method
+                     */
+                    const formattedValueWithLocaleAndPattern =
+                        formatCurrencyWithCustomPattern(
+                            floatValue,
+                            currencyCode,
+                            formatPattern,
+                        );
+                    return `${formattedValueWithLocaleAndPattern}`;
+                }
+                return formatNumberSafely(
+                    {
+                        style: 'decimal',
+                        raw: sanitizedPattern,
+                    },
+                    floatValue as any,
+                );
+            }
+            logger.error('Invalid custom format config passed:', formatConfig);
+            break;
+        }
+        default: {
+            return formatNumberSafely(
+                {
+                    style: 'decimal',
+                },
+                floatValue as any,
+            );
+        }
+    }
+
+    // Default fallback: Decimal formatting
+    return formatNumberSafely(
+        {
+            style: 'decimal',
+        },
+        floatValue as any,
+    );
+};