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

package/src/types/visual-prop.types.ts

@@ -11,6 +11,43 @@
 import type { CustomChartContext } from '../main/custom-chart-context';
 import { ColumnType } from './answer-column.types';
 import { ChartModel } from './common.types';
+
+export type TSTooltipConfig = {
+    columnIds: Array<string>;
+};
+
+export enum VisualPropComponentTranslationKeys {
+    SHOW_ALL_LABELS = 'SHOW_ALL_LABELS',
+    TOO_MANY_LABELS = 'TOO_MANY_LABELS',
+    MAP_TILE_LABEL = 'MAP_TILE_LABEL',
+    ENABLE_MARKERS = 'ENABLE_MARKERS',
+    SHOW_REGRESSION_LINE = 'SHOW_REGRESSION_LINE',
+    X_AXIS_GRID_LINE = 'X_AXIS_GRID_LINE',
+    Y_AXIS_GRID_LINE = 'Y_AXIS_GRID_LINE',
+    MAX_DATA_POINTS = 'MAX_DATA_POINTS',
+    HIGH_CARDINALITY_BATCH_SIZE_DISABLED = 'highCardinalityBatchSizeDisabled',
+    HIGH_CARDINALITY_BATCH_SIZE_LIMIT = 'highCardinalityBatchSizeLimit',
+    CHART_CUSTOMIZE = 'CHART_CUSTOMIZE',
+    SELECT_AN_AREA = 'chartConfigurator.SELECT_AN_AREA',
+    RESET_ZOOM = 'chartConfigurator.RESET_ZOOM',
+    EDIT_TOOLTIP = 'EDIT_TOOLTIP',
+    DONT_SHOW = 'DONT_SHOW',
+    SHOW_GAP = 'SHOW_GAP',
+    SHOW_AS_ZERO = 'SHOW_AS_ZERO',
+    HANDLE_MISSING_VALUES = 'HANDLE_MISSING_VALUES',
+    SHOW_NULL_AS_ZERO = 'SHOW_NULL_AS_ZERO',
+    EXCLUDE_NULL_VALUES = 'EXCLUDE_NULL_VALUES',
+    COLUMN_CUSTOMIZE = 'COLUMN_CUSTOMIZE',
+    SHOW_TOTAL_LABELS = 'SHOW_TOTAL_LABELS',
+    SHOW_DETAILED_LABELS = 'SHOW_DETAILED_LABELS',
+    SHOW_DATA_LABELS = 'SHOW_DATA_LABELS',
+    SHOW_AXIS_AS_PERCENT = 'SHOW_AXIS_AS_PERCENT',
+    RIGHT_LEGEND = 'RIGHT_LEGEND',
+    LEFT_LEGEND = 'LEFT_LEGEND',
+    TOP_LEGEND = 'TOP_LEGEND',
+    BOTTOM_LEGEND = 'BOTTOM_LEGEND',
+}
+
 /**
  * Configuration for input validation rules
  */
@@ -122,6 +159,12 @@ export interface TextInputFormDetail {
      * @version SDK: 0.0.2-alpha.13 | ThoughtSpot:
      */
     disabled?: boolean;
+    /**
+     * Translation key for the label
+     *
+     * @version SDK: 0.2 | ThoughtSpot:
+     */
+    labelTranslation?: VisualPropComponentTranslationKeys;
 }
 
 /**
@@ -161,6 +204,12 @@ export interface NumberInputFormDetail {
      * @version SDK: 0.0.2-alpha.13 | ThoughtSpot:
      */
     disabled?: boolean;
+    /**
+     * Translation key for the label
+     *
+     * @version SDK: 0.2 | ThoughtSpot:
+     */
+    labelTranslation?: VisualPropComponentTranslationKeys;
 }
 
 /**
@@ -195,6 +244,12 @@ export interface ColorPickerFormDetail {
      * @version SDK: 0.0.1-alpha.7 | ThoughtSpot:
      */
     defaultValue?: string;
+    /**
+     * Translation key for the label
+     *
+     * @version SDK: 0.2 | ThoughtSpot:
+     */
+    labelTranslation?: VisualPropComponentTranslationKeys;
 }
 
 /**
@@ -228,6 +283,12 @@ export interface ToggleFormDetail {
      * @version SDK: 0.0.2-alpha.13 | ThoughtSpot:
      */
     disabled?: boolean;
+    /**
+     * Translation key for the label
+     *
+     * @version SDK: 0.2 | ThoughtSpot:
+     */
+    labelTranslation?: VisualPropComponentTranslationKeys;
 }
 
 /**
@@ -261,6 +322,12 @@ export interface CheckboxFormDetail {
      * @version SDK: 0.0.2-alpha.13 | ThoughtSpot:
      */
     disabled?: boolean;
+    /**
+     * Translation key for the label
+     *
+     * @version SDK: 0.2 | ThoughtSpot:
+     */
+    labelTranslation?: VisualPropComponentTranslationKeys;
 }
 
 /**
@@ -300,6 +367,12 @@ export interface RadioButtonFormDetail {
      * @version SDK: 0.0.2-3 | ThoughtSpot:
      */
     disabled?: boolean;
+    /**
+     * Translation key for the label
+     *
+     * @version SDK: 0.2 | ThoughtSpot:
+     */
+    labelTranslation?: VisualPropComponentTranslationKeys;
 }
 
 /**
@@ -339,6 +412,12 @@ export interface DropDownFormDetail {
      * @version SDK: 0.0.2-alpha.13 | ThoughtSpot:
      */
     disabled?: boolean;
+    /**
+     * Translation key for the label
+     *
+     * @version SDK: 0.2 | ThoughtSpot:
+     */
+    labelTranslation?: VisualPropComponentTranslationKeys;
 }
 
 /**
@@ -386,11 +465,58 @@ export interface Section {
      */
     disabled?: boolean;
     /* Optional property to make the accordian expanded by default. If
-     * not passed the accordian will remain closed by default. Only works with layout type 'accordian'
+     * not passed the accordian will remain closed by default. Only works with layout type
+     * 'accordian'
      *
      * @version SDK: 0.0.2-alpha.19 | ThoughtSpot:
      */
     isAccordianExpanded?: boolean;
+    /**
+     * Translation key for the label
+     *
+     * @version SDK: 0.2 | ThoughtSpot:
+     */
+    labelTranslation?: VisualPropComponentTranslationKeys;
+}
+
+/**
+ * Native charts edit tool tip component defined for regular charts in TS Advance Chart Settings
+ *
+ * @group Visual Properties Editor
+ */
+export interface NativeEditToolTip {
+    type: 'tooltipconfig';
+    /**
+     * Key to store the value
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    key: string;
+
+    /*
+     List of column ids that are present in ToolTipConfig by default 
+    */
+
+    defaultValue?: TSTooltipConfig;
+
+    /**
+     * I18n'ed string to show on the form label
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    label?: string;
+    /**
+     * Determines whether it should be disabled or not
+     *
+     * @version SDK: 0.0.2-alpha.13 | ThoughtSpot:
+     */
+    disabled?: boolean;
+    /**
+     * Translation key for the label
+     *
+     * @version SDK: 0.2 | ThoughtSpot:
+     */
+    labelTranslation?: VisualPropComponentTranslationKeys;
 }
 
 /**
@@ -406,7 +532,8 @@ export type PropElement =
     | ToggleFormDetail
     | CheckboxFormDetail
     | RadioButtonFormDetail
-    | DropDownFormDetail;
+    | DropDownFormDetail
+    | NativeEditToolTip;
 
 /**
  * Define Column settings, based on column type, settings needs to be defined in

package/src/utils/date-formatting.ts

@@ -8,6 +8,7 @@
 
 import _ from 'lodash';
 import { DateTime } from 'luxon';
+import { create } from '../main/logger';
 import {
     ChartColumn,
     ColumnTimeBucket,
@@ -15,6 +16,8 @@ import {
     DataType,
 } from '../types/answer-column.types';
 
+const logger = create('DateFormattingUtilsSdk');
+
 export interface CustomCalendarDate {
     v: {
         s: number;
@@ -615,7 +618,7 @@ export function formatDateNum(
         case dateNumTypes.DATE_NUM_HOUR_IN_DAY:
             return `${value}`;
         default:
-            console.log(
+            logger.log(
                 'unknown effectiveDataType for date num',
                 effectiveDataType,
             );
@@ -664,7 +667,7 @@ export function formatDate(
         epochMillis = newInputDate.getTime();
     }
     if (!_.isNumber(epochMillis)) {
-        console.log(
+        logger.log(
             'formatDate could not convert input date to a timestamp',
             inputDate,
         );

package/src/utils/globalize-Initializer/globalize-utils.spec.ts

@@ -0,0 +1,192 @@
+import Globalize from 'globalize';
+import {
+    formatNumberSafely,
+    getCountryCode,
+    getCurrentCurrencyFormat,
+    getDefaultCurrencyCode,
+    getGlobalizeLocale,
+    globalizeCurrencyFormatter,
+    globalizeNumberFormatter,
+    initGlobalize,
+    loadCurrencyData,
+    loadGlobalizeData,
+    sanitizeFormat,
+    setCurrentCurrencyFormat,
+    setGlobalizeLocale,
+    validateNumberFormat,
+} from './globalize-utils';
+
+describe('Initialize Globalize', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        initGlobalize('en-US');
+    });
+
+    describe('getCountryCode', () => {
+        it('should extract country code from locale with underscore', () => {
+            expect(getCountryCode('en_US')).toBe('US');
+        });
+
+        it('should extract country code from locale with hyphen', () => {
+            expect(getCountryCode('en-US')).toBe('US');
+        });
+
+        it('should return the input locale if no delimiter is found', () => {
+            expect(getCountryCode('en')).toBe('en');
+        });
+    });
+
+    describe('getDefaultCurrencyCode', () => {
+        it('should return the current currency format if set', () => {
+            setCurrentCurrencyFormat('EUR');
+            expect(getDefaultCurrencyCode()).toBe('EUR');
+        });
+
+        it('should return GBP if no currency data is found', () => {
+            setCurrentCurrencyFormat(null);
+            loadCurrencyData({});
+            expect(getDefaultCurrencyCode()).toBe('GBP');
+        });
+
+        it('should retrieve the default currency code from supplemental data', () => {
+            loadCurrencyData({
+                supplemental: {
+                    currencyData: {
+                        region: {
+                            US: [{ USD: {} }],
+                        },
+                    },
+                },
+            });
+            setGlobalizeLocale('en-US');
+            expect(getDefaultCurrencyCode()).toBe('USD');
+        });
+    });
+
+    describe('setGlobalizeLocale', () => {
+        it('should set the Globalize locale', () => {
+            setGlobalizeLocale('fr-FR');
+            expect(getGlobalizeLocale()).toBe('fr-FR');
+        });
+    });
+
+    describe('getGlobalizeLocale', () => {
+        it('should return the current locale', () => {
+            expect(getGlobalizeLocale()).toBe('en-US');
+        });
+    });
+
+    describe('setCurrentCurrencyFormat', () => {
+        it('should set the current currency format', () => {
+            setCurrentCurrencyFormat('JPY');
+            expect(getCurrentCurrencyFormat()).toBe('JPY');
+        });
+    });
+
+    describe('loadCurrencyData', () => {
+        it('should load supplemental currency data', () => {
+            const data = {
+                supplemental: {
+                    currencyData: {
+                        region: {
+                            US: [{ USD: {} }],
+                        },
+                    },
+                },
+            };
+            setCurrentCurrencyFormat(null);
+            loadCurrencyData(data);
+            expect(getDefaultCurrencyCode()).toBe('USD');
+        });
+    });
+
+    describe('loadGlobalizeData', () => {
+        it('should load CLDR data', () => {
+            jest.spyOn(Globalize, 'load').mockImplementationOnce((data) => {
+                return data;
+            });
+            const data = { key: 'value' };
+            loadGlobalizeData(data);
+            expect(Globalize.load).toHaveBeenCalledWith(data);
+            jest.clearAllMocks();
+        });
+    });
+
+    describe('globalizeNumberFormatter', () => {
+        it('should create a number formatter', () => {
+            const formatter = globalizeNumberFormatter({
+                minimumFractionDigits: 2,
+            });
+            expect(typeof formatter).toBe('function');
+        });
+    });
+
+    describe('globalizeCurrencyFormatter', () => {
+        it('should create a currency formatter', () => {
+            const formatter = globalizeCurrencyFormatter('USD', {
+                style: 'symbol',
+            });
+            expect(typeof formatter).toBe('function');
+        });
+    });
+
+    describe('formatNumberSafely', () => {
+        it('should format numbers safely', () => {
+            const formattedNumber = formatNumberSafely(
+                { maximumFractionDigits: 2, minimumFractionDigits: 2 },
+                123.456,
+            );
+            expect(formattedNumber).toBe('123.46');
+        });
+
+        it('should return 0 for very small numbers', () => {
+            jest.spyOn(Globalize, 'numberFormatter').mockImplementationOnce(
+                () => {
+                    throw new Error('Test Error');
+                },
+            );
+            const formattedNumber = formatNumberSafely({}, 1e-8);
+            expect(formattedNumber).toBe('0');
+            jest.clearAllMocks();
+        });
+
+        it('should return the string representation for errors', () => {
+            jest.spyOn(Globalize, 'numberFormatter').mockImplementationOnce(
+                () => {
+                    throw new Error('Test Error');
+                },
+            );
+            const formattedNumber = formatNumberSafely({}, 123);
+            expect(formattedNumber).toBe('123');
+            jest.clearAllMocks();
+        });
+    });
+
+    describe('sanitizeFormat', () => {
+        it('should add zero before decimal point', () => {
+            expect(sanitizeFormat('#.##')).toBe('0.##');
+        });
+
+        it('should add zero at the end if no decimal point', () => {
+            expect(sanitizeFormat('#%')).toBe('0%');
+        });
+
+        it('should return the same format if no changes are needed', () => {
+            expect(sanitizeFormat('0.##')).toBe('0.##');
+        });
+    });
+
+    describe('validateNumberFormat', () => {
+        it('should return true for valid number formats', () => {
+            expect(validateNumberFormat('#.##')).toBe(true);
+        });
+
+        it('should return false for invalid number formats', () => {
+            jest.spyOn(Globalize, 'numberFormatter').mockImplementation(() => {
+                throw new Error('Test Error');
+            });
+            expect(validateNumberFormat('#.#')).toBe(false);
+            jest.clearAllMocks();
+        });
+    });
+});

package/src/utils/globalize-Initializer/globalize-utils.ts

@@ -0,0 +1,216 @@
+/**
+ * @file: Initialize Globalize
+ *
+ * @author Yashvardhan Nehra <yashvardhan.nehra@thoughtspot.com>
+ *
+ * Copyright: ThoughtSpot Inc. 2024
+ */
+
+/* eslint-disable import/no-extraneous-dependencies */
+import enCaGregorian from 'cldr-data/main/en/ca-gregorian.json';
+import enCurrencies from 'cldr-data/main/en/currencies.json';
+import enNumbers from 'cldr-data/main/en/numbers.json';
+import currencyData from 'cldr-data/supplemental/currencyData.json';
+import supplemental from 'cldr-data/supplemental/likelySubtags.json';
+import enpluralJson from 'cldr-data/supplemental/plurals.json';
+import Globalize from 'globalize';
+import _ from 'lodash';
+import { create } from '../../main/logger';
+
+const logger = create('globalize-initializer');
+
+let currentLocale: string;
+let currentCurrencyFormat: any;
+let supplementalCurrencyDataJson: any;
+
+/**
+ * Extracts the country code from a locale string.
+ *
+ * @param locale - The locale string (e.g., 'en-US', 'en_US').
+ * @returns The country code (e.g., 'US') or the input locale if no delimiter is found.
+ */
+export const getCountryCode = (locale: string): string => {
+    let parts = locale.split('_'); //  // Split by '_'
+    if (parts.length === 2) {
+        return parts[1].toUpperCase();
+    }
+    parts = locale.split('-'); //  // Split by '-'
+    if (parts.length === 2) {
+        return parts[1].toUpperCase();
+    }
+    return locale;
+};
+
+/**
+ * Retrieves the default currency code for the current locale.
+ *
+ * @returns The default currency code (e.g., 'USD') or GBP if not found.
+ */
+export const getDefaultCurrencyCode = (): string => {
+    if (currentCurrencyFormat) {
+        return currentCurrencyFormat;
+    }
+
+    const countryCode = getCountryCode(currentLocale);
+    const regionData =
+        supplementalCurrencyDataJson?.supplemental?.currencyData?.region[
+            countryCode.toUpperCase()
+        ];
+    if (!regionData || regionData.length === 0) {
+        logger.warn('No currency data found for country:', countryCode);
+        return 'GBP';
+    }
+    return Object.keys(regionData[regionData.length - 1])[0];
+};
+
+/**
+ * Sets the current locale for Globalize and updates the global state.
+ *
+ * @param locale - The locale string to set (e.g., 'en-US').
+ */
+export const setGlobalizeLocale = (locale: string): void => {
+    Globalize.locale(locale);
+    currentLocale = locale;
+};
+
+/**
+ * Retrieves the current locale set in Globalize.
+ *
+ * @returns The current locale string (e.g., 'en-US').
+ */
+export const getGlobalizeLocale = () => currentLocale;
+
+/**
+ * Updates the current currency format.
+ *
+ * @param currencyFormat - The currency format to set.
+ */
+export const setCurrentCurrencyFormat = (currencyFormat: any): void => {
+    currentCurrencyFormat = currencyFormat;
+};
+
+/**
+ * Retrieves the current currency format.
+ *
+ * @returns The current currency format.
+ */
+export const getCurrentCurrencyFormat = () => currentCurrencyFormat;
+
+/**
+ * Loads supplemental currency data for Globalize.
+ *
+ * @param data - The supplemental currency data to load.
+ */
+export const loadCurrencyData = (data: any) => {
+    supplementalCurrencyDataJson = data;
+};
+
+/**
+ * Loads CLDR data into Globalize.
+ *
+ * @param data - The CLDR data to load.
+ */
+export const loadGlobalizeData = (data: any) => {
+    Globalize.load(data);
+};
+
+/**
+ * Initializes Globalize with CLDR data and sets the default locale.
+ *
+ * @param locale - The locale to initialize Globalize with (default: 'en-GB').
+ */
+export const initGlobalize = (locale = 'en-GB') => {
+    loadGlobalizeData(enNumbers);
+    loadGlobalizeData(enCaGregorian);
+    loadGlobalizeData(supplemental);
+    loadGlobalizeData(currencyData);
+    loadGlobalizeData(enpluralJson);
+    loadGlobalizeData(enCurrencies);
+
+    loadCurrencyData(currencyData);
+
+    setGlobalizeLocale(locale);
+};
+
+/**
+ * Creates a number formatter with the given options.
+ *
+ * @param format - The Globalize number formatter options.
+ * @returns A formatter function for numbers.
+ */
+export function globalizeNumberFormatter(
+    format: Globalize.NumberFormatterOptions,
+): (num: number) => string {
+    return Globalize.numberFormatter(format);
+}
+
+/**
+ * Creates a currency formatter with the given options.
+ *
+ * @param currencyCode - The ISO currency code (e.g., 'USD').
+ * @param format - The Globalize currency formatter options.
+ * @returns A formatter function for currency values.
+ */
+export function globalizeCurrencyFormatter(
+    currencyCode: string,
+    format: Globalize.CurrencyFormatterOptions,
+): (num: number) => string {
+    return Globalize.currencyFormatter(currencyCode, format);
+}
+
+/**
+ * Formats a number using Globalize, handling errors gracefully.
+ *
+ * @param format - Globalize number formatter options.
+ * @param num - The number to format.
+ * @returns The formatted number as a string.
+ */
+export function formatNumberSafely<
+    FormatOptions extends Globalize.NumberFormatterOptions,
+>(format: FormatOptions, num: number): string {
+    try {
+        const formatter = globalizeNumberFormatter(format);
+        const formattedNumber = formatter(num);
+        return formattedNumber;
+    } catch (e) {
+        logger.error('Error formatting pattern: ', format, num, e);
+        if (Math.abs(num) < 1e-7) {
+            return '0';
+        }
+        return String(num);
+    }
+}
+
+/**
+ * Sanitizes a number format to ensure compatibility with Globalize.
+ *
+ * @param format - The raw format string (e.g., '#.##').
+ * @returns A sanitized format string (e.g., '0.##').
+ */
+export const sanitizeFormat = (format: string): string => {
+    // Globalize needs to have a zero before the decimal point
+    // or at the end of format if no decimal point
+    let sanitizedFormat = format.replace(/#\./, '0.');
+    if (!sanitizedFormat.includes('.')) {
+        sanitizedFormat = sanitizedFormat.replace(/#(%?)$/, '0$1');
+    }
+    return sanitizedFormat;
+};
+
+/**
+ * Validates if a given number format is compatible with Globalize.
+ *
+ * @param format - The raw format string.
+ * @returns True if the format is valid; otherwise, false.
+ */
+export const validateNumberFormat = (format: string): boolean => {
+    try {
+        Globalize.numberFormatter({
+            ...({ raw: sanitizeFormat(format) } as any),
+        })(123); // Test the formatter with a dummy value
+    } catch (e) {
+        logger.error('Invalid number format:', format, e);
+        return false;
+    }
+    return true;
+};