@thoughtspot/ts-chart-sdk 2.5.7 → 2.6.0

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

@@ -7,7 +7,12 @@
 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 {
+    ActionEventType,
+    ChartToTSEvent,
+    ErrorType,
+    OpenContextMenuEventPayload,
+} from '../types/chart-to-ts-event.types';
 import {
     DownloadExcelTriggerPayload,
     DownloadExcelTriggerResponse,
@@ -1595,6 +1600,7 @@ describe('CustomChartContext', () => {
                 selectedPoints: [{}],
             });
         });
+
         test('should process the event payload for axis menu custom actions', async () => {
             const mockCustomAction = jest.fn();
             let resolve: any;
@@ -1968,4 +1974,103 @@ describe('CustomChartContext', () => {
             });
         });
     });
+
+    describe('showGlobalAlertToast', () => {
+        let customChartContext: CustomChartContext;
+
+        beforeEach(() => {
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+            });
+            eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.Initialize,
+            });
+            eventProcessor({
+                payload: {},
+                eventType: TSToChartEvent.InitializeComplete,
+            });
+            customChartContext.initialize();
+        });
+
+        afterEach(() => {
+            customChartContext.destroy();
+            eventProcessor = null;
+            jest.resetAllMocks();
+        });
+
+        test('should process ShowGlobalAlertToast event and handle action click', async () => {
+            const mockOnClick = jest.fn();
+            const toastPayload = {
+                alertMessage: 'Test message',
+                primaryActionButton: {
+                    id: 'test-action',
+                    label: 'Test Action',
+                    onClick: mockOnClick,
+                },
+            };
+
+            customChartContext.emitEvent(
+                ChartToTSEvent.ShowGlobalAlertToast,
+                toastPayload,
+            );
+
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                {
+                    alertMessage: 'Test message',
+                    primaryActionButton: {
+                        id: 'test-action',
+                        label: 'Test Action',
+                        tooltip: undefined,
+                        type: undefined,
+                    },
+                },
+                ChartToTSEvent.ShowGlobalAlertToast,
+            );
+
+            // Check if the handler is stored
+            expect(
+                (customChartContext as any).globalToastActionHandler[
+                    'test-action'
+                ],
+            ).toBe(mockOnClick);
+
+            // Simulate the action click from host
+            await eventProcessor({
+                eventType: TSToChartEvent.GlobalToastActionClick,
+                payload: {
+                    alertAction: {
+                        id: 'test-action',
+                    },
+                },
+            });
+
+            expect(mockOnClick).toHaveBeenCalled();
+        });
+
+        test('should process ShowGlobalAlertToast without primary action', () => {
+            const toastPayload = {
+                alertMessage: 'Test message without action',
+            };
+
+            customChartContext.emitEvent(
+                ChartToTSEvent.ShowGlobalAlertToast,
+                toastPayload,
+            );
+
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                toastPayload,
+                ChartToTSEvent.ShowGlobalAlertToast,
+            );
+            expect(
+                (customChartContext as any).globalToastActionHandler,
+            ).toEqual({});
+        });
+    });
 });

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

@@ -15,8 +15,10 @@ import {
     CustomAction,
     CustomActionMenuItemGroup,
     ErrorType,
+    GlobalToastActionHandler,
     OpenAxisMenuEventPayload,
     OpenContextMenuEventPayload,
+    ShowGlobalAlertToastEventPayload,
 } from '../types/chart-to-ts-event.types';
 import {
     AppConfig,
@@ -57,6 +59,7 @@ import {
     VisualEditorDefinitionSetter,
     VisualPropEditorDefinition,
 } from '../types/visual-prop.types';
+import { validateAllChartConfigs } from '../utils/chart-config';
 import { setLocaleBasedStringFormats } from '../utils/number-formatting/number-formatting-utils';
 import { create } from './logger';
 import {
@@ -66,6 +69,7 @@ import {
 } from './post-message-event-bridge';
 
 const logger = create('TsChartSDKContext');
+
 /**
  * Configuration for allowing or disallowing specific TS UI features.
  *
@@ -438,6 +442,8 @@ export class CustomChartContext {
      */
     private axisMenuActionHandler: AxisMenuActionHandler = {};
 
+    private globalToastActionHandler: GlobalToastActionHandler = {};
+
     public containerEl: HTMLElement | null = null;
 
     /**
@@ -684,12 +690,41 @@ export class CustomChartContext {
         return processedPayload;
     }
 
+    /**
+     * Function to store the global toast primary action mapped with action id
+     * @param  {[ShowGlobalAlertToastEventPayload]} eventPayload Event payload bound
+     *          to the type of the event
+     * @returns payload
+     */
+    public showGlobalAlertToastPreProcessor(
+        eventPayload: [ShowGlobalAlertToastEventPayload],
+    ): [ShowGlobalAlertToastEventPayload] {
+        this.globalToastActionHandler = {};
+        if (!eventPayload?.[0]?.primaryActionButton) {
+            return eventPayload;
+        }
+        const primaryActionButtonProp = eventPayload?.[0]?.primaryActionButton;
+        this.globalToastActionHandler[primaryActionButtonProp.id] =
+            primaryActionButtonProp.onClick ?? _.noop;
+        return [
+            {
+                ...eventPayload[0],
+                primaryActionButton: {
+                    id: primaryActionButtonProp.id,
+                    label: primaryActionButtonProp.label,
+                    tooltip: primaryActionButtonProp.tooltip,
+                    type: primaryActionButtonProp.type,
+                },
+            },
+        ];
+    }
     /**
      * 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],
@@ -703,6 +738,10 @@ export class CustomChartContext {
                 return this.axisMenuCustomActionPreProcessor(
                     eventPayload as [OpenAxisMenuEventPayload],
                 ) as ChartToTSEventsPayloadMap[T];
+            case ChartToTSEvent.ShowGlobalAlertToast:
+                return this.showGlobalAlertToastPreProcessor(
+                    eventPayload as [ShowGlobalAlertToastEventPayload],
+                ) as ChartToTSEventsPayloadMap[T];
             default:
                 return eventPayload;
         }
@@ -977,7 +1016,35 @@ export class CustomChartContext {
                         'ContextMenuCustomAction: payload recieved:',
                         payload,
                         'CustomActionCallbackStore:',
-                        this.axisMenuActionHandler,
+                        this.contextMenuActionHandler,
+                    );
+                    return {
+                        isValid: false,
+                        error,
+                    };
+                }
+            },
+        );
+        this.onInternal(
+            TSToChartEvent.GlobalToastActionClick,
+            (payload): { isValid: boolean; error?: unknown } => {
+                try {
+                    const { id: customActionCallback } = payload.alertAction;
+                    const customActionCallbackArgs = {
+                        id: customActionCallback,
+                    };
+                    this.globalToastActionHandler[customActionCallback](
+                        customActionCallbackArgs,
+                    );
+                    return {
+                        isValid: true,
+                    };
+                } catch (error: unknown) {
+                    logger.log(
+                        'GlobalToastActionClick: payload recieved:',
+                        payload,
+                        'GlobalToastActionClick:',
+                        this.globalToastActionHandler,
                     );
                     return {
                         isValid: false,
@@ -1209,6 +1276,7 @@ export class CustomChartContext {
                         this.appConfig,
                     );
             }
+            validateAllChartConfigs(defaultChartConfig);
             return {
                 isConfigValid: isValid,
                 defaultChartConfig,

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

@@ -3,6 +3,7 @@ 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';
+import { fetchQueryColumns } from '../../utils/chart-config';
 
 export const contextChartProps: CustomChartContextProps = {
     getDefaultChartConfig: (chartModel: ChartModel): ChartConfig[] => {
@@ -35,19 +36,9 @@ export const contextChartProps: CustomChartContextProps = {
     },
     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,
-                ),
+            (config: ChartConfig): Query => ({
+                queryColumns: fetchQueryColumns(config),
+            }),
         );
         return queries;
     },

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

@@ -5,6 +5,7 @@ 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 { AxisType, ChartConfigMode } from '../types/common.types';
 import { TSToChartEvent } from '../types/ts-to-chart-event.types';
 import { contextChartProps } from './mocks/custom-chart-context-mock';
 import { useChartContext } from './use-custom-chart-context';
@@ -71,7 +72,7 @@ describe('useChartContext initialization', () => {
         });
     });
 
-    test('should trigger getDataQuery and fetch correct query response', async () => {
+    test('should trigger getDataQuery and fetch correct query response for column driven dimension config', async () => {
         // Render the hook with the custom chart context props
         const { result, waitFor } = renderHook(() =>
             useChartContext(contextChartProps),
@@ -131,6 +132,85 @@ describe('useChartContext initialization', () => {
         });
     });
 
+    test('should trigger getDataQuery and fetch correct query response for config driven dimension config', 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',
+                                mode: ChartConfigMode.AXIS_DRIVEN,
+                                axes: [
+                                    {
+                                        type: AxisType.FLAT,
+                                        column: mockedChartModel.columns[0],
+                                    },
+                                ],
+                            },
+                            {
+                                key: 'y',
+                                mode: ChartConfigMode.AXIS_DRIVEN,
+                                axes: [
+                                    {
+                                        type: AxisType.MERGED,
+                                        columns: [
+                                            mockedChartModel.columns[1],
+                                            mockedChartModel.columns[2],
+                                        ],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+            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(response.queries[0].queryColumns[2]).toBe(
+                mockedChartModel.columns[2],
+            );
+            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(() => ({

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

@@ -57,6 +57,10 @@ export enum ChartToTSEvent {
      */
     ShowToolTip = 'ShowToolTip',
     HideToolTip = 'HideToolTip',
+    /**
+     * Global toast alert event
+     */
+    ShowGlobalAlertToast = 'ShowGlobalAlertToast',
     /**
      * Label translation events.
      */
@@ -140,11 +144,17 @@ export interface ChartToTSEventsPayloadMap {
      */
     [ChartToTSEvent.GetDataForQuery]: [GetDataForQueryEventPayload];
     /**
-     * Trigger to update the visual props
+     * Trigger to update the show tooltips
      *
      * @version SDK: 0.0.1-alpha.4 | ThoughtSpot:
      */
     [ChartToTSEvent.ShowToolTip]: [ShowToolTipEventPayload];
+    /**
+     * Trigger to update the show toast alerts
+     *
+     * @version SDK: 0.0.1-alpha.4 | ThoughtSpot:
+     */
+    [ChartToTSEvent.ShowGlobalAlertToast]: [ShowGlobalAlertToastEventPayload];
     /**
      * Trigger to update the visual props
      *
@@ -199,6 +209,11 @@ export interface ChartToTSEventsPayloadMap {
  */
 export interface UpdateVisualPropsEventPayload {
     visualProps: VisualProps;
+    /**
+     * If passed true, the action is a system action
+     * and will not be considered in the history context
+     * */
+    isSystemAction?: boolean;
 }
 
 /**
@@ -335,7 +350,72 @@ export interface ShowToolTipEventPayload {
      */
     point?: Point;
 }
-// end - tooltip payload
+
+export enum ButtonType {
+    PRIMARY = 'primary',
+    SECONDARY = 'secondary',
+    TERTIARY = 'tertiary',
+}
+
+export interface AlertActionButton {
+    /*
+     * ID of the user-defined action
+     */
+    id: string;
+    /**
+     * Label for action button
+     */
+    label: string;
+    /**
+     * Callback for when the user clicks on action button
+     */
+    onClick?: () => any;
+    /**
+     * If the action button is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * i18ned Tooltip to show on the button
+     */
+    tooltip?: string;
+    /**
+     * Type of button
+     * @default 'primary'
+     */
+    type?: ButtonType;
+}
+
+export interface ShowGlobalAlertToastEventPayload {
+    /**
+     * i18n message that will be shown.
+     *
+     */
+    alertMessage: string;
+    /**
+     * label translation id's defined in thoughtspot
+     */
+    labelTranslation?: string;
+    /**
+     * enable close button in toast alert component.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * want to show checkmark icon in Toast by default set to `true`.
+     * @default true
+     */
+    showCheckmarkIcon?: boolean;
+    /**
+     * Whether or not to auto hide the alert after a delay (4.8s)
+     *
+     * @default true
+     */
+    autoHide?: boolean;
+    /**
+     * Show a primary button with callback
+     */
+    primaryActionButton?: AlertActionButton;
+}
 
 /**
  * @group Chart to ThoughtSpot Events
@@ -492,3 +572,7 @@ export interface ContextMenuActionHandler {
 export interface AxisMenuActionHandler {
     [key: string]: (args: CustomAxisMenuAction) => void;
 }
+
+export interface GlobalToastActionHandler {
+    [key: string]: (args: any) => void;
+}

package/src/types/common.types.ts

@@ -59,14 +59,78 @@ export enum CustomizableChartFeature {
 }
 
 /**
- * List of Columns for a dimension in the Custom Chart Config.
- * Associated with the key defined in the chart config editor definition
- * Relates to ChartConfigSection
+ * Enum to indicate the type of dimension config
  *
- * @version SDK: 0.1 | ThoughtSpot:
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export enum AxisType {
+    FLAT = 'flat',
+    MERGED = 'merged',
+    DUAL = 'dual',
+}
+
+/**
+ * Flat axis config: single column, unmodified.
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
  * @group Chart Model
  */
-export interface ChartConfigDimension {
+export interface FlatAxis {
+    type: AxisType.FLAT;
+    /** Single column for this axis slot */
+    column: ChartColumn;
+}
+
+/**
+ * Merged axis config: multiple columns combined into one logical series.
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export interface MergedAxis {
+    type: AxisType.MERGED;
+    /** Columns that are merged into one axis slot */
+    columns: ChartColumn[];
+}
+
+/**
+ * Dual axis config: primary and secondary axis, each can be flat or merged.
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export interface DualAxis {
+    type: AxisType.DUAL;
+    /** Primary axis config (flat or merged) */
+    primary: FlatAxis | MergedAxis;
+    /** Secondary axis config (flat or merged) */
+    secondary: FlatAxis | MergedAxis;
+}
+
+/**
+ * Union of all supported axis types for a dimension.
+ */
+export type AxisConfig = FlatAxis | MergedAxis | DualAxis;
+
+/**
+ * Enum to indicate whether dimension config uses columns or structured config
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export enum ChartConfigMode {
+    COLUMN_DRIVEN = 'COLUMN_DRIVEN',
+    AXIS_DRIVEN = 'AXIS_DRIVEN',
+}
+
+/**
+ * Column driven dimension config: single column or multiple columns.
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export interface ColumnDrivenChartConfigDimension {
     /**
      * Key for the dimension in the chart config
      *
@@ -74,13 +138,58 @@ export interface ChartConfigDimension {
      */
     key: string;
     /**
-     * List of columns added for the dimension
+     * Mode of the chart config
      *
-     * @version SDK: 0.1 | ThoughtSpot:
+     * @version SDK: 2.6.0 | ThoughtSpot:
+     */
+    mode?: ChartConfigMode.COLUMN_DRIVEN;
+    /**
+     * List of columns added for the dimension
+     * If chart config mode is COLUMN_DRIVEN, this is required
+     * @version SDK: 2.6.0 | ThoughtSpot:
      */
     columns: ChartColumn[];
 }
 
+/**
+ * Axis driven dimension config: multiple axes, each can be flat or merged.
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export interface AxisDrivenChartConfigDimension {
+    /**
+     * Key for the dimension in the chart config
+     *
+     * @version SDK: 2.6.0 | ThoughtSpot:
+     */
+    key: string;
+    /**
+     * Mode of the chart config
+     *
+     * @version SDK: 2.6.0 | ThoughtSpot:
+     */
+    mode: ChartConfigMode.AXIS_DRIVEN;
+    /**
+     * Axis config of the dimension
+     *
+     * @version SDK: 2.6.0 | ThoughtSpot:
+     */
+    axes: AxisConfig[];
+}
+
+/**
+ * List of Columns for a dimension in the Custom Chart Config.
+ * Associated with the key defined in the chart config editor definition
+ * Relates to ChartConfigSection
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ * @group Chart Model
+ */
+export type ChartConfigDimension =
+    | ColumnDrivenChartConfigDimension
+    | AxisDrivenChartConfigDimension;
+
 /**
  * Custom Chart Config values stored in the metadata
  * Relates to ChartConfigEditorDefinition

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

@@ -34,6 +34,7 @@ export type GradientBackgroundAttrs = {
     backgroundFormatMidpoint?: Maybe<Scalars['Float']>;
     backgroundFormatRange?: Maybe<Array<Maybe<Scalars['Float']>>>;
     colors?: Maybe<Array<Maybe<Scalars['String']>>>;
+    isAutoScaled?: Maybe<Scalars['Boolean']>;
 };
 export enum Operators {
     Contains = 'CONTAINS',