1.3.1 • Published 4 years ago
embed-bi v1.3.1
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
);
});