@thoughtspot/visual-embed-sdk
Version:
ThoughtSpot Embed SDK
1,595 lines (1,593 loc) • 305 kB
TypeScript
// Generated by dts-bundle-generator v9.5.1
import React$1 from 'react';
/**
* The list of customization css variables. These
* are the only allowed variables possible.
*/
export interface CustomCssVariables {
/**
* Background color of the Liveboard, visualization, Search, and Answer pages.
*/
"--ts-var-root-background"?: string;
/**
* Color of the text on application pages.
*/
"--ts-var-root-color"?: string;
/**
* Font type for the text on application pages.
*/
"--ts-var-root-font-family"?: string;
/**
* Text transformation specification for UI elements in the app.
*/
"--ts-var-root-text-transform"?: string;
/**
* Font color of the text on toggle buttons such as
* **All**, **Answers**, and **Liveboards** on the Home page (Classic experience),
* the text color of the chart and table tiles on Home page (New modular Homepage
* experience), title text on the AI-generated charts and tables, and object titles on
* list pages such as *Liveboards* and *Answers*.
* The default color code is #2770EF.
*
*/
"--ts-var-application-color"?: string;
/**
* Background color of the top navigation panel.
*/
"--ts-var-nav-background"?: string;
/**
* Font color of the top navigation panel.
*/
"--ts-var-nav-color"?: string;
/**
* Background color of the *Search data* button.
*/
"--ts-var-search-data-button-background"?: string;
/**
* Color of the text on the *Search data* button.
*/
"--ts-var-search-data-button-font-color"?: string;
/**
* Font of the text on the *Search data* button.
*/
"--ts-var-search-data-button-font-family"?: string;
/**
* Font color of the text in the Search bar.
*/
"--ts-var-search-bar-text-font-color"?: string;
/**
* Font of the text in the Search bar.
*/
"--ts-var-search-bar-text-font-family"?: string;
/**
* Font style of the text in the Search bar.
*/
"--ts-var-search-bar-text-font-style"?: string;
/**
* Background color of the search bar.
*/
"--ts-var-search-bar-background"?: string;
/**
* Background color of the search suggestions panel.
*/
"--ts-var-search-auto-complete-background"?: string;
/**
* Background color of the navigation panel that allows you to undo, redo, and reset
* search operations.
*/
"--ts-var-search-navigation-button-background"?: string;
/**
* Background color of the navigation help text that appears at the bottom of the
* search suggestions panel.
*/
"--ts-var-search-bar-navigation-help-text-background"?: string;
/**
* Background color of the search suggestion block on hover.
*/
"--ts-var-search-bar-auto-complete-hover-background"?: string;
/**
* Font color of the text in the search suggestion panel.
*/
"--ts-var-search-auto-complete-font-color"?: string;
/**
* Font color of the sub-text that appears below the keyword in the search suggestion
* panel.
*/
"--ts-var-search-auto-complete-subtext-font-color"?: string;
/**
* Background color of the input box in the Spotter page.
*/
"--ts-var-spotter-input-background"?: string;
/**
* Background color of the previously asked prompt message in the Spotter page.
*/
"--ts-var-spotter-prompt-background"?: string;
/**
* Background color of the data panel.
*/
"--ts-var-answer-data-panel-background-color"?: string;
/**
* Background color of the vertical panel on the right side of the Answer page, which
* includes the options to edit charts and tables.
*/
"--ts-var-answer-edit-panel-background-color"?: string;
/**
* Background color of the chart switcher on search results and Answer pages.
*/
"--ts-var-answer-view-table-chart-switcher-background"?: string;
/**
* Background color of the currently selected chart type in the chart switcher.
*/
"--ts-var-answer-view-table-chart-switcher-active-background"?: string;
/**
* Border-radius of main buttons.
* For example, the *Search data* button in the top navigation panel.
*/
"--ts-var-button-border-radius"?: string;
/**
* Border-radius of small buttons such as secondary buttons.
* For example, share and favorite buttons.
*/
"--ts-var-button--icon-border-radius"?: string;
/**
* Font color of the text on primary buttons. For example, the primary buttons on
* Liveboard*, Answer, *Data* workspace, *SpotIQ*, or *Home* page.
*/
"--ts-var-button--primary-color"?: string;
/**
* Font family specification for the text on primary buttons.
*/
"--ts-var-button--primary--font-family"?: string;
/**
* Background color of the primary buttons. For example, the primary buttons such as
* Pin* and *Save*.
*/
"--ts-var-button--primary-background"?: string;
/**
* Background color of the primary buttons on hover.
*/
"--ts-var-button--primary--hover-background"?: string;
/**
* Backgroud color of the primary buttons when active.
*/
"--ts-var-button--primary--active-background"?: string;
/**
* Font color of the text on the secondary buttons.
*/
"--ts-var-button--secondary-color"?: string;
/**
* Font family specification for the text on the secondary buttons.
*/
"--ts-var-button--secondary--font-family"?: string;
/**
* Background color of the secondary buttons.
*/
"--ts-var-button--secondary-background"?: string;
/**
* Background color of the secondary button on hover.
*/
"--ts-var-button--secondary--hover-background"?: string;
/**
* Backgroud color of the secondary buttons when active.
*/
"--ts-var-button--secondary--active-background"?: string;
/**
* Font color of the tertiary button. For example, the *Undo*, *Redo*, and *Reset*
* buttons on the *Search* page.
*/
"--ts-var-button--tertiary-color"?: string;
/**
* Background color of the tertiary button.
*/
"--ts-var-button--tertiary-background"?: string;
/**
* Background color of the tertiary button when a user hovers over these buttons.
*/
"--ts-var-button--tertiary--hover-background"?: string;
/**
* Backgroud color of the tertiary buttons when active.
*/
"--ts-var-button--tertiary--active-background"?: string;
/**
* Font color of the title text of a visualization or Answer.
*/
"--ts-var-viz-title-color"?: string;
/**
* Font family specification for the title text of a visualization/Answer.
*/
"--ts-var-viz-title-font-family"?: string;
/**
* Text transformation specification for visualization and Answer titles.
*/
"--ts-var-viz-title-text-transform"?: string;
/**
* Font color of the description text and subtitle of a visualization or Answer.
*/
"--ts-var-viz-description-color"?: string;
/**
* Font family specification of description text and subtitle of a visualization or
* Answer.
*/
"--ts-var-viz-description-font-family"?: string;
/**
* Text transformation specification for description text and subtitle of a
* visualization or Answer.
*/
"--ts-var-viz-description-text-transform"?: string;
/**
* Border-radius for the visualization tiles and header panel on a Liveboard.
*/
"--ts-var-viz-border-radius"?: string;
/**
* Box shadow property for the visualization tiles and header panel on a Liveboard.
*/
"--ts-var-viz-box-shadow"?: string;
/**
* Background color of the visualization tiles and header panel on a Liveboard.
*/
"--ts-var-viz-background"?: string;
/**
* Background color of the legend on a visualization or Answer.
*/
"--ts-var-viz-legend-hover-background"?: string;
/**
* Background color of the selected chart type on the chart selection widget.
*/
"--ts-var-answer-chart-select-background"?: string;
/**
* Background color of the chart type element when a user hovers over a chart type on
* the chart selection widget.
*/
"--ts-var-answer-chart-hover-background"?: string;
/**
* Border-radius of filter chips.
*/
"--ts-var-chip-border-radius"?: string;
/**
* Shadow effect for filter chips.
*/
"--ts-var-chip-box-shadow"?: string;
/**
* Background color of filter chips.
*/
"--ts-var-chip-background"?: string;
/**
* Font color of the filter label when a filter chip is selected
*/
"--ts-var-chip--active-color"?: string;
/**
* Background color of the filter chips when selected.
*/
"--ts-var-chip--active-background"?: string;
/**
* Font color of the text on filter chips when hovered over.
*/
"--ts-var-chip--hover-color"?: string;
/**
* Background color of filter chips on hover.
*/
"--ts-var-chip--hover-background"?: string;
/**
* Font color of the text on filter chips.
*/
"--ts-var-chip-color"?: string;
/**
* Font family specification for the text on filter chips.
*/
"--ts-var-chip-title-font-family"?: string;
/**
* Font color of axis title on charts.
*/
"--ts-var-axis-title-color"?: string;
/**
* Font family specification for the X and Y axis title text.
*/
"--ts-var-axis-title-font-family"?: string;
/**
* Font color of the X and Y axis labels.
*/
"--ts-var-axis-data-label-color"?: string;
/**
* Font family specification for X and Y axis labels.
*/
"--ts-var-axis-data-label-font-family"?: string;
/**
* Font color of the menu items.
*/
"--ts-var-menu-color"?: string;
/**
* Background color of menu panels.
*/
"--ts-var-menu-background"?: string;
/**
* Font family specification for the menu items.
*/
"--ts-var-menu-font-family"?: string;
/**
* Text capitalization specification for the menu items.
*/
"--ts-var-menu-text-transform"?: string;
/**
* Background color for menu items on hover.
*/
"--ts-var-menu--hover-background"?: string;
/**
* Text color for selected menu items.
*/
"--ts-var-menu-selected-text-color"?: string;
/**
* Background color of the dialogs.
*/
"--ts-var-dialog-body-background"?: string;
/**
* Font color of the body text displayed on dialogs.
*/
"--ts-var-dialog-body-color"?: string;
/**
* Background color of the header text on dialogs.
*/
"--ts-var-dialog-header-background"?: string;
/**
* Font color of the header text on dialogs.
*/
"--ts-var-dialog-header-color"?: string;
/**
* Background color of the footer area on dialogs.
*/
"--ts-var-dialog-footer-background"?: string;
/**
* Background for selected state in list
*/
"--ts-var-list-selected-background"?: string;
/**
* Background for hover state in list
*/
"--ts-var-list-hover-background"?: string;
/**
* Background for hover state in segment control.
*/
"--ts-var-segment-control-hover-background"?: string;
/**
* Text color for slected item in modular home's watchlist.
*/
"--ts-var-home-watchlist-selected-text-color"?: string;
/**
* Text color for favorite carousel find your favorites card in modular home.
*/
"--ts-var-home-favorite-suggestion-card-text-color"?: string;
/**
* Icon color for favorite carousel find your favorites card in modular home.
*/
"--ts-var-home-favorite-suggestion-card-icon-color"?: string;
/**
* Background for favorite carousel find your favorites card in modular home.
*/
"--ts-var-home-favorite-suggestion-card-background"?: string;
/**
* Border color of checkbox in error state.
*/
"--ts-var-checkbox-error-border"?: string;
/**
* Border color of checkbox.
*/
"--ts-var-checkbox-border-color"?: string;
/**
* Border color of checkbox in hover state.
*/
"--ts-var-checkbox-hover-border"?: string;
/**
* Border and font color of checkbox in active state.
*/
"--ts-var-checkbox-active-color"?: string;
/**
* Border color and font color of checkbox in checked state.
*/
"--ts-var-checkbox-checked-color"?: string;
/**
* Border and font color of checkbox in disabled state.
*/
"--ts-var-checkbox-checked-disabled"?: string;
/**
* Background color of checkbox.
*/
"--ts-var-checkbox-background-color"?: string;
/**
* Background color of the layout in the Liveboard.
*/
"--ts-var-liveboard-layout-background"?: string;
/**
* Background color of the header in the Liveboard.
*/
"--ts-var-liveboard-header-background"?: string;
/**
* Font color of the header in the Liveboard.
*/
"--ts-var-liveboard-header-font-color"?: string;
/**
* Border color of the tiles in the Liveboard.
*/
"--ts-var-liveboard-tile-border-color"?: string;
/**
* Background color of the tiles in the Liveboard.
*/
"--ts-var-liveboard-tile-background"?: string;
/**
* Border radius of the tiles in the Liveboard.
*/
"--ts-var-liveboard-tile-border-radius"?: string;
/**
* Padding of the tiles in the Liveboard.
*/
"--ts-var-liveboard-tile-padding"?: string;
/**
* Background color of the table header in the Liveboard.
*/
"--ts-var-liveboard-tile-table-header-background"?: string;
/**
* Padding of the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-padding"?: string;
/**
* Font size of the title of the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-title-font-size"?: string;
/**
* Font weight of the title of the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-title-font-weight"?: string;
/**
* Font size of the title of the tiles inside the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-tile-title-font-size"?: string;
/**
* Font weight of the title of the tiles inside the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-tile-title-font-weight"?: string;
/**
* Padding of the group tiles in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-tile-padding"?: string;
/**
* Padding of the answer viz in the Liveboard.
*/
"--ts-var-liveboard-answer-viz-padding"?: string;
/**
* Background color of the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-background"?: string;
/**
* Border color of the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-border-color"?: string;
/**
* Font color of the heading of the note title in the Liveboard.
*/
"--ts-var-liveboard-notetitle-heading-font-color"?: string;
/**
* Font color of the body of the note title in the Liveboard.
*/
"--ts-var-liveboard-notetitle-body-font-color"?: string;
/**
* Font color of the title of the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-title-font-color"?: string;
/**
* Font color of the description of the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-description-font-color"?: string;
/**
* Font color of the title of the tiles inside the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-tile-title-font-color"?: string;
/**
* Font color of the description of the tiles inside the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-tile-description-font-color"?: string;
/**
* Background color of the tiles inside the groups in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-group-tile-background"?: string;
/**
* Background color of the filter chips in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-chip-background"?: string;
/**
* Font color of the filter chips in the Liveboard.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-chip-color"?: string;
/**
* Background color of the filter chips in the Liveboard on hover.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-chip--hover-background"?: string;
/**
* Background color of the filter chips in the Liveboard on active.
*
* Please enable the Liveboard styling and grouping feature in your ThoughtSpot instance and then set the isLiveboardStylingAndGrouping SDK flag to true to start modifying this CSS variable.
*/
"--ts-var-liveboard-chip--active-background"?: string;
/**
* Width of the side panel in the Liveboard.
*/
"--ts-var-side-panel-width"?: string;
/**
* Background color of the edit bar in the Liveboard.
*/
"--ts-var-liveboard-edit-bar-background"?: string;
/**
* Breakpoint for the dual column layout in the Liveboard.
*/
"--ts-var-liveboard-dual-column-breakpoint"?: string;
/**
* Breakpoint for the single column layout in the Liveboard.
*/
"--ts-var-liveboard-single-column-breakpoint"?: string;
/**
* Background color of the cross filter layout in the Liveboard.
*/
"--ts-var-liveboard-cross-filter-layout-background"?: string;
/**
* Border color of the active tab in the Liveboard.
*/
"--ts-var-liveboard-tab-active-border-color"?: string;
/**
* Font color of the hover tab in the Liveboard.
*/
"--ts-var-liveboard-tab-hover-color"?: string;
/**
* Font size of the title of the tiles in the Liveboard.
*/
"--ts-var-liveboard-tile-title-fontsize"?: string;
/**
* Font weight of the title of the tiles in the Liveboard.
*/
"--ts-var-liveboard-tile-title-fontweight"?: string;
/**
* Background color of the parameter chips in the Liveboard.
*/
"--ts-var-parameter-chip-background"?: string;
/**
* Font color of the parameter chips in the Liveboard.
*/
"--ts-var-parameter-chip-text-color"?: string;
/**
* Background color of the parameter chips in the Liveboard on hover.
*/
"--ts-var-parameter-chip-hover-background"?: string;
/**
* Font color of the parameter chips in the Liveboard on hover.
*/
"--ts-var-parameter-chip-hover-text-color"?: string;
/**
* Background color of the parameter chips in the Liveboard on active.
*/
"--ts-var-parameter-chip-active-background"?: string;
/**
* Font color of the parameter chips in the Liveboard on active.
*/
"--ts-var-parameter-chip-active-text-color"?: string;
/**
* Background color of the action button in the Liveboard header.
*/
"--ts-var-liveboard-header-action-button-background"?: string;
/**
* Font color of the action button in the Liveboard header.
*/
"--ts-var-liveboard-header-action-button-font-color"?: string;
/**
* Font color of the action button in the Liveboard header on hover.
*/
"--ts-var-liveboard-header-action-button-hover-color"?: string;
/**
* Font color of the action button in the Liveboard header on active.
*/
"--ts-var-liveboard-header-action-button-active-color"?: string;
/**
* Background color of the badge in the Liveboard header.
*/
"--ts-var-liveboard-header-badge-background"?: string;
/**
* Font color of the badge in the Liveboard header.
*/
"--ts-var-liveboard-header-badge-font-color"?: string;
/**
* Background color of the modified badge in the Liveboard header.
*/
"--ts-var-liveboard-header-badge-modified-background"?: string;
/**
* Font color of the modified badge in the Liveboard header.
*/
"--ts-var-liveboard-header-badge-modified-font-color"?: string;
/**
* Font color of the badge in the Liveboard header on hover.
*/
"--ts-var-liveboard-header-badge-hover-color"?: string;
/**
* Font color of the badge in the Liveboard header on active.
*/
"--ts-var-liveboard-header-badge-active-color"?: string;
/**
* Font color of the hero text in the KPI widget.
*/
"--ts-var-kpi-hero-color"?: string;
/**
* Font color of the comparison text in the KPI widget.
*/
"--ts-var-kpi-comparison-color"?: string;
/**
* Font color of the analyze text in the KPI widget.
*/
"--ts-var-kpi-analyze-text-color"?: string;
/**
* Font color of the legend title in the heatmap chart.
*/
"--ts-var-chart-heatmap-legend-title-color"?: string;
/**
* Font color of the legend label in the heatmap chart.
*/
"--ts-var-chart-heatmap-legend-label-color"?: string;
/**
* Font color of the legend title in the treemap chart.
*/
"--ts-var-chart-treemap-legend-title-color"?: string;
/**
* Font color of the legend label in the treemap chart.
*/
"--ts-var-chart-treemap-legend-label-color"?: string;
/**
* Color of the positive change in the KPI.
*/
"--ts-var-kpi-positive-change-color"?: string;
/**
* Color of the negative change in the KPI.
*/
"--ts-var-kpi-negative-change-color"?: string;
/**
* Background color of the change analysis insights.
*/
"--ts-var-change-analysis-insights-background"?: string;
/**
* Background color of the forecasting card in the SpotIQ analyze.
*/
"--ts-var-spotiq-analyze-forecasting-card-background"?: string;
/**
* Background color of the outlier card in the SpotIQ analyze.
*/
"--ts-var-spotiq-analyze-outlier-card-background"?: string;
/**
* Background color of the trend card in the SpotIQ analyze.
*/
"--ts-var-spotiq-analyze-trend-card-background"?: string;
/**
* Background color of the crosscorrelation card in the SpotIQ analyze.
*/
"--ts-var-spotiq-analyze-crosscorrelation-card-background"?: string;
/**
* Background color of the summary header in the CCA modal.
*/
"--ts-var-cca-modal-summary-header-background"?: string;
/**
* Width of the Spotter chat window.
*/
"--ts-var-spotter-chat-width"?: string;
}
export interface SessionInterface {
sessionId: string;
genNo: number;
acSession: {
sessionId: string;
genNo: number;
};
}
export interface UnderlyingDataPoint {
columnId: string;
dataValue: any;
}
declare class AnswerService {
private session;
private thoughtSpotHost;
private selectedPoints?;
private answer;
private tmlOverride;
/**
* Should not need to be called directly.
* @param session
* @param answer
* @param thoughtSpotHost
* @param selectedPoints
*/
constructor(session: SessionInterface, answer: any, thoughtSpotHost: string, selectedPoints?: VizPoint[]);
/**
* Get the details about the source used in the answer.
* This can be used to get the list of all columns in the data source for example.
*/
getSourceDetail(): Promise<any>;
/**
* Remove columnIds and return updated answer session.
* @param columnIds
* @returns
*/
removeColumns(columnIds: string[]): Promise<any>;
/**
* Add columnIds and return updated answer session.
* @param columnIds
* @returns
*/
addColumns(columnIds: string[]): Promise<any>;
/**
* Add columns by names and return updated answer session.
* @param columnNames
* @returns
* @example
* ```js
* embed.on(EmbedEvent.Data, async (e) => {
* const service = await embed.getAnswerService();
* await service.addColumnsByName([
* "col name 1",
* "col name 2"
* ]);
* console.log(await service.fetchData());
* });
*/
addColumnsByName(columnNames: string[]): Promise<any>;
/**
* Add a filter to the answer.
* @param columnName
* @param operator
* @param values
* @returns
*/
addFilter(columnName: string, operator: RuntimeFilterOp, values: RuntimeFilter["values"]): Promise<any>;
getSQLQuery(): Promise<string>;
/**
* Fetch data from the answer.
* @param offset
* @param size
* @returns
*/
fetchData(offset?: number, size?: number): Promise<{
columns: any;
data: any;
}>;
/**
* Fetch the data for the answer as a CSV blob. This might be
* quicker for larger data.
* @param userLocale
* @param includeInfo Include the CSV header in the output
* @returns Response
*/
fetchCSVBlob(userLocale?: string, includeInfo?: boolean): Promise<Response>;
/**
* Fetch the data for the answer as a PNG blob. This might be
* quicker for larger data.
* @param userLocale
* @param includeInfo
* @param omitBackground Omit the background in the PNG
* @param deviceScaleFactor The scale factor for the PNG
* @return Response
*/
fetchPNGBlob(userLocale?: string, omitBackground?: boolean, deviceScaleFactor?: number): Promise<Response>;
/**
* Just get the internal URL for this answer's data
* as a CSV blob.
* @param userLocale
* @param includeInfo
* @returns
*/
getFetchCSVBlobUrl(userLocale?: string, includeInfo?: boolean): string;
/**
* Just get the internal URL for this answer's data
* as a PNG blob.
* @param userLocale
* @param omitBackground
* @param deviceScaleFactor
*/
getFetchPNGBlobUrl(userLocale?: string, omitBackground?: boolean, deviceScaleFactor?: number): string;
/**
* Get underlying data given a point and the output column names.
* In case of a context menu action, the selectedPoints are
* automatically passed.
* @param outputColumnNames
* @param selectedPoints
* @example
* ```js
* embed.on(EmbedEvent.CustomAction, e => {
* const underlying = await e.answerService.getUnderlyingDataForPoint([
* 'col name 1' // The column should exist in the data source.
* ]);
* const data = await underlying.fetchData(0, 100);
* })
* ```
* @version SDK: 1.25.0| ThoughtSpot: 9.10.0.cl
*/
getUnderlyingDataForPoint(outputColumnNames: string[], selectedPoints?: UnderlyingDataPoint[]): Promise<AnswerService>;
/**
* Execute a custom graphql query in the context of the answer.
* @param query graphql query
* @param variables graphql variables
* @returns
*/
executeQuery(query: string, variables: any): Promise<any>;
/**
* Get the internal session details for the answer.
* @returns
*/
getSession(): SessionInterface;
getAnswer(): Promise<any>;
getTML(): Promise<any>;
addDisplayedVizToLiveboard(liveboardId: string): Promise<any>;
setTMLOverride(override: any): void;
}
declare enum AuthType {
/**
* No authentication on the SDK. Pass-through to the embedded App. Alias for
* `Passthrough`.
* @example
* ```js
* init({
* // ...
* authType: AuthType.None,
* });
* ```
*/
None = "None",
/**
* Passthrough SSO to the embedded application within the iframe. Requires least
* configuration, but may not be supported by all IDPs. This will behave like `None`
* if SSO is not configured on ThoughtSpot.
*
* To use this:
* Your SAML or OpenID provider must allow iframe redirects.
* For example, if you are using Okta as IdP, you can enable iframe embedding.
* @example
* ```js
* init({
* // ...
* authType: AuthType.EmbeddedSSO,
* });
* ```
* @version: SDK: 1.15.0 | ThoughtSpot: 8.8.0.cl
*/
EmbeddedSSO = "EmbeddedSSO",
/**
* SSO using SAML
* @deprecated Use {@link SAMLRedirect} instead
* @hidden
*/
SSO = "SSO_SAML",
/**
* SSO using SAML
* @deprecated Use {@link SAMLRedirect} instead
* @hidden
*/
SAML = "SSO_SAML",
/**
* SSO using SAML
* Makes the host application redirect to the SAML IdP. Use this
* if your IdP does not allow itself to be embedded.
*
* This redirects the host application to the SAML IdP. The host application
* will be redirected back to the ThoughtSpot app after authentication.
* @example
* ```js
* init({
* // ...
* authType: AuthType.SAMLRedirect,
* });
* ```
*
* This opens the SAML IdP in a popup window. The popup is triggered
* when the user clicks the trigger button. The popup window will be
* closed automatically after authentication.
* @example
* ```js
* init({
* // ...
* authType: AuthType.SAMLRedirect,
* authTriggerText: 'Login with SAML',
* authTriggerContainer: '#tsEmbed',
* inPopup: true,
* });
* ```
*
* Can also use the event to trigger the popup flow. Works the same
* as the above example.
* @example
* ```js
* const authEE = init({
* // ...
* authType: AuthType.SAMLRedirect,
* inPopup: true,
* });
*
* someButtonOnYourPage.addEventListener('click', () => {
* authEE.emit(AuthEvent.TRIGGER_SSO_POPUP);
* });
* ```
*/
SAMLRedirect = "SSO_SAML",
/**
* SSO using OIDC
* @hidden
* @deprecated Use {@link OIDCRedirect} instead
*/
OIDC = "SSO_OIDC",
/**
* SSO using OIDC
* Will make the host application redirect to the OIDC IdP.
* See code samples in {@link SAMLRedirect}.
*/
OIDCRedirect = "SSO_OIDC",
/**
* Trusted authentication server
* @hidden
* @deprecated Use {@link TrustedAuth} instead
*/
AuthServer = "AuthServer",
/**
* Trusted authentication server. Use your own authentication server
* which returns a bearer token, generated using the `secret_key` obtained
* from ThoughtSpot.
* @example
* ```js
* init({
* // ...
* authType: AuthType.TrustedAuthToken,
* getAuthToken: () => {
* return fetch('https://my-backend.app/ts-token')
* .then((response) => response.json())
* .then((data) => data.token);
* }
* });
* ```
*/
TrustedAuthToken = "AuthServer",
/**
* Trusted authentication server Cookieless, Use your own authentication
* server which returns a bearer token, generated using the `secret_key`
* obtained from ThoughtSpot. This uses a cookieless authentication
* approach, recommended to bypass the third-party cookie-blocking restriction
* implemented by some browsers.
* @example
* ```js
* init({
* // ...
* authType: AuthType.TrustedAuthTokenCookieless,
* getAuthToken: () => {
* return fetch('https://my-backend.app/ts-token')
* .then((response) => response.json())
* .then((data) => data.token);
* }
* ```
* @version SDK: 1.22.0| ThoughtSpot: 9.3.0.cl, 9.5.1.sw
*/
TrustedAuthTokenCookieless = "AuthServerCookieless",
/**
* Use the ThoughtSpot login API to authenticate to the cluster directly.
*
* Warning: This feature is primarily intended for developer testing. It is
* strongly advised not to use this authentication method in production.
*/
Basic = "Basic"
}
/**
*
* **Note**: This attribute is not supported in the classic (V1) homepage experience.
*
*/
export declare enum HomeLeftNavItem {
/**
* The *Search data* option in
* the *Insights* left navigation panel.
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
SearchData = "search-data",
/**
* The *Home* menu option in
* the *Insights* left navigation panel.
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
Home = "insights-home",
/**
* The *Liveboards* menu option in
* the *Insights* left navigation panel.
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
Liveboards = "liveboards",
/**
* The *Answers* menu option in
* the *Insights* left navigation panel.
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
Answers = "answers",
/**
* The *Monitor subscriptions* menu option in
* the *Insights* left navigation panel.
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
MonitorSubscription = "monitor-alerts",
/**
* The *SpotIQ analysis* menu option in
* the *Insights* left navigation panel.
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
SpotIQAnalysis = "spotiq-analysis",
/**
* The *Liveboard schedules* menu option in
* the *Insights* left navigation panel.
* @version SDK: 1.34.0| ThoughtSpot: 10.3.0.cl
*/
LiveboardSchedules = "liveboard-schedules",
/**
* The create option in the *Insights*
* left navigation panel.
* Available in the V3 navigation experience.
* @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
*/
Create = "create",
/**
* The *Spotter* menu option in the *Insights*
* left navigation panel.
* Available in the V3 navigation experience.
* @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
*/
Spotter = "spotter",
/**
* The *Favorites* section in the *Insights*
* left navigation panel.
* Available in the V3 navigation experience.
* @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
*/
Favorites = "favorites"
}
export type DOMSelector = string | HTMLElement;
/**
* inline customCSS within the {@link CustomisationsInterface}.
* Use {@link CustomCssVariables} or css rules.
*/
export interface customCssInterface {
/**
* The custom css variables, which can be set.
* The variables are available in the {@link CustomCssVariables}
* interface. For more information, see
* link:https://developers.thoughtspot.com/docs/css-variables-reference[CSS variable reference].
*/
variables?: CustomCssVariables;
/**
* Can be used to define a custom font face
* like:
* @example
* ```js
* rules_UNSTABLE?: {
* "@font-face": {
* "font-family": "custom-font",
* "src": url("/path/")
* };
* };
* ```
*
* Also, custom css rules outside of variables.
* @example
* ```js
* rules_UNSTABLE?: {
* ".thoughtspot_class_name": {
* "border-radius": "10px",
* margin: "20px"
* };
* };
* ```
*/
rules_UNSTABLE?: {
[selector: string]: {
[declaration: string]: string;
};
};
}
/**
* Styles within the {@link CustomisationsInterface}.
*/
export interface CustomStyles {
customCSSUrl?: string;
customCSS?: customCssInterface;
}
/**
* Configuration to define the customization on the Embedded
* ThoughtSpot components.
* You can customize styles, text strings, and icons.
* For more information, see link:https://developers.thoughtspot.com/docs/custom-css[CSS customization framework].
* @example
* ```js
* init({
* // ...
* customizations: {
* style: {
* customCSS: {
* variables: {},
* rules_UNSTABLE: {}
* }
* },
* content: {
* strings: {
* 'LIVEBOARDS': 'Dashboards',
* 'ANSWERS': 'Visualizations',
* 'Edit': 'Modify',
* 'Show underlying data': 'Show source data',
* 'SpotIQ': 'Insights',
* 'Monitor': 'Alerts',
* }
* },
* iconSpriteUrl: 'https://my-custom-icon-sprite.svg'
* }
* })
* ```
*/
export interface CustomisationsInterface {
style?: CustomStyles;
content?: {
/**
* @version SDK: 1.26.0 | 9.7.0.cl
*/
strings?: Record<string, any>;
stringIDs?: Record<string, string>;
stringIDsUrl?: string;
[key: string]: any;
};
iconSpriteUrl?: string;
}
/**
* The configuration object for embedding ThoughtSpot content.
* It includes the ThoughtSpot hostname or IP address,
* the type of authentication, and the authentication endpoint
* if a trusted authentication server is used.
* @group Authentication / Init
*/
export interface EmbedConfig {
/**
* The ThoughtSpot cluster hostname or IP address.
*/
thoughtSpotHost: string;
/**
* The authentication mechanism to use.
*/
authType: AuthType;
/**
* [AuthServer] The trusted authentication endpoint to use to get the
* authentication token. A `GET` request is made to the
* authentication API endpoint, which returns the token
* as a plaintext response. For trusted authentication,
* the `authEndpoint` or `getAuthToken` attribute is required.
*/
authEndpoint?: string;
/**
* [AuthServer] A function that invokes the trusted authentication endpoint
* and returns a Promise that resolves to the `auth token` string.
* For trusted authentication, the `authEndpoint` or `getAuthToken`
* attribute is required.
*
* It is advisable to fetch a new token inside this method and not
* reuse the old issued token. When auth expires this method is
* called again and if it is called with an older token, the authentication
* will not succeed.
*/
getAuthToken?: () => Promise<string>;
/**
* [AuthServer / Basic] The user name of the ThoughtSpot user. This
* attribute is required for trusted authentication.
*/
username?: string;
/**
* [Basic] The ThoughtSpot login password corresponding to the username
*
* Warning: This feature is primarily intended for developer testing. It is
* strongly advised not to use this authentication method in production.
*/
password?: string;
/**
* [SSO] For SSO Authentication, if `noRedirect` is set to true, it will
* open the SAML auth flow in a popup, instead of redirecting the browser in
* place.
* @default false
* @deprecated
*/
noRedirect?: boolean;
/**
* [SSO] For SSO Authentication, if `inPopup` is set to true, it will open
* the SAML auth flow in a popup, instead of redirecting the browser in place.
*
* Need to use this with `authTriggerContainer`. Or manually trigger
* the `AuthEvent.TRIGGER_SSO_POPUP` event on a user interaction.
* @default false
* @version SDK: 1.18.0
*/
inPopup?: boolean;
/**
* [SSO] For SSO Authentication, one can supply an optional path param;
* This will be the path on the host origin where the SAML flow will be
* terminated.
*
* Eg: "/dashboard", "#/foo" [Do not include the host]
* @version SDK: 1.10.2 | ThoughtSpot 8.2.0.cl, 8.4.1.sw
*/
redirectPath?: string;
/** @internal */
basepath?: string;
/**
* Boolean to define if the query parameters in the ThoughtSpot URL
* should be encoded in base64. This provides additional security to
* ThoughtSpot clusters against cross-site scripting attacks.
* @default false
*/
shouldEncodeUrlQueryParams?: boolean;
/**
* Suppress cookie access alert when third-party cookies are blocked by the
* user's browser. Third-party cookie blocking is the default behaviour on
* some web browsers like Safari. If you set this attribute to `true`,
* you are encouraged to handle `noCookieAccess` event, to show your own treatment
* in this case.
* @default false
*/
suppressNoCookieAccessAlert?: boolean;
/**
* Ignore the cookie access alert when third-party cookies are blocked by the
* user's browser. If you set this to `true`, the embedded iframe behaviour
* persists even in the case of a non-logged-in user.
* @default false
*/
ignoreNoCookieAccess?: boolean;
/**
* Re-login a user with the previous login options
* when a user session expires.
* @default false
*/
autoLogin?: boolean;
/**
* Disable redirection to the login page when the embedded session expires
* This flag is typically used alongside the combination of authentication modes such
* as {@link AuthType.AuthServer} and auto-login behavior {@link
* EmbedConfig.autoLogin}
* @version SDK: 1.9.3 | ThoughtSpot: 8.1.0.cl, 8.4.1.sw
* @default false
*/
disableLoginRedirect?: boolean;
/**
* This message is displayed in the embedded view when a user login fails.
* @version SDK: 1.10.1 | ThoughtSpot: 8.2.0.cl, 8.4.1.sw
*/
loginFailedMessage?: string;
/**
* Calls the prefetch method internally when set to `true`
* @default false
*/
callPrefetch?: boolean;
/**
* When there are multiple objects embedded, queue the rendering of embedded objects
* to start after the previous embed's render is complete. This helps improve
* performance by decreasing the load on the browser.
* @Version SDK: 1.5.0 | ThoughtSpot: ts7.oct.cl, 7.2.1
* @default false
*/
queueMultiRenders?: boolean;
/**
* [AuthServer|Basic] Detect if third-party party cookies are enabled by doing an
* additional call. This is slower and should be avoided. Listen to the
* `NO_COOKIE_ACCESS` event to handle the situation.
*
* This is slightly slower than letting the browser handle the cookie check, as it
* involves an extra network call.
* @version SDK: 1.10.4 | ThoughtSpot: 8.2.0.cl, 8.4.1.sw
*/
detectCookieAccessSlow?: boolean;
/**
* Hide the `beta` alert warning message for SearchEmbed.
* @version SDK: 1.12.0 | ThoughtSpot: 8.4.0.cl, 8.4.1.sw*
*/
suppressSearchEmbedBetaWarning?: boolean;
/**
* Hide `beta` alert warning message for SageEmbed.
*
*/
suppressSageEmbedBetaWarning?: boolean;
/**
* Custom style params for embed Config.
* @version SDK: 1.17.0 | ThoughtSpot: 8.9.0.cl, 9.0.1.sw
*/
customizations?: CustomisationsInterface;
/**
* For `inPopup` SAMLRedirect or OIDCRedirect authentication, we need a
* button that the user can click to trigger the flow.
* This attribute sets a containing element for that button.
* @example
* ```js
* init({
* authType: AuthType.SAMLRedirect,
* inPopup: true,
* authTriggerContainer: '#auth-trigger-container'
* })
* ```
* @version SDK: 1.17.0 | ThoughtSpot: 8.9.0.cl, 9.0.1.sw
*/
authTriggerContainer?: string | HTMLElement;
/**
* Specify that we want to use the `AuthEvent.TRIGGER_SSO_POPUP` event to trigger
* SAML popup. This is useful when you want to trigger the popup on a custom user
* action.
*
*/
useEventForSAMLPopup?: boolean;
/**
* Text to show in the button which triggers the popup auth flow.
* Default: `Authorize`.
* @version SDK: 1.17.0 | ThoughtSpot: 8.9.0.cl, 9.0.1.sw
*/
authTriggerText?: string;
/**
* Prevent users from accessing the full application or ThoughtSpot application pages
* access to the embedded application users
* outside of the iframe.
* @default true
* @version SDK: 1.22.0 | ThoughtSpot: 9.3.0.cl, 9.5.1.sw
*/
blockNonEmbedFullAppAccess?: boolean;
/**
* Host config in case embedded app is inside TS app itself
* @hidden
*/
hostConfig?: {
hostUserGuid: string;
hostClusterId: string;
hostClusterName: string;
};
/**
* Pendo API key to enable Pendo tracking to your own subscription, the key
* is added as an additional key to the embed, as per this link:https://support.pendo.io/hc/en-us/articles/360032201951-Send-data-to-multiple-subscriptions[document].
* @version SDK: 1.27.0 | ThoughtSpot: 9.8.0.cl
*/
pendoTrackingKey?: string;
/**
* If passed as true all alerts will be suppressed in the embedded app.
* @version SDK: 1.26.2 | ThoughtSpot: *
*/
suppressErrorAlerts?: boolean;
/**
* Suppress or show specific types of logs in the console output.
* For example, `LogLevel.ERROR` shows only Visual Embed SDK and
* ThoughtSpot application errors and suppresses
* other logs such as warnings, information alerts,
* and debug messages in the console output.
*
* @default LogLevel.ERROR
* @example
* ```js
* init({
* ...embedConfig,
* logLevel: LogLevel.SILENT
* })
* ```
* @version SDK: 1.26.7 | ThoughtSpot: 9.10.0.cl
*/
logLevel?: LogLevel;
/**
* Disables the Mixpanel tracking from the SDK.
* @version SDK: 1.27.9
*/
disableSDKTracking?: boolean;
/**
* Overrides default/user preferred locale for date formatting
* @version SDK: 1.28.4 | ThoughtSpot: 10.0.0.cl, 9.5.0.sw
*/
dateFormatLocale?: string;
/**
* Overrides default/user preferred locale for number formatting
* @version SDK: 1.28.4 | ThoughtSpot: 10.0.0.cl, 9.5.0.sw
*/
numberFormatLocale?: string;
/**
* Format to be used for currency when currency format is set to infer from browser
* @version SDK: 1.28.4 | ThoughtSpot: 10.0.0.cl, 9.5.0.sw
*/
currencyFormat?: string;
/**
* This flag is used to disable the token verification in the SDK.
* Enabling this flag will also disable the caching of the token.
* @hidden
* @example
* ```js
* init({
* ...embedConfig,
* disableTokenVerification : true
* })
* ```
* @version SDK: 1.28.5 | ThoughtSpot: 9.10.0.cl, 10.1.0.sw
*/
disableTokenVerification?: boolean;
/**
* This flag is used to disable showing the login failure page in the embedded app.
* @version SDK 1.32.3 | ThoughtSpot: 10.1.0.cl, 10.1.0.sw
*/
disableLoginFailurePage?: boolean;
/**
* This is an object (key/val) of override flags which will be applied
* to the internal embedded object. This can be used to add any
* URL flag.
* Warning: This option is for advanced use only and is used internally
* to control embed behavior in non-regular ways. We do not publish the
* list of supported keys and values associated with each.
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* additionalFlags: {
* flag1: 'value1',
* flag2: 'value2'
* }
* });
* ```
* @version SDK: 1.33.5 | ThoughtSpot: *
*/
additionalFlags?: {
[key: string]: string | number | boolean;
};
/**
* This is an object (key/val) for customVariables being
* used by the third party tool's script.
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* customVariablesForThirdPartyTools: {
* key1: 'value1',
* key2: 'value2'
* }
* });
* ```
* @version SDK 1.37.0 | ThoughtSpot: 10.8.0.cl
*/
customVariablesForThirdPartyTools?: Record<string, any>;
disablePreauthCache?: boolean;
/**
* Disable fullscreen presentation mode functionality. When enabled, prevents entering
* and exiting fullscreen mode for embedded visualizations during presentations.
* @default true (feature is disabled by default)
* @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
* @example
* ```js
* init({
* ... // other embed config options
* disableFullscreenPresentation: false, // enables the feature
* })
* ```
*/
disableFullscreenPresentation?: boolean;
/**
* Custom Actions allows users to define interactive UI actions (like buttons or menu
* items) that appear in ThoughtSpot's visualizations, answers, and Liveboards. These
* actions enable users to trigger custom workflows — such as navigating to an
* external app, calling an API, or opening a modal — based on the data context of
* what they clicked can be used to trigger custom logic when the action is clicked.
* @version SDK: 1.43.0 | ThoughtSpot: 10.14.0.cl
* @example
* ```js
* import { CustomActionPosition, CustomActionTarget } from '@thoughtspot/visual-embed-sdk';
* init({
* ... // other embed config options
* customActions: [
* {
* name: 'customAction',
* id: 'customAction',
* target: CustomActionTarget.VIZ,
* position: CustomActionPosition.PRIMARY,
* }
* }
* ]
* })
* ```
*/
customActions?: CustomAction[];
/**
* Wait for the cleanup to be completed before destroying the embed.
* @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
* @default false
*/
waitForCleanupOnDestroy?: boolean;
/**
* The timeout for the cleanup to be completed before destroying the embed.
* @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
* @default 5000
*/
cleanupTimeout?: number;
}
export interface LayoutConfig {
}
/**
* Embedded iframe configuration
* @group Embed components
*/
export interface FrameParams {
/**
* The width of the iframe (unit is pixels if numeric).
*/
width?: number | string;
/**
* The height of the iframe (unit is pixels if numeric).
*/
height?: number | string;
/**
* Set to 'lazy' to enable lazy loading of the embedded TS frame.
* This will defer loading of the frame until it comes into the
* viewport. This is useful for performance optimization.
*/
loading?: "lazy" | "eager" | "auto";
/**
* This parameters will be passed on the iframe
* as is.
*/
[key: string]: string | number | boolean | undefined;
}
/**
* The common configuration object for an embedded view.
*/
export interface BaseViewConfig extends ApiInterceptFlags {
/**
* @hidden
*/
layoutConfig?: LayoutConfig;
/**
* The width and height dimensions to render an embedded
* object inside your app. Specify the values in pixels or percentage.
*
* Supported embed types: `AppEmbed`, `LiveboardEmbed`, `SageEmbed`, `SearchEmbed`, `SpotterAgentEmbed`, `SpotterEmbed`, `SearchBarEmbed`
* @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 7.2.1
* @example
* ```js
* // Replace <EmbedComponent> with embed component name. For example, AppEmbed, SearchEmbed, or LiveboardEmbed
* const embed = new <EmbedComponent>('#tsEmbed', {
* ... // other embed view config
* frameParams: {
* width: '500px' | '50%',
* height: '400px' | '60%',
* },
* })
* ```
*/
frameParams?: FrameParams;
/**
* @hidden
*/
theme?: string;
/**
* @hidden
*/
styleSheet__unstable?: string;
/**
* The list of