@orbcharts/core 3.0.6 → 4.0.0-pre-alpha.0

package/src/test/createGraphData.test.ts

@@ -0,0 +1,103 @@
+import { createGraphData } from '../chart/createGraphData'
+import type { RawDataColumn, Encoding, Theme } from '../types'
+
+// 測試資料：包含 nodes 和 edges
+const testRawData: RawDataColumn[] = [
+  // Nodes
+  { id: 'node1', name: 'Node 1', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 10 },
+  { id: 'node2', name: 'Node 2', dataset: 'dataset1', series: 'series1', category: 'cat2', value: 20 },
+  { id: 'node3', name: 'Node 3', dataset: 'dataset1', series: 'series2', category: 'cat1', value: 15 },
+  { id: 'node4', name: 'Node 4', dataset: 'dataset1', series: 'series2', category: 'cat2', value: 25 },
+  
+  // Edges
+  { id: 'edge1', name: 'Edge 1', source: 'node1', target: 'node2', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 5 },
+  { id: 'edge2', name: 'Edge 2', source: 'node2', target: 'node3', dataset: 'dataset1', series: 'series1', category: 'cat2', value: 8 },
+  { id: 'edge3', name: 'Edge 3', source: 'node3', target: 'node4', dataset: 'dataset1', series: 'series2', category: 'cat1', value: 12 },
+]
+
+const testEncoding: Encoding = {
+  dataset: { from: 'dataset', sort: 'original' },
+  series: { from: 'series', sort: 'original' },
+  category: { from: 'category', sort: 'original' },
+  value: { from: 'value', sort: 'original', aggregate: 'none' },
+  multivariate: [],
+  color: { from: 'category' }
+}
+
+const testTheme: Theme = {
+  colorScheme: 'light',
+  colors: {
+    light: {
+      data: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],
+      primary: '#000000',
+      secondary: '#666666',
+      dataContrast: ['#ffffff', '#000000'],
+      background: '#ffffff'
+    },
+    dark: {
+      data: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],
+      primary: '#ffffff',
+      secondary: '#999999',
+      dataContrast: ['#000000', '#ffffff'],
+      background: '#000000'
+    }
+  },
+  fontSize: 12
+}
+
+// 測試基本功能
+console.log('=== Test createGraphData ===')
+
+const result = createGraphData(testRawData, testEncoding, testTheme)
+console.log('Result length:', result.length)
+console.log('First dataset nodes:', result[0]?.nodes.length)
+console.log('First dataset edges:', result[0]?.edges.length)
+
+// 檢查 nodes 結構
+console.log('\n=== Nodes Structure ===')
+result[0]?.nodes.forEach((node, i) => {
+  console.log(`Node ${i}:`, {
+    id: node.id,
+    name: node.name,
+    series: node.series,
+    category: node.category,
+    value: node.value,
+    index: node.index
+  })
+})
+
+// 檢查 edges 結構
+console.log('\n=== Edges Structure ===')
+result[0]?.edges.forEach((edge, i) => {
+  console.log(`Edge ${i}:`, {
+    id: edge.id,
+    name: edge.name,
+    source: edge.source,
+    target: edge.target,
+    sourceIndex: edge.sourceIndex,
+    targetIndex: edge.targetIndex,
+    value: edge.value
+  })
+})
+
+// 測試聚合功能
+console.log('\n=== Test Aggregation ===')
+const aggregateEncoding: Encoding = {
+  ...testEncoding,
+  value: { from: 'value', sort: 'original', aggregate: 'sum' }
+}
+
+const aggregatedResult = createGraphData(testRawData, aggregateEncoding, testTheme)
+console.log('Aggregated nodes count:', aggregatedResult[0]?.nodes.length)
+console.log('Aggregated edges count:', aggregatedResult[0]?.edges.length)
+
+console.log('\nAggregated nodes:')
+aggregatedResult[0]?.nodes.forEach((node, i) => {
+  console.log(`Node ${i}:`, {
+    id: node.id,
+    name: node.name,
+    series: node.series,
+    category: node.category,
+    value: node.value
+  })
+})

package/src/test/createTreeData.test.ts

@@ -0,0 +1,97 @@
+import { createTreeData } from '../chart/createTreeData'
+import type { RawDataColumn, Encoding, Theme } from '../types'
+
+// 測試資料：樹狀結構
+const testRawData: RawDataColumn[] = [
+  // 根節點
+  { id: 'root', name: 'Root Node', parent: null, dataset: 'dataset1', series: 'series1', category: 'cat1', value: 100 },
+  
+  // 第一層子節點
+  { id: 'child1', name: 'Child 1', parent: 'root', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 40 },
+  { id: 'child2', name: 'Child 2', parent: 'root', dataset: 'dataset1', series: 'series1', category: 'cat2', value: 60 },
+  
+  // 第二層子節點
+  { id: 'grandchild1', name: 'Grandchild 1', parent: 'child1', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 20 },
+  { id: 'grandchild2', name: 'Grandchild 2', parent: 'child1', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 20 },
+  { id: 'grandchild3', name: 'Grandchild 3', parent: 'child2', dataset: 'dataset1', series: 'series1', category: 'cat2', value: 30 },
+  { id: 'grandchild4', name: 'Grandchild 4', parent: 'child2', dataset: 'dataset1', series: 'series1', category: 'cat2', value: 30 },
+  
+  // 第二個 series 的資料
+  { id: 'root2', name: 'Root Node 2', parent: null, dataset: 'dataset1', series: 'series2', category: 'cat1', value: 80 },
+  { id: 'child3', name: 'Child 3', parent: 'root2', dataset: 'dataset1', series: 'series2', category: 'cat1', value: 80 },
+]
+
+const testEncoding: Encoding = {
+  dataset: { from: 'dataset', sort: 'original' },
+  series: { from: 'series', sort: 'original' },
+  category: { from: 'category', sort: 'original' },
+  value: { from: 'value', sort: 'original', aggregate: 'none' },
+  multivariate: [],
+  color: { from: 'category' }
+}
+
+const testTheme: Theme = {
+  colorScheme: 'light',
+  colors: {
+    light: {
+      data: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],
+      primary: '#000000',
+      secondary: '#666666',
+      dataContrast: ['#ffffff', '#000000'],
+      background: '#ffffff'
+    },
+    dark: {
+      data: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],
+      primary: '#ffffff',
+      secondary: '#999999',
+      dataContrast: ['#000000', '#ffffff'],
+      background: '#000000'
+    }
+  },
+  fontSize: 12
+}
+
+// 遞迴列印樹狀結構的函數
+function printTree(node: any, indent: string = ''): void {
+  console.log(`${indent}${node.name} (id: ${node.id}, depth: ${node.depth}, seq: ${node.seq}, value: ${node.value}, parent: ${node.parent})`)
+  if (node.children && node.children.length > 0) {
+    node.children.forEach((child: any) => {
+      printTree(child, indent + '  ')
+    })
+  }
+}
+
+// 測試基本功能
+console.log('=== Test createTreeData ===')
+
+const result = createTreeData(testRawData, testEncoding, testTheme)
+console.log('Result length:', result.length)
+
+// 列印每個樹的結構
+result.forEach((tree, index) => {
+  console.log(`\n=== Tree ${index + 1} (Series: ${tree.series}) ===`)
+  printTree(tree)
+})
+
+// 測試聚合功能
+console.log('\n=== Test Aggregation ===')
+
+// 建立有重複 id 的測試資料
+const duplicateRawData: RawDataColumn[] = [
+  { id: 'root', name: 'Root Node', parent: null, dataset: 'dataset1', series: 'series1', category: 'cat1', value: 50 },
+  { id: 'root', name: 'Root Node', parent: null, dataset: 'dataset1', series: 'series1', category: 'cat1', value: 50 }, // 重複
+  { id: 'child1', name: 'Child 1', parent: 'root', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 20 },
+  { id: 'child1', name: 'Child 1', parent: 'root', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 30 }, // 重複
+]
+
+const aggregateEncoding: Encoding = {
+  ...testEncoding,
+  value: { from: 'value', sort: 'original', aggregate: 'sum' }
+}
+
+const aggregatedResult = createTreeData(duplicateRawData, aggregateEncoding, testTheme)
+console.log('\nAggregated tree:')
+aggregatedResult.forEach((tree, index) => {
+  console.log(`\n=== Aggregated Tree ${index + 1} ===`)
+  printTree(tree)
+})

package/src/test/simple-graph-test.js

@@ -0,0 +1,51 @@
+// Simple test for createGraphData functionality
+// This is a minimal test to verify the basic structure
+
+const testRawData = [
+  // Nodes
+  { id: 'node1', name: 'Node 1', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 10 },
+  { id: 'node2', name: 'Node 2', dataset: 'dataset1', series: 'series1', category: 'cat2', value: 20 },
+  { id: 'node3', name: 'Node 3', dataset: 'dataset1', series: 'series2', category: 'cat1', value: 15 },
+  { id: 'node4', name: 'Node 4', dataset: 'dataset1', series: 'series2', category: 'cat2', value: 25 },
+  
+  // Edges
+  { id: 'edge1', name: 'Edge 1', source: 'node1', target: 'node2', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 5 },
+  { id: 'edge2', name: 'Edge 2', source: 'node2', target: 'node3', dataset: 'dataset1', series: 'series1', category: 'cat2', value: 8 },
+  { id: 'edge3', name: 'Edge 3', source: 'node3', target: 'node4', dataset: 'dataset1', series: 'series2', category: 'cat1', value: 12 },
+]
+
+const testEncoding = {
+  dataset: { from: 'dataset', sort: 'original' },
+  series: { from: 'series', sort: 'original' },
+  category: { from: 'category', sort: 'original' },
+  value: { from: 'value', sort: 'original', aggregate: 'none' },
+  multivariate: [],
+  color: { from: 'category' }
+}
+
+const testTheme = {
+  colorScheme: 'light',
+  colors: {
+    light: {
+      data: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],
+      primary: '#000000',
+      secondary: '#666666',
+      dataContrast: ['#ffffff', '#000000'],
+      background: '#ffffff'
+    },
+    dark: {
+      data: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],
+      primary: '#ffffff',
+      secondary: '#999999',
+      dataContrast: ['#000000', '#ffffff'],
+      background: '#000000'
+    }
+  },
+  fontSize: 12
+}
+
+console.log('Test data ready')
+console.log('Raw data has', testRawData.length, 'items')
+console.log('Nodes:', testRawData.filter(d => !d.source && !d.target).length)
+console.log('Edges:', testRawData.filter(d => d.source && d.target).length)
+console.log('Test completed successfully!')

package/src/test/simple-tree-test.js

@@ -0,0 +1,58 @@
+// Simple test for createTreeData functionality
+// This verifies the basic tree structure logic
+
+const testRawData = [
+  // 根節點
+  { id: 'root', name: 'Root Node', parent: null, dataset: 'dataset1', series: 'series1', category: 'cat1', value: 100 },
+  
+  // 第一層子節點
+  { id: 'child1', name: 'Child 1', parent: 'root', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 40 },
+  { id: 'child2', name: 'Child 2', parent: 'root', dataset: 'dataset1', series: 'series1', category: 'cat2', value: 60 },
+  
+  // 第二層子節點
+  { id: 'grandchild1', name: 'Grandchild 1', parent: 'child1', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 20 },
+  { id: 'grandchild2', name: 'Grandchild 2', parent: 'child1', dataset: 'dataset1', series: 'series1', category: 'cat1', value: 20 },
+  { id: 'grandchild3', name: 'Grandchild 3', parent: 'child2', dataset: 'dataset1', series: 'series1', category: 'cat2', value: 30 },
+]
+
+// 測試樹狀結構邏輯
+const nodeMap = new Map()
+testRawData.forEach(d => {
+  nodeMap.set(d.id, d)
+})
+
+const rootNodes = []
+const childrenMap = new Map()
+
+testRawData.forEach(node => {
+  if (node.parent === null) {
+    rootNodes.push(node)
+  } else {
+    if (!childrenMap.has(node.parent)) {
+      childrenMap.set(node.parent, [])
+    }
+    childrenMap.get(node.parent).push(node)
+  }
+})
+
+function printTree(node, depth = 0) {
+  const indent = '  '.repeat(depth)
+  console.log(`${indent}${node.name} (id: ${node.id}, parent: ${node.parent})`)
+  
+  const children = childrenMap.get(node.id) || []
+  children.forEach(child => {
+    printTree(child, depth + 1)
+  })
+}
+
+console.log('=== Tree Structure Test ===')
+console.log('Total nodes:', testRawData.length)
+console.log('Root nodes:', rootNodes.length)
+console.log('Children map size:', childrenMap.size)
+
+console.log('\nTree structure:')
+rootNodes.forEach(root => {
+  printTree(root)
+})
+
+console.log('\nTest completed successfully!')

package/src/types/Chart.ts

@@ -0,0 +1,62 @@
+import type {
+  DeepPartial,
+  ChartContext,
+  Encoding,
+  PluginEntity,
+  RawData,
+  Theme
+} from './index'
+
+export interface SizeConfig {
+  width: number | 'auto'
+  height: number | 'auto'
+  resizeDebounce: number
+}
+
+// export interface ChartDefaults {
+//   theme: Theme
+//   encoding: Encoding
+// }
+
+export interface ChartOptions {
+  size: SizeConfig
+  // defaults: ChartDefaults
+  theme: Theme
+  data: RawData
+  encoding: Encoding
+  plugins: PluginEntity<any, any, any>[]
+}
+
+export interface PartialChartOptions {
+  size?: Partial<SizeConfig>
+  theme?: DeepPartial<Theme>
+  data?: RawData
+  encoding?: DeepPartial<Encoding>
+  plugins?: PluginEntity<any, any, any>[]
+}
+
+export interface CreateChart {
+  (element: HTMLElement | Element, options?: PartialChartOptions): ChartEntity
+}
+
+export interface ChartEntity {
+  // Commands
+  resize(sizeConfig: SizeConfig): void
+  setData(data: RawData): void // replace
+  // setEncoding(partial: Partial<Encoding>): void // deep-merge with default
+  updateEncoding(patch: DeepPartial<Encoding>): void // deep-merge with previous
+  forceReplaceEncoding(full: Encoding): void // replace
+  getEncoding(): Readonly<Encoding>
+  setPlugins(plugins: PluginEntity<any, any, any>[]): void // replace all
+  addPlugin(plugin: PluginEntity<any, any, any>): void
+  removePlugin(id: string): void
+  // setTheme(theme: Theme): void // replace all
+  updateTheme(patch: DeepPartial<Theme>): void // deep-merge with previous
+  forceReplaceTheme(full: Theme): void // replace all
+  getTheme(): Readonly<Theme>
+  destroy(): void;
+
+  // context
+  context: ChartContext<{}>
+}
+

package/src/types/ChartContext.ts

@@ -0,0 +1,42 @@
+import type { Observable, Subject } from 'rxjs'
+import type {
+  RawData,
+  Encoding,
+  ModelData,
+  PluginInfo,
+  Theme,
+  EventData,
+  LayerInfo,
+} from './index'
+
+export interface Size {
+  width: number
+  height: number
+}
+
+// 定義可擴展的 context 類型 - 只包含新增的欄位
+export interface ExtendableContext {
+  // 只能添加新的欄位，不能修改現有的 ChartContext
+  [key: string]: Observable<any> | Subject<any> | Function | any
+}
+
+export type ChartContext<ExtendContext extends ExtendableContext> = {
+  // svgSelection: d3.Selection<SVGGElement, unknown, HTMLElement, any>
+  // canvasSelection: d3.Selection<HTMLCanvasElement, unknown, HTMLElement, any>
+  root: HTMLElement | Element
+  svg: SVGElement | null
+  canvas: HTMLCanvasElement | null
+  // rawData$: Observable<RawData>
+  encoding$: Observable<Encoding>
+  seriesData$: Observable<ModelData<'series'>[]>
+  gridData$: Observable<ModelData<'grid'>[]>
+  multivariateData$: Observable<ModelData<'multivariate'>[]>
+  graphData$: Observable<ModelData<'graph'>[]>
+  treeData$: Observable<ModelData<'tree'>[]>
+  plugins$: Observable<readonly PluginInfo[]>
+  theme$: Observable<Theme>
+  event$: Observable<EventData>
+  eventTrigger$: Subject<EventData>
+  size$: Observable<Size>
+  _updateLayerElements: <ElementType extends "svg" | "canvas">(elementType: ElementType, fromPluginName: string, fetchLayerInfo: LayerInfo[]) => Record<string, ElementType extends "svg" ? SVGGElement : HTMLCanvasElement>
+} & ExtendContext

package/src/types/Common.ts

@@ -0,0 +1,5 @@
+
+
+export type DeepPartial<T> = Partial<{
+  [P in keyof T]: DeepPartial<T[P]>
+}>

package/src/types/Encoding.ts

@@ -0,0 +1,43 @@
+
+
+
+export interface EncodingDataset {
+  from: string
+  sort: 'original' | 'alphabetical' | string[]
+}
+
+export interface EncodingSeries {
+  from: string
+  sort: 'original' | 'alphabetical' | string[]
+}
+
+export interface EncodingCategory {
+  from: string
+  sort: 'original' | 'alphabetical' | string[]
+}
+
+export interface EncodingValue {
+  from: string
+  sort: 'original' | 'asc' | 'desc'
+  aggregate: 'sum' | 'mean' | 'median' | 'min' | 'max' | 'count' | 'none'
+}
+
+export interface EncodingMultivariateItem {
+  from: string
+  name: string
+}
+
+export type EncodingMultivariate = EncodingMultivariateItem[]
+
+export interface EncodingColor {
+  from: 'index' | 'series' | 'category' | 'dataset'
+}
+
+export interface Encoding {
+  dataset: EncodingDataset
+  series: EncodingSeries
+  category: EncodingCategory
+  value: EncodingValue
+  multivariate: EncodingMultivariate
+  color: EncodingColor
+}

package/src/types/Event.ts

@@ -0,0 +1,26 @@
+import type {
+  ModelType,
+  RenderDatumBase
+} from '../../../core/src/types/index'
+
+export type EventType = 'click'
+  | 'mouseover'
+  | 'mousemove'
+  | 'mouseout'
+  | 'dragstart'
+  | 'drag'
+  | 'dragend'
+  // | 'resize'
+  | 'zoom'
+  | 'transitionMove'
+  | 'transitionEnd'
+
+export interface EventData<T extends ModelType = ModelType, ExtendTypes extends Record<string, any> = {}> {
+  eventName: EventType
+  pluginName: string
+  layerName: string
+  target: RenderDatumBase<T, ExtendTypes> | null
+  data?: any
+  tween?: number
+  event?: Event
+}

package/src/types/Layers.ts

@@ -0,0 +1,93 @@
+import type { Observable } from 'rxjs'
+import type { DeepPartial, ChartContext, ExtendableContext, ValidatorResult } from './index'
+
+// export type LayerParamsBase<LayerName extends string> = {
+//   [K in LayerName]: unknown
+// }
+
+
+// export type LayerParams<LayerName extends string, Params = any> = Record<LayerName, Params>
+
+// export interface LayerContext<ExtendContext extends ExtendableContext = {}> {
+//   svgSelection: d3.Selection<SVGGElement, unknown, HTMLElement, any>
+//   canvasSelection: d3.Selection<HTMLCanvasElement, unknown, HTMLElement, any>
+//   name: string
+//   context: ChartContext<ExtendContext>
+// }
+
+// export type LayerContext<ExtendContext, LayerParams extends Record<string, any> = Record<string, any>> = ChartContext<ExtendContext> & {
+//   layerParams$: Observable<LayerParams>
+// }
+
+export interface LayerInfo {
+  pluginId: string
+  pluginName: string
+  layerName: string
+  layerIndex: number
+}
+
+export interface SVGLayerEnableProps<ExtendContext extends ExtendableContext, PluginParams, LayerParams> {
+  context: ChartContext<ExtendContext>
+  svgG: SVGGElement
+  // canvas: HTMLCanvasElement
+  pluginParams$: Observable<PluginParams>
+  initLayerParams: DeepPartial<LayerParams>
+}
+
+export interface CanvasLayerEnableProps<ExtendContext extends ExtendableContext, PluginParams, LayerParams> {
+  context: ChartContext<ExtendContext>
+  // svgG: SVGGElement
+  canvas: HTMLCanvasElement
+  pluginParams$: Observable<PluginParams>
+  initLayerParams: DeepPartial<LayerParams>
+}
+
+export type LayerEnableProps<ElementType extends 'svg' | 'canvas', ExtendContext extends ExtendableContext, PluginParams, LayerParams> =
+  ElementType extends 'svg' ? SVGLayerEnableProps<ExtendContext, PluginParams, LayerParams> :
+  ElementType extends 'canvas' ? CanvasLayerEnableProps<ExtendContext, PluginParams, LayerParams> :
+  never
+
+export interface SVGLayerSetupProps<ExtendContext extends ExtendableContext, PluginParams, LayerParams> {
+  context: ChartContext<ExtendContext>
+  svgG: SVGGElement
+  // canvas: HTMLCanvasElement
+  pluginParams$: Observable<PluginParams>
+  layerParams$: Observable<LayerParams>
+}
+
+export interface CanvasLayerSetupProps<ExtendContext extends ExtendableContext, PluginParams, LayerParams> {
+  context: ChartContext<ExtendContext>
+  // svgG: SVGGElement
+  canvas: HTMLCanvasElement
+  pluginParams$: Observable<PluginParams>
+  layerParams$: Observable<LayerParams>
+}
+
+export type LayerSetupProps<ElementType extends 'svg' | 'canvas', ExtendContext extends ExtendableContext, PluginParams, LayerParams> =
+  ElementType extends 'svg' ? SVGLayerSetupProps<ExtendContext, PluginParams, LayerParams> :
+  ElementType extends 'canvas' ? CanvasLayerSetupProps<ExtendContext, PluginParams, LayerParams> :
+  never
+
+export interface DefineLayerConfig<ElementType extends 'svg' | 'canvas', ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>, LayerParams extends Record<string, any>> {
+  name: string
+  defaultParams: LayerParams
+  layerIndex: number
+  initShow: boolean
+  validator?: (params: DeepPartial<LayerParams>) => ValidatorResult
+  setup: (setupProps: LayerSetupProps<ElementType, ExtendContext, PluginParams, LayerParams>) => () => void
+}
+
+export interface LayerEntity<ExtendContext extends ExtendableContext, PluginParams, LayerParams> {
+  readonly _name: string
+  readonly _defaultParams: LayerParams
+  readonly _layerIndex: number
+  readonly _initShow: boolean
+  // _enable(el: { svg: SVGSVGElement; canvas: HTMLCanvasElement }, context: ChartContext<ExtendContext>): void
+  _enable(enableProps: LayerEnableProps<'svg' | 'canvas', ExtendContext, PluginParams, LayerParams>): void
+  _disable(): void
+  // _setParams(params: DeepPartial<LayerParams>): void
+  _updateParams(params: DeepPartial<LayerParams>): void
+  _forceReplaceParams(params: LayerParams): void
+  _getParams: () => LayerParams
+  _destroy(): void
+}

package/src/types/ModelData.ts

@@ -0,0 +1,95 @@
+export type ModelType = 'series' | 'grid' | 'multivariate' | 'graph' | 'tree'
+
+export interface ModelDatumBase {
+  id: string
+  index: number // 在同類別中的索引
+  modelType: ModelType
+  name: string // 原始資料的 name 欄位
+  data: any // 原始資料的 data 欄位
+  value: number | null // 經過 aggregate 後的數值
+  color: string // 經過色彩對應後的顏色（hex）
+  // rawData: RawDataColumn // 原始資料
+}
+
+export interface ModelDatumSeries extends ModelDatumBase {
+  series: string
+  seriesIndex: number
+  category: string
+  categoryIndex: number
+}
+
+export interface ModelDatumGrid extends ModelDatumBase {
+  series: string
+  seriesIndex: number
+  category: string
+  categoryIndex: number
+}
+
+export interface ModelDatumMultivariate extends ModelDatumBase {
+  series: string
+  seriesIndex: number
+  category: string
+  categoryIndex: number
+  multivariate: Array<{
+    index: number // 維度
+    name: string // multivariate 的 label
+    value: number | null
+  }>
+}
+
+export interface ModelDatumGraphNode extends ModelDatumBase {
+  series: string
+  seriesIndex: number
+  category: string
+  categoryIndex: number
+}
+
+export interface ModelDatumGraphEdge extends ModelDatumBase {
+  series: string
+  seriesIndex: number
+  category: string
+  categoryIndex: number
+  source: string // 來源節點名稱
+  sourceIndex: number // 來源節點在所有節點中的索引
+  target: string // 目標節點名稱
+  targetIndex: number // 目標節點在所有節點中的索引
+}
+
+export interface ModelDatumTree extends ModelDatumBase {
+  parent: string | null // 父節點名稱
+  parentIndex: number | null // 父節點在所有節點中的索引
+  depth: number // 節點深度（根節點為 0）
+  seq: number // 同一層級中的順序
+  children: ModelDatumTree[] // 子節點
+  series: string
+  seriesIndex: number
+  category: string
+  categoryIndex: number
+}
+
+export type ModelDatum<T extends ModelType> = T extends 'series' ? ModelDatumSeries
+  : T extends 'grid' ? ModelDatumGrid
+  : T extends 'multivariate' ? ModelDatumMultivariate
+  : T extends 'graph' ? ModelDatumGraphNode
+  : T extends 'tree' ? ModelDatumTree
+  : unknown
+
+export type ModelDataSeries = ModelDatum<'series'>[][]
+
+export type ModelDataGrid = ModelDatum<'grid'>[][]
+
+export type ModelDataMultivariate = ModelDatum<'multivariate'>[][]
+
+export interface ModelDataGraph {
+  nodes: ModelDatumGraphNode[]
+  edges: ModelDatumGraphEdge[]
+}
+
+export type ModelDataTree = ModelDatum<'tree'>
+
+export type ModelData<T extends ModelType = ModelType> = T extends 'series' ? ModelDataSeries
+  : T extends 'grid' ? ModelDataGrid
+  : T extends 'multivariate' ? ModelDataMultivariate
+  : T extends 'graph' ? ModelDataGraph
+  : T extends 'tree' ? ModelDataTree
+  : unknown