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

ドキュメント#

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