ashish-sdk
Version:
ThoughtSpot Embed SDK
110 lines • 4.34 kB
JavaScript
/**
* Copyright (c) 2021
*
* Embed a ThoughtSpot pinboard or visualization
* https://developers.thoughtspot.com/docs/?pageid=embed-pinboard
* https://developers.thoughtspot.com/docs/?pageid=embed-a-viz
*
* @summary Pinboard & visualization embed
* @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
*/
import { ERROR_MESSAGE } from '../errors';
import { EmbedEvent, Param, } from '../types';
import { getFilterQuery, getQueryParamString } from '../utils';
import { V1Embed } from './ts-embed';
/**
* Embed a ThoughtSpot pinboard or visualization
* @Category Pinboards and Charts
*/
export class PinboardEmbed extends V1Embed {
// eslint-disable-next-line no-useless-constructor
constructor(domSelector, viewConfig) {
super(domSelector, viewConfig);
this.defaultHeight = 500;
/**
* Set the iframe height as per the computed height received
* from the ThoughtSpot app.
* @param data The event payload
*/
this.updateIFrameHeight = (data) => {
this.setIFrameHeight(Math.max(data.data, this.defaultHeight));
};
this.embedIframeCenter = (data, responder) => {
const obj = this.getIframeCenter();
responder({ type: EmbedEvent.EmbedIframeCenter, data: obj });
};
this.handleRouteChangeFullHeightPinboard = (data) => {
if (data.data.canvasState !== 'EMBED' &&
data.data.canvasState !== 'pinboard') {
this.setIFrameHeight(this.defaultHeight);
}
};
}
/**
* Construct a map of params to be passed on to the
* embedded pinboard or visualization.
*/
getEmbedParams() {
const params = this.getBaseQueryParams();
const { enableVizTransformations, fullHeight, preventPinboardFilterRemoval, defaultHeight, pinboardVisibleVizs, } = this.viewConfig;
if (fullHeight === true) {
params[Param.fullHeight] = true;
}
if (defaultHeight) {
this.defaultHeight = defaultHeight;
}
if (enableVizTransformations !== undefined) {
params[Param.EnableVizTransformations] = enableVizTransformations.toString();
}
if (preventPinboardFilterRemoval) {
params[Param.preventPinboardFilterRemoval] = true;
}
if (pinboardVisibleVizs) {
params[Param.PinboardVisibleVizs] = pinboardVisibleVizs;
}
params[Param.livedBoardEmbed] = true;
const queryParams = getQueryParamString(params, true);
return queryParams;
}
/**
* Construct the URL of the embedded ThoughtSpot pinboard or visualization
* to be loaded within the iframe.
* @param pinboardId The GUID of the pinboard.
* @param vizId The optional GUID of a visualization within the pinboard.
* @param runtimeFilters A list of runtime filters to be applied to
* the pinboard or visualization on load.
*/
getIFrameSrc(pinboardId, vizId, runtimeFilters) {
const filterQuery = getFilterQuery(runtimeFilters || []);
const queryParams = this.getEmbedParams();
const queryString = [filterQuery, queryParams]
.filter(Boolean)
.join('&');
let url = `${this.getV1EmbedBasePath(queryString, true, false, false)}/viz/${pinboardId}`;
if (vizId) {
url = `${url}/${vizId}`;
}
return url;
}
/**
* Render an embedded ThoughtSpot pinboard or visualization
* @param renderOptions An object specifying the pinboard ID,
* visualization ID and the runtime filters.
*/
render() {
const { pinboardId, vizId, runtimeFilters } = this.viewConfig;
if (!pinboardId && !vizId) {
this.handleError(ERROR_MESSAGE.PINBOARD_VIZ_ID_VALIDATION);
}
if (this.viewConfig.fullHeight === true) {
this.on(EmbedEvent.RouteChange, this.handleRouteChangeFullHeightPinboard);
this.on(EmbedEvent.EmbedHeight, this.updateIFrameHeight);
this.on(EmbedEvent.EmbedIframeCenter, this.embedIframeCenter);
}
super.render();
const src = this.getIFrameSrc(pinboardId, vizId, runtimeFilters);
this.renderV1Embed(src);
return this;
}
}
//# sourceMappingURL=pinboard.js.map