@thoughtspot/visual-embed-sdk 1.47.2 → 1.47.3

package/lib/src/visual-embed-sdk.d.ts

@@ -2963,6 +2963,22 @@ export interface LiveboardAppEmbedViewConfig {
 	 * ```
 	 */
 	isLiveboardMasterpiecesEnabled?: boolean;
+	/**
+	 * Enable or disable Muze chart phase 1 GA
+	 *
+	 * Supported embed types: `AppEmbed`, `LiveboardEmbed`
+	 * @version SDK: 1.49.0 | ThoughtSpot Cloud: 26.6.0.cl
+	 * @default false
+	 * @example
+	 * ```js
+	 * // Replace <EmbedComponent> with embed component name. For example, AppEmbed or LiveboardEmbed
+	 * const embed = new <EmbedComponent>('#tsEmbed', {
+	 *    ... // other embed view config
+	 *    newChartsLibrary: true,
+	 * })
+	 * ```
+	 */
+	newChartsLibrary?: boolean;
 }
 export interface AllEmbedViewConfig extends BaseViewConfig, SearchLiveboardCommonViewConfig, HomePageConfig, LiveboardAppEmbedViewConfig {
 }
@@ -8892,6 +8908,413 @@ export interface ContextObject {
 		objectIds: ObjectIds;
 	};
 }
+export interface FontProperties {
+	color?: string;
+	bold?: boolean;
+	italic?: boolean;
+	strikeThrough?: boolean;
+	underline?: boolean;
+}
+export interface SolidBackgroundAttrs {
+	color?: string;
+}
+export interface GradientBackgroundAttrs {
+	backgroundFormatMidpoint?: number;
+	colors?: string[];
+	backgroundFormatRange?: number[];
+	isAutoScaled?: boolean;
+}
+/**
+ * Data label filter operators
+ * @group Visual Overrides
+ */
+export enum DataLabelFilterOperator {
+	/** Greater than */
+	GreaterThan = "GREATER_THAN",
+	/** Less than */
+	LessThan = "LESS_THAN",
+	/** Greater than or equal to */
+	GreaterThanOrEqualTo = "GREATER_THAN_OR_EQUAL_TO",
+	/** Less than or equal to */
+	LessThanOrEqualTo = "LESS_THAN_OR_EQUAL_TO",
+	/** Equal to */
+	EqualTo = "EQUAL_TO",
+	/** Not equal to */
+	NotEqualTo = "NOT_EQUAL_TO"
+}
+/**
+ * Conditional formatting operators
+ * @group Visual Overrides
+ */
+export enum ConditionalFormattingOperator {
+	/** Is equal to */
+	Is = "IS",
+	/** Is not equal to */
+	IsNot = "IS_NOT",
+	/** Contains */
+	Contains = "CONTAINS",
+	/** Does not contain */
+	DoesNotContain = "DOES_NOT_CONTAIN",
+	/** Starts with */
+	StartsWith = "STARTS_WITH",
+	/** Ends with */
+	EndsWith = "ENDS_WITH",
+	/** Greater than */
+	GreaterThan = "GREATER_THAN",
+	/** Less than */
+	LessThan = "LESS_THAN",
+	/** Greater than or equal to */
+	GreaterThanEqualTo = "GREATER_THAN_EQUAL_TO",
+	/** Less than or equal to */
+	LessThanEqualTo = "LESS_THAN_EQUAL_TO",
+	/** Equal to */
+	EqualTo = "EQUAL_TO",
+	/** Not equal to */
+	NotEqualTo = "NOT_EQUAL_TO",
+	/** Is between */
+	IsBetween = "IS_BETWEEN",
+	/** Is null */
+	IsNull = "IS_NULL",
+	/** Is not null */
+	IsNotNull = "IS_NOT_NULL"
+}
+/**
+ * Background format types for conditional formatting
+ * @group Visual Overrides
+ */
+export enum BackgroundFormatType {
+	/** Solid color background */
+	Solid = "SOLID",
+	/** Gradient background */
+	Gradient = "GRADIENT"
+}
+/**
+ * Comparison types for conditional formatting
+ * @group Visual Overrides
+ */
+export enum ConditionalFormattingComparisonType {
+	/** Value-based comparison */
+	ValueBased = "VALUE_BASED",
+	/** Column-based comparison */
+	ColumnBased = "COLUMN_BASED",
+	/** Parameter-based comparison */
+	ParameterBased = "PARAMETER_BASED"
+}
+/**
+ * A single conditional formatting rule row
+ * @group Visual Overrides
+ */
+export interface ConditionalFormattingRow {
+	/** Comparison operator */
+	operator: ConditionalFormattingOperator | string;
+	/** Value to compare against */
+	value?: string;
+	/** Range values for range-based comparisons */
+	rangeValues?: {
+		min: number;
+		max: number;
+	};
+	/** Plot the formatting as a band/area */
+	plotAsBand?: boolean;
+	/** Highlight this row if the condition is met */
+	isHighlightRow?: boolean;
+	/** Type of comparison: value-based, column-based, or parameter-based */
+	comparisonType?: ConditionalFormattingComparisonType | string;
+	/** Column ID to apply the formatting to (left-hand side) */
+	lhsColumnId?: string;
+	/** Column name to compare against (right-hand side) */
+	columnToCompare?: string;
+	/** Parameter ID to compare against */
+	comparisonParameterId?: string;
+	/** Font properties to apply (color, bold, italic, etc.) */
+	fontProperties?: FontProperties;
+	/** Background format type: solid color or gradient */
+	backgroundFormatType?: BackgroundFormatType | string;
+	/** Solid background color attributes */
+	solidBackgroundAttrs?: SolidBackgroundAttrs;
+	/** Gradient background attributes */
+	gradientBackgroundAttrs?: GradientBackgroundAttrs;
+}
+/**
+ * Conditional formatting configuration
+ * @group Visual Overrides
+ */
+export interface ConditionalFormatting {
+	/** Array of conditional formatting rules */
+	rows?: ConditionalFormattingRow[];
+}
+/**
+ * Color palette for charts
+ * @group Visual Overrides
+ */
+export interface ColorPalette {
+	/** Array of color values (hex codes or color names) */
+	colors?: string[];
+}
+/**
+ * Legend position options
+ * @group Visual Overrides
+ */
+export enum LegendPosition {
+	/** Position legend at the top */
+	Top = "top",
+	/** Position legend at the bottom */
+	Bottom = "bottom",
+	/** Position legend on the left */
+	Left = "left",
+	/** Position legend on the right */
+	Right = "right"
+}
+/**
+ * Table theme options
+ * @group Visual Overrides
+ */
+export enum TableTheme {
+	/** Outline theme */
+	Outline = "OUTLINE",
+	/** Row theme */
+	Row = "ROW",
+	/** Zebra theme */
+	Zebra = "ZEBRA"
+}
+/**
+ * Table content density options
+ * @group Visual Overrides
+ */
+export enum TableContentDensity {
+	/** Regular density */
+	Regular = "REGULAR",
+	/** Compact density */
+	Compact = "COMPACT"
+}
+/**
+ * Chart legend configuration
+ * @group Visual Overrides
+ */
+export interface ChartLegend {
+	/** Show or hide the legend */
+	show?: boolean;
+	/** Position of the legend */
+	position?: LegendPosition | string;
+	/** Color palette to use for legend colors */
+	colorPalette?: ColorPalette;
+}
+/**
+ * Filter for data labels
+ * @group Visual Overrides
+ */
+export interface DataLabelFilter {
+	/** Filter threshold value */
+	value?: number;
+	/** Filter operator */
+	operator?: DataLabelFilterOperator | string;
+}
+/**
+ * Data label configuration for a specific column
+ * @group Visual Overrides
+ */
+export interface ColumnDataLabel {
+	/** Column name to apply data label overrides to */
+	name: string;
+	/** Show or hide data labels for this column */
+	visible?: boolean;
+	/** Filter to apply to data labels */
+	filter?: DataLabelFilter | null;
+}
+/**
+ * Chart data label configuration
+ * @group Visual Overrides
+ */
+export interface ChartDataLabel {
+	/** Show labels for all data points */
+	allLabels?: boolean;
+	/** Show labels for stacked values */
+	stackLabels?: boolean;
+	/** Per-column data label configurations */
+	columnDataLabel?: ColumnDataLabel[];
+}
+/**
+ * Chart summaries and totals configuration
+ * @group Visual Overrides
+ */
+export interface ChartSummaries {
+	/** Show row totals */
+	showRowTotals?: boolean;
+	/** Show column totals */
+	showColumnTotals?: boolean;
+	/** Show row grand totals */
+	showRowGrandTotals?: boolean;
+	/** Show column grand totals */
+	showColumnGrandTotals?: boolean;
+}
+/**
+ * Gridline configuration
+ * @group Visual Overrides
+ */
+export interface GridLine {
+	/** Show vertical gridlines */
+	x?: boolean;
+	/** Show horizontal gridlines */
+	y?: boolean;
+}
+/**
+ * Chart display configuration
+ * @group Visual Overrides
+ */
+export interface ChartDisplay {
+	/** Summary and totals configuration */
+	summaries?: ChartSummaries;
+	/** Show regression line on chart */
+	regressionLine?: boolean;
+	/** Gridline visibility configuration */
+	gridLine?: GridLine;
+}
+/**
+ * Y-axis range configuration
+ * @group Visual Overrides
+ */
+export interface YAxisRange {
+	/** Minimum value for Y-axis */
+	min?: number;
+	/** Maximum value for Y-axis */
+	max?: number;
+}
+/**
+ * Chart axis configuration
+ * @group Visual Overrides
+ */
+export interface ChartAxis {
+	/** Column names to link to this axis */
+	linkedColumns?: string[];
+	/** Show the axis name */
+	showName?: boolean;
+	/** Show the axis label values */
+	showLabelValue?: boolean;
+	/** Y-axis range configuration */
+	yAxisRange?: YAxisRange;
+}
+/**
+ * Chart column override configuration
+ * @group Visual Overrides
+ */
+export interface ChartColumn {
+	/** Column name to apply overrides to */
+	name: string;
+	/** Color for the column (hex code) */
+	color?: string;
+	/** Conditional formatting rules to apply to the column */
+	conditionalFormatting?: ConditionalFormatting;
+}
+/**
+ * Chart visualization overrides
+ * @group Visual Overrides
+ */
+export interface ChartOverrides {
+	/** Legend configuration */
+	legend?: ChartLegend;
+	/** Data label configuration */
+	dataLabel?: ChartDataLabel;
+	/** Display properties (summaries, regression line, gridlines) */
+	display?: ChartDisplay;
+	/** Per-axis configurations */
+	axis?: ChartAxis[];
+	/** Per-column configurations */
+	columns?: ChartColumn[];
+	/** Update mask paths for partial updates */
+	updateMaskPaths?: string[];
+}
+/**
+ * Table column override configuration
+ * @group Visual Overrides
+ */
+export interface TableColumn {
+	/**
+	 * Name of the column to apply overrides to
+	 */
+	name: string;
+	/**
+	 * Enable or disable text wrapping for the column
+	 */
+	wrapText?: boolean;
+	/**
+	 * Show or hide the column
+	 */
+	show?: boolean;
+	/**
+	 * Conditional formatting rules to apply to the column
+	 */
+	conditionalFormatting?: ConditionalFormatting;
+}
+/**
+ * Table display configuration
+ * @group Visual Overrides
+ */
+export interface TableDisplay {
+	/** Table theme */
+	tableTheme?: TableTheme | string;
+	/** Table content density */
+	tableContentDensity?: TableContentDensity | string;
+}
+/**
+ * Column summary visibility configuration
+ * @group Visual Overrides
+ */
+export interface ColumnSummaryVisibility {
+	/** Column ID to control summary visibility for */
+	columnId: string;
+	/** Show or hide summary for this column */
+	visible: boolean;
+}
+/**
+ * Display summary configuration
+ * @group Visual Overrides
+ */
+export interface DisplaySummaryConfig {
+	/** Show all column summaries by default */
+	showAllSummaries?: boolean;
+	/** Per-column summary visibility overrides */
+	columnVisibility?: ColumnSummaryVisibility[];
+}
+/**
+ * Table visualization overrides
+ * @group Visual Overrides
+ */
+export interface TableOverrides {
+	/** Per-column configurations (properties, conditional formatting) */
+	columns?: TableColumn[];
+	/** Table display properties (theme, density) */
+	display?: TableDisplay;
+	/** Summary/headline column visibility configuration */
+	displaySummaryConfig?: DisplaySummaryConfig;
+	/** Update mask paths for partial updates */
+	updateMaskPaths?: string[];
+}
+/**
+ * Visualization overrides to customize chart and table rendering
+ * within embedded ThoughtSpot components.
+ *
+ * @group Visual Overrides
+ * @example
+ * ```js
+ * const embed = new AppEmbed('#tsEmbed', {
+ *   visualOverrides: {
+ *     chart: {
+ *       legend: { show: true, position: 'bottom' },
+ *       columns: [{ name: 'Revenue', color: '#1f77b4' }],
+ *     },
+ *     table: {
+ *       display: { tableTheme: 'ZEBRA', tableContentDensity: 'COMPACT' },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+export interface VisualizationOverrides {
+	/** Chart visualization overrides */
+	chart?: ChartOverrides;
+	/** Table visualization overrides */
+	table?: TableOverrides;
+}
 export interface LiveboardTab {
 	id: string;
 	name: string;
@@ -9362,6 +9785,7 @@ class TsEmbed {
 	 * @returns
 	 */
 	protected createEmbedEventResponder: (eventPort: MessagePort | void, eventType: EmbedEvent) => (payload: any) => void;
+	private shouldSkipEvent;
 	/**
 	 * Executes all registered event handlers for a particular event type
 	 * @param eventType The event type
@@ -10005,6 +10429,7 @@ export interface ConversationViewConfig extends SpotterEmbedViewConfig {
 export interface SpotterAppInitData extends DefaultAppInitData {
 	embedParams?: {
 		spotterSidebarConfig?: SpotterSidebarViewConfig;
+		visualOverridesParams?: VisualizationOverrides | null;
 	};
 }
 /**
@@ -10822,6 +11247,11 @@ export interface AppViewConfig extends AllEmbedViewConfig {
 	 * ```
 	 */
 	enableLiveboardDataCache?: boolean;
+	/**
+	 * Visual overrides to customize the chart or table properties.
+	 * @version SDK: 1.49.0 | ThoughtSpot: 26.6.0.cl
+	 */
+	visualOverrides?: VisualizationOverrides;
 }
 /**
  * APP_INIT data shape for AppEmbed.
@@ -12087,9 +12517,32 @@ export interface SearchViewConfig extends SearchLiveboardCommonViewConfig, Omit<
 	 * ```
 	 */
 	focusSearchBarOnRender?: boolean;
+	/**
+	 * Enable or disable Muze chart phase 1 GA
+	 *
+	 * Supported embed types: `SearchEmbed`
+	 * @version SDK: 1.49.0 | ThoughtSpot Cloud: 26.6.0.cl
+	 * @default false
+	 * @example
+	 * ```js
+	 * const embed = new SearchEmbed('#tsEmbed', {
+	 *    ... // other embed view config
+	 *    newChartsLibrary: true,
+	 * })
+	 * ```
+	 */
+	newChartsLibrary?: boolean;
+	/**
+	 * Visual overrides to customize the chart or table properties.
+	 * @version SDK: 1.49.0 | ThoughtSpot: 26.6.0.cl
+	 */
+	visualOverrides?: VisualizationOverrides;
 }
 export interface SearchAppInitData extends DefaultAppInitData {
 	searchOptions?: SearchOptions$1;
+	embedParams?: {
+		visualOverridesParams?: VisualizationOverrides | null;
+	};
 }
 /**
  * Embed ThoughtSpot search

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.47.2",
+    "version": "1.47.3",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",

package/src/embed/app.spec.ts

@@ -21,6 +21,8 @@ import {
     defaultParamsForPinboardEmbed,
     defaultParamsWithoutHiddenActions,
     expectUrlMatchesWithParams,
+    postMessageToParent,
+    testVisualOverridesInEmbed,
 } from '../test/test-utils';
 import { version } from '../../package.json';
 import * as config from '../config';
@@ -805,6 +807,53 @@ describe('App embed tests', () => {
         });
     });
 
+    test('Should add newChartsLibrary true to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            showPrimaryNavbar: false,
+            newChartsLibrary: true,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&muzeChartPhase1EnabledGA=true${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add newChartsLibrary false to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            showPrimaryNavbar: false,
+            newChartsLibrary: false,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&muzeChartPhase1EnabledGA=false${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should not add newChartsLibrary to the iframe src when not specified', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            showPrimaryNavbar: false,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
     test('Should add enableSearchAssist flagto the iframe src', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -1812,4 +1861,96 @@ describe('App Embed Default Height and Minimum Height Handling', () => {
     });
 });
 
+describe('AppEmbed visualOverrides tests', () => {
+    test('should include visualOverridesParams in APP_INIT when visualOverrides config is provided', async () => {
+        const visualOverrides = {
+            chart: {
+                legend: {
+                    show: true,
+                    position: 'bottom' as const,
+                },
+            },
+        };
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            visualOverrides,
+        } as AppViewConfig);
+
+        mockMessageChannel();
+        await testVisualOverridesInEmbed(appEmbed, visualOverrides);
+    });
+
+    test('should not include visualOverridesParams when visualOverrides is not provided', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+        } as AppViewConfig);
+
+        const mockEmbedEventPayload = {
+            type: EmbedEvent.APP_INIT,
+            data: {},
+        };
+
+        mockMessageChannel();
+        appEmbed.render();
+
+        const mockPort: any = {
+            postMessage: jest.fn(),
+        };
+
+        await executeAfterWait(() => {
+            const iframe = getIFrameEl();
+            postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+        });
+
+        await executeAfterWait(() => {
+            const callArgs = mockPort.postMessage.mock.calls[0][0];
+            expect(callArgs.type).toBe(EmbedEvent.APP_INIT);
+            if (callArgs.data.embedParams) {
+                expect(callArgs.data.embedParams.visualOverridesParams).toBeUndefined();
+            }
+        });
+    });
+
+    test('should pass visualOverrides with table config in AppEmbed', async () => {
+        const visualOverrides = {
+            table: {
+                display: {
+                    tableTheme: 'ZEBRA',
+                    tableContentDensity: 'COMPACT',
+                },
+            },
+        };
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            visualOverrides,
+        } as AppViewConfig);
+
+        mockMessageChannel();
+        await testVisualOverridesInEmbed(appEmbed, visualOverrides);
+    });
+
+    test('should pass visualOverrides with both chart and table configs', async () => {
+        const visualOverrides = {
+            chart: {
+                legend: {
+                    show: true,
+                    position: 'right' as const,
+                },
+            },
+            table: {
+                display: {
+                    tableTheme: 'STRIPED',
+                },
+            },
+        };
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            visualOverrides,
+        } as AppViewConfig);
+
+        mockMessageChannel();
+        await testVisualOverridesInEmbed(appEmbed, visualOverrides);
+    });
+});
+
 

package/src/embed/app.ts

@@ -18,6 +18,7 @@ import {
     MessagePayload,
     AllEmbedViewConfig,
     DefaultAppInitData,
+    VisualizationOverrides,
 } from '../types';
 import { V1Embed } from './ts-embed';
 import { SpotterChatViewConfig, SpotterSidebarViewConfig } from './conversation';
@@ -798,6 +799,12 @@ export interface AppViewConfig extends AllEmbedViewConfig {
      * ```
      */
     enableLiveboardDataCache?: boolean;
+
+    /**
+     * Visual overrides to customize the chart or table properties.
+     * @version SDK: 1.49.0 | ThoughtSpot: 26.6.0.cl
+     */
+    visualOverrides?: VisualizationOverrides;
 }
 
 /**
@@ -875,6 +882,7 @@ export class AppEmbed extends V1Embed {
             showLiveboardDescription = true,
             showMaskedFilterChip = false,
             isLiveboardMasterpiecesEnabled = false,
+            newChartsLibrary,
             hideHomepageLeftNav = false,
             modularHomeExperience = false,
             isLiveboardHeaderSticky = true,
@@ -920,6 +928,9 @@ export class AppEmbed extends V1Embed {
         params[Param.ShowLiveboardDescription] = !!showLiveboardDescription;
         params[Param.ShowMaskedFilterChip] = showMaskedFilterChip;
         params[Param.IsLiveboardMasterpiecesEnabled] = isLiveboardMasterpiecesEnabled;
+        if (newChartsLibrary !== undefined) {
+            params[Param.EnableNewChartLibrary] = newChartsLibrary;
+        }
         params[Param.LiveboardHeaderSticky] = isLiveboardHeaderSticky;
         params[Param.IsFullAppEmbed] = true;
         params[Param.LiveboardHeaderV2] = isLiveboardCompactHeaderEnabled;