@thoughtspot/ts-chart-sdk 0.0.1-alpha.3 → 0.0.1-alpha.6

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@thoughtspot/ts-chart-sdk",
     "private": false,
-    "version": "0.0.1-alpha.3",
+    "version": "0.0.1-alpha.6",
     "module": "lib/index",
     "main": "lib/index",
     "types": "lib/index",
@@ -33,9 +33,13 @@
         "publish-prod": "npm publish --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/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",
@@ -69,7 +73,9 @@
         "vite": "4.2.1"
     },
     "dependencies": {
-        "lodash": "^4.17.21"
+        "lodash": "^4.17.21",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
     },
     "prettier": "./prettier-config",
     "browserslist": [

package/src/index.ts

@@ -5,3 +5,4 @@ export * from './types/answer-column.types';
 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';

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

@@ -20,6 +20,7 @@ describe('CustomChartContext', () => {
     let eventProcessor: any;
 
     let getDefaultChartConfig = jest.fn();
+    let getVisualPropEditorDefinition = jest.fn();
     let getQueriesFromChartConfig = jest.fn();
     let renderChart = jest.fn();
     const mockInitMessage = jest.spyOn(
@@ -33,6 +34,7 @@ describe('CustomChartContext', () => {
 
     beforeEach(() => {
         getDefaultChartConfig = jest.fn();
+        getVisualPropEditorDefinition = jest.fn();
         getQueriesFromChartConfig = jest.fn();
         renderChart = jest.fn();
 
@@ -52,6 +54,7 @@ describe('CustomChartContext', () => {
                 getDefaultChartConfig,
                 getQueriesFromChartConfig,
                 renderChart,
+                getVisualPropEditorDefinition,
             });
         });
 
@@ -147,6 +150,7 @@ describe('CustomChartContext', () => {
                 customChartContext = new CustomChartContext({
                     getDefaultChartConfig,
                     getQueriesFromChartConfig,
+                    getVisualPropEditorDefinition,
                     renderChart,
                 });
             } catch (err: any) {
@@ -158,6 +162,7 @@ describe('CustomChartContext', () => {
                 await getChartContext({
                     getDefaultChartConfig,
                     getQueriesFromChartConfig,
+                    getVisualPropEditorDefinition,
                     renderChart,
                 });
             } catch (err: any) {
@@ -173,6 +178,7 @@ describe('CustomChartContext', () => {
             customChartContext = new CustomChartContext({
                 getDefaultChartConfig,
                 getQueriesFromChartConfig,
+                getVisualPropEditorDefinition,
                 renderChart,
             });
         });
@@ -380,6 +386,123 @@ describe('CustomChartContext', () => {
         });
     });
 
+    describe('off', () => {
+        let customChartContext: CustomChartContext;
+
+        beforeEach(() => {
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                getVisualPropEditorDefinition,
+                renderChart,
+            });
+        });
+
+        afterEach(() => {
+            // Destroy the chart context after each test
+            customChartContext.destroy();
+            eventProcessor = null;
+            jest.resetAllMocks();
+        });
+
+        test('should remove the event listener for the specified event type', () => {
+            // Define a test event type and callback function
+            const TEST_EVENT_TYPE = 'testEventType' as any;
+            const testCallbackFn = jest.fn();
+            // Call the on function with the test event type and callback
+            // function to add the event listener
+            customChartContext.on(TEST_EVENT_TYPE, testCallbackFn);
+
+            // mock the event trigger for the test event type
+            const mockPostMessage = jest.fn();
+            eventProcessor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TEST_EVENT_TYPE,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
+            // Call the off function to remove the event listener
+            customChartContext.off(TEST_EVENT_TYPE);
+
+            // Check that the event listener was not called
+            expect(testCallbackFn).toHaveBeenCalled();
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE],
+            ).toHaveLength(0);
+        });
+
+        test('should remove a specific event listener without affecting others', () => {
+            // Define two test event types and callback functions
+            const TEST_EVENT_TYPE_1: any = 'testEventType1';
+            const TEST_EVENT_TYPE_2: any = 'testEventType2';
+            const testCallbackFn1 = jest.fn();
+            const testCallbackFn2 = jest.fn();
+
+            // Add event listeners with the test event types and callback
+            // functions
+            customChartContext.on(TEST_EVENT_TYPE_1, testCallbackFn1);
+            customChartContext.on(TEST_EVENT_TYPE_2, testCallbackFn2);
+
+            // Verify that both event listeners are in the eventListeners array
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE_1],
+            ).toHaveLength(1);
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE_2],
+            ).toHaveLength(1);
+
+            // Emit events for both event types
+            const mockPostMessage = jest.fn();
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TEST_EVENT_TYPE_1,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TEST_EVENT_TYPE_2,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
+            // Check that both callback functions were called
+            expect(testCallbackFn1).toHaveBeenCalled();
+            expect(testCallbackFn2).toHaveBeenCalled();
+
+            // Remove the first event listener (TEST_EVENT_TYPE_1)
+            customChartContext.off(TEST_EVENT_TYPE_1);
+
+            // Verify that the first event listener is removed while the second
+            // is still present
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE_1],
+            ).toHaveLength(0);
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE_2],
+            ).toHaveLength(1);
+        });
+
+        test('should make sure not to throw error when off is called before', () => {
+            // Define two test event types and callback functions
+            const TEST_EVENT_TYPE_1: any = 'testEventType1';
+            customChartContext.off(TEST_EVENT_TYPE_1);
+
+            // Verify that the first event listener is removed while the second
+            // is still present
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE_1],
+            ).toHaveLength(0);
+        });
+    });
+
     describe('emitEvent', () => {
         let customChartContext: CustomChartContext;
 
@@ -387,6 +510,7 @@ describe('CustomChartContext', () => {
             customChartContext = new CustomChartContext({
                 getDefaultChartConfig,
                 getQueriesFromChartConfig,
+                getVisualPropEditorDefinition,
                 renderChart,
             });
         });

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

@@ -104,9 +104,13 @@ export type CustomChartContextProps = {
      * on the TS app. If not provided, visual properties will not be configurable in
      * editor
      *
-     * @version SDK: 0.1 | ThoughtSpot:
+     * @param chartModel
+     * @returns {@link VisualPropEditorDefinition}
+     * @version SDK: 0.0.1-alpha.6 | ThoughtSpot:
      */
-    visualPropEditorDefinition?: VisualPropEditorDefinition;
+    getVisualPropEditorDefinition: (
+        chartModel: ChartModel,
+    ) => VisualPropEditorDefinition;
 };
 
 /**
@@ -116,7 +120,6 @@ const DEFAULT_CHART_CONTEXT_PROPS: Partial<CustomChartContextProps> = {
     validateConfig: () => ({ isValid: true }),
     validateVisualProps: () => ({ isValid: true }),
     chartConfigEditorDefinition: undefined,
-    visualPropEditorDefinition: undefined,
 };
 
 export class CustomChartContext {
@@ -232,6 +235,21 @@ export class CustomChartContext {
         this.eventListeners[eventType].push(callbackFn);
     }
 
+    /**
+     * Removes specific event listeners on the chart context.
+     *
+     * @param  {T} eventType
+     * @returns void
+     */
+    public off<T extends keyof TSToChartEventsPayloadMap>(eventType: T): void {
+        if (_.isNil(this.eventListeners[eventType])) {
+            console.log('No event listener found to remove');
+            this.eventListeners[eventType] = [];
+            return;
+        }
+        this.eventListeners[eventType].splice(0, 1);
+    }
+
     /**
      * Add internal event listeners on the chart context with the required callback.
      *
@@ -541,7 +559,9 @@ export class CustomChartContext {
                 chartConfigEditorDefinition:
                     this.chartContextProps.chartConfigEditorDefinition,
                 visualPropEditorDefinition:
-                    this.chartContextProps.visualPropEditorDefinition,
+                    this.chartContextProps.getVisualPropEditorDefinition(
+                        this.chartModel,
+                    ),
             };
         };
 

package/src/react/mocks/custom-chart-context-mock.ts

@@ -0,0 +1,116 @@
+import _ from 'lodash';
+import { CustomChartContextProps } from '../../main/custom-chart-context';
+import { ColumnType } from '../../types/answer-column.types';
+import { ChartConfig, ChartModel } from '../../types/common.types';
+import { Query } from '../../types/ts-to-chart-event.types';
+
+export const contextChartProps: CustomChartContextProps = {
+    getDefaultChartConfig: (chartModel: ChartModel): ChartConfig[] => {
+        const cols = chartModel.columns;
+
+        const measureColumns = _.filter(
+            cols,
+            (col) => col.type === ColumnType.MEASURE,
+        );
+
+        const attributeColumns = _.filter(
+            cols,
+            (col) => col.type === ColumnType.ATTRIBUTE,
+        );
+
+        const axisConfig: ChartConfig = {
+            key: 'column',
+            dimensions: [
+                {
+                    key: 'x',
+                    columns: [attributeColumns[0]],
+                },
+                {
+                    key: 'y',
+                    columns: measureColumns.slice(0, 2),
+                },
+            ],
+        };
+        return [axisConfig];
+    },
+    getQueriesFromChartConfig: (chartConfig: ChartConfig[]): Array<Query> => {
+        const queries = chartConfig.map(
+            (config: ChartConfig): Query =>
+                _.reduce(
+                    config.dimensions,
+                    (acc: Query, dimension) => ({
+                        queryColumns: [
+                            ...acc.queryColumns,
+                            ...dimension.columns,
+                        ],
+                    }),
+                    {
+                        queryColumns: [],
+                    } as Query,
+                ),
+        );
+        return queries;
+    },
+    chartConfigEditorDefinition: [
+        {
+            key: 'column',
+            label: 'Custom Column',
+            descriptionText:
+                'X Axis can only have attributes, Y Axis can only have measures, Color can only have attributes. ' +
+                'Should have just 1 column in Y axis with colors columns.',
+            columnSections: [
+                {
+                    key: 'x',
+                    label: 'Custom X Axis',
+                    allowAttributeColumns: true,
+                    allowMeasureColumns: false,
+                    allowTimeSeriesColumns: true,
+                    maxColumnCount: 1,
+                },
+                {
+                    key: 'y',
+                    label: 'Custom Y Axis',
+                    allowAttributeColumns: false,
+                    allowMeasureColumns: true,
+                    allowTimeSeriesColumns: false,
+                },
+            ],
+        },
+    ],
+    getVisualPropEditorDefinition: (chartModel: ChartModel) => {
+        return {
+            elements: [
+                {
+                    key: 'color',
+                    type: 'radio',
+                    defaultValue: 'red',
+                    values: ['red', 'green', 'yellow'],
+                    label: 'Colors',
+                },
+                {
+                    type: 'section',
+                    key: 'accordion',
+                    label: 'Accordion',
+                    children: [
+                        {
+                            key: 'Color2',
+                            type: 'radio',
+                            defaultValue: 'blue',
+                            values: ['blue', 'white', 'red'],
+                            label: 'Color2',
+                        },
+                        {
+                            key: 'datalabels',
+                            type: 'toggle',
+                            defaultValue: false,
+                            label: 'Data Labels',
+                        },
+                    ],
+                },
+            ],
+        };
+    },
+    renderChart: (cx) => {
+        return Promise.resolve();
+    },
+};