Quick BI:SDK

A custom visualization component in Quick BI is essentially a JavaScript object. To improve developer efficiency, Quick BI provides SDKs such as @quickbi/bi-open-sdk, @quickbi/bi-open-react-sdk, @quickbi/bi-open-vue-sdk, and @quickbi/bi-open-menu-sdk. These SDKs encapsulate the component's lifecycle object to help developers adapt to different frontend frameworks.

In most cases, the template project generated by the scaffolding tool handles SDK references and the export logic for the custom visualization component's lifecycle and metadata. Therefore, you only need to focus on the specific implementation and metadata configuration.

@quickbi/bi-open-react-sdk

@quickbi/bi-open-react-sdk is designed for the react@16.14.0 framework. You do not need to manage lifecycle methods such as mount, unmount, and update, or use container for DOM operations. Instead, you can focus only on the React component implementation.

The props type of the React component is the same as the CustomProps type from the custom visualization component's lifecycle. When the props change, the component is automatically updated.

You can use it as follows:

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

// Component implementation
const MyComponent: React.FC<Interfaces.ComponentProps> = (props) => {
  return <div>React component</div>
}

// Use createBIComponent to export the lifecycle object
export const { bootstrap, mount, unmount, update } = createBIComponent({
  element: MyComponent,
})

@quickbi/bi-open-vue-sdk

@quickbi/bi-open-vue-sdk is designed for the vue@3 framework. You do not need to manage lifecycle methods such as mount, unmount, and update, or use container for DOM operations. Instead, you can focus only on the Vue component implementation.

The props type of the Vue component is the same as the LifecycleProps type from the custom visualization component's lifecycle. When the props change, the component is automatically updated.

Usage instructions are as follows:

<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';

// Use createBIComponent to export the lifecycle object
export const { bootstrap, mount, unmount, update } = createBIComponent({
  element: MyComponent,
})

@quickbi/bi-open-sdk

@quickbi/bi-open-sdk is designed for the "vanilla" framework (native JavaScript) and is suitable for creating lightweight, high-performance custom visualization components. This SDK encapsulates communication logic and cache instances, which lets you focus on the specific implementation of lifecycle methods such as mount, unmount, and update.

You can use the service as follows:

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 is designed for creating custom menus and is compatible with the react@16.14.0 framework. This lets you focus only on the implementation of the MenuItem menu component.

The usage is as follows:

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

// Menu implementation
const MyMenu: React.FC<Interfaces.MenuComponentChartProps> = (props) => {
  return <MenuItem title="my menu" onClick={() => {}} />
}

// Use createBIComponent to export the lifecycle object
export const { bootstrap, mount, unmount, update } = createBIComponent({
  element: MyMenu,
})