@orbcharts/core 4.0.0-alpha.0 → 4.0.0-beta.0

package/src/types/ModelData.ts

@@ -1,95 +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
+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

package/src/types/Plugin.ts

@@ -1,98 +1,101 @@
-import { Observable, Subject } from 'rxjs'
-import type {
-  DeepPartial,
-  LayerEntity,
-  ChartContext,
-  ExtendableContext
-} from './index'
-import { ValidatorResult } from '../types/Validator'
-
-
-export interface PluginInfo {
-  id: string
-  name: string
-  elementType: 'svg' | 'canvas'
-  shownLayers: string[]
-}
-
-// export interface PluginSetupProps<ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>> {
-//   context: ChartContext<ExtendContext>
-//   svg: SVGElement
-//   canvas: HTMLCanvasElement
-//   pluginParams$: Observable<PluginParams>
-// }
-
-// export interface SVGPluginSetupProps<ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>> {
-//   context: ChartContext<ExtendContext>
-//   svgG: SVGGElement
-//   pluginParams$: Observable<PluginParams>
-// }
-
-// export interface CanvasPluginSetupProps<ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>> {
-//   context: ChartContext<ExtendContext>
-//   canvas: HTMLCanvasElement
-//   pluginParams$: Observable<PluginParams>
-// }
-
-// export type PluginSetupProps<ElementType extends 'svg' | 'canvas', ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>> =
-//   ElementType extends 'svg' ? SVGPluginSetupProps<ExtendContext, PluginParams> :
-//   ElementType extends 'canvas' ? CanvasPluginSetupProps<ExtendContext, PluginParams> :
-//   never
-
-export interface PluginSetupProps<ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>> {
-  context: ChartContext<ExtendContext>
-  pluginParams$: Observable<PluginParams>
-}
-
-export interface DefinePluginConfig<ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>, AllLayerParams extends Record<string, any>>{
-  name: string
-  defaultParams?: PluginParams
-  validator?: (params: DeepPartial<AllLayerParams | PluginParams>) => ValidatorResult
-    // { valid: boolean; errors?: string[] }
-  layers?: LayerEntity<ExtendContext, PluginParams, AllLayerParams[keyof AllLayerParams]>[]
-  // extendContext?: (context: Readonly<ChartContext>) => ExtendContext
-  setup?: (props: PluginSetupProps<ExtendContext, PluginParams>) => () => void
-}
-
-// export interface CreatePlugin<PluginParams> {
-//   (config: DefinePluginConfig<PluginParams>): PluginEntity<PluginParams>
-// }
-
-
-export interface PluginEntity<ElementType extends 'svg' | 'canvas', PluginParams extends Record<string, any>, AllLayerParams extends Record<string, any>> {
-  readonly _name: string
-  readonly _elementType: ElementType
-  _getId: () => string
-  _setId: (id: string) => void
-  _injectContext(context: ChartContext<{}>): void
-  // layer visibility controls
-  show(names: (keyof AllLayerParams) | (keyof AllLayerParams)[]): void
-  showOnly(names: (keyof AllLayerParams) | (keyof AllLayerParams)[]): void
-  showAll(): void
-  hide(names: (keyof AllLayerParams) | (keyof AllLayerParams)[]): void
-  hideAll(): void
-  toggle(names: (keyof AllLayerParams) | (keyof AllLayerParams)[]): void
-  getShownLayerNames(): (keyof AllLayerParams)[]
-  // layer params
-  // setLayers(partial: DeepPartial<PluginParams>): void // deep-merge with default
-  updateParams(patch: DeepPartial<PluginParams | AllLayerParams>): void // deep-merge with previous
-  forceReplaceParams(full: PluginParams | AllLayerParams): void // replace（特殊需求，可節省效能）
-  getParams(): Readonly<PluginParams | AllLayerParams>
-  // layer<LayerName extends keyof PluginParams>(name: LayerName): {
-  //   // set(partial: DeepPartial<PluginParams[LayerName]>): void // deep-merge with default 該 layer 的 params
-  //   update(patch: DeepPartial<PluginParams[LayerName]>): void // deep-merge with previous 該 layer 的 params
-  //   replace(full: PluginParams[LayerName]): void // replace（特殊需求，可節省效能）
-  //   show(): void
-  //   hide(): void
-  //   toggle(): void
-  // }
-
-  destroy(): void
-
-  // outputs (observables)
-  // layers$: Observable<LayersConfig> // 各 layer 的有效參數（合併後）
-  // visibleLayerNames$: Observable<string[]> // 目前可見的 layer 清單（原 show$）
-  // event$: Observable<{ data: EventData; event: Event }> // 互動事件
-}
-
-
+import { Observable, Subject } from 'rxjs'
+import type {
+  DeepPartial,
+  LayerEntity,
+  ChartContext,
+  ExtendableContext
+} from './index'
+import { ValidatorResult } from '../types/Validator'
+
+
+export interface PluginInfo {
+  id: string
+  name: string
+  elementType: 'svg' | 'canvas'
+  shownLayers: string[]
+}
+
+// export interface PluginSetupProps<ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>> {
+//   context: ChartContext<ExtendContext>
+//   svg: SVGElement
+//   canvas: HTMLCanvasElement
+//   pluginParams$: Observable<PluginParams>
+// }
+
+// export interface SVGPluginSetupProps<ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>> {
+//   context: ChartContext<ExtendContext>
+//   svgG: SVGGElement
+//   pluginParams$: Observable<PluginParams>
+// }
+
+// export interface CanvasPluginSetupProps<ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>> {
+//   context: ChartContext<ExtendContext>
+//   canvas: HTMLCanvasElement
+//   pluginParams$: Observable<PluginParams>
+// }
+
+// export type PluginSetupProps<ElementType extends 'svg' | 'canvas', ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>> =
+//   ElementType extends 'svg' ? SVGPluginSetupProps<ExtendContext, PluginParams> :
+//   ElementType extends 'canvas' ? CanvasPluginSetupProps<ExtendContext, PluginParams> :
+//   never
+
+export interface PluginSetupProps<ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>> {
+  context: ChartContext<ExtendContext>
+  pluginParams$: Observable<PluginParams>
+}
+
+export interface DefinePluginConfig<ExtendContext extends ExtendableContext, PluginParams extends Record<string, any>, AllLayerParams extends Record<string, any>>{
+  name: string
+  defaultParams?: PluginParams
+  validator?: (params: DeepPartial<AllLayerParams | PluginParams>) => ValidatorResult
+    // { valid: boolean; errors?: string[] }
+  // Layer 建構子陣列——由 createPlugin 在「每個 plugin 實例」建立時各自實例化。
+  // （Layer 內部狀態（enableProps$ 等）不可跨 plugin 實例共用，否則同頁多個
+  //   plugin 實例會互搶 layer，造成部分圖表不繪製）
+  layers?: (new () => LayerEntity<ExtendContext, PluginParams, AllLayerParams[keyof AllLayerParams]>)[]
+  // extendContext?: (context: Readonly<ChartContext>) => ExtendContext
+  setup?: (props: PluginSetupProps<ExtendContext, PluginParams>) => () => void
+}
+
+// export interface CreatePlugin<PluginParams> {
+//   (config: DefinePluginConfig<PluginParams>): PluginEntity<PluginParams>
+// }
+
+
+export interface PluginEntity<ElementType extends 'svg' | 'canvas', PluginParams extends Record<string, any>, AllLayerParams extends Record<string, any>> {
+  readonly _name: string
+  readonly _elementType: ElementType
+  _getId: () => string
+  _setId: (id: string) => void
+  _injectContext(context: ChartContext<{}>): void
+  // layer visibility controls
+  show(names: (keyof AllLayerParams) | (keyof AllLayerParams)[]): void
+  showOnly(names: (keyof AllLayerParams) | (keyof AllLayerParams)[]): void
+  showAll(): void
+  hide(names: (keyof AllLayerParams) | (keyof AllLayerParams)[]): void
+  hideAll(): void
+  toggle(names: (keyof AllLayerParams) | (keyof AllLayerParams)[]): void
+  getShownLayerNames(): (keyof AllLayerParams)[]
+  // layer params
+  // setLayers(partial: DeepPartial<PluginParams>): void // deep-merge with default
+  updateParams(patch: DeepPartial<PluginParams | AllLayerParams>): void // deep-merge with previous
+  forceReplaceParams(full: PluginParams | AllLayerParams): void // replace（特殊需求，可節省效能）
+  getParams(): Readonly<PluginParams | AllLayerParams>
+  // layer<LayerName extends keyof PluginParams>(name: LayerName): {
+  //   // set(partial: DeepPartial<PluginParams[LayerName]>): void // deep-merge with default 該 layer 的 params
+  //   update(patch: DeepPartial<PluginParams[LayerName]>): void // deep-merge with previous 該 layer 的 params
+  //   replace(full: PluginParams[LayerName]): void // replace（特殊需求，可節省效能）
+  //   show(): void
+  //   hide(): void
+  //   toggle(): void
+  // }
+
+  destroy(): void
+
+  // outputs (observables)
+  // layers$: Observable<LayersConfig> // 各 layer 的有效參數（合併後）
+  // visibleLayerNames$: Observable<string[]> // 目前可見的 layer 清單（原 show$）
+  // event$: Observable<{ data: EventData; event: Event }> // 互動事件
+}
+
+

package/src/types/RawData.ts

@@ -1,67 +1,67 @@
-
-
-// RawData -> ModelData (DataEndoding & ModelType) -> RenderData (Plugin)
-
-
-
-export type RawData = RawDataColumn[] | RawDataColumn[][] // 二維陣列會轉化為多個dataset
-
-// 可透過 DataEncoding 更改欄位名稱的預設欄位
-export type DynamicDefaultRawDataFields = {
-  value?: number | null
-  x?: number | null // multivariate
-  y?: number | null // multivariate
-  z?: number | null // multivariate
-  dataset?: string
-  series?: string
-  category?: string
-}
-
-export type RawDataColumn<DynamicFields extends Record<string, any> = DynamicDefaultRawDataFields> = {
-  // 不可變更的基本欄位
-  id?: string
-  name?: string
-  source?: string
-  target?: string
-  parent?: string
-  data?: any
-} & DynamicFields // 可變更的欄位
-
-
-
-// export type DynamicRawDataColumn<
-//   ValueField extends string = 'value',
-//   DatasetField extends string = 'dataset', 
-//   SeriesField extends string = 'series',
-//   CategoryField extends string = 'category'
-// > = {
-//   id?: string
-//   name?: string
-//   source?: string
-//   target?: string
-//   parent?: string
-//   data?: any
-// } & {
-//   [K in ValueField]: number | null
-// } & {
-//   [K in DatasetField]?: string
-// } & {
-//   [K in SeriesField]?: string
-// } & {
-//   [K in CategoryField]?: string
-// }
-
-// export type FlexibleRawDataColumn<T extends Record<string, any> = {}> = {
-//   id?: string
-//   value?: number | null
-//   name?: string
-//   dataset?: string
-//   series?: string
-//   category?: string
-//   source?: string
-//   target?: string
-//   parent?: string
-//   data?: any
-// } & T
-
-
+
+
+// RawData -> ModelData (DataEndoding & ModelType) -> RenderData (Plugin)
+
+
+
+export type RawData = RawDataColumn[] | RawDataColumn[][] // 二維陣列會轉化為多個dataset
+
+// 可透過 DataEncoding 更改欄位名稱的預設欄位
+export type DynamicDefaultRawDataFields = {
+  value?: number | null
+  x?: number | null // multivariate
+  y?: number | null // multivariate
+  z?: number | null // multivariate
+  dataset?: string
+  series?: string
+  category?: string
+}
+
+export type RawDataColumn<DynamicFields extends Record<string, any> = DynamicDefaultRawDataFields> = {
+  // 不可變更的基本欄位
+  id?: string
+  name?: string
+  source?: string
+  target?: string
+  parent?: string
+  data?: any
+} & DynamicFields // 可變更的欄位
+
+
+
+// export type DynamicRawDataColumn<
+//   ValueField extends string = 'value',
+//   DatasetField extends string = 'dataset', 
+//   SeriesField extends string = 'series',
+//   CategoryField extends string = 'category'
+// > = {
+//   id?: string
+//   name?: string
+//   source?: string
+//   target?: string
+//   parent?: string
+//   data?: any
+// } & {
+//   [K in ValueField]: number | null
+// } & {
+//   [K in DatasetField]?: string
+// } & {
+//   [K in SeriesField]?: string
+// } & {
+//   [K in CategoryField]?: string
+// }
+
+// export type FlexibleRawDataColumn<T extends Record<string, any> = {}> = {
+//   id?: string
+//   value?: number | null
+//   name?: string
+//   dataset?: string
+//   series?: string
+//   category?: string
+//   source?: string
+//   target?: string
+//   parent?: string
+//   data?: any
+// } & T
+
+

package/src/types/RenderData.ts

@@ -1,16 +1,16 @@
-import type {
-  ModelType,
-  ModelDatum,
-  ModelDatumGraphEdge
-} from './index'
-
-// 基礎型別，其他欄位留給 Plugin 擴充
-// export interface RenderDatumBase<T extends ModelType> {
-//   modelDatum: ModelDatum<T>
-// }
-export type RenderDatumBase<
-  T extends ModelType,
-  ExtendTypes extends Record<string, any> = {}
-> = ModelDatum<T> & ExtendTypes
-
+import type {
+  ModelType,
+  ModelDatum,
+  ModelDatumGraphEdge
+} from './index'
+
+// 基礎型別，其他欄位留給 Plugin 擴充
+// export interface RenderDatumBase<T extends ModelType> {
+//   modelDatum: ModelDatum<T>
+// }
+export type RenderDatumBase<
+  T extends ModelType,
+  ExtendTypes extends Record<string, any> = {}
+> = ModelDatum<T> & ExtendTypes
+
 export type RenderDatumGraphEdge<ExtendTypes extends Record<string, any> = {}> = ModelDatumGraphEdge & ExtendTypes

package/src/types/Theme.ts

@@ -1,21 +1,21 @@
-
-export interface Colors {
-  data: string[],
-  primary: string,
-  secondary: string,
-  dataContrast: string[],
-  background: string
-}
-
-export type ColorScheme = 'light' | 'dark'
-
-export interface Theme {
-  colorScheme: ColorScheme | 'auto'
-  colors: {
-    light: Colors,
-    dark: Colors
-  },
-  fontSize: string | number
-}
-
+
+export interface Colors {
+  data: string[],
+  primary: string,
+  secondary: string,
+  dataContrast: string[],
+  background: string
+}
+
+export type ColorScheme = 'light' | 'dark'
+
+export interface Theme {
+  colorScheme: ColorScheme | 'auto'
+  colors: {
+    light: Colors,
+    dark: Colors
+  },
+  fontSize: string | number
+}
+
 export type ColorType = 'none' | keyof Colors