@aptpod/data-viz-visual-parts-sdk v1.5.0
@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 {
Metadata,
PanelViewConfig,
PanelOptionConfig,
Renderer
expose,
} from '@aptpod/data-viz-visual-parts-sdk'
const panelViewConfig: PanelViewConfig = {
displayTimeStamp: true,
}
const panelOptionConfig: PanelOptionConfig = {
rangeAtMost: 1,
canEditColor: false,
baindDataMax: 1,
extensionCofigs: [],
}
const metadata: Metadata = {
partsType: '@sample/visual-parts',
partsName: 'Sample Visual Parts',
groupName: 'Sample',
panelTagName: 'x-sample-visual-parts',
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(({ dataIdx, data, time }) => {
if (dataIdx === 0) {
props.time = time
props.data = String(data)
draw()
}
})
}
dispose(element: HTMLElement) {
element.innerHTML = ''
}
}
expose({
metadata,
renderer: VisualPartsRenderer,
})
ドキュメント
詳細については以下を参照してください。
4 days ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
6 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago