@thoughtspot/ts-chart-sdk 0.0.1-alpha.7 → 0.0.1-alpha.9

package/lib/types/visual-prop.types.d.ts

@@ -1,12 +1,12 @@
 export interface InputValidation {
-    required: boolean;
-    requiredError: string;
-    regex: string;
-    regexError: string;
-    minLength: number;
-    minLengthError: string;
-    range: string;
-    rangeError: string;
+    required?: boolean;
+    requiredError?: string;
+    regex?: string;
+    regexError?: string;
+    minLength?: number;
+    minLengthError?: string;
+    range?: string;
+    rangeError?: string;
 }
 export interface TextInputFormDetail {
     type: 'text';
@@ -18,6 +18,20 @@ export interface TextInputFormDetail {
     defaultValue?: string;
     inputValidation?: InputValidation;
 }
+export interface NumberInputFormDetail {
+    type: 'number';
+    key: string;
+    label?: string;
+    defaultValue?: number;
+    inputValidation?: InputValidation;
+}
+export interface ColorPickerFormDetail {
+    type: 'colorpicker';
+    key: string;
+    label?: string;
+    selectorType?: 'FONT' | 'COLOR';
+    defaultValue?: string;
+}
 export interface ToggleFormDetail {
     type: 'toggle';
     key: string;
@@ -52,7 +66,7 @@ export interface Section {
     alignment?: 'row' | 'column';
     layoutType?: 'accordion' | 'tab' | 'none';
 }
-export type PropElement = Section | TextInputFormDetail | ToggleFormDetail | CheckboxFormDetail | RadioButtonFormDetail | DropDownFormDetail;
+export type PropElement = Section | TextInputFormDetail | NumberInputFormDetail | ColorPickerFormDetail | ToggleFormDetail | CheckboxFormDetail | RadioButtonFormDetail | DropDownFormDetail;
 export interface VisualPropEditorDefinition {
     elements: PropElement[];
 }

package/lib/types/visual-prop.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visual-prop.types.d.ts","sourceRoot":"","sources":["../../src/types/visual-prop.types.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,eAAe;IAM5B,QAAQ,EAAE,OAAO,CAAC;IAMlB,aAAa,EAAE,MAAM,CAAC;IAMtB,KAAK,EAAE,MAAM,CAAC;IAMd,UAAU,EAAE,MAAM,CAAC;IAMnB,SAAS,EAAE,MAAM,CAAC;IAMlB,cAAc,EAAE,MAAM,CAAC;IAMvB,KAAK,EAAE,MAAM,CAAC;IAMd,UAAU,EAAE,MAAM,CAAC;CACtB;AAOD,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,MAAM,CAAC;IAMb,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAOf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAMpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAMrB,YAAY,CAAC,EAAE,MAAM,CAAC;IAMtB,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC;AAOD,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,QAAQ,CAAC;IAMf,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAOD,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,UAAU,CAAC;IAMjB,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAOD,MAAM,WAAW,qBAAqB;IAClC,IAAI,EAAE,OAAO,CAAC;IAMd,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,YAAY,CAAC,EAAE,MAAM,CAAC;IAMtB,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAOD,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,UAAU,CAAC;IAMjB,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,YAAY,CAAC,EAAE,MAAM,CAAC;IAMtB,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAOD,MAAM,WAAW,OAAO;IACpB,IAAI,EAAE,SAAS,CAAC;IAMhB,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IAMzB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAQ7B,UAAU,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,MAAM,CAAC;CAC7C;AAOD,MAAM,MAAM,WAAW,GACjB,OAAO,GACP,mBAAmB,GACnB,gBAAgB,GAChB,kBAAkB,GAClB,qBAAqB,GACrB,kBAAkB,CAAC;AAOzB,MAAM,WAAW,0BAA0B;IAOvC,QAAQ,EAAE,WAAW,EAAE,CAAC;CAC3B"}
+{"version":3,"file":"visual-prop.types.d.ts","sourceRoot":"","sources":["../../src/types/visual-prop.types.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,eAAe;IAM5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAMvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,UAAU,CAAC,EAAE,MAAM,CAAC;IAMpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAMxB,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAOD,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,MAAM,CAAC;IAMb,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAOf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAMpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAMrB,YAAY,CAAC,EAAE,MAAM,CAAC;IAMtB,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC;AAOD,MAAM,WAAW,qBAAqB;IAClC,IAAI,EAAE,QAAQ,CAAC;IAMf,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,YAAY,CAAC,EAAE,MAAM,CAAC;IAMtB,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC;AAOD,MAAM,WAAW,qBAAqB;IAClC,IAAI,EAAE,aAAa,CAAC;IAMpB,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAOf,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAMhC,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAOD,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,QAAQ,CAAC;IAMf,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAOD,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,UAAU,CAAC;IAMjB,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAOD,MAAM,WAAW,qBAAqB;IAClC,IAAI,EAAE,OAAO,CAAC;IAMd,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,YAAY,CAAC,EAAE,MAAM,CAAC;IAMtB,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAOD,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,UAAU,CAAC;IAMjB,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,YAAY,CAAC,EAAE,MAAM,CAAC;IAMtB,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAOD,MAAM,WAAW,OAAO;IACpB,IAAI,EAAE,SAAS,CAAC;IAMhB,GAAG,EAAE,MAAM,CAAC;IAMZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IAMzB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAQ7B,UAAU,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,MAAM,CAAC;CAC7C;AAOD,MAAM,MAAM,WAAW,GACjB,OAAO,GACP,mBAAmB,GACnB,qBAAqB,GACrB,qBAAqB,GACrB,gBAAgB,GAChB,kBAAkB,GAClB,qBAAqB,GACrB,kBAAkB,CAAC;AAOzB,MAAM,WAAW,0BAA0B;IAOvC,QAAQ,EAAE,WAAW,EAAE,CAAC;CAC3B"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@thoughtspot/ts-chart-sdk",
     "private": false,
-    "version": "0.0.1-alpha.7",
+    "version": "0.0.1-alpha.9",
     "module": "lib/index",
     "main": "lib/index",
     "types": "lib/index",

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

@@ -4,6 +4,7 @@
  *  @author Chetan Agrawal <chetan.agrawal@thoughtspot.com>
  */
 
+import _ from 'lodash';
 import { mockInitializeContextPayload } from '../test/test-utils';
 import { ChartToTSEvent, ErrorType } from '../types/chart-to-ts-event.types';
 import { TSToChartEvent } from '../types/ts-to-chart-event.types';
@@ -330,6 +331,71 @@ describe('CustomChartContext', () => {
             expect(customChartContext.getChartModel().visualProps).toBe(
                 'random data',
             );
+            mockPostMessage.mockReset();
+
+            // mock the event trigger for AxisMenuActionClick
+            customChartContext.axisMenuCustomActionPreProcessor([
+                {
+                    customActions: [
+                        {
+                            icon: '',
+                            id: 'custom-action-1',
+                            label: 'Custom user action 1',
+                            onClick: () => _.noop(),
+                        },
+                    ],
+                },
+            ] as any);
+            eventProcessor({
+                data: {
+                    payload: {
+                        customAction: {
+                            id: 'custom-action-1',
+                            columnIds: ['9f96b5b0-f7e4-4a5e-aa11-4c77fdf42125'],
+                        },
+                    },
+                    eventType: TSToChartEvent.AxisMenuActionClick,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the response was valid which means action gets
+            // executed successfully
+            expect(mockPostMessage).toHaveBeenCalledWith({
+                isValid: true,
+            });
+
+            // mock the event trigger for ContextMenuActionClick
+            customChartContext.contextMenuCustomActionPreProcessor([
+                {
+                    customActions: [
+                        {
+                            icon: '',
+                            id: 'custom-action-1',
+                            label: 'Custom user action 1',
+                            onClick: () => _.noop(),
+                        },
+                    ],
+                },
+            ] as any);
+            eventProcessor({
+                data: {
+                    payload: {
+                        customAction: {
+                            id: 'custom-action-1',
+                            columnIds: ['9f96b5b0-f7e4-4a5e-aa11-4c77fdf42125'],
+                        },
+                    },
+                    eventType: TSToChartEvent.ContextMenuActionClick,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the response was valid which means action gets
+            // executed successfully
+            expect(mockPostMessage).toHaveBeenCalledWith({
+                isValid: true,
+            });
         });
 
         test('should add an event listener to the specified event type', () => {
@@ -605,5 +671,249 @@ describe('CustomChartContext', () => {
                 ChartToTSEvent.RenderStart,
             );
         });
+        test('should process the event payload for context menu custom actions', async () => {
+            const mockPostMessage = jest.fn();
+            const mockCustomAction = jest.fn();
+            let resolve: any;
+            eventProcessor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.Initialize,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            customChartContext.initialize();
+            mockPostMessageToHost.mockImplementation(
+                () =>
+                    new global.Promise<any>((res) => {
+                        resolve = res;
+                    }),
+            );
+
+            // Define a test event type and payload
+            const TEST_EVENT_TYPE = ChartToTSEvent.OpenContextMenu as any;
+            const testPayload = {
+                customActions: [
+                    {
+                        id: 'custom-action-1',
+                        label: 'Custom user action 1',
+                        icon: '',
+                        onClick: mockCustomAction,
+                    },
+                ],
+            };
+
+            // Call the emitEvent function and wait for it to resolve
+            customChartContext.emitEvent(TEST_EVENT_TYPE, testPayload);
+
+            // Check that the result is defined
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                {
+                    customActions: [
+                        {
+                            icon: '',
+                            id: 'custom-action-1',
+                            label: 'Custom user action 1',
+                        },
+                    ],
+                },
+                TEST_EVENT_TYPE,
+            );
+            eventProcessor({
+                data: {
+                    payload: {
+                        customAction: {
+                            id: 'custom-action-1',
+                            clickedPoint: {},
+                            event: {},
+                            selectedPoints: [{}],
+                        },
+                    },
+                    eventType: TSToChartEvent.ContextMenuActionClick,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            expect(mockCustomAction).toHaveBeenCalled();
+            expect(mockCustomAction).toHaveBeenCalledWith({
+                clickedPoint: {},
+                event: {},
+                id: 'custom-action-1',
+                selectedPoints: [{}],
+            });
+        });
+        test('should process the event payload for axis menu custom actions', async () => {
+            const mockPostMessage = jest.fn();
+            const mockCustomAction = jest.fn();
+            let resolve: any;
+            eventProcessor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.Initialize,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            customChartContext.initialize();
+            mockPostMessageToHost.mockImplementation(
+                () =>
+                    new global.Promise<any>((res) => {
+                        resolve = res;
+                    }),
+            );
+
+            // Define a test event type and payload
+            const TEST_EVENT_TYPE = ChartToTSEvent.OpenAxisMenu as any;
+            const testPayload = {
+                customActions: [
+                    {
+                        id: 'custom-action-1',
+                        label: 'Custom user action 1',
+                        icon: '',
+                        onClick: mockCustomAction,
+                    },
+                ],
+            };
+
+            // Call the emitEvent function and wait for it to resolve
+            customChartContext.emitEvent(TEST_EVENT_TYPE, testPayload);
+            // Check that the result is defined
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                {
+                    customActions: [
+                        {
+                            icon: '',
+                            id: 'custom-action-1',
+                            label: 'Custom user action 1',
+                        },
+                    ],
+                },
+                TEST_EVENT_TYPE,
+            );
+
+            eventProcessor({
+                data: {
+                    payload: {
+                        customAction: {
+                            id: 'custom-action-1',
+                            columnIds: ['123'],
+                            event: {},
+                        },
+                    },
+                    eventType: TSToChartEvent.AxisMenuActionClick,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            expect(mockCustomAction).toHaveBeenCalled();
+            expect(mockCustomAction).toHaveBeenCalledWith({
+                id: 'custom-action-1',
+                columnIds: ['123'],
+                event: {},
+            });
+        });
+
+        test('should process the event payload for axis menu when custom actions are not defined', async () => {
+            const mockPostMessage = jest.fn();
+            let resolve: any;
+            eventProcessor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.Initialize,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            customChartContext.initialize();
+            mockPostMessageToHost.mockImplementation(
+                () =>
+                    new global.Promise<any>((res) => {
+                        resolve = res;
+                    }),
+            );
+
+            // Define a test event type and payload
+            const TEST_EVENT_TYPE = ChartToTSEvent.OpenAxisMenu as any;
+            const testPayload = {};
+            // Call the emitEvent function and wait for it to resolve
+            customChartContext.emitEvent(TEST_EVENT_TYPE, testPayload);
+            // Check that the result is defined
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                {},
+                TEST_EVENT_TYPE,
+            );
+        });
+
+        test('should process the event payload for context menu when custom actions are not defined', async () => {
+            const mockPostMessage = jest.fn();
+            let resolve: any;
+            eventProcessor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.Initialize,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            customChartContext.initialize();
+            mockPostMessageToHost.mockImplementation(
+                () =>
+                    new global.Promise<any>((res) => {
+                        resolve = res;
+                    }),
+            );
+
+            // Define a test event type and payload
+            const TEST_EVENT_TYPE = ChartToTSEvent.OpenContextMenu as any;
+            const testPayload = {};
+            // Call the emitEvent function and wait for it to resolve
+            customChartContext.emitEvent(TEST_EVENT_TYPE, testPayload);
+            // Check that the result is defined
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                {},
+                TEST_EVENT_TYPE,
+            );
+        });
     });
 });

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

@@ -5,13 +5,20 @@
  *
  * Copyright: ThoughtSpot Inc. 2023
  */
+
 import _ from 'lodash';
 import {
+    AxisMenuActionHandler,
     ChartToTSEvent,
     ChartToTSEventsPayloadMap,
+    ContextMenuActionHandler,
+    CustomAction,
     ErrorType,
+    OpenAxisMenuEventPayload,
+    OpenContextMenuEventPayload,
 } from '../types/chart-to-ts-event.types';
 import {
+    AppConfig,
     ChartConfig,
     ChartModel,
     ValidationResponse,
@@ -19,8 +26,10 @@ import {
 } from '../types/common.types';
 import { ChartConfigEditorDefinition } from '../types/configurator.types';
 import {
+    AxisMenuCustomActionPayload,
     ChartConfigValidateEventPayload,
     ChartModelUpdateEventPayload,
+    ContextMenuCustomActionPayload,
     DataUpdateEventPayload,
     GetDataQueryPayload,
     GetDataQueryResponsePayload,
@@ -149,6 +158,13 @@ export class CustomChartContext {
      */
     private chartModel: ChartModel = {} as any;
 
+    /**
+     * App Config object. This contains the app state like locale and timezones.
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    private appConfig: AppConfig = {};
+
     /**
      * Chart Props Object to define the workflow of the application
      *
@@ -185,6 +201,22 @@ export class CustomChartContext {
      */
     private triggerInitResolve: () => void = _.noop;
 
+    /**
+     * Stores the callbacks of context menu custom action based on custom action id
+     *
+     * @returns {@link ContextMenuActionHandler}
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    private contextMenuActionHandler: ContextMenuActionHandler = {};
+
+    /**
+     * Stores the callbacks of axis menu custom action based on custom action id
+     *
+     * @returns {@link AxisMenuActionHandler}
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    private axisMenuActionHandler: AxisMenuActionHandler = {};
+
     /**
      * Constructor to only accept context props as payload
      *
@@ -284,6 +316,107 @@ export class CustomChartContext {
      */
     public getChartModel = (): ChartModel => this.chartModel;
 
+    /**
+     * Getter for the chart model object
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    public getAppConfig = (): AppConfig => this.appConfig;
+
+    /**
+     * Function to store the context menu custom action callback mapped with action id
+     * @param  {[OpenContextMenuEventPayload]} eventPayload Event payload bound
+     *          to the type of the event
+     * @returns payload
+     */
+    public contextMenuCustomActionPreProcessor(
+        eventPayload: [OpenContextMenuEventPayload],
+    ): [OpenContextMenuEventPayload] {
+        // clear out the stored custom events callback for context menu
+        this.contextMenuActionHandler = {};
+        if (_.isEmpty(eventPayload?.[0]?.customActions)) {
+            return eventPayload;
+        }
+        eventPayload?.[0]?.customActions?.forEach((action: CustomAction) => {
+            this.contextMenuActionHandler[action.id] = action.onClick;
+        });
+        const processedCustomActions = eventPayload[0]?.customActions?.map(
+            (action: CustomAction) => {
+                return {
+                    id: action.id,
+                    label: action.label,
+                    icon: action.icon,
+                };
+            },
+        );
+        const processedPayload: [OpenContextMenuEventPayload] = [
+            {
+                ...eventPayload[0],
+                customActions: processedCustomActions as CustomAction[],
+            },
+        ];
+        return processedPayload;
+    }
+
+    /**
+     * Function to store the axis menu custom action callback mapped with action id
+     * @param  {[OpenAxisMenuEventPayload]} eventPayload Event payload bound
+     *          to the type of the event
+     * @returns payload
+     */
+    public axisMenuCustomActionPreProcessor(
+        eventPayload: [OpenAxisMenuEventPayload],
+    ): [OpenAxisMenuEventPayload] {
+        // clear out the stored custom events callback for axis menu
+        this.axisMenuActionHandler = {};
+        if (_.isEmpty(eventPayload?.[0]?.customActions)) {
+            return eventPayload;
+        }
+        eventPayload[0].customActions?.forEach((action: CustomAction) => {
+            this.axisMenuActionHandler[action.id] = action.onClick;
+        });
+        const processedCustomActions = eventPayload?.[0].customActions?.map(
+            (action: CustomAction) => {
+                return {
+                    id: action.id,
+                    label: action.label,
+                    icon: action.icon,
+                };
+            },
+        );
+        const processedPayload: [OpenAxisMenuEventPayload] = [
+            {
+                ...eventPayload[0],
+                customActions: processedCustomActions as CustomAction[],
+            },
+        ];
+        return processedPayload;
+    }
+
+    /**
+     * Function to process the event payload based on event type
+     * @param  {ChartToTSEventsPayloadMap[T]} eventPayload Event payload bound
+     *          to the type of the event
+     * @returns payload
+     */
+    private eventPayloadPreProcessor<T extends keyof ChartToTSEventsPayloadMap>(
+        eventType: T,
+        eventPayload: ChartToTSEventsPayloadMap[T],
+    ): ChartToTSEventsPayloadMap[T] {
+        switch (eventType) {
+            case ChartToTSEvent.OpenContextMenu:
+                return this.contextMenuCustomActionPreProcessor(
+                    eventPayload as [OpenContextMenuEventPayload],
+                ) as ChartToTSEventsPayloadMap[T];
+            case ChartToTSEvent.OpenAxisMenu:
+                return this.axisMenuCustomActionPreProcessor(
+                    eventPayload as [OpenAxisMenuEventPayload],
+                ) as ChartToTSEventsPayloadMap[T];
+            default:
+                return eventPayload;
+        }
+    }
+
     /**
      * Function to emit Chart to TS Events to the TS application.
 
@@ -302,10 +435,14 @@ export class CustomChartContext {
             );
             return Promise.reject(new Error('Context not initialized'));
         }
+        const processedPayload = this.eventPayloadPreProcessor(
+            eventType,
+            eventPayload,
+        );
         return PostMessageEventBridge.postMessageToHostApp(
             this.componentId,
             this.hostUrl,
-            eventPayload?.[0] ?? null,
+            processedPayload?.[0] ?? null,
             eventType,
         );
     }
@@ -447,6 +584,94 @@ export class CustomChartContext {
             this.chartContextProps.renderChart(this);
         });
 
+        /**
+         * This event is triggered when the custom context action is triggered from TS app
+         */
+        this.onInternal(
+            TSToChartEvent.ContextMenuActionClick,
+            (
+                payload: ContextMenuCustomActionPayload,
+            ): {
+                isValid: boolean;
+                error?: unknown;
+            } => {
+                try {
+                    const {
+                        id: customActionCallback,
+                        clickedPoint,
+                        selectedPoints,
+                        event,
+                    } = payload.customAction;
+                    const customActionCallbackArgs = {
+                        id: customActionCallback,
+                        clickedPoint,
+                        selectedPoints,
+                        event,
+                    };
+                    this.contextMenuActionHandler[customActionCallback](
+                        customActionCallbackArgs,
+                    );
+                    return {
+                        isValid: true,
+                    };
+                } catch (error: unknown) {
+                    console.log(
+                        'ContextMenuCustomAction: payload recieved:',
+                        payload,
+                        'CustomActionCallbackStore:',
+                        this.axisMenuActionHandler,
+                    );
+                    return {
+                        isValid: false,
+                        error,
+                    };
+                }
+            },
+        );
+
+        /**
+         * This event is triggered when the custom axis action is triggered from TS app
+         */
+        this.onInternal(
+            TSToChartEvent.AxisMenuActionClick,
+            (
+                payload: AxisMenuCustomActionPayload,
+            ): {
+                isValid: boolean;
+                error?: unknown;
+            } => {
+                try {
+                    const {
+                        id: customActionCallback,
+                        columnIds,
+                        event,
+                    } = payload.customAction;
+                    const customActionCallbackArgs = {
+                        id: customActionCallback,
+                        columnIds,
+                        event,
+                    };
+                    this.axisMenuActionHandler[customActionCallback](
+                        customActionCallbackArgs,
+                    );
+                    return {
+                        isValid: true,
+                    };
+                } catch (error: unknown) {
+                    console.log(
+                        'AxisMenuCustomAction: payload recieved:',
+                        payload,
+                        'CustomActionCallbackStore:',
+                        this.axisMenuActionHandler,
+                    );
+                    return {
+                        isValid: false,
+                        error,
+                    };
+                }
+            },
+        );
+
         // Register External Events
         // These events are readable by the developer
 
@@ -517,6 +742,7 @@ export class CustomChartContext {
         this.componentId = payload.componentId;
         this.hostUrl = payload.hostUrl;
         this.chartModel = payload.chartModel;
+        this.appConfig = payload.appConfig ?? {};
 
         return this.publishChartContextPropsToHost();
     };