@orbcharts/core 4.0.0-pre-alpha.4 → 4.0.0

package/src/chart/defaults.ts

@@ -13,15 +13,18 @@ export const DEFAULT_SIZE_CONFIG: SizeConfig = {
 export const DEFAULT_DATA_ENCODING: Encoding = {
   dataset: {
     from: 'dataset',
-    sort: 'original'
+    sort: 'original',
+    ignore: false
   },
   series: {
     from: 'series',
-    sort: 'original'
+    sort: 'original',
+    ignore: false
   },
   category: {
     from: 'category',
-    sort: 'original'
+    sort: 'original',
+    ignore: false
   },
   value: {
     from: 'value',
@@ -34,7 +37,7 @@ export const DEFAULT_DATA_ENCODING: Encoding = {
     { from: 'z', name: 'z' },
   ],
   color: {
-    from: 'series',
+    by: 'series',
   }
 }
 
@@ -61,16 +64,26 @@ export const DEFAULT_THEME: Theme = {
   colors: {
     light: {
       data: [
-        "#0088FF",
-        "#FF3232",
-        "#38BEA8",
-        "#6F3BD5",
-        "#314285",
-        "#42C724",
-        "#D52580",
-        "#F4721B",
-        "#D117EA",
-        "#7E7D7D"
+        // "#0088FF",
+        // "#FF3232",
+        // "#38BEA8",
+        // "#6F3BD5",
+        // "#314285",
+        // "#42C724",
+        // "#D52580",
+        // "#F4721B",
+        // "#D117EA",
+        // "#7E7D7D"
+        '#4E79A7', // blue
+        '#F28E2B', // orange
+        '#E15759', // red
+        '#76B7B2', // teal
+        '#59A14F', // green
+        '#EDC948', // yellow (已調過不刺眼)
+        '#B07AA1', // purple
+        '#FF9DA7', // pink
+        '#9C755F', // brown
+        '#BAB0AC', // gray
       ],
       primary: '#000000',
       secondary: '#e0e0e0',
@@ -79,16 +92,26 @@ export const DEFAULT_THEME: Theme = {
     },
     dark: {
       data: [
-        "#4BABFF",
-        "#FF6C6C",
-        "#7DD3C4",
-        "#8E6BC9",
-        "#5366AC",
-        "#86DC72",
-        "#FF72BB",
-        "#F9B052",
-        "#EF76FF",
-        "#C4C4C4"
+        // "#4BABFF",
+        // "#FF6C6C",
+        // "#7DD3C4",
+        // "#8E6BC9",
+        // "#5366AC",
+        // "#86DC72",
+        // "#FF72BB",
+        // "#F9B052",
+        // "#EF76FF",
+        // "#C4C4C4"
+        '#7EA6E0', // blue (亮化)
+        '#FFB86B', // orange
+        '#FF7A7A', // red
+        '#6ED0CC', // teal
+        '#7ED97A', // green
+        '#FFE06E', // yellow
+        '#D4A5D8', // purple
+        '#FFB3BA', // pink
+        '#C89F7A', // brown
+        '#D3D3D3', // gray
       ],
       primary: '#FFFFFF',
       secondary: '#e0e0e0',

package/src/plugin/createPlugin.ts

@@ -43,15 +43,21 @@ export const createPlugin = <
   // const layerSVGElementsRef: Record<string, SVGElement> = {}
   // const layerCanvasElementsRef: Record<string, HTMLCanvasElement> = {}
 
+  // 每個 plugin 實例建立「自己的」layer 實體。
+  // Layer 內部狀態（enableProps$、setup 訂閱等）一次只能服務一個 plugin 實例，
+  // 若跨實例共用（例如 module 層級的單例），同頁多個 plugin 會互搶 layer，
+  // 造成部分圖表的 layer 不繪製或被銷毀。
+  const layers = config.layers.map((Layer) => new Layer())
+
   // 全部的layers
   const allLayerInstances = {
     // 將陣列轉成字典
-    ...config.layers.reduce((acc, layer) => {
+    ...layers.reduce((acc, layer) => {
       acc[layer._name as keyof AllLayerParams] = layer
       return acc
-    }, {} as Record<keyof AllLayerParams, typeof config.layers[number]>)
+    }, {} as Record<keyof AllLayerParams, typeof layers[number]>)
   }
-  const getAllLayerNamesSet = () => new Set(config.layers.map(l => l._name as keyof AllLayerParams))
+  const getAllLayerNamesSet = () => new Set(layers.map(l => l._name as keyof AllLayerParams))
   // const getParamsKeySet = (params: DeepPartial<PluginParams | AllLayerParams>): Set<keyof AllLayerParams> => {
   //   // 取得有設定 params 的 layer name
   //   if (params) {
@@ -72,7 +78,7 @@ export const createPlugin = <
   }
 
   // config 設定顯示的 layers
-  const systemInitLayerNames = config.layers.reduce((prev, current) => {
+  const systemInitLayerNames = layers.reduce((prev, current) => {
     if (current._initShow) {
       prev.push(current._name as keyof AllLayerParams)
     }
@@ -107,7 +113,7 @@ export const createPlugin = <
       const shownLayerNamesSeq: string[] = Array.from(ShownLayerNameSet)
         .map(name => [
           name,
-          config.layers.find(l => l._name === name)?._layerIndex ?? -1
+          layers.find(l => l._name === name)?._layerIndex ?? -1
         ])
         .filter(([, index]) => index !== -1)
         .sort((a, b) => (a[1] as number) - (b[1] as number))
@@ -138,6 +144,14 @@ export const createPlugin = <
   //   })
   // )
 
+  // 目前生效的 plugin 本身 params（預設值 + 歷次 patch 累積合併）。
+  // deepOverwrite 會忽略 defaults 中不存在的 key，因此建構子參數內的
+  // layer keys（如 { Bar: {} }）會被自然濾除，不會混入 plugin-level params。
+  let currentPluginParams: PluginParams = deepOverwrite(
+    (config.defaultParams ?? {}) as PluginParams,
+    (initPluginParams ?? {}) as DeepPartial<PluginParams>
+  )
+
   // update plugin params
   const patchPluginParams$ = new BehaviorSubject<DeepPartial<AllLayerParams | PluginParams> | undefined>(
     initPluginParams ?? {}
@@ -171,9 +185,8 @@ export const createPlugin = <
         console.error(createOrbChartsErrorMessage(e))
       }
 
-      const newParams = deepOverwrite(config.defaultParams, patch as DeepPartial<PluginParams> ?? {})
-      // console.log('newParams', newParams)
-      subscriber.next(newParams)
+      // currentPluginParams 已於 updateParams 中累積合併（歷次 patch 不互相覆蓋）
+      subscriber.next(currentPluginParams)
     })
 
     // -- force replace --
@@ -279,7 +292,7 @@ export const createPlugin = <
     // }
 
     // init layers
-    config.layers.forEach((layer) => {
+    layers.forEach((layer) => {
       if (ShownLayerNameSet.has(layer._name as keyof AllLayerParams)) {
         const layerEnableProps: LayerEnableProps<'svg' | 'canvas', ExtendContext, PluginParams, unknown> = 
           elementType === 'svg' ? 
@@ -397,7 +410,8 @@ export const createPlugin = <
     //   params = { ...params, ...partial }
     // },
     updateParams: (patch: DeepPartial<PluginParams | AllLayerParams>) => {
-      // plugin params
+      // plugin params（累積合併至目前值，使連續多次 updateParams 不互相覆蓋）
+      currentPluginParams = deepOverwrite(currentPluginParams, patch as DeepPartial<PluginParams>)
       patchPluginParams$.next(patch)
       // layer params
       Object.keys(patch).forEach((key) => {
@@ -411,6 +425,7 @@ export const createPlugin = <
     },
     forceReplaceParams: (full: PluginParams | AllLayerParams) => {
       // plugin params
+      currentPluginParams = full as PluginParams
       forceReplacePluginParams$.next(full)
       // layer params
       Object.keys(full).forEach((key) => {
@@ -422,10 +437,12 @@ export const createPlugin = <
       // InitLayerNameSet$.next(getParamsKeySet(full))
     },
     getParams: () => {
-      return config.layers.reduce((acc, layer) => {
-        acc[layer._name] = layer._getParams()
-        return acc
-      }, {} as Record<string, any>) as PluginParams | AllLayerParams
+      // plugin 本身的 params 在前、各 layer params 在後
+      const result: Record<string, any> = Object.assign({}, currentPluginParams)
+      layers.forEach((layer) => {
+        result[layer._name] = layer._getParams()
+      })
+      return result as PluginParams | AllLayerParams
     },
     // layer: <LayerName extends keyof PluginParams>(name: LayerName) => ({
     //   // set: (partial: DeepPartial<PluginParams[LayerName]>) => {
@@ -458,7 +475,8 @@ export const createPlugin = <
       // IsShowLayerNameSet$.complete()
       ShownLayerNameSet$.complete()
       
-      config.layers.forEach((layer) => {
+      // layers 為本實例專屬，destroy 不影響其他 plugin 實例
+      layers.forEach((layer) => {
         layer._destroy()
       })
     },

package/src/test/createGraphData.test.ts

@@ -21,7 +21,7 @@ const testEncoding: Encoding = {
   category: { from: 'category', sort: 'original' },
   value: { from: 'value', sort: 'original', aggregate: 'none' },
   multivariate: [],
-  color: { from: 'category' }
+  color: { by: 'category' }
 }
 
 const testTheme: Theme = {

package/src/test/createTreeData.test.ts

@@ -27,7 +27,7 @@ const testEncoding: Encoding = {
   category: { from: 'category', sort: 'original' },
   value: { from: 'value', sort: 'original', aggregate: 'none' },
   multivariate: [],
-  color: { from: 'category' }
+  color: { by: 'category' }
 }
 
 const testTheme: Theme = {

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

@@ -20,7 +20,7 @@ const testEncoding = {
   category: { from: 'category', sort: 'original' },
   value: { from: 'value', sort: 'original', aggregate: 'none' },
   multivariate: [],
-  color: { from: 'category' }
+  color: { by: 'category' }
 }
 
 const testTheme = {

package/src/types/Encoding.ts

@@ -4,16 +4,19 @@
 export interface EncodingDataset {
   from: string
   sort: 'original' | 'alphabetical' | string[]
+  ignore?: boolean
 }
 
 export interface EncodingSeries {
   from: string
   sort: 'original' | 'alphabetical' | string[]
+  ignore?: boolean
 }
 
 export interface EncodingCategory {
   from: string
   sort: 'original' | 'alphabetical' | string[]
+  ignore?: boolean
 }
 
 export interface EncodingValue {
@@ -30,7 +33,7 @@ export interface EncodingMultivariateItem {
 export type EncodingMultivariate = EncodingMultivariateItem[]
 
 export interface EncodingColor {
-  from: 'index' | 'series' | 'category' | 'dataset'
+  by: 'index' | 'series' | 'category' | 'dataset'
 }
 
 export interface Encoding {

package/src/types/Plugin.ts

@@ -49,7 +49,10 @@ export interface DefinePluginConfig<ExtendContext extends ExtendableContext, Plu
   defaultParams?: PluginParams
   validator?: (params: DeepPartial<AllLayerParams | PluginParams>) => ValidatorResult
     // { valid: boolean; errors?: string[] }
-  layers?: LayerEntity<ExtendContext, PluginParams, AllLayerParams[keyof AllLayerParams]>[]
+  // 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
 }

package/src/utils/colorUtils.ts

@@ -24,7 +24,7 @@ export function getColorByIndex(index: number, theme: Theme): string {
 }
 
 /**
- * 根據不同的 encoding.color.from 計算顏色
+ * 根據不同的 encoding.color.by 計算顏色
  * @param colorFrom 顏色來源類型
  * @param options 包含所有可能索引的選項物件
  * @param theme 主題設定

package/src/utils/encodingUtils.ts

@@ -0,0 +1,18 @@
+import type { RawDataColumn } from '../types'
+
+/**
+ * 解析單筆資料在某個 Encoding 維度（dataset / series / category）上的分組 key。
+ * 若該維度設定 ignore: true，所有資料一律回傳空字串，等於忽略此維度、全部視為同一組。
+ * fallback 預設為空字串，避免內部佔位值外洩成使用者看得到的顯示文字（例如 name）。
+ */
+export function resolveGroupKey(
+  datum: RawDataColumn,
+  dim: { from: string; ignore?: boolean },
+  fallback: string = ''
+): string {
+  if (dim.ignore) {
+    return ''
+  }
+  const key = (datum as any)[dim.from]
+  return key || fallback
+}

package/src/utils/index.ts

@@ -2,6 +2,7 @@ export * from './aggregateUtils'
 export * from './colorUtils'
 export * from './commonUtils'
 export * from './dom'
+export * from './encodingUtils'
 export * from './errorMessage'
 export * from './observables'
 export * from './orbchartsUtils'

package/src/utils/validator.ts

@@ -57,6 +57,16 @@ function getInvalidProperty<T> (data: T, rules: Partial<ValidatorRule<T>>) {
     if (rules[columnName as keyof T]) {
       const rule: ValidatorRuleToBeTypes | ValidatorRuleToBe | ValidatorRuleToBeOption = rules[columnName as keyof T]
       const value = data[columnName as keyof T]
+      // 明確傳入 undefined 視同「未提供該欄位」，不做驗證。
+      // 常見於呼叫端用 spread/條件式建構 options（例如
+      // `{ ...base, encoding: hasEncoding ? {...} : undefined }`），
+      // Object.keys() 仍會列出該屬性名稱，若不特別排除，這裡會誤判成
+      // "型別錯誤" 而不是 "沒有提供"（目前程式碼裡沒有任何規則真的需要
+      // 用 toBeTypes: ['undefined'] 去要求欄位必須是 undefined，所以一律
+      // 跳過是安全的）。
+      if (value === undefined) {
+        return false
+      }
       // 測試 "toBeTypes"
       if ((rule as ValidatorRuleToBeTypes).toBeTypes) {
         const toBeTypes = (rule as ValidatorRuleToBeTypes).toBeTypes