UNPKG

@thoughtspot/visual-embed-sdk

Version:
1,595 lines (1,593 loc) 305 kB
// 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