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
    );
});