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

package/src/main/custom-chart-context.ts

@@ -52,12 +52,15 @@ import {
     VisualEditorDefinitionSetter,
     VisualPropEditorDefinition,
 } from '../types/visual-prop.types';
+import { setLocaleBasedStringFormats } from '../utils/number-formatting/number-formatting-utils';
+import { create } from './logger';
 import {
     globalThis,
     initMessageListener,
     postMessageToHostApp,
 } from './post-message-event-bridge';
 
+const logger = create('TsChartSDKContext');
 /**
  * Configuration for allowing or disallowing specific TS UI features.
  *
@@ -410,7 +413,7 @@ export class CustomChartContext {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     public initialize = (): Promise<void> => {
-        console.log('Chart Context: initialization start');
+        logger.log('Chart Context: initialization start');
         return this.hasInitializedPromise;
     };
 
@@ -442,7 +445,7 @@ export class CustomChartContext {
      */
     public off<T extends keyof TSToChartEventsPayloadMap>(eventType: T): void {
         if (_.isNil(this.eventListeners[eventType])) {
-            console.log('No event listener found to remove');
+            logger.log('No event listener found to remove');
             this.eventListeners[eventType] = [];
             return;
         }
@@ -663,7 +666,7 @@ export class CustomChartContext {
         ...eventPayload: ChartToTSEventsPayloadMap[T]
     ): Promise<any> {
         if (!globalThis.isInitialized) {
-            console.log(
+            logger.log(
                 'Chart Context: not initialized the context, something went wrong',
             );
             return Promise.reject(new Error('Context not initialized'));
@@ -686,7 +689,7 @@ export class CustomChartContext {
      */
     private registerEventProcessor = () => {
         if (globalThis.isInitialized) {
-            console.error(
+            logger.error(
                 'The context is already initialized. you cannot have multiple contexts',
             );
             throw new Error(ErrorType.MultipleContextsNotSupported);
@@ -702,7 +705,7 @@ export class CustomChartContext {
      * @param event : Message Event Object
      */
     private eventProcessor = (data: any) => {
-        console.log('Chart Context: message received:', data.eventType, data);
+        logger.log('Chart Context: message received:', data.eventType, data);
 
         const messageResponse = this.executeEventListenerCBs(data);
 
@@ -887,7 +890,7 @@ export class CustomChartContext {
                         isValid: true,
                     };
                 } catch (error: unknown) {
-                    console.log(
+                    logger.log(
                         'ContextMenuCustomAction: payload recieved:',
                         payload,
                         'CustomActionCallbackStore:',
@@ -930,7 +933,7 @@ export class CustomChartContext {
                         isValid: true,
                     };
                 } catch (error: unknown) {
-                    console.log(
+                    logger.log(
                         'AxisMenuCustomAction: payload recieved:',
                         payload,
                         'CustomActionCallbackStore:',
@@ -1018,7 +1021,9 @@ export class CustomChartContext {
         this.containerEl = payload.containerElSelector
             ? document.querySelector(payload.containerElSelector)
             : null;
-
+        setLocaleBasedStringFormats(
+            this.appConfig.dateFormatsConfig?.tsLocaleBasedStringsFormats,
+        );
         return this.publishChartContextPropsToHost();
     };
 
@@ -1089,7 +1094,7 @@ export class CustomChartContext {
             };
         }
 
-        console.log(
+        logger.log(
             'ChartContext: Response:',
             data.eventType,
             response,
@@ -1112,6 +1117,5 @@ export const getChartContext = async (
     // wait for initialization here as the host app
     // needs to first handshake with the client app.
     await ctx.initialize();
-
     return ctx;
 };

package/src/main/logger.spec.ts

@@ -0,0 +1,114 @@
+import { create, LogLevel, logMethods } from './logger';
+
+jest.mock('./util', () => ({
+    getQueryParam: jest.fn().mockReturnValue('true'),
+}));
+
+describe('Logger', () => {
+    let originalConsole: Record<string, any>;
+    let logger: any;
+
+    beforeAll(() => {
+        // Save original console methods
+        originalConsole = {
+            error: console.error,
+            warn: console.warn,
+            info: console.info,
+            log: console.log,
+            trace: console.trace,
+        };
+        // Mock console methods
+        const error = jest.fn();
+        const warn = jest.fn();
+        const info = jest.fn();
+        const log = jest.fn();
+        const trace = jest.fn();
+        logMethods[LogLevel.ERROR] = error;
+        logMethods[LogLevel.WARN] = warn;
+        logMethods[LogLevel.INFO] = info;
+        logMethods[LogLevel.DEBUG] = log;
+        logMethods[LogLevel.TRACE] = trace;
+        console.error = error;
+        console.warn = warn;
+        console.info = info;
+        console.log = log;
+        console.trace = trace;
+    });
+
+    afterAll(() => {
+        // Restore original console methods
+        logMethods[LogLevel.ERROR] = originalConsole.error;
+        logMethods[LogLevel.WARN] = originalConsole.warn;
+        logMethods[LogLevel.INFO] = originalConsole.info;
+        logMethods[LogLevel.DEBUG] = originalConsole.log;
+        logMethods[LogLevel.TRACE] = originalConsole.trace;
+        console.error = originalConsole.error;
+        console.warn = originalConsole.warn;
+        console.info = originalConsole.info;
+        console.log = originalConsole.log;
+        console.trace = originalConsole.trace;
+    });
+
+    beforeEach(() => {
+        // Set debug to 'true' to enable logging
+        (global as any).window = {
+            location: { href: 'https://example.com/?debug=true' },
+        };
+        logger = create('TestLogger');
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('logMessages', () => {
+        it('should log messages with appropriate prefixes for DEBUG level', async () => {
+            await logger.debug('Debug message');
+            expect(console.log).toHaveBeenCalledWith(
+                'DEBUG (TestLogger)(] Debug message)',
+            );
+        });
+
+        it('should log messages with appropriate prefixes for INFO level', async () => {
+            await logger.info('Info message');
+            expect(console.info).toHaveBeenCalledWith(
+                'INFO (TestLogger)(] Info message)',
+            );
+        });
+
+        it('should log messages with appropriate prefixes for WARN level', async () => {
+            await logger.warn('Warn message');
+            expect(console.warn).toHaveBeenCalledWith(
+                'WARN (TestLogger)(] Warn message)',
+            );
+        });
+
+        it('should log messages with appropriate prefixes for ERROR level', async () => {
+            await logger.error('Error message');
+            expect(console.error).toHaveBeenCalledWith(
+                'ERROR (TestLogger)(] Error message)',
+            );
+        });
+
+        it('should log messages with appropriate prefixes for TRACE level', async () => {
+            await logger.trace('Trace message');
+            expect(console.trace).toHaveBeenCalledWith(
+                'TRACE (TestLogger)(] Trace message)',
+            );
+        });
+    });
+
+    describe('create function', () => {
+        it('should create a new logger instance if one does not exist', () => {
+            const newLogger = create('NewLogger');
+            expect(newLogger).not.toBe(undefined);
+            expect(newLogger).toBeInstanceOf(Object);
+        });
+
+        it('should return the same logger instance if it already exists', () => {
+            const logger1 = create('SharedLogger');
+            const logger2 = create('SharedLogger');
+            expect(logger1).toBe(logger2);
+        });
+    });
+});

package/src/main/logger.ts

@@ -0,0 +1,97 @@
+import { getQueryParam } from './util';
+
+const loggers: Record<string, any> = {};
+const url = window.location.href;
+
+export enum LogLevel {
+    SILENT = -1 as number,
+    ERROR = 0 as number,
+    WARN = 1 as number,
+    INFO = 2 as number,
+    DEBUG = 3 as number,
+    TRACE = 4 as number,
+}
+
+export const logMethods: { [key: number]: any } = {
+    [LogLevel.ERROR]: console.error,
+    [LogLevel.WARN]: console.warn,
+    [LogLevel.INFO]: console.info,
+    [LogLevel.DEBUG]: console.log,
+    [LogLevel.TRACE]: console.trace,
+};
+
+class Logger {
+    private msgPrefix: string;
+
+    constructor(name: string) {
+        this.msgPrefix = name ? `(${name})` : '';
+    }
+
+    private getFormattedMessage(msg: string, logLevel: LogLevel) {
+        return (
+            `${LogLevel[logLevel]} ${this.msgPrefix}` +
+            `(${msg ? `] ${msg}` : ''})`
+        );
+    }
+
+    public async logMessages(args: any, logLevel: LogLevel) {
+        const newArgs = args;
+        if (getQueryParam(url, 'debug') !== 'true') {
+            return;
+        }
+        const logFn = logMethods[logLevel];
+        newArgs[0] = this.getFormattedMessage(newArgs[0], logLevel);
+        if (logFn) {
+            logFn(...newArgs);
+        }
+    }
+
+    public async trace(...args: any) {
+        this.logMessages(args, LogLevel.TRACE);
+    }
+
+    /**
+     * Wrapper for log.log() with debug level
+     * @param msg
+     */
+    public async debug(...args: any) {
+        this.logMessages(args, LogLevel.DEBUG);
+    }
+
+    public async log(...args: any) {
+        this.debug(...args);
+    }
+
+    /**
+     * Wrapper for log.info() with info level
+     * @param msg
+     */
+    public async info(...args: any) {
+        this.logMessages(args, LogLevel.INFO);
+    }
+
+    /**
+     * Wrapper for log.warn() with warn level
+     *
+     * @param {string} msg The log message
+     */
+    public async warn(...args: any) {
+        this.logMessages(args, LogLevel.WARN);
+    }
+
+    /**
+     * Wrapper for log.error() with error level
+     * Error is propagated via callback
+     * @param {string}  msg  The log message
+     */
+    public async error(...args: any) {
+        const stackTrace = this.logMessages(args, LogLevel.ERROR);
+    }
+}
+
+export function create(name: string): any {
+    if (!loggers[name]) {
+        loggers[name] = new Logger(name);
+    }
+    return loggers[name];
+}

package/src/main/util.spec.ts

@@ -1,4 +1,4 @@
-import { timeout } from './util';
+import { getQueryParam, handleMissingValue, timeout } from './util';
 
 describe('timeout function', () => {
     jest.useFakeTimers();
@@ -39,3 +39,56 @@ describe('timeout function', () => {
         await expect(result).rejects.toThrow('Original error');
     });
 });
+
+describe('getQueryParam', () => {
+    it('should return the value of a query parameter if it exists', () => {
+        const url = 'https://example.com/?key=value';
+        expect(getQueryParam(url, 'key')).toBe('value');
+    });
+
+    it('should return an empty string if the query parameter does not exist', () => {
+        const url = 'https://example.com/';
+        expect(getQueryParam(url, 'missingKey')).toBe('');
+    });
+
+    it('should return "false" if the query parameter is "debug" and it is not present', () => {
+        const url = 'https://example.com/';
+        expect(getQueryParam(url, 'debug')).toBe('false');
+    });
+
+    it('should return the default value "false" if the query parameter is "debug" and is set to an empty value', () => {
+        const url = 'https://example.com/?debug=';
+        expect(getQueryParam(url, 'debug')).toBe('');
+    });
+
+    it('should handle complex URLs with multiple parameters correctly', () => {
+        const url = 'https://example.com/?key1=value1&key2=value2';
+        expect(getQueryParam(url, 'key2')).toBe('value2');
+    });
+});
+
+describe('handleMissingValue', () => {
+    it('should return "false" if paramKey is "debug" and paramValue is undefined', () => {
+        expect(handleMissingValue('debug', undefined)).toBe('false');
+    });
+
+    it('should return "false" if paramKey is "debug" and paramValue is null', () => {
+        expect(handleMissingValue('debug', null)).toBe('false');
+    });
+
+    it('should return an empty string if paramValue is undefined and paramKey is not "debug"', () => {
+        expect(handleMissingValue('param', undefined)).toBe('');
+    });
+
+    it('should return an empty string if paramValue is null and paramKey is not "debug"', () => {
+        expect(handleMissingValue('param', null)).toBe('');
+    });
+
+    it('should return the paramValue if paramValue is defined and not null', () => {
+        expect(handleMissingValue('param', 'value')).toBe('value');
+    });
+
+    it('should return the paramValue even if paramKey is "debug" and paramValue is defined', () => {
+        expect(handleMissingValue('debug', 'true')).toBe('true');
+    });
+});

package/src/main/util.ts

@@ -9,3 +9,23 @@ export function timeout(promise: Promise<any>, ms: number, message?: string) {
         }),
     ]);
 }
+
+export function handleMissingValue(
+    paramKey: string,
+    paramValue?: string | null,
+): string {
+    if (paramKey === 'debug') {
+        return paramValue ?? 'false';
+    }
+
+    return paramValue ?? '';
+}
+
+export function getQueryParam(url: string, paramName: string): string {
+    const urlObj = new URL(url);
+    const paramValue = handleMissingValue(
+        paramName,
+        urlObj.searchParams.get(paramName),
+    );
+    return paramValue;
+}

package/src/react/use-custom-chart-context.tsx

@@ -12,6 +12,7 @@ import {
     CustomChartContext,
     CustomChartContextProps,
 } from '../main/custom-chart-context';
+import { create } from '../main/logger';
 import { ChartModel } from '../types/common.types';
 import {
     ChartModelUpdateEventPayload,
@@ -28,6 +29,8 @@ import {
     TSChartContextProps,
 } from './use-custom-chart-types';
 
+const logger = create('CustomChartContextHookSdk');
+
 /**
  * A custom hook to manage the Chart Context state and provide necessary
  * chart-related functionality.
@@ -143,7 +146,7 @@ export const useChartContext = (
                 return true;
             })
             .catch((e) => {
-                console.log('Error in context initialization', e);
+                logger.log('Error in context initialization', e);
             });
     };
 

package/src/react/use-custom-chart-context.util.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import { CustomChartContext } from '../main/custom-chart-context';
+import { create } from '../main/logger';
 import {
     ChartToTSEvent,
     ChartToTSEventsPayloadMap,
@@ -14,6 +15,8 @@ import {
     TSToChartEventOffListener,
 } from './use-custom-chart-types';
 
+const logger = create('CustomChartContextUtilSdk');
+
 /**
  *
  * @param ctx Custom Chart Context
@@ -31,7 +34,7 @@ export const emitter = (ctx: CustomChartContext): ChartToTSEventEmitters => {
             ...args: ChartToTSEventsPayloadMap[keyof ChartToTSEventsPayloadMap]
         ): Promise<void> => {
             if (!ctx || _.isEmpty(ctx)) {
-                console.log('Context is not initialized');
+                logger.log('Context is not initialized');
                 return Promise.reject(new Error('Context not initialized'));
             }
             return ctx.emitEvent(eventName, ...args);
@@ -60,7 +63,7 @@ export const eventListener = (
             callbackFn: TSToChartEventsPayloadMap[keyof TSToChartEventsPayloadMap],
         ): Promise<void> => {
             if (!ctx || _.isEmpty(ctx)) {
-                console.log('Context is not initialized');
+                logger.log('Context is not initialized');
                 return Promise.reject(new Error('Context not initialized'));
             }
             ctx.on(eventName, callbackFn);
@@ -89,7 +92,7 @@ export const eventOffListener = (
 
         acc[emitterKey] = (): Promise<void> => {
             if (!ctx || _.isEmpty(ctx)) {
-                console.log('Context is not initialized');
+                logger.log('Context is not initialized');
                 return Promise.reject(new Error('Context not initialized'));
             }
             ctx.off(eventName);

package/src/types/answer-column.types.ts

@@ -82,9 +82,9 @@ export enum FormatType {
  * @version SDK: 0.1 | ThoughtSpot:
  */
 export enum CurrencyFormatType {
-    USER_LOCALE,
-    COLUMN,
-    ISO_CODE,
+    USER_LOCALE = 'USER_LOCALE',
+    COLUMN = 'COLUMN',
+    ISO_CODE = 'ISO_CODE',
 }
 
 /**

package/src/types/common.types.ts

@@ -188,10 +188,17 @@ export type SuccessValidationResponse = {
     visualPropEditorDefinition: VisualPropEditorDefinition;
 };
 
+export type VisualPropError = {
+    propElementKey: string;
+    propElementType: string;
+    value: unknown;
+};
+
 // Generic Validation Response
 export type ValidationResponse = {
     isValid: boolean;
     validationErrorMessage?: string[];
+    visualPropError?: VisualPropError;
 };
 
 /**

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

@@ -58,7 +58,7 @@ export type NumberFormatConfig = {
     /** default to true */
     toSeparateThousands?: Maybe<Scalars['Boolean']>;
     /** default is Auto */
-    unit?: Maybe<Unit>;
+    unit?: Maybe<Unit> | number;
 };
 
 export type PercentageFormatConfig = {
@@ -71,7 +71,7 @@ export type PercentageFormatConfig = {
 
 export type FormatConfig = {
     __typename?: 'FormatConfig';
-    category?: Maybe<CategoryType>;
+    category?: Maybe<CategoryType> | number;
     currencyFormatConfig?: Maybe<CurrencyFormatConfig>;
     customFormatConfig?: Maybe<CustomFormatConfig>;
     isCategoryEditable?: Maybe<Scalars['Boolean']>;

package/src/types/ts-to-chart-event.types.ts

@@ -73,7 +73,6 @@ export enum TSToChartEvent {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     AxisMenuActionClick = 'AxisMenuActionClick',
-
     /**
      * @version SDK: 0.2 | ThoughtSpot:
      */