Quick BI：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,
})