Skip to content

code-samples.adoc

Latest commit

 

History

History
325 lines (285 loc) · 9.45 KB

code-samples.adoc

File metadata and controls

325 lines (285 loc) · 9.45 KB

Code samples

Table of Contents

This page contains code samples to help you embed ThoughtSpot features and data and build your applications.

Visual Embed SDK

You can use the following code snippets to build your code and embed ThoughtSpot content in your host application.

Embed ThoughtSpot Search

The following example shows how to embed the ThoughtSpot Search page:

import {
    SearchEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';
// If not using npm, use the following for an ES6 standard import:
// from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
init({
    thoughtSpotHost: "<%=tshost%>",
    authType: AuthType.EmbeddedSSO,
});
const searchEmbed = new SearchEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    dataSources: ['4f289824-e301-4001-ad06-8888f69c4748'],
    collapseDataSources: true,
});
searchEmbed.render();

The following example shows how to embed ThoughtSpot search bar:

import {
    SearchBarEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';
// If not using npm, use the following for an ES6 standard import:
// from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
init({
    thoughtSpotHost: "<%=tshost%>",
    authType: AuthType.EmbeddedSSO,
});
const searchBarEmbed = new SearchBarEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    dataSources: ['4f289824-e301-4001-ad06-8888f69c4748'],
});
searchBarEmbed.render();

Embed charts and tables

import {
    LiveboardEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';
// If not using npm, use the following for an ES6 standard import:
// from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
init({
    thoughtSpotHost: '<%=tshost%>',
    authType: AuthType.EmbeddedSSO,
});
const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    liveboardId: '6294b4fc-c289-412a-b458-073fcf6e4516',
    vizId: '28b73b4a-1341-4535-ab71-f76b6fe7bf92',
});
liveboardEmbed.render();

Embed a Liveboard

import {
    LiveboardEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';
// If not using npm, use the following for an ES6 standard import:
// from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
init({
    thoughtSpotHost: '<%=tshost%>',
    authType: AuthType.EmbeddedSSO,
});
const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    liveboardId: 'f4a4e205-3b43-4b77-8ec0-8723da49ce1d',
});
liveboardEmbed.render();

Embed full application

import {
    AppEmbed,
    Page,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';
// If not using npm, use the following for an ES6 standard import:
// from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
init({
    thoughtSpotHost: '<%=tshost%>',
    authType: AuthType.EmbeddedSSO,
});
const appEmbed = new AppEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    pageId: Page.Data,
});
appEmbed.render();

Event trigger

The following example shows how to trigger an event from the embedded ThoughtSpot interface:

searchEmbed.on(EmbedEvent.VizPointDoubleClick, (payload) => {
   console.log(payload);
   const clickedPoint = payload.data.clickedPoint;
   const selectedPoint = payload.data.selectedPoints;
   console.log('>>> called', clickedPoint);
   embed.trigger(HostEvent.DrillDown, {
      points: {
         clickedPoint,
         selectedPoints: selectedPoint
      },
      autoDrillDown: true,

   })
})

Event trigger on React components

import { HostEvent } from '@thoughtspot/visual-embed-sdk';
import { LiveboardEmbed, useEmbedRef } from '@thoughtspot/visual-embed-sdk/react';

const MyComponent = () => {
    const embedRef = useEmbedRef();
    const onLiveboardRendered = () => {
        embedRef.current.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
    };

    return (
        <LiveboardEmbed
            ref={embedRef}
            liveboardId="<liveboard-guid>"
            onLiveboardRendered={onLiveboardRendered}
        />
    );
};

REST APIs

The following examples show how to call REST APIs to query and import data using Javascript.

Search data API

export const getSearchData = async (worksheetId, search) => {
    console.log(`Getting data from the SearchAPI from Worksheet ${worksheetId} with search ${search}`);
    let getSearchDataURL = `${store_state.<ThoughtSpot-Host>}/callosum/v1/tspublic/v1/searchdata?`;
    getSearchDataURL += `"batchSize=-1&data_source_guid=${worksheetId}&query_string=${search}`;
    return await fetch(
            encodeURI(getSearchDataURL), {
                method: 'POST',
                headers: {
                    "Accept": "application/json",
                    "X-Requested-By": "ThoughtSpot"
                },
                credentials: "include",
            })
        .then(response => response.json())
        .then(data => data)
        .catch(error => console.error(`Error getting search data ${error}`));
}

Embed visualization data from a Liveboard

export const getLiveboardData = async (liveboardId, vizIds) => {
    // Returns visualization data
    console.log(`Getting data from Liveboard ${liveboardId} and visualization(s) ${vizIds}`)
    let getLiveboardDataURL = `${store_state.<ThoughtSpot-Host>}/callosum/v1/tspublic/v1/pinboarddata?batchSize=-1&id=${liveboardId}`;
    if (vizIds) { // if vizIds were specified, they are optional
        if (!(Array.isArray(vizIds))) {
            vizIds = [vizIds];
        }
        // Supports only string and array
        // Handle invalid types
        const formattedVizIds = `["${vizIds.join('","')}"]`;
        getLiveboardDataURL += '&vizid=' + formattedVizIds;
    }
    return await fetch(encodeURI(getLiveboardDataURL), {
        method: 'POST',
        headers: {
            "Accept": "application/json",
            "X-Requested-By": "ThoughtSpot"
        },
        credentials: "include"
    }).then(response => response.json()).then(data => data).catch(error => {
        console.error(`Unable to get the visualization list for Liveboard ${liveboardId}: ${error}`);
    });
}

Get a list of visualizations on a Liveboard

export const getVisualizationList = async (liveboardId) => {
    // Returns a list of visualizations pinned on a Liveboard
    const vizMetadataListURL = store_state.<ThoughtSpot-Host> + "/callosum/v1/tspublic/v1/metadata/listvizheaders?id=" + liveboardId;
    return await fetch(vizMetadataListURL, {
        method: 'GET',
        headers: {
            "Accept": "application/json",
            "X-Requested-By": "ThoughtSpot"
        },
        credentials: "include"
    }).then(response => response.json()).then(data => data).catch(error => {
        console.error("Unable to get the visualization list for Liveboard " + liveboardId + ": " + error)
    });
}

Get a list of Liveboards for a user

export const getLiveboardList = async () => {
    // Returns a list of Liveboards
    const liveboardMetadataListURL = store_state.<ThoughtSpot-Host> + "/callosum/v1/tspublic/v1/metadata/listobjectheaders?" + "type=PINBOARD_ANSWER_BOOK" + "&batchsize=-1";
    return await fetch(liveboardMetadataListURL, {
        method: 'GET',
        headers: {
            "Accept": "application/json",
            "X-Requested-By": "ThoughtSpot"
        },
        credentials: "include"
    }).then(response => response.json()).then(data => data).catch(error => {
        console.error("Unable to get the Liveboard list: " + error)
    });
}

For more REST API examples, go to REST API and TML Python library and examples.

Custom actions