@thoughtspot/ts-chart-sdk 0.0.2-alpha.8 → 1.0.0

package/lib/utils/number-formatting/number-formatting.spec.js

@@ -0,0 +1,159 @@
+import { create, LogLevel, logMethods } from '../../main/logger';
+import { CurrencyFormatType, FormatType, } from '../../types/answer-column.types';
+import { CategoryType, 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 = {
+        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, {}, {});
+        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, {}, {})).toBe('NaN');
+        expect(getFormattedValue(Infinity, {}, {})).toBe('Infinity');
+        expect(getFormattedValue(-Infinity, {}, {})).toBe('-Infinity');
+    });
+    test('formats number category values with units and trailing zeroes', () => {
+        const formatConfig = {
+            category: CategoryType.Number,
+            numberFormatConfig: {
+                unit: Unit.Thousands,
+                decimals: 2,
+                toSeparateThousands: true,
+                negativeValueFormat: NegativeValueFormat.PrefixDash,
+            },
+        };
+        const result = getFormattedValue(-12345, formatConfig, {});
+        expect(result).toBe('-12.35K');
+    });
+    test('formats percentage values correctly', () => {
+        const formatConfig = {
+            category: CategoryType.Percentage,
+            percentageFormatConfig: { decimals: 2, removeTrailingZeroes: true },
+        };
+        const result = getFormattedValue(0.1234, formatConfig, {});
+        expect(result).toBe('12.34%');
+    });
+    test('formats currency values with compact units', () => {
+        const formatConfig = {
+            category: CategoryType.Currency,
+            currencyFormatConfig: {
+                locale: 'USD',
+                toSeparateThousands: true,
+            },
+        };
+        const result = getFormattedValue(12345.678, formatConfig, {});
+        expect(result).toMatch(/^\$\d+,\d+(\.\d+)?$/);
+    });
+    test('formats currency values with user Locale', () => {
+        jest.spyOn(globalizeUtils, 'getDefaultCurrencyCode').mockImplementationOnce(() => 'INR');
+        const formatConfig = {
+            category: CategoryType.Currency,
+            currencyFormatConfig: {
+                unit: Unit.Thousands,
+                decimals: 2,
+                locale: CurrencyFormatType.USER_LOCALE,
+                toSeparateThousands: true,
+            },
+        };
+        const result = getFormattedValue(12345.678, formatConfig, {});
+        expect(result).toMatch('₹12.35K');
+    });
+    test('should normalize category to CategoryType.Number when it is a number', () => {
+        const formatConfig = {
+            category: CategoryType.Number,
+            numberFormatConfig: {
+                unit: Unit.Thousands,
+                decimals: 2,
+                toSeparateThousands: true,
+                negativeValueFormat: NegativeValueFormat.PrefixDash,
+            },
+        };
+        const result = getFormattedValue(1000, formatConfig, {});
+        expect(result).toBe('1.00K');
+    });
+    test('falls back to default formatting for unsupported categories', () => {
+        const formatConfig = { category: 'Unknown' };
+        const result = getFormattedValue(12345.678, formatConfig, {});
+        expect(result).toBe('12,345.678');
+    });
+    test('formats custom pattern correctly', () => {
+        const formatConfig = {
+            category: CategoryType.Custom,
+            customFormatConfig: { format: '#,##0.00' },
+        };
+        const result = getFormattedValue(12345.678, formatConfig, {});
+        expect(result).toBe('12,345.68');
+    });
+    test('formats custom pattern with valid customColumn format', () => {
+        const formatConfig = {
+            category: CategoryType.Custom,
+            customFormatConfig: { format: '#,##0.00' },
+        };
+        const result = getFormattedValue(12345.678, formatConfig, columnFormatConfig);
+        expect(result).toBe('$12,345.68');
+    });
+    test('logs error for invalid custom format patterns', () => {
+        const 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, {});
+        expect(logger.error).toHaveBeenCalled();
+        jest.restoreAllMocks();
+    });
+    test('handles currency formatting failure', () => {
+        const 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, {});
+        expect(logger.error).toHaveBeenCalled();
+        jest.restoreAllMocks();
+    });
+});
+//# sourceMappingURL=number-formatting.spec.js.map

package/lib/utils/number-formatting/number-formatting.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-formatting.spec.js","sourceRoot":"","sources":["../../../src/utils/number-formatting/number-formatting.spec.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@thoughtspot/ts-chart-sdk",
     "private": false,
-    "version": "0.0.2-alpha.8",
+    "version": "1.0.0",
     "module": "lib/index",
     "main": "lib/index",
     "types": "lib/index",
@@ -29,11 +29,12 @@
         "publish-dev": "npm publish --tag dev --access public",
         "about:publish-prod": "echo '===== patch prod workflow ====='",
         "patch-prod": "npm version prepatch --no-git-tag-version",
-        "publish-prod": "npm publish --access public"
+        "publish-prod": "npm publish --tag latest --access public"
     },
     "devDependencies": {
         "@testing-library/react": "12.1.5",
         "@testing-library/react-hooks": "^7.0.2",
+        "@types/globalize": "^1.5.5",
         "@types/jest": "^27.0.3",
         "@types/lodash": "4.14.175",
         "@types/luxon": "^3.4.2",
@@ -74,6 +75,8 @@
         "vite": "4.2.1"
     },
     "dependencies": {
+        "cldr-data": "^36.0.2",
+        "globalize": "^1.7.0",
         "lodash": "^4.17.21",
         "luxon": "^3.4.4",
         "promise-postmessage": "^3.5.0",

package/src/index.ts

@@ -7,5 +7,8 @@ export * from './types/ts-to-chart-event.types';
 export * from './main/custom-chart-context';
 export * from './react/use-custom-chart-context';
 export * from './types/conditional-formatting.types';
+export * from './types/number-formatting.types';
 export * from './utils/date-formatting';
 export * from './utils/conditional-formatting/conditional-formatting';
+export * from './utils/number-formatting/number-formatting';
+export * from './utils/globalize-Initializer/globalize-utils';

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

@@ -6,17 +6,25 @@
 
 import _ from 'lodash';
 import { mockInitializeContextPayload } from '../test/test-utils';
+import { ColumnType } from '../types/answer-column.types';
 import { ChartToTSEvent, ErrorType } from '../types/chart-to-ts-event.types';
 import { TSToChartEvent } from '../types/ts-to-chart-event.types';
+import { PropElement } from '../types/visual-prop.types';
 import { CustomChartContext, getChartContext } from './custom-chart-context';
 import * as PostMessageEventBridge from './post-message-event-bridge';
 
-// jest.mock('./post-message-event-bridge');
-
 jest.spyOn(console, 'log').mockImplementation(() => {
     // do nothing.
 });
 
+const mockFormElements: PropElement = {
+    key: 'color',
+    type: 'radio',
+    defaultValue: 'red',
+    values: ['red', 'green', 'yellow'],
+    label: 'Colors',
+};
+
 describe('CustomChartContext', () => {
     let eventProcessor: any;
 
@@ -107,9 +115,29 @@ describe('CustomChartContext', () => {
                 allowedConfigurations: {
                     allowColumnNumberFormatting: false,
                     allowColumnConditionalFormatting: false,
+                    allowGradientColoring: false,
+                    allowMeasureNamesAndValues: false,
+                },
+                chartConfigParameters: {
+                    measureNameValueColumns: {
+                        enableMeasureNameColumn: false,
+                        enableMeasureValueColumn: false,
+                        measureNameColumnAlias: 'Measure Name',
+                        measureValueColumnAlias: 'Measure Values',
+                    },
+                    batchSizeLimit: 20000,
                 },
             });
-            expect(mockPostMessageToHost).not.toHaveBeenCalled();
+        });
+
+        test('should return responseMessage as empty instead of undefine', async () => {
+            expect(mockInitMessage).toHaveBeenCalled();
+
+            const initResp = await eventProcessor({
+                payload: {},
+                eventType: TSToChartEvent.InitializeComplete,
+            });
+            expect(initResp).toEqual({});
         });
 
         test('type check string for visualProps on initialize payload should not throw an error.', async () => {
@@ -140,7 +168,6 @@ describe('CustomChartContext', () => {
             const chartModel = customChartContext.getChartModel();
             expect(typeof chartModel.visualProps).toEqual('string');
             expect(chartModel.visualProps).toEqual('visualPropStringPayload');
-            expect(mockPostMessageToHost).not.toHaveBeenCalled();
         });
 
         test('type check object for visualProps on initialize payload should not throw an error.', async () => {
@@ -175,7 +202,6 @@ describe('CustomChartContext', () => {
             expect(chartModel.visualProps).toEqual({
                 data: 'sample data',
             });
-            expect(mockPostMessageToHost).not.toHaveBeenCalled();
         });
 
         test('multiple intializations should throw an error', async () => {
@@ -212,6 +238,45 @@ describe('CustomChartContext', () => {
             }
             expect(error).toBe(ErrorType.MultipleContextsNotSupported);
         });
+        test('correct app options config should be set on initialize', async () => {
+            const mockAppConfigOptions = {
+                appOptions: {
+                    isMobile: false,
+                    isPrintMode: false,
+                    isLiveboardContext: false,
+                    isDebugMode: true,
+                },
+            };
+            expect(mockInitMessage).toHaveBeenCalled();
+
+            // Call the initialize function and wait for it to resolve
+            const promise = customChartContext.initialize();
+
+            // Check that the hasInitializedPromise has resolved
+
+            const mockInitializeContextPayloadWithVisualProps = {
+                ...mockInitializeContextPayload,
+                appConfig: mockAppConfigOptions,
+                chartModel: {
+                    ...mockInitializeContextPayload.chartModel,
+                    visualProps: {
+                        data: 'sample data',
+                    },
+                },
+            };
+
+            await eventProcessor({
+                payload: mockInitializeContextPayloadWithVisualProps,
+                eventType: TSToChartEvent.Initialize,
+            });
+            eventProcessor({
+                payload: {},
+                eventType: TSToChartEvent.InitializeComplete,
+            });
+            await expect(promise).resolves.toBeUndefined();
+            const appConfig = customChartContext.getAppConfig();
+            expect(appConfig).toStrictEqual(mockAppConfigOptions);
+        });
     });
 
     describe('on', () => {
@@ -288,6 +353,53 @@ describe('CustomChartContext', () => {
                 ],
             });
         });
+        test('TSToChartEvent.ChartConfigValidate validation response for invalid config', async () => {
+            // Define initial context with object definitions
+            const mockChartConfigValidate = jest
+                .fn()
+                .mockReturnValue({ isValid: false });
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+                validateConfig: mockChartConfigValidate,
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = await eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.ChartConfigValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with object definitions
+            expect(responseWithInitialContext).toStrictEqual({
+                isValid: false,
+            });
+        });
+        test('TSToChartEvent.ChartConfigValidate validation response return invalid without validate function', async () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+                validateConfig: undefined,
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = await eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.ChartConfigValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with object definitions
+            expect(responseWithInitialContext).toStrictEqual({
+                isValid: false,
+            });
+        });
 
         test('TSToChartEvent.validateVisualProps validation response testing', () => {
             // Define initial context with object definitions
@@ -347,6 +459,245 @@ describe('CustomChartContext', () => {
             });
         });
 
+        test('TSToChartEvent.validateVisualProps should work with activeColumnId', () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: {
+                    elements: [mockFormElements],
+                    columnsVizPropDefinition: [
+                        {
+                            type: ColumnType.MEASURE,
+                            columnSettingsDefinition: {
+                                'column-id': { elements: [mockFormElements] },
+                            },
+                        },
+                    ],
+                },
+                chartConfigEditorDefinition: [],
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = eventProcessor({
+                payload: {
+                    ...mockInitializeContextPayload,
+                    activeColumnId: 'column-id',
+                },
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with object definitions
+            expect(responseWithInitialContext).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: {
+                    elements: [mockFormElements],
+                    columnsVizPropDefinition: [
+                        {
+                            type: ColumnType.MEASURE,
+                            columnSettingsDefinition: {
+                                'column-id': { elements: [mockFormElements] },
+                            },
+                        },
+                    ],
+                },
+                chartConfigEditorDefinition: [],
+            });
+        });
+
+        test('should handle GetColumnData event with valid columnId', async () => {
+            // Set up mock data in the chart model
+            const mockData = {
+                data: [
+                    {
+                        data: {
+                            columns: ['col1', 'col2', 'col3'],
+                            dataValue: [
+                                [1, 2, 3],
+                                [4, 5, 6],
+                                [7, 8, 9],
+                            ],
+                        },
+                    },
+                ],
+            };
+
+            (customChartContext as any).chartModel = mockData;
+
+            const response = await eventProcessor({
+                payload: {
+                    columnId: 'col2',
+                },
+                eventType: TSToChartEvent.GetColumnData,
+            });
+
+            expect(response).toEqual({
+                data: [2, 5, 8],
+            });
+        });
+
+        test('should return empty array for non-existent columnId', async () => {
+            // Set up mock data in the chart model
+            const mockData = {
+                data: [
+                    {
+                        data: {
+                            columns: ['col1', 'col2', 'col3'],
+                            dataValue: [
+                                [1, 2, 3],
+                                [4, 5, 6],
+                            ],
+                        },
+                    },
+                ],
+            };
+
+            (customChartContext as any).chartModel = mockData;
+
+            const response = await eventProcessor({
+                payload: {
+                    columnId: 'non-existent-column',
+                },
+                eventType: TSToChartEvent.GetColumnData,
+            });
+
+            expect(response).toEqual({
+                data: [],
+            });
+        });
+
+        test('TSToChartEvent.validateVisualProps should be called with correct activeColumnId', () => {
+            // Define initial context with object definitions
+            const mockValidateVisualProps = jest
+                .fn()
+                .mockImplementation(
+                    (_visualProps, _chartModel, activeColumnId) => {
+                        if (activeColumnId === 'column-id')
+                            return { isValid: true };
+                        return { isValid: false };
+                    },
+                );
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: {
+                    elements: [mockFormElements],
+                    columnsVizPropDefinition: [
+                        {
+                            type: ColumnType.MEASURE,
+                            columnSettingsDefinition: {
+                                'column-id': { elements: [mockFormElements] },
+                            },
+                        },
+                    ],
+                },
+                chartConfigEditorDefinition: [],
+                validateVisualProps: mockValidateVisualProps,
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = eventProcessor({
+                payload: {
+                    ...mockInitializeContextPayload,
+                    activeColumnId: 'column-id',
+                },
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // we only want the correct active columnId to be passed
+            expect(mockValidateVisualProps).toHaveBeenCalledWith(
+                undefined,
+                {},
+                'column-id',
+            );
+            const validationResponse = eventProcessor({
+                payload: {
+                    ...mockInitializeContextPayload,
+                    activeColumnId: 'column-id-1',
+                },
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            expect(validationResponse).toStrictEqual({ isValid: false });
+        });
+        test('TSToChartEvent.validateVisualProps returns invalid if no function is provided.', () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: {
+                    elements: [mockFormElements],
+                    columnsVizPropDefinition: [
+                        {
+                            type: ColumnType.MEASURE,
+                            columnSettingsDefinition: {
+                                'column-id': { elements: [mockFormElements] },
+                            },
+                        },
+                    ],
+                },
+                chartConfigEditorDefinition: [],
+                validateVisualProps: undefined, // mocking undefined value
+            });
+
+            const validationResponse = eventProcessor({
+                payload: {
+                    ...mockInitializeContextPayload,
+                },
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            expect(validationResponse).toStrictEqual({ isValid: false });
+        });
+        test('VisualPropEditorDefintion function should recieve columnId', () => {
+            // Define initial context with object definitions
+            const mockValidateVisualProps = jest
+                .fn()
+                .mockImplementation(
+                    (_visualProps, _chartModel, activeColumnId) => {
+                        if (activeColumnId === 'column-id')
+                            return { isValid: true };
+                        return { isValid: false };
+                    },
+                );
+            const mockVisualPropEditorDefintion = jest.fn().mockReturnValue({
+                elements: [mockFormElements],
+                columnsVizPropDefinition: [
+                    {
+                        type: ColumnType.MEASURE,
+                        columnSettingsDefinition: {
+                            'column-id': { elements: [mockFormElements] },
+                        },
+                    },
+                ],
+            });
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: mockVisualPropEditorDefintion,
+                chartConfigEditorDefinition: [],
+                validateVisualProps: mockValidateVisualProps,
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = eventProcessor({
+                payload: {
+                    ...mockInitializeContextPayload,
+                    activeColumnId: 'column-id',
+                },
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // we only want the correct active columnId to be passed
+            expect(mockVisualPropEditorDefintion.mock.calls[0][2]).toBe(
+                'column-id',
+            );
+        });
+
         test('should not trigger post message if host is not accurate', async () => {
             expect(mockInitMessage).toHaveBeenCalled();
 
@@ -667,7 +1018,6 @@ describe('CustomChartContext', () => {
             );
 
             // Check that the result is defined
-            expect(mockPostMessageToHost).not.toHaveBeenCalled();
             await expect(result).rejects.toBeDefined();
         });