基本概念 - Quick BI

您可以通過以下基本概念，進一步瞭解Quick BI的自訂可視化功能。

組件構成

在Quick BI中，自訂群組件、自訂菜單和自訂頁面統稱為自訂可視化組件。自訂可視化組件主要由兩部分組成：生命週期和元資訊。

生命週期

自訂可視化生命週期用於描述組件/菜單/頁面在不同階段如何渲染，是一個包含了bootstrap、mount、unmount、update屬性的JavaScript對象，其介面為：

interface Lifecycle {
  bootstrap?: LifecycleBootstrap;
  mount?: LifecycleMount;
  unmount?: LifecycleUnmount;
  update?: LifecycleUpdate;
}

bootstrap

開機生命週期。當進入Quick BI宿首頁面時，首先會拉取自訂可視化組件並註冊，此時會調用 bootstrap 函數。其介面為：

type LifecycleBootstrap<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

mount

掛載生命週期。當第一次渲染自訂可視化組件時，會調用 mount函數。其介面為：

type LifecycleMount<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

unmount

卸載生命週期。當卸載自訂可視化組件，會調用 unmount 函數。其介面為：

type LifecycleUnmount<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

update

更新生命週期。當自訂可視化組件的props 有更新時，會調用 update 函數。其介面為：

type LifecycleUpdate<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

LifecycleProps

LifecycleProps描述的是傳入自訂可視化組件各個生命週期的 props參數類型。包含了 container和 customProps兩個屬性，其介面為：

interface LifecycleProps {
  container?: HTMLElement;
  customProps?: CustomProps;
}

container

container是宿首頁面上的一個DOM元素，自訂可視化組件將會渲染到 container 上。如果開啟了 Shadow DOM，container的父元素會變成ShadowRoot元素。

customProps

customProps是宿首頁面往自訂可視化組件中注入的上下文資訊，不同的可視化類型接受不同的上下文資訊類型，詳細請參考具體可視化類型章節。

下面是關於自訂可視化組件生命週期的最簡單的例子：

export {
  bootstrap: (props: LifecycleProps) => {},
  mount: (props: LifecycleProps) => {
    console.log(props); // { container: DOMObject, customProps: {} }
    props.container.textContent = `hello word`;
  },
  unmount: (props: LifecycleProps) => {},
  update: (props: LifecycleProps) => {
    props.container.textContent = `hello word updated`;
  },
}

元資訊

自訂可視化元資訊是一個JavaScript對象，用於描述自訂可視化組件渲染之外的配置。不同的可視化類型有不同的配置，例如：自訂群組件的元資訊可以定製資料面板、樣式面板、進階面板等功能，詳細資料請參考具體可視化類型章節。

// 自訂群組件元資訊例子
export default {
  propsSchema: {
    // 資料面板配置
    dataSchema: {},
    // 樣式面板配置
    styleSchema: {},
    // ...
  }
}

宿主

Quick BI中可以整合自訂可視化組件的頁面稱之為宿首頁。

說明

同一個自訂可視化組件可以被不同的宿首頁整合，例如：“自訂線圖”既可以整合到儀表板中，也可以整合到資料大屏中。
同一個自訂可視化組件只能被宿首頁整合一次，但可以建立多個組件執行個體，例如：儀表板中可以配置多個“自訂線圖”，根據不同資料集展示不同資料。

物料欄

在Quick BI宿首頁中配置自訂可視化組件的入口稱之為物料欄，例如：儀表板編輯頁、企業門戶配置頁等。

儀表板物料欄
企業門戶物料欄