Embed-BI

嵌入应用控制模块

基本用法

安装

npm install embed-bi

or

yarn add embed-bi

初始化

new Embed(dom, options, created)

options

参数	说明	类型	必须
groupId	嵌入的项目Id	String	true
dashboardId	嵌入的仪表盘Id	String	true
host	嵌入的host,目前默认是alpha环境 http://alpha-dashboard.gridsumdissector.com	String	false
width	嵌入窗口的宽度，不传则默认100%	Number	false
height	嵌入窗口的高度，不传则默认100%	Number	false
token	用于SSO权限验证的token	String	与publishID二选一
publishID	发布仪表盘的ID, 使用publishID可以无需SSO的token	String	与token二选一
authParam	需要第三方鉴权时传入的权限验证的参数	Object	false

import Embed from 'embed-bi';
 
let embed = new Embed(document.querySelector('#iframe-container0'), {
    groupId: '12345',
    dashboardId: '12345',
    width: 1000,
    height: 800,
    publishId: 'string',
    authParam: {}
}, () => {
    embed.toggleNavbar(false);
});

带第三方鉴权的流程

可用的API

方法名	说明	参数
registerTokenHandle	注册监听token是否过期的回调	Function
setTheme	设置主题	String
toggleNavbar	控制navbar的显示	Boolean
setDashboardFilter	设置仪表盘过滤	[filterItem]
getDashboardFilter	获取仪表盘过滤	无
setWidgetFilter	设置组件过滤	[filterItem]
getWidgetFilter	获取组件过滤	无
getFrameHeight	获取嵌入页面高度	无
changeGridHeight	当父页面的可视区下限改变时，通过该接口告知iframe内部进行懒加载	Number 可视区下限Y坐标

filterItem结构见文档：FilterItem 类

权限监听回调

embed.registerTokenHandle((req, res) => {
    let {isValid} = req.body;
    console.log('页面token是否有效：', isValid);
    return res
});

设置主题

embed.setTheme('theme-dark').then(res => {
    console.log(res);
}, err => {
    console.log(err);
});

显示/隐藏导航栏

embed.toggleNavbar(false)

仪表盘级别过滤

 
embed.setDashboardFilter({
     filterRules
});
 
embed.getDashboardFilter().then(res => {
    console.log('获取返回的仪表盘过滤值: ', res);
}, err => {
    console.log('获取失败', err);
});

组件级别过滤

 
embed.setWidgetFilter({
    widgetId: '3216aa14-3bb5-4695-4b8b-2cc91ca89a69',
    filterRules
}).then(res => {
    console.log('设置过滤值成功: ', res);
}).then(err => {
    console.error('设置过滤失败: ',  err);
}
 
embed.getWidgetFilter().then(res => {
    console.log('获取返回的组件过滤值: ', res);
}).then(err => {
    console.error('获取组件过滤值失败: ',  err);
}
 

获取嵌入页面高度

embed.getFrameHeight().then(res => {
    console.log(res.body);
});

触发内部懒加载

window.addEventListener('scroll', () => {
    embed.changeGridHeight(
        window.pageYOffset + document.documentElement.clientHeight
    );
});