Skip to content

akashmohapatra/visual-embed-sdk

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ThoughtSpot


ThoughtSpot Visual Embed SDK Coverage Status npm (scoped with tag)

SDK to embed ThoughtSpot into your web apps.


Usage

The SDK is compatible with ThoughtSpot SW version >= 7.1 and ThoughtSpot Cloud.

Install the Visual Embed SDK from NPM:

npm i @thoughtspot/visual-embed-sdk

The SDK is written in TypeScript and is also provided both as ES Module (ESM) and Universal Module Definition (UMD) modules, allowing you to use it in a variety of environments. For example,...

// ESM via NPM
import * as TsEmbedSDK from '@thoughtspot/visual-embed-sdk';

// NPM <script>
<script src='https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.js'></script>

// ES6 from web
import { LiveboardEmbed, AuthType, init } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';

Live Playground

Visit our code playground.


Full API Reference


Quick Start

The ThoughtSpot Embed SDK allows you to embed the ThoughtSpot search experience, liveboards, visualizations or the even full app version.

Embedded Search

// NPM
import { SearchEmbed, AuthType, init } from '@thoughtspot/visual-embed-sdk';
// or ES6
// import { SearchEmbed, AuthType, init } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';

init({
    thoughtSpotHost: '<%=tshost%>',
    authType: AuthType.None,
});

const searchEmbed = new SearchEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
});

searchEmbed.render();

Embedded Liveboard & Visualization

// NPM
import { LiveboardEmbed, AuthType, init } from '@thoughtspot/visual-embed-sdk';
// or ES6
// import { LiveboardEmbed, AuthType, init } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';

init({
    thoughtSpotHost: '<%=tshost%>',
    authType: AuthType.None,
});

const liveboardEmbed = new LiveboardEmbed(
    document.getElementById('ts-embed'),
    {
        frameParams: {
            width: '100%',
            height: '100%',
        },
        liveboardId: '<%=liveboardGUID%>',
        vizId: '<%=vizGUID%>',
    },
});

liveboardEmbed.render();

Embedded Full App

// NPM
import { AppEmbed, Page, AuthType, init } from '@thoughtspot/visual-embed-sdk';
// or ES6
// import { AppEmbed, AuthType, init } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';

init({
    thoughtSpotHost: '<%=tshost%>',
    authType: AuthType.None,
});

const appEmbed = new AppEmbed(
    document.getElementById('ts-embed'),
    {
        frameParams: {
            width: '100%',
            height: '100%',
        },
        pageId: Page.Data,
    });

appEmbed.render();

React Components

All the above flavors of embedding are also provided as React components for your convenience. The constructor options are passed as props and the event listeners can be attached using on<EventName> convention.

Search Component

import { init } from '@thoughtspot/visual-embed-sdk';
import { SearchEmbed } from '@thoughtspot/visual-embed-sdk/react';

// If you are using Webpack 4 (which is the default when using create-react-app v4), you would need to import
// the React components using the below:
import { SearchEmbed } from '@thoughtspot/visual-embed-sdk/lib/src/react';

init({
    thoughtSpotHost: '<%=tshost%>',
    authType: AuthType.None,
});

const MyComponent = ({ dataSources }) => {
    const onCustomAction = (actionEvent) => {
        // Do something with actionEvent.
    };
    
    return <SearchEmbed dataSources={dataSources} onCustomAction={onCustomAction} />
}



Visual-Embed-SDK, © ThoughtSpot, Inc. 2022

Packages

No packages published

Languages

  • HTML 48.8%
  • TypeScript 23.5%
  • CSS 19.7%
  • Handlebars 5.4%
  • JavaScript 2.6%