How to embed Live Analytics to your React-based web app with ThoughtSpot Everywhere

ThoughtSpot Everywhere provides SDKs to make embedding analytics into your application easy. In addition to the more general JavaScript components for embedding ThoughtSpot, developers can also use React-specific components for those writing React applications. Using the React components you can quickly embed analytics with just a few lines of code.  

Installing and importing the components

Before you can use the components in your code, you have to include the SDK in your project and then import it into your React pages.

To install the SDK, use the Node Package Manager (NPM) or download via the NPM page.  The command to install is 

npm i @thoughtspot/visual-embed-sdk

Once installed, you can use 

npm ls

to verify the SDK is installed and the version you have.  It should look something like the following (your version may differ.)

+-- @thoughtspot/[email protected]

Now that you have the SDK installed, you need to import the components. This step can be a little tricky, mainly because the JS components and React components share the same name.  The following example shows the import of the standard types and the React components.  

// import types and functions

import {

 AuthType,

 init,

 Page,

} from "@thoughtspot/visual-embed-sdk";

// import React components

import {

 SearchEmbed,

 PinboardEmbed,

 AppEmbed,

} from "@thoughtspot/visual-embed-sdk/lib/src/react";

Note:  Because the names of the React components and the Javascript components are the same, if you import the embed components (e.g. SearchEmbed) without using /lib/src/react you will get an error when trying to use the component.  

Using the components

Now that you have the components, you can use them as you would other React components.  There are components for SearchEmbed, PinboardEmbed, and FullEmbed. The following example shows how to use the SearchEmbed:

const searchOptions = {

 searchTokenString: '[sales] [product type]',

 executeSearch: true,

}

<SearchEmbed

 frameParams={{height: "80vw"}}

 dataSources={["cd252e5c-b552-49a8-821d-3eadaa049cca"]}

 collapseDataSources={true}

 searchOptions={searchOptions}

/>

The different properties are the same as you find documented for the JS components and in the playground.

The React components also support custom actions. The easiest way to use them is to declare a function like the following:

const onCustomAction = (actionEvent) => {

  // Do something with actionEvent.

};

Then you use the function by specifying it as a property:

<SearchEmbed

 frameParams={{height: "80vw"}}

 dataSources={["cd252e5c-b552-49a8-821d-3eadaa049cca"]}

 collapseDataSources={true}

 searchOptions={searchOptions}

 onCustomAction={onCustomAction}

/>

Test for yourself on the Developer Playground today

That’s all it takes to use the ThoughtSpot Visual Embed SDK components in your React application. To make it even easier, you can use the Developers Playground to test out a component and then convert it to a react component with some simply copying of values.  

To stay up to date with the latest code, don’t forget to star and follow the GitHub repository, and join the developer community.  For general information on embedding with ThoughtSpot Everywhere and the Visual SDK, see the documentation.  Finally, additional tutorials and examples are available on the Developers portal.