@datafinder/embed-sdk

@datafinder/embed-sdk 使用文档

简介

UBA（Finder）应用包含一些较为通用的功能（例如看板，报表，用户细查等），需要被外部页面嵌入，外部页面包括字节内部（例如 Finder）和外部（例如私有化用户）。因此 UBA 提供了该 SDK 用于 Finder 子模块的统一接入。

安装

通过 npm 包接入

# npm
npm i -S @datafinder/embed-sdk

# yarn
yarn add @datafinder/embed-sdk

# pnpm
pnpm add @datafinder/embed-sdk

快速开始

示例：渲染用户分析应用

import * as EmbedSDK from '@datafinder/embed-sdk';

EmbedSDK.render({
  // 自定义渲染页面的容器元素，例如
  targetNode: document.queryElementById('finder-app'),
  // finder 应用 id
  appId: 164154,
  // 页面 ID
  page: 'behavior-detail',
  // 不启动桥接的跨域请求
  crossOrigin: false,
  // 其他自定义参数
  basePath: '/fedev-embed-behavior-detail',
  from: 'tester',
  customRequestHeaders: {
    'X-Tester-Source': 'tester',
  },
});

API 参考

render(options: EmbedRenderOptions)

函数功能

渲染增长分析集成页面

函数声明

function render(options: EmbedRenderOptions): void;

参数说明

• 该函数的参数说明如下。

参数名称	参数类型	必填	说明
targetNode	HTMLElement	是	渲染 Finder 应用的容器
appId	number	是	嵌入的 Finder 应用 ID
projectId	number	是	嵌入的 Finder 项目 ID ，项目Id和应用ID(appId)必填一个
host	string	否	嵌入的 Finder 页面 Host，如置空则默认为同域，并使用当前环境的 host- host 参数目前需要指定协议头或 '//'例如需要接入 xxx.datarangers-onpremise.volces.com 提供的 Finder 页面，传入 host: "//xxx.datarangers-onpremise.volces.com"
basePath	string	否	Finder 应用的路径。默认是 '/datafinder'
crossOrigin	boolean	否	嵌入页面是否跨域。默认会根据传入的 host 自动判断
dorToken	string	否	如传入了 dorToken，则会通过 dorToken 作为鉴权方式渲染页面
from	string	否	接入方来源。保留字段，SDK 预留
needsMinibaseRedirect	boolean	否	是否需要 minibase 的重定向
proxyPath	string	否	嵌入页面中 Finder 请求代理的接口地址，在 crossOrigin 为 true 时使用
page	EmbedPage	否	嵌入的 Finder 模块页面
customRequestHeaders	Record<string, string>	否	嵌入页面内请求的自定义 headers
embedQueryParams		否	filter_id: 传入筛选器参数;hideTitleAndOps;隐藏整个头部 hideBelongTo; 隐藏图表的所属人 hideTitle; 隐藏看板标题 hideOpActions; 隐藏操作区按钮
iframeOptions	HTMLIFrameElement	否	渲染 iframe 节点时的自定义 attrs。默认为 { width: '100%', height: '100%', frameBorder: '0' }
onSuccess	() => void	否	嵌入页面渲染成功时的回调
onError	(reason: string) => void	否	嵌入页面渲染失败时的回调
onFinish	(data: unknown) => void	否	嵌入页面完成功能后的回调- 分群编辑页： 分群保存成功后触发

page 参数说明

目前支持嵌入的页面列表：

• dashboard
• report
• behavior-detail
• user-cohort/edit-cohort/:type/:id

页面	参数值	说明
dashboard	dashboard	看板页面
report	report	单独报表页面
behavior-detail	behavior-detail
user-cohort/edit-cohort/:type/:id	user-cohort/edit-cohort/4

返回值

无

示例

• 渲染用户分析应用（同域）

import * as EmbedSDK from '@datafinder/embed-sdk';

EmbedSDK.render({
  // 渲染页面的容器元素
  targetNode: document.queryElementById('finder-app'),
  // finder 应用 id
  appId: 164154,
  // 页面 ID
  page: 'behavior-detail',
  // 不启动跨域请求
  crossOrigin: false,
  // 其他自定义参数
  from: 'tester',
  customRequestHeaders: {
    'X-Tester-Source': 'tester',
  },
});

• 外部用户嵌入 Finder 看板（跨域）

import * as EmbedSDK from '@datafinder/embed-sdk';

EmbedSDK.render({
  // 渲染页面的容器元素
  targetNode: document.queryElementById('finder-app'),
  appId: 214032,
  host: '//e168-6-120finder.datarangers-onpremise.volces.com',
  basePath: '/datafinder',
  page: 'dashboard',
  dashboardId: '7118932524570509838',
  crossOrigin: true,
  proxyPath: `/datafinder/openapi/v1/10000000/dashboard_requests`,
  filterId: 29,
});