Quick BI のカスタム可視化機能をよりよく理解するために、次の基本概念を使用します。
コンポーネント構造
Quick BI では、カスタムコンポーネント、カスタムメニュー、カスタムページを総称してカスタム可視化コンポーネントと呼びます。カスタム可視化コンポーネントは、ライフサイクルとメタデータの主に2つの部分で構成されています。
ライフサイクル
カスタム可視化ライフサイクルは、コンポーネント、メニュー、またはページがさまざまな段階でどのようにレンダリングされるかを記述します。これは、bootstrap、mount、unmount、および update のプロパティが含まれる JavaScript オブジェクトです。そのインターフェイスは次のとおりです。
interface Lifecycle {
bootstrap?: LifecycleBootstrap;
mount?: LifecycleMount;
unmount?: LifecycleUnmount;
update?: LifecycleUpdate;
}Bootstrap
bootstrap ライフサイクルは、Quick BI ホストページにアクセスすると実行されます。Quick BI はまずカスタム可視化コンポーネントをプルして登録し、その後 bootstrap 関数を呼び出します。そのインターフェイスは次のとおりです。
type LifecycleBootstrap<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;Mount
mount ライフサイクルは、カスタム可視化コンポーネントが初めてレンダリングされるときに実行されます。Quick BI は mount 関数を呼び出します。そのインターフェイスは次のとおりです。
type LifecycleMount<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;Unmount
unmount ライフサイクルは、カスタム可視化コンポーネントが削除されるとトリガーされます。Quick BI は unmount 関数を呼び出します。関数のインターフェイスは次のとおりです。
type LifecycleUnmount<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;Update
update ライフサイクルは、カスタム可視化コンポーネントの props が変更されると実行されます。Quick BI は update 関数を呼び出します。そのインターフェイスは次のとおりです。
type LifecycleUpdate<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;LifecycleProps
LifecycleProps は、カスタム可視化コンポーネントの各ライフサイクルメソッドに渡される props パラメーターの型を定義します。container と customProps の2つのプロパティが含まれます。インターフェイスは次のように定義されます。
interface LifecycleProps {
container?: HTMLElement;
customProps?: CustomProps;
}コンテナ
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 オブジェクトです。可視化タイプによって異なる設定をサポートします。たとえば、カスタムコンポーネントのメタデータを使用して、[データパネル]、[スタイルパネル]、[詳細パネル] などの機能を構成できます。詳細については、特定の可視化タイプのセクションをご参照ください。
// Example of custom component metadata
export default {
propsSchema: {
// Data panel configuration
dataSchema: {},
// Style panel configuration
styleSchema: {},
// ...
}
}ホスト
Quick BI のホストページは、カスタム可視化コンポーネントを統合する任意のページです。
同じカスタム可視化コンポーネントをさまざまなホストページに統合できます。たとえば、「カスタム折れ線グラフ」はダッシュボードとデータダッシュボードの両方に表示できます。
単一のホストページは同じカスタム可視化コンポーネントを一度だけ統合できますが、そのコンポーネントの複数のインスタンスを作成できます。たとえば、ダッシュボードには複数の「カスタム折れ線グラフ」を含めることができ、それぞれ異なるデータセットから異なるデータを表示します。
アセットパネル
アセットパネルは、Quick BI ホストページでカスタム可視化コンポーネントを構成するエントリポイントです。例としては、ダッシュボードエディターページやエンタープライズポータル設定ページがあります。
ダッシュボードアセットパネル
エンタープライズポータルアセットパネル
