Skip to main content

@aptpod/data-viz-visual-parts-sdk

Visual Parts SDK は、intdash のデータ可視化アプリケーションである Visual M2M Data Visualizer(以下 Data Visualizer)用の可視化パーツ(以下ビジュアルパーツ)を開発するための SDK です。

Visual Parts SDK を使用して、グラフ、メーター、動く模式図などのビジュアルパーツを開発することができます。

インストール#

npm i -S @aptpod/data-viz-visual-parts-sdk

or

yarn add @aptpod/data-viz-visual-parts-sdk

使用方法#

import {  ExposerEvent,  Metadata,  PanelViewConfig,  PanelOptionConfig,  Renderer,  expose,} from '@aptpod/data-viz-visual-parts-sdk'
import thumbnailSvg from 'src/assets/images/thumbnail.svg'
const panelViewConfig: Partial<PanelViewConfig> = {  displayTimestamp: true,}
const panelOptionConfig: PanelOptionConfig = {  rangeAtMost: 1,  canEditColor: false,  bindDataCountMax: 1,  extensionConfigs: [],}
const metadata: Metadata = {  partsType: '@sample/visual-parts',  partsName: 'Sample Visual Parts',  groupName: 'Sample',  panelTagName: 'x-sample-visual-parts',  getThumbnailURL: (baseURL: string) => `${baseURL}${thumbnailSvg}`,  panelViewConfig,  panelOptionConfig,}
class VisualPartsRenderer extends Renderer {  render(element: HTMLElement, event: ExposerEvent) {    const props = {      width: 0,      height: 0,      time: 0,      value: '',    }
    const draw = () => {      element.innerHTML = `        <div style="width: ${props.width}px; height: ${props.height}px">          <div>Time: ${props.time}</div>          <div>Value: ${props.value}</div>        </div>      `    }
    event.viewBox.on((viewBox) => {      props.width = viewBox.width      props.height = viewBox.height      draw()    })
    event.currentData.on(({ dataIndex, data, time }) => {      if (dataIndex === 0) {        props.time = time        props.value = String(data)        draw()      }    })
    event.loaded.emit()  }  dispose(element: HTMLElement) {    element.innerHTML = ''  }}
expose({  metadata,  renderer: VisualPartsRenderer,})

ドキュメント#

詳細については以下を参照してください。