@aptpod/data-viz-visual-parts-sdk/lib/visual-parts/index.d.ts

Visual Parts SDK for VM2M Data Visualizer

import type { ExposerEvent } from '../type/visual-parts';
/**
 * テキスト入力に関する設定です。
 */
export declare type InputTextOption = {
    /**
     * テキスト入力ボックスに表示するプレースホルダーを設定します。
     */
    placeholder: string;
};
/**
 * Panel Option のテキスト入力ボックスの設定です。
 */
export declare type InputText = {
    /**
     * テキスト入力ボックスであることを示す識別子です。文字列 `'InputText'` に固定されています。
     */
    id: 'InputText';
    /**
     * 関連付けるビジュアルパーツ拡張設定（Extension）のプロパティ名を指定します。
     */
    key: string;
    /**
     * Panel Option に表示する表示名を指定します。
     */
    label: string;
    /**
     * テキスト入力オプションを指定します。
     */
    option: InputTextOption;
};
/**
 * 数値入力に関する設定です。
 */
export declare type InputNumberOption = {
    /**
     * 入力可能な最小値を設定します。
     */
    min: number;
    /**
     * 入力可能な最大値を設定します。
     */
    max: number;
    /**
     * 数値入力ボックスに表示するプレースホルダーを設定します。
     */
    placeholder: string;
};
/**
 * Panel Option の数値入力ボックスの設定です。
 */
export declare type InputNumber = {
    /**
     * 数値入力ボックスであることを示す識別子です。文字列 `'InputNumber'` に固定されています。
     */
    id: 'InputNumber';
    /**
     * 関連付けるビジュアルパーツ拡張設定（Extension）のプロパティ名を指定します。
     */
    key: string;
    /**
     * Panel Option に表示する表示名を指定します。
     */
    label: string;
    /**
     * 数値入力オプションを指定します。
     */
    option: InputNumberOption;
};
/**
 * 整数入力に関する設定です。
 */
export declare type InputIntegerOption = {
    /**
     * 入力可能な最小値を設定します。
     */
    min: number;
    /**
     * 入力可能な最大値を設定します。
     */
    max: number;
    /**
     * 整数入力ボックスに表示するプレースホルダーを設定します。
     */
    placeholder: string;
};
/**
 * Panel Option の整数入力ボックスの設定です。
 */
export declare type InputInteger = {
    /**
     * 整数入力ボックスであることを示す識別子です。文字列 `'InputInteger'` に固定されています。
     */
    id: 'InputInteger';
    /**
     * 関連付けるビジュアルパーツ拡張設定（Extension）のプロパティ名を指定します。
     */
    key: string;
    /**
     * Panel Option に表示する表示名を指定します。
     */
    label: string;
    /**
     * 整数入力オプションを指定します。
     */
    option: InputIntegerOption;
};
/**
 * プルダウンに表示する選択肢の設定です。
 */
export declare type SelectOption = {
    /**
     * オプションリストを設定します。
     * `value` に表示オプションの値、 `text` に表示するテキストを設定します。
     */
    options: {
        value: string | number;
        text: string;
    }[];
};
/**
 * Panel Option のプルダウン選択の設定です。
 */
export declare type Select = {
    /**
     * プルダウン選択であることを示す識別子です。文字列 `'Select'` に固定されています。
     */
    id: 'Select';
    /**
     * 関連付けるビジュアルパーツ拡張設定（Extension）のプロパティ名を指定します。
     */
    key: string;
    /**
     * Panel Option に表示する表示名を指定します。
     */
    label: string;
    /**
     * プルダウン選択オプションを指定します。
     */
    option: SelectOption;
};
/**
 * トグルボタンの設定です。
 */
export declare type ToggleOption = {
    /**
     * トグルボタンに表示するテキストを設定します。
     */
    text: string;
};
/**
 * Panel Option のトグルボタンの設定です。
 */
export declare type Toggle = {
    /**
     * トグルボタンであることを示す識別子です。文字列 `'Toggle'` に固定されています。
     */
    id: 'Toggle';
    /**
     * 関連付けるビジュアルパーツ拡張設定（Extension）のプロパティ名を指定します。
     */
    key: string;
    /**
     * Panel Option に表示する表示名を指定します。
     */
    label: string;
    /**
     * トグルオプションを指定します。
     */
    option: ToggleOption;
};
/**
 * Panel Settings と Panel Option で表示される設定項目です。
 */
export declare type PanelOptionConfig = {
    /**
     * Panel Option で設定可能な Data Range （「Min」と「Max」のペア）の上限個数を設定します。
     */
    rangeAtMost: number;
    /**
     * データのカラー設定の有無を設定します。 true にすると、バインドされるデータごとに色を指定することができます。
     */
    canEditColor: boolean;
    /**
     * バインド可能なデータの上限数を設定します。
     */
    bindDataCountMax: number;
    /**
     * Panel Optionの入力項目を設定します。
     */
    extensionConfigs: (InputText | InputNumber | InputInteger | Select | Toggle)[];
    /**
     * データをバインドするときにエッジを選択しません。
     * ビジュアルパーツから遠隔操作などのデータそ送信する際に、バインドしたデータのみ使用したい時に true を設定します。
     *
     * @default false
     *
     * @since Data Visualizer v3.8.0
     */
    bindDataWithoutEdge?: boolean;
};
/**
 * ビジュアルパーツをパネルに表示するための設定です。
 */
export declare type PanelViewConfig = {
    /**
     * ビジュアルパーツの描画頻度のデフォルト値を設定します。
     */
    defaultFPS: 1 | 10 | 20 | 30 | 60;
    /**
     * ビジュアルパーツ右下に計測値とタイムスタンプを表示するかどうかを設定します。
     */
    displayTimestamp: boolean;
    /**
     * ビジュアルパーツの背景表示ON/OFFを設定します。
     */
    allowBackgroundDisplay: boolean;
    /**
     * パネルの高さが1マス、または幅が1マスのときのタイトル表示方法を設定します。
     * trueにすると、パネルのタイトルは非表示となり、マウスオーバー時のみタイトルが表示されます。
     */
    displayTitleWhenMouseOver: boolean;
    /**
     * 値がData VisualizerのData Settingsで指定された閾値を超えたときにアニメーション表示をするかどうかを設定します。
     */
    displayExceedThreshold: boolean;
};
/**
 * ビジュアルパーツのメタデータを定義します。
 */
export declare type Metadata = {
    /**
     * ビジュアルパーツの内部識別子を設定します(例: `'@sample/01'` )
     * 内部識別子はData Visualizer内で一意である必要があります。
     */
    partsType: string;
    /**
     * Data Visualizer で表示されるビジュアルパーツ名を設定します。
     */
    partsName: string;
    /**
     * Data Visualizer で表示されるビジュアルパーツのグループ名を指定します。
     * 同じグループ名のビジュアルパーツは、ビジュアルパーツ一覧画面に並べて表示されます。
     */
    groupName: string;
    /**
     * ビジュアルパーツのカスタム要素名(HTMLタグ名)を設定します(例： `'x-sample-01'` )
     * Data Visualizer内で一意である必要があります。
     */
    panelTagName: string;
    /**
     * パネルでのビジュアルパーツの表示に関する設定です。
     */
    panelViewConfig: Partial<PanelViewConfig>;
    /**
     * ビジュアルパーツのPanel Optionを設定します。
     */
    panelOptionConfig: PanelOptionConfig;
    /**
     * ビジュアルパーツのサムネイルURLを返す関数を指定します。
     * 引数 baseURL には、デプロイ時に設定したURLが与えられます。
     * 戻り値は、「baseURL + 画像の相対パス」としてください。
     */
    getThumbnailURL: (baseURL: string) => string;
    /**
     * ビジュアルパーツ拡張設定(Extension)のデフォルト値(JSON Object)を指定します。
     * 設定した値は、Panel Optionのデフォルト値として表示されます。
     */
    defaultExtension?: Object;
};
/**
 * パネルに表示されるビジュアルパーツを描画する Abstract クラスです。
 * Abstract メソッド `render` 、 `dispose` が含まれています。
 * ご利用時はこのクラスを継承するクラスを作成して、メソッドを実装してください。
 * 定義したクラスは{@link expose}で使用します。
 * @abstract
 * @example
 * ```typescript
 * import React, { useEffect } from 'react'
 * import { render, unmountComponentAtNode } from 'react-dom'
 * import { Renderer } from '@aptpod/data-viz-visual-parts-sdk'
 *
 * const App = (comm: ExposerEvent) => {
 *   useEffect(() => {
 *     // set event listener
 *     comm.loaded.emit()
 *   }, [comm])
 *
 *   return <div>Hello World</div>
 * }
 *
 * class VisualPartsRenderer extends Renderer {
 *   render(element: HTMLElement, communicator: ExposerEvent) {
 *     render(<App comm={communicator} />, element)
 *   }
 *
 *   dispose(element: HTMLElement) {
 *     unmountComponentAtNode(element)
 *   }
 * }
 * ```
 */
export declare abstract class Renderer extends HTMLElement {
    private communicator;
    private mountPoint;
    /**
     * 描画を実行します。
     * 1回だけコールします。
     * 状態を変更する場合は、 communicator のイベントを利用し、 element のDOMを再描画するようにしてください。
     * @abstract
     */
    abstract render(element: HTMLElement, communicator: ExposerEvent): void;
    /**
     * 解放処理を実行します。
     * element は、 render メソッドに引数として渡された element （コンテナ）と同じです。
     * dispose メソッドでは、 element に紐づく子要素のDOMや子要素のイベントハンドラを解放する処理を実装してください。
     * @abstract
     */
    abstract dispose(element: HTMLElement): void;
    /**
     * クラスの初期化を実行します。
     * 特別な処理は必要ありません。
     */
    constructor();
    /** @internal */
    connectedCallback(): void;
    /** @internal */
    disconnectedCallback(): void;
    /** @internal */
    setCommunicator(comm: ExposerEvent): void;
}