SDK

Quick BI的自定义可视化组件本质上是一个 JavaScript 对象。为了提升开发效率，Quick BI 提供了 @quickbi/bi-open-sdk、@quickbi/bi-open-react-sdk、@quickbi/bi-open-vue-sdk 、@quickbi/bi-open-menu-sdk等SDK对自定义可视化的生命周期对象进行封装，方便开发者适配不同的前端框架。

在大多数情况下，脚手架生成的模板项目已经为您处理好SDK的引用，以及自定义可视化生命周期和元信息的导出逻辑，您只需关注具体实现，以及元信息的具体配置。

@quickbi/bi-open-react-sdk

@quickbi/bi-open-react-sdk适配react@16.14.0框架，开发者无需关心mount、unmount、update等生命周期，也无需使用container进行DOM操作，只需关注React组件实现。

React组件的props的类型与自定义可视化组件生命周期的CustomProps相同，当props改变时，会自动触发组件更新。

使用方式如下：

import type { Interfaces } from '@quickbi/bi-open-react-sdk';
import { createBIComponent } from '@quickbi/bi-open-react-sdk'

// 组件具体实现
const MyComponent: React.FC<Interfaces.ComponentProps> = (props) => {
  return <div>react component</div>
}

// 使用 createBIComponent 导出生命周期对象
export const { bootstrap, mount, unmount, update } = createBIComponent({
  element: MyComponent,
})

@quickbi/bi-open-vue-sdk

@quickbi/bi-open-vue-sdk适配vue@3框架，开发者无需关心mount、unmount、update等生命周期，也无需使用container进行DOM操作，只需关注Vue组件实现。

Vue组件的props的类型与自定义可视化组件生命周期的LifecycleProps相同，当props改变时，会自动触发组件更新。

使用方式如下：

<template>
  <div class="test-component">
    vue component
  </div>
</template>

<script lang="ts">
export default {
  props: ['container', 'customProps'],
};
</script>
<style lang="sass">
.test-component {
  width: 100%;
  height: 100%;
}
</style>

import { createBIComponent } from '@quickbi/bi-open-vue-sdk';
import MyComponent from './Component.vue';

// 使用 createBIComponent 导出生命周期对象
export const { bootstrap, mount, unmount, update } = createBIComponent({
  element: MyComponent,
})

@quickbi/bi-open-sdk

@quickbi/bi-open-sdk适配 "vanilla"框架（即原生JS），适合轻量的对性能有要求的自定义可视化组件，其内部封装了通信和缓存实例等逻辑，开发者只需关心mount、unmount、update等生命周期的具体实现。

使用方式如下：

import type { Interfaces } from '@quickbi/bi-open-sdk';
import { createBIComponent } from '@quickbi/bi-open-sdk'

class MyComponent {
  render(props: Interfaces.LifecycleProps<Interfaces.ComponentProps>) {
    props.container.textContent = 'vanilla component';
  }
  
  mount(props: Interfaces.LifecycleProps<Interfaces.ComponentProps>) {
    this.render(props)
  }
  
  update(props: Interfaces.LifecycleProps<Interfaces.ComponentProps>) {
    this.render(props)
  }
}

const { bootstrap, mount, unmount, update } = createBIComponent({
  element: MyComponent,
})

@quickbi/bi-open-menu-sdk

@quickbi/bi-open-menu-sdk专门提供给自定义菜单使用，适配 react@16.14.0框架，开发者只需关注菜单组件MenuItem的实现。

使用方式如下：

import type { Interfaces } from '@quickbi/bi-open-menu-sdk';
import { createBIComponent, MenuItem } from '@quickbi/bi-open-menu-sdk'

// 菜单具体实现
const MyMenu: React.FC<Interfaces.MenuComponentChartProps> = (props) => {
  return <MenuItem title="my menu" onClick={() => {}} />
}

// 使用 createBIComponent 导出生命周期对象
export const { bootstrap, mount, unmount, update } = createBIComponent({
  element: MyMenu,
})