@aptpod/data-viz-create-visual-parts-react/template/visual-parts-react/src/entrypoint/samples/sensor-value/extension.ts

template of npm project with typescript

import * as Z from 'zod'
import { Metadata } from '@aptpod/data-viz-visual-parts-sdk'

// 使用するカラーを定義します。
export const BG_COLOR_TRANSPARENT = 'transparent'
export const BG_COLOR_RED = 'red'
export const BG_COLOR_GREEN = 'green'
export const BG_COLOR_BLUE = 'blue'

/**
 * Extension の型を定義
 */
export type Extension = Z.infer<typeof schema>

/**
 * Extension のDefault値を設定します。
 */
export const defaultExtension = {
  description: 'no settings',
  bgColor: BG_COLOR_TRANSPARENT,
  factor: 1,
} as const

/**
 * Extension のスキーマ定義します。
 */
export const schema = Z.object({
  description: Z.string().catch(defaultExtension.description),
  bgColor: Z.union([
    Z.literal(BG_COLOR_TRANSPARENT),
    Z.literal(BG_COLOR_RED),
    Z.literal(BG_COLOR_GREEN),
    Z.literal(BG_COLOR_BLUE),
  ]).catch(defaultExtension.bgColor),
  factor: Z.number().catch(defaultExtension.factor),
}).catch(defaultExtension)

/**
 * Extension の各フィールドをチェックします。
 */
export const parse = (anyExtension: any): Extension => {
  return schema.parse(anyExtension)
}

/**
 * Data VisualizerのPanel Optionに表示する入力項目を定義します。
 */
export const EXTENSION_CONFIGS: Metadata['panelOptionConfig']['extensionConfigs'] =
  [
    {
      id: 'InputText',
      key: 'description',
      label: 'Description',
      option: { placeholder: 'description' },
    },
    {
      id: 'Select',
      key: 'bgColor',
      label: 'Background Color',
      option: {
        options: [
          { value: BG_COLOR_TRANSPARENT, text: 'transparent' },
          { value: BG_COLOR_RED, text: 'red' },
          { value: BG_COLOR_GREEN, text: 'green' },
          { value: BG_COLOR_BLUE, text: 'blue' },
        ],
      },
    },
    {
      id: 'InputNumber',
      key: 'factor',
      label: 'Factor',
      option: {
        placeholder: 'factor',
        min: -Infinity,
        max: Infinity,
      },
    },
  ]