visualization

visualization-embed

This is a small example of how embed visualization into your application.

Key Usage

import { AuthType, init } from "@thoughtspot/visual-embed-sdk";
import { LiveboardEmbed, RuntimeFilterOp } from "@thoughtspot/visual-embed-sdk";

init({
  thoughtSpotHost: "https://your-instance.thoughtspot.cloud",
  authType: AuthType.Basic,
  username: "your-username",
  password: "your-password",
});

// Embed a single visualization with a runtime filter
const embed = new LiveboardEmbed(document.getElementById("ts-embed"), {
  frameParams: { width: "100%", height: "100%" },
  liveboardId: "your-liveboard-id",
  vizId: "your-viz-id",
  runtimeFilters: [
    {
      columnName: "state",
      operator: RuntimeFilterOp.EQ,
      values: ["michigan"],
    },
  ],
});
embed.render();

Demo

Open in Codesandbox

Documentation

• API Reference for embedding visualization.

Environment

The .env file contains values for runing the demo. You can use .env.sample to create your own environment file

Run locally

$ git clone https://github.com/thoughtspot/developer-examples
$ cd visual-embed/visualization
$ create .env file

$ npm i

$ npm run dev

Structure

• src/pages Includes codes to embed visalization with multiple options.

Demo

This example includes demos for below scenarios

• Embedding via LiveboardEmbed Class
• Embedding via LiveboardEmbed React component

Technology labels

• React
• Typescript