@thoughtspot/ts-chart-sdk 0.0.2-alpha.1 → 0.0.2-alpha.10

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@thoughtspot/ts-chart-sdk",
     "private": false,
-    "version": "0.0.2-alpha.1",
+    "version": "0.0.2-alpha.10",
     "module": "lib/index",
     "main": "lib/index",
     "types": "lib/index",
@@ -23,26 +23,27 @@
         "dev:bar": "vite serve example/custom-bar-chart --port 3000",
         "about:bundle-dts": "echo '===== add ts types bundle in dist ====='",
         "bundle-dts": "npx dts-bundle --name ../dist/ts-chart-sdk --main lib/index.d.ts --outputAsModuleFolder=true",
-        "prePublish": "npm run ci; npm run build; npm run bundle-dts;",
+        "prepublishOnly": "npm run ci; npm run build; npm run bundle-dts;",
         "about:publish-dev": "echo '===== patch dev workflow ====='",
         "patch-dev": "npm version prerelease --no-git-tag-version",
         "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/jest": "^27.0.3",
         "@types/lodash": "4.14.175",
+        "@types/luxon": "^3.4.2",
         "@types/node": "18.16.3",
         "@types/react": "^17.0.2",
         "@types/react-dom": "^17.0.11",
         "@typescript-eslint/eslint-plugin": "^5.59.5",
         "@typescript-eslint/parser": "^5.59.5",
         "dts-bundle": "^0.7.3",
-        "eslint": "7.32.0",
+        "eslint": "^8.56.0",
         "eslint-config-airbnb-base": "15.0.0",
         "eslint-config-prettier": "^6.9.0",
         "eslint-import-resolver-typescript": "^2.0.0",
@@ -74,6 +75,7 @@
     },
     "dependencies": {
         "lodash": "^4.17.21",
+        "luxon": "^3.4.4",
         "promise-postmessage": "^3.5.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2"

package/src/index.ts

@@ -6,3 +6,6 @@ export * from './types/chart-to-ts-event.types';
 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 './utils/date-formatting';
+export * from './utils/conditional-formatting/conditional-formatting';

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

@@ -107,28 +107,89 @@ describe('CustomChartContext', () => {
                 allowedConfigurations: {
                     allowColumnNumberFormatting: false,
                     allowColumnConditionalFormatting: false,
+                    allowMeasureNamesAndValues: false,
                 },
             });
             expect(mockPostMessageToHost).not.toHaveBeenCalled();
         });
 
-        test('multiple intializations should throw an error', async () => {
+        test('type check string for visualProps on initialize payload should not throw an error.', async () => {
+            expect(mockInitMessage).toHaveBeenCalled();
+
             // Call the initialize function and wait for it to resolve
             const promise = customChartContext.initialize();
 
             // Check that the hasInitializedPromise has resolved
-            eventProcessor({
-                payload: mockInitializeContextPayload,
+
+            const mockInitializeContextPayloadWithVisualProps = {
+                ...mockInitializeContextPayload,
+                chartModel: {
+                    ...mockInitializeContextPayload.chartModel,
+                    visualProps: 'visualPropStringPayload',
+                },
+            };
+
+            await eventProcessor({
+                payload: mockInitializeContextPayloadWithVisualProps,
                 eventType: TSToChartEvent.Initialize,
             });
-
             eventProcessor({
                 payload: {},
                 eventType: TSToChartEvent.InitializeComplete,
             });
+            await expect(promise).resolves.toBeUndefined();
+            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 () => {
+            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,
+                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 chartModel = customChartContext.getChartModel();
+            expect(typeof chartModel.visualProps).toEqual('object');
+            expect(chartModel.visualProps).toEqual({
+                data: 'sample data',
+            });
+            expect(mockPostMessageToHost).not.toHaveBeenCalled();
+        });
 
+        test('multiple intializations should throw an error', async () => {
+            // Call the initialize function and wait for it to resolve
+            getChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+            });
+            eventProcessor({
+                payload: {},
+                eventType: TSToChartEvent.InitializeComplete,
+            });
             let error;
             try {
                 customChartContext = new CustomChartContext({
@@ -170,7 +231,124 @@ describe('CustomChartContext', () => {
             eventProcessor = null;
         });
 
-        test('default internal function testing', async () => {
+        test('TSToChartEvent.ChartConfigValidate validation response testing', async () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+
+            // 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: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+
+            // Redefine context with function-returned definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: () => {
+                    return { elements: [] };
+                },
+                chartConfigEditorDefinition: () => {
+                    return [
+                        {
+                            key: 'x',
+                            columnSections: [{ label: 'x-axis', key: 'x' }],
+                        },
+                    ];
+                },
+            });
+            // Trigger event processor with updated context
+            const responseWithUpdatedContext = await eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.ChartConfigValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with function-returned definitions
+            expect(responseWithUpdatedContext).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [
+                    {
+                        key: 'x',
+                        columnSections: [{ label: 'x-axis', key: 'x' }],
+                    },
+                ],
+            });
+        });
+
+        test('TSToChartEvent.validateVisualProps validation response testing', () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with object definitions
+            expect(responseWithInitialContext).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+            // Redefine context with function-returned definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: () => {
+                    return { elements: [] };
+                },
+                chartConfigEditorDefinition: () => {
+                    return [
+                        {
+                            key: 'x',
+                            columnSections: [{ label: 'x-axis', key: 'x' }],
+                        },
+                    ];
+                },
+            });
+            // Trigger event processor with updated context
+            const responseWithFunctionReturnedValues = eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with function-returned definitions
+            expect(responseWithFunctionReturnedValues).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [
+                    {
+                        key: 'x',
+                        columnSections: [{ label: 'x-axis', key: 'x' }],
+                    },
+                ],
+            });
+        });
+
+        test('should not trigger post message if host is not accurate', async () => {
             expect(mockInitMessage).toHaveBeenCalled();
 
             // mock the event trigger for ChartConfigValidate

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

@@ -21,10 +21,14 @@ import {
     AppConfig,
     ChartConfig,
     ChartModel,
+    SuccessValidationResponse,
     ValidationResponse,
     VisualProps,
 } from '../types/common.types';
-import { ChartConfigEditorDefinition } from '../types/configurator.types';
+import {
+    ChartConfigEditorDefinition,
+    ConfigEditorDefinitionSetter,
+} from '../types/configurator.types';
 import {
     AxisMenuCustomActionPayload,
     ChartConfigValidateEventPayload,
@@ -42,7 +46,10 @@ import {
     VisualPropsUpdateEventPayload,
     VisualPropsValidateEventPayload,
 } from '../types/ts-to-chart-event.types';
-import { VisualPropEditorDefinition } from '../types/visual-prop.types';
+import {
+    VisualEditorDefinitionSetter,
+    VisualPropEditorDefinition,
+} from '../types/visual-prop.types';
 import {
     globalThis,
     initMessageListener,
@@ -52,6 +59,7 @@ import {
 export type AllowedConfigurations = {
     allowColumnNumberFormatting: boolean;
     allowColumnConditionalFormatting: boolean;
+    allowMeasureNamesAndValues: boolean;
 };
 
 export type CustomChartContextProps = {
@@ -116,7 +124,9 @@ export type CustomChartContextProps = {
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    chartConfigEditorDefinition?: ChartConfigEditorDefinition[];
+    chartConfigEditorDefinition?:
+        | ConfigEditorDefinitionSetter
+        | ChartConfigEditorDefinition[];
 
     /**
      * Definition to help edit/customize the visual properties from chart settings editor
@@ -127,12 +137,18 @@ export type CustomChartContextProps = {
      * @returns {@link VisualPropEditorDefinition}
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    visualPropEditorDefinition?: VisualPropEditorDefinition;
+    visualPropEditorDefinition?:
+        | VisualEditorDefinitionSetter
+        | VisualPropEditorDefinition;
 
     // Whether user wants thoughtspot default number and conditional formatting
     allowedConfigurations?: AllowedConfigurations;
 };
 
+export type ValidationFunctions =
+    | CustomChartContextProps['validateVisualProps']
+    | CustomChartContextProps['validateConfig'];
+
 /**
  * Default configuration options for all the chart context properties
  */
@@ -143,6 +159,7 @@ const DEFAULT_CHART_CONTEXT_PROPS: Partial<CustomChartContextProps> = {
     allowedConfigurations: {
         allowColumnNumberFormatting: false,
         allowColumnConditionalFormatting: false,
+        allowMeasureNamesAndValues: false,
     },
 };
 
@@ -379,6 +396,48 @@ export class CustomChartContext {
         return processedPayload;
     }
 
+    /**
+     * Funtions return the chart config editor definition
+     * @param {ChartConfig[]} currentChartConfig
+     * @param {VisualProps}
+     * @returns {ChartConfigEditorDefinition[]}
+     */
+    private getChartConfigEditorDefinition = (
+        currentState: Partial<ChartModel> = {},
+    ) => {
+        if (_.isFunction(this.chartContextProps.chartConfigEditorDefinition)) {
+            return this.chartContextProps.chartConfigEditorDefinition(
+                {
+                    ...this.chartModel,
+                    ...currentState,
+                },
+                this,
+            );
+        }
+        return this.chartContextProps.chartConfigEditorDefinition;
+    };
+
+    /**
+     * Funtions returns the visual prop editor definition
+     * @param {ChartConfig[]} currentChartConfig
+     * @param {VisualProps}
+     * @returns {VisualPropEditorDefinition}
+     */
+    private getVisualPropEditorDefinition = (
+        currentState: Partial<ChartModel> = {},
+    ) => {
+        if (_.isFunction(this.chartContextProps.visualPropEditorDefinition)) {
+            return this.chartContextProps.visualPropEditorDefinition(
+                {
+                    ...this.chartModel,
+                    ...currentState,
+                },
+                this,
+            );
+        }
+        return this.chartContextProps.visualPropEditorDefinition;
+    };
+
     /**
      * Function to store the axis menu custom action callback mapped with action id
      * @param  {[OpenAxisMenuEventPayload]} eventPayload Event payload bound
@@ -438,6 +497,24 @@ export class CustomChartContext {
         }
     }
 
+    private validationsResponseProcessor(
+        currentValidationState: Partial<ChartModel>,
+        validationResponse: ValidationResponse,
+    ) {
+        const visualPropEditorDefinition = this.getVisualPropEditorDefinition(
+            currentValidationState,
+        );
+        const chartConfigEditorDefinition = this.getChartConfigEditorDefinition(
+            currentValidationState,
+        );
+
+        return {
+            ...validationResponse,
+            visualPropEditorDefinition,
+            chartConfigEditorDefinition,
+        };
+    }
+
     /**
      * Function to emit Chart to TS Events to the TS application.
 
@@ -530,13 +607,27 @@ export class CustomChartContext {
          */
         this.onInternal(
             TSToChartEvent.VisualPropsValidate,
-            (payload: VisualPropsValidateEventPayload): ValidationResponse => {
+            (
+                payload: VisualPropsValidateEventPayload,
+            ):
+                | (ValidationResponse & SuccessValidationResponse)
+                | ValidationResponse => {
                 if (this.chartContextProps.validateVisualProps) {
                     const validationResponse =
                         this.chartContextProps.validateVisualProps(
                             payload.visualProps,
                             this.chartModel,
                         );
+                    if (validationResponse.isValid) {
+                        const currentVisualState = {
+                            visualProps: payload.visualProps,
+                        };
+
+                        return this.validationsResponseProcessor(
+                            currentVisualState,
+                            validationResponse,
+                        );
+                    }
                     return validationResponse;
                 }
                 // this will never be true
@@ -551,13 +642,29 @@ export class CustomChartContext {
          */
         this.onInternal(
             TSToChartEvent.ChartConfigValidate,
-            (payload: ChartConfigValidateEventPayload): ValidationResponse => {
+            (
+                payload: ChartConfigValidateEventPayload,
+            ):
+                | (ValidationResponse & SuccessValidationResponse)
+                | ValidationResponse => {
                 if (this.chartContextProps.validateConfig) {
                     const validationResponse =
                         this.chartContextProps.validateConfig(
                             payload.chartConfig,
                             this.chartModel,
                         );
+                    if (validationResponse.isValid) {
+                        const currentConfigState = {
+                            config: {
+                                ...this.chartModel.config,
+                                chartConfig: payload.chartConfig,
+                            },
+                        };
+                        return this.validationsResponseProcessor(
+                            currentConfigState,
+                            validationResponse,
+                        );
+                    }
                     return validationResponse;
                 }
                 // this will never be true
@@ -789,9 +896,9 @@ export class CustomChartContext {
                 isConfigValid: isValid,
                 defaultChartConfig,
                 chartConfigEditorDefinition:
-                    this.chartContextProps.chartConfigEditorDefinition,
+                    this.getChartConfigEditorDefinition(),
                 visualPropEditorDefinition:
-                    this.chartContextProps.visualPropEditorDefinition,
+                    this.getVisualPropEditorDefinition(),
                 allowedConfigurations:
                     this.chartContextProps.allowedConfigurations,
             };

package/src/main/post-message-event-bridge.ts

@@ -9,7 +9,7 @@ const target =
     (elSelector && (document.querySelector(elSelector) as HTMLElement)) ||
     window.parent;
 
-const globalThis = (target instanceof Window ? window : target) as any;
+const globalThis = (target === window.parent ? window : target) as any;
 
 /**
  * method to listen to messages using postMessage from the parent.
@@ -53,7 +53,7 @@ const postMessageToHostApp = async (
         TIMEOUT_THRESHOLD,
         'ChartContext: postMessage operation timed out.',
     );
-    if (resp.hasError) {
+    if (resp?.hasError) {
         throw new Error(resp.error);
     }
     return resp;

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

@@ -3,6 +3,7 @@ import { renderHook } from '@testing-library/react-hooks';
 import React from 'react';
 import * as PostMessageEventBridge from '../main/post-message-event-bridge';
 import { mockInitializeContextPayload } from '../test/test-utils';
+import { ColumnType } from '../types/answer-column.types';
 import { ChartToTSEvent } from '../types/chart-to-ts-event.types';
 import { TSToChartEvent } from '../types/ts-to-chart-event.types';
 import { contextChartProps } from './mocks/custom-chart-context-mock';
@@ -12,7 +13,10 @@ describe('useChartContext initialization', () => {
     let eventProcessor: any;
     let mockInitMessage;
     let mockPostMessageToHost;
-    const mockedChartModel = { columns: [], config: {} };
+    const mockedChartModel = {
+        columns: [{ type: ColumnType.MEASURE }, { type: ColumnType.ATTRIBUTE }],
+        config: {},
+    };
     beforeEach(() => {
         mockInitMessage = jest.spyOn(
             PostMessageEventBridge,
@@ -67,6 +71,66 @@ describe('useChartContext initialization', () => {
         });
     });
 
+    test('should trigger getDataQuery and fetch correct query response', async () => {
+        // Render the hook with the custom chart context props
+        const { result, waitFor } = renderHook(() =>
+            useChartContext(contextChartProps),
+        );
+
+        // Assert that the context is not initialized initially
+        expect(result.current.hasInitialized).toBe(false);
+        expect(result.current.chartModel).toBeUndefined();
+        await eventProcessor({
+            payload: {
+                componentId: 'COMPONENT_ID',
+                hostUrl: 'https://some.chart.app',
+                chartModel: mockedChartModel,
+            },
+            eventType: TSToChartEvent.Initialize,
+        });
+        const response = await eventProcessor({
+            payload: {
+                config: [
+                    {
+                        key: 'column',
+                        dimensions: [
+                            {
+                                key: 'x',
+                                columns: [mockedChartModel.columns[0]],
+                            },
+                            {
+                                key: 'y',
+                                columns: [mockedChartModel.columns[1]],
+                            },
+                        ],
+                    },
+                ],
+            },
+            eventType: TSToChartEvent.GetDataQuery,
+            source: 'ts-host-app',
+        });
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.TriggerRenderChart,
+            source: 'ts-host-app',
+        });
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.InitializeComplete,
+            source: 'ts-host-app',
+        });
+
+        await waitFor(() => {
+            expect(response.queries[0].queryColumns[0]).toBe(
+                mockedChartModel.columns[0],
+            );
+            expect(response.queries[0].queryColumns[1]).toBe(
+                mockedChartModel.columns[1],
+            );
+            expect(result.current.hasInitialized).toBeTruthy();
+        });
+    });
+
     test('should make sure hasInitialized to remain false when context initialization failed', async () => {
         jest.mock('../main/custom-chart-context', () => ({
             CustomChartContext: jest.fn().mockImplementation(() => ({
@@ -76,7 +140,6 @@ describe('useChartContext initialization', () => {
                 emitEvent: jest.fn(),
                 on: jest.fn(),
                 getChartModel: jest.fn(),
-                renderChart: jest.fn(),
                 destroy: jest.fn(),
             })),
         }));