@aptpod/data-viz-visual-parts-sdk/README.md

Visual Parts SDK for VM2M Data Visualizer

# @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
```

## 使用方法

```ts
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,
})
```

## ドキュメント

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

- [API ドキュメント](https://docs.intdash.jp/sdk/vm2m-data-visualizer/visual-parts-sdk/latest/ja/)