@orbcharts/core 3.0.0-beta.8 → 3.0.0

package/src/base/createBasePlugin.ts

@@ -1,153 +1,154 @@
-import {
-  catchError,
-  of,
-  takeUntil,
-  map,
-  switchMap,
-  shareReplay,
-  startWith,
-  EMPTY,
-  Subject,
-  BehaviorSubject, 
-  Observable
-} from 'rxjs'
-import type {
-  ChartType,
-  CreateBasePlugin,
-  DefinePluginConfig,
-  PluginInitFn,
-  PluginContext,
-  PluginEntity } from '../../lib/core-types'
-import { mergeOptionsWithDefault } from '../utils'
-import { createValidatorErrorMessage, createValidatorWarningMessage, createOrbChartsErrorMessage } from '../utils/errorMessage'
-import { validateColumns } from '../utils/validator'
-
-// 建立plugin實例
-function createPluginEntity <T extends ChartType, PluginName, PluginParams>({ chartType, config, initFn }: {
-  chartType: T
-  config: DefinePluginConfig<PluginName, PluginParams>
-  initFn: PluginInitFn<T, PluginName, PluginParams>
-}): PluginEntity<T, PluginName, PluginParams> {
-        
-  const destroy$ = new Subject()
-  const EntityWeakMap = new WeakMap() // <selection, pluginEntity> 避免只移除selection而沒回收pluginEntity的memory leak
-  let pluginDestroyFn = () => {}
-  let pluginContext: PluginContext<T, PluginName, PluginParams> | undefined
-  const mergedDefaultParams$ = new BehaviorSubject(config.defaultParams)
-  const params$: Subject<Partial<typeof config.defaultParams>> = new BehaviorSubject({})
-  const fullParams$ = mergedDefaultParams$.pipe(
-    switchMap(mergedDefaultParams => {
-      return params$
-        .pipe(
-          takeUntil(destroy$),
-          map(d => {
-            try {
-              // 檢查 data$ 資料格式是否正確
-              const { status, columnName, expectToBe } = config.validator(d, {
-                validateColumns
-              })
-              if (status === 'error') {
-                throw new Error(createValidatorErrorMessage({
-                  columnName,
-                  expectToBe,
-                  from: `${config.name}.params$`
-                }))
-              } else if (status === 'warning') {
-                console.warn(createValidatorWarningMessage({
-                  columnName,
-                  expectToBe,
-                  from: `${config.name}.params$`
-                }))
-              }
-            } catch (e) {
-              // throw new Error(e.message)
-              // 驗證失敗仍繼續執行，才不會把 Observable 資料流給中斷掉
-              console.error(createOrbChartsErrorMessage(e))
-            }
-            return mergeOptionsWithDefault(d, mergedDefaultParams)
-          }),
-          // catchError((e) => {
-          //   console.error(createOrbChartsErrorMessage(e))
-          //   return EMPTY
-          // })
-        )
-    }),
-    shareReplay(1)
-  )
-
-  // 建立plugin實例
-  return {
-    params$,
-    name: config.name,
-    chartType,
-    defaultParams: config.defaultParams,
-    layerIndex: config.layerIndex,
-    init () {
-      if (!pluginContext) {
-        return
-      }
-      // 執行
-      pluginDestroyFn = (initFn(pluginContext) ?? (() => {})) // plugin執行會回傳destroy函式
-      EntityWeakMap.set(pluginContext.selection, pluginContext)
-    },
-    destroy () {
-      pluginDestroyFn()
-      if (pluginContext) {
-        pluginContext.selection.remove()
-        pluginContext = undefined
-      }
-      destroy$.next(undefined)
-    },
-    setPresetParams: (presetParams: Partial<PluginParams>) => {
-      mergedDefaultParams$.next(mergeOptionsWithDefault(presetParams, config.defaultParams))
-      
-    },
-    setContext: (_pluginContext: PluginContext<T, PluginName, PluginParams>) => {
-      pluginContext = _pluginContext
-      pluginContext.observer.fullParams$ = fullParams$
-    }
-  }
-}
-
-// 建立plugin類別
-export const createBasePlugin: CreateBasePlugin = <T extends ChartType>(chartType: T) => {
-  
-  // 定義plugin
-  return function definePlugin<PluginName, PluginParams>(config: DefinePluginConfig<PluginName, PluginParams>) {
-
-    // 定義plugin的初始化function
-    return function definePluginInitFn (initFn: PluginInitFn<T, PluginName, PluginParams>) {
-
-      return class Plugin {
-        params$: Subject<Partial<PluginParams>>
-        name: PluginName
-        chartType: T
-        defaultParams: PluginParams
-        layerIndex: number
-        // presetParams: Partial<PluginParams>
-        init: () => void
-        destroy: () => void
-        setPresetParams: (presetParams: Partial<PluginParams>) => void
-        setContext: (pluginContext: PluginContext<T, PluginName, PluginParams>) => void
-        constructor () {
-          const pluginEntity = createPluginEntity<T, PluginName, PluginParams>({
-            chartType,
-            config,
-            initFn
-          })
-          
-          this.params$ = pluginEntity.params$
-          this.name = pluginEntity.name
-          this.chartType = pluginEntity.chartType
-          this.defaultParams = pluginEntity.defaultParams
-          this.layerIndex = pluginEntity.layerIndex
-          // this.presetParams = pluginEntity.presetParams
-          this.init = pluginEntity.init
-          this.destroy = pluginEntity.destroy
-          this.setPresetParams = pluginEntity.setPresetParams
-          this.setContext = pluginEntity.setContext
-        }
-      }
-    }
-  }
-}
+import {
+  catchError,
+  of,
+  takeUntil,
+  map,
+  switchMap,
+  shareReplay,
+  startWith,
+  EMPTY,
+  Subject,
+  BehaviorSubject, 
+  Observable
+} from 'rxjs'
+import type {
+  ChartType,
+  CreateBasePlugin,
+  DeepPartial,
+  DefinePluginConfig,
+  PluginInitFn,
+  PluginContext,
+  PluginEntity } from '../../lib/core-types'
+import { mergeOptionsWithDefault } from '../utils'
+import { createValidatorErrorMessage, createValidatorWarningMessage, createOrbChartsErrorMessage } from '../utils/errorMessage'
+import { validateColumns } from '../utils/validator'
+
+// 建立plugin實例
+function createPluginEntity <T extends ChartType, PluginName, PluginParams>({ chartType, config, initFn }: {
+  chartType: T
+  config: DefinePluginConfig<PluginName, PluginParams>
+  initFn: PluginInitFn<T, PluginName, PluginParams>
+}): PluginEntity<T, PluginName, PluginParams> {
+        
+  const destroy$ = new Subject()
+  const EntityWeakMap = new WeakMap() // <selection, pluginEntity> 避免只移除selection而沒回收pluginEntity的memory leak
+  let pluginDestroyFn = () => {}
+  let pluginContext: PluginContext<T, PluginName, PluginParams> | undefined
+  const mergedDefaultParams$ = new BehaviorSubject(config.defaultParams)
+  const params$: Subject<DeepPartial<typeof config.defaultParams>> = new BehaviorSubject({})
+  const fullParams$ = mergedDefaultParams$.pipe(
+    switchMap(mergedDefaultParams => {
+      return params$
+        .pipe(
+          takeUntil(destroy$),
+          map(d => {
+            try {
+              // 檢查 data$ 資料格式是否正確
+              const { status, columnName, expectToBe } = config.validator(d, {
+                validateColumns
+              })
+              if (status === 'error') {
+                throw new Error(createValidatorErrorMessage({
+                  columnName,
+                  expectToBe,
+                  from: `${config.name}.params$`
+                }))
+              } else if (status === 'warning') {
+                console.warn(createValidatorWarningMessage({
+                  columnName,
+                  expectToBe,
+                  from: `${config.name}.params$`
+                }))
+              }
+            } catch (e) {
+              // throw new Error(e.message)
+              // 驗證失敗仍繼續執行，才不會把 Observable 資料流給中斷掉
+              console.error(createOrbChartsErrorMessage(e))
+            }
+            return mergeOptionsWithDefault(d, mergedDefaultParams)
+          }),
+          // catchError((e) => {
+          //   console.error(createOrbChartsErrorMessage(e))
+          //   return EMPTY
+          // })
+        )
+    }),
+    shareReplay(1)
+  )
+
+  // 建立plugin實例
+  return {
+    params$,
+    name: config.name,
+    chartType,
+    defaultParams: config.defaultParams,
+    layerIndex: config.layerIndex,
+    init () {
+      if (!pluginContext) {
+        return
+      }
+      // 執行
+      pluginDestroyFn = (initFn(pluginContext) ?? (() => {})) // plugin執行會回傳destroy函式
+      EntityWeakMap.set(pluginContext.selection, pluginContext)
+    },
+    destroy () {
+      pluginDestroyFn()
+      if (pluginContext) {
+        pluginContext.selection.remove()
+        pluginContext = undefined
+      }
+      destroy$.next(undefined)
+    },
+    setPresetParams: (presetParams: DeepPartial<PluginParams>) => {
+      mergedDefaultParams$.next(mergeOptionsWithDefault(presetParams, config.defaultParams))
+      
+    },
+    setContext: (_pluginContext: PluginContext<T, PluginName, PluginParams>) => {
+      pluginContext = _pluginContext
+      pluginContext.observer.fullParams$ = fullParams$
+    }
+  }
+}
+
+// 建立plugin類別
+export const createBasePlugin: CreateBasePlugin = <T extends ChartType>(chartType: T) => {
+  
+  // 定義plugin
+  return function definePlugin<PluginName, PluginParams>(config: DefinePluginConfig<PluginName, PluginParams>) {
+
+    // 定義plugin的初始化function
+    return function definePluginInitFn (initFn: PluginInitFn<T, PluginName, PluginParams>) {
+
+      return class Plugin {
+        params$: Subject<DeepPartial<PluginParams>>
+        name: PluginName
+        chartType: T
+        defaultParams: PluginParams
+        layerIndex: number
+        // presetParams: Partial<PluginParams>
+        init: () => void
+        destroy: () => void
+        setPresetParams: (presetParams: DeepPartial<PluginParams>) => void
+        setContext: (pluginContext: PluginContext<T, PluginName, PluginParams>) => void
+        constructor () {
+          const pluginEntity = createPluginEntity<T, PluginName, PluginParams>({
+            chartType,
+            config,
+            initFn
+          })
+          
+          this.params$ = pluginEntity.params$
+          this.name = pluginEntity.name
+          this.chartType = pluginEntity.chartType
+          this.defaultParams = pluginEntity.defaultParams
+          this.layerIndex = pluginEntity.layerIndex
+          // this.presetParams = pluginEntity.presetParams
+          this.init = pluginEntity.init
+          this.destroy = pluginEntity.destroy
+          this.setPresetParams = pluginEntity.setPresetParams
+          this.setContext = pluginEntity.setContext
+        }
+      }
+    }
+  }
+}

package/src/base/validators/chartOptionsValidator.ts

@@ -1,24 +1,24 @@
-import type { ChartOptionsPartial, ChartType, ValidatorResult } from '../../../lib/core-types'
-import { validateColumns } from '../../utils/validator'
-
-export function chartOptionsValidator<T extends ChartType> (chartOptionsPartial: ChartOptionsPartial<T>): ValidatorResult {
-  if (!chartOptionsPartial) {
-    // chartOptions 可為空值
-    return { status: 'success', columnName: '', expectToBe: '' }
-  }
-  const result = validateColumns(chartOptionsPartial, {
-    width: {
-      toBe: '"auto" | number',
-      test: (value: any) => value === 'auto' || typeof value === 'number'
-    },
-    height: {
-      toBe: '"auto" | number',
-      test: (value: any) => value === 'auto' || typeof value === 'number'
-    },
-    preset: {
-      toBeTypes: ['object']
-    }
-  })
-  
-  return result
+import type { ChartOptionsPartial, ChartType, ValidatorResult } from '../../../lib/core-types'
+import { validateColumns } from '../../utils/validator'
+
+export function chartOptionsValidator<T extends ChartType> (chartOptionsPartial: ChartOptionsPartial<T>): ValidatorResult {
+  if (!chartOptionsPartial) {
+    // chartOptions 可為空值
+    return { status: 'success', columnName: '', expectToBe: '' }
+  }
+  const result = validateColumns(chartOptionsPartial, {
+    width: {
+      toBe: '"auto" | number',
+      test: (value: any) => value === 'auto' || typeof value === 'number'
+    },
+    height: {
+      toBe: '"auto" | number',
+      test: (value: any) => value === 'auto' || typeof value === 'number'
+    },
+    preset: {
+      toBeTypes: ['object']
+    }
+  })
+  
+  return result
 }

package/src/base/validators/chartParamsValidator.ts

@@ -1,134 +1,134 @@
-import type { ChartParamsPartial, ChartType, ValidatorResult } from '../../../lib/core-types'
-import { validateColumns } from '../../utils/validator'
-
-export function chartParamsValidator (chartType: ChartType, chartParamsPartial: ChartParamsPartial | undefined): ValidatorResult {
-  const highlightTargetToBe: {[key in ChartType]: string[]} = {
-    series: ['series', 'datum', 'none'],
-    grid: ['series', 'group', 'datum', 'none'],
-    multiGrid: ['series', 'group', 'datum', 'none'],
-    multiValue: ['category', 'datum', 'none'],
-    relationship: ['category', 'datum', 'none'],
-    tree: ['category', 'datum', 'none'],
-    noneData: ['none']
-  }
-  
-  const result = validateColumns(chartParamsPartial, {
-    padding: {
-      toBeTypes: ['object'],
-    },
-    highlightTarget: {
-      toBe: highlightTargetToBe[chartType].map(d => `"${d}"`).join(' | '),
-      test: (value: any) => {
-        return highlightTargetToBe[chartType].includes(value)
-      }
-    },
-    highlightDefault: {
-      toBeTypes: ['string', 'null']
-    },
-    colorScheme: {
-      toBe: '"dark" | "light"',
-      test: (value: any) => value === 'dark' || value === 'light'
-    },
-    colors: {
-      toBeTypes: ['object'],
-      test: (value: any) => {
-        return value.light && value.dark
-      }
-    },
-    styles: {
-      toBeTypes: ['object'],
-    },
-    transitionDuration: {
-      toBeTypes: ['number'],
-    },
-    transitionEase: {
-      toBeTypes: ['string'],
-    }
-  })
-
-  if (chartParamsPartial && chartParamsPartial.padding) {
-    const paddingResult = validateColumns(chartParamsPartial.padding, {
-      top: {
-        toBeTypes: ['number'],
-      },
-      right: {
-        toBeTypes: ['number'],
-      },
-      bottom: {
-        toBeTypes: ['number'],
-      },
-      left: {
-        toBeTypes: ['number'],
-      },
-    })
-    
-    if (paddingResult.status === 'error') {
-      return paddingResult
-    }
-  }
-
-  if (chartParamsPartial && chartParamsPartial.colors) {
-    const colorsResult = validateColumns(chartParamsPartial.colors, {
-      light: {
-        toBeTypes: ['object'],
-      },
-      dark: {
-        toBeTypes: ['object'],
-      },
-    })
-    
-    if (colorsResult.status === 'error') {
-      return colorsResult
-    }
-
-    if (chartParamsPartial.colors.light) {
-      const lightResult = validateColumns(chartParamsPartial.colors.light, {
-        label: {
-          toBeTypes: ['string[]'],
-        },
-        primary: {
-          toBeTypes: ['string'],
-        },
-        secondary: {
-          toBeTypes: ['string'],
-        },
-        white: {
-          toBeTypes: ['string'],
-        },
-        background: {
-          toBeTypes: ['string'],
-        },
-      })
-      
-      if (lightResult.status === 'error') {
-        return lightResult
-      }
-    }
-
-    if (chartParamsPartial.colors.dark) {
-      const darkResult = validateColumns(chartParamsPartial.colors.dark, {
-        label: {
-          toBeTypes: ['string[]'],
-        },
-        primary: {
-          toBeTypes: ['string'],
-        },
-        secondary: {
-          toBeTypes: ['string'],
-        },
-        white: {
-          toBeTypes: ['string'],
-        },
-        background: {
-          toBeTypes: ['string'],
-        },
-      })
-      
-      if (darkResult.status === 'error') {
-        return darkResult
-      }
-    }
-  }
-  
-  return result
+import type { ChartParamsPartial, ChartType, ValidatorResult } from '../../../lib/core-types'
+import { validateColumns } from '../../utils/validator'
+
+export function chartParamsValidator (chartType: ChartType, chartParamsPartial: ChartParamsPartial | undefined): ValidatorResult {
+  const highlightTargetToBe: {[key in ChartType]: string[]} = {
+    series: ['series', 'datum', 'none'],
+    grid: ['series', 'group', 'datum', 'none'],
+    multiGrid: ['series', 'group', 'datum', 'none'],
+    multiValue: ['category', 'datum', 'none'],
+    relationship: ['category', 'datum', 'none'],
+    tree: ['category', 'datum', 'none'],
+    noneData: ['none']
+  }
+  
+  const result = validateColumns(chartParamsPartial, {
+    padding: {
+      toBeTypes: ['object'],
+    },
+    highlightTarget: {
+      toBe: highlightTargetToBe[chartType].map(d => `"${d}"`).join(' | '),
+      test: (value: any) => {
+        return highlightTargetToBe[chartType].includes(value)
+      }
+    },
+    highlightDefault: {
+      toBeTypes: ['string', 'null']
+    },
+    colorScheme: {
+      toBe: '"dark" | "light"',
+      test: (value: any) => value === 'dark' || value === 'light'
+    },
+    colors: {
+      toBeTypes: ['object'],
+      test: (value: any) => {
+        return value.light && value.dark
+      }
+    },
+    styles: {
+      toBeTypes: ['object'],
+    },
+    transitionDuration: {
+      toBeTypes: ['number'],
+    },
+    transitionEase: {
+      toBeTypes: ['string'],
+    }
+  })
+
+  if (chartParamsPartial && chartParamsPartial.padding) {
+    const paddingResult = validateColumns(chartParamsPartial.padding, {
+      top: {
+        toBeTypes: ['number'],
+      },
+      right: {
+        toBeTypes: ['number'],
+      },
+      bottom: {
+        toBeTypes: ['number'],
+      },
+      left: {
+        toBeTypes: ['number'],
+      },
+    })
+    
+    if (paddingResult.status === 'error') {
+      return paddingResult
+    }
+  }
+
+  if (chartParamsPartial && chartParamsPartial.colors) {
+    const colorsResult = validateColumns(chartParamsPartial.colors, {
+      light: {
+        toBeTypes: ['object'],
+      },
+      dark: {
+        toBeTypes: ['object'],
+      },
+    })
+    
+    if (colorsResult.status === 'error') {
+      return colorsResult
+    }
+
+    if (chartParamsPartial.colors.light) {
+      const lightResult = validateColumns(chartParamsPartial.colors.light, {
+        label: {
+          toBeTypes: ['string[]'],
+        },
+        primary: {
+          toBeTypes: ['string'],
+        },
+        secondary: {
+          toBeTypes: ['string'],
+        },
+        labelContrast: {
+          toBeTypes: ['string[]'],
+        },
+        background: {
+          toBeTypes: ['string'],
+        },
+      })
+      
+      if (lightResult.status === 'error') {
+        return lightResult
+      }
+    }
+
+    if (chartParamsPartial.colors.dark) {
+      const darkResult = validateColumns(chartParamsPartial.colors.dark, {
+        label: {
+          toBeTypes: ['string[]'],
+        },
+        primary: {
+          toBeTypes: ['string'],
+        },
+        secondary: {
+          toBeTypes: ['string'],
+        },
+        labelContrast: {
+          toBeTypes: ['string[]'],
+        },
+        background: {
+          toBeTypes: ['string'],
+        },
+      })
+      
+      if (darkResult.status === 'error') {
+        return darkResult
+      }
+    }
+  }
+  
+  return result
 }

package/src/base/validators/elementValidator.ts

@@ -1,14 +1,14 @@
-import type { ValidatorResult } from '../../../lib/core-types'
-import { validateColumns } from '../../utils/validator'
-import { isDom } from '../../utils/commonUtils'
-
-export function elementValidator (element: HTMLElement | Element): ValidatorResult {
-  const result = validateColumns({ element }, {
-    element: {
-      toBe: 'Dom',
-      test: (value: any) => isDom(value)
-    },
-  })
-  
-  return result
+import type { ValidatorResult } from '../../../lib/core-types'
+import { validateColumns } from '../../utils/validator'
+import { isDom } from '../../utils/commonUtils'
+
+export function elementValidator (element: HTMLElement | Element): ValidatorResult {
+  const result = validateColumns({ element }, {
+    element: {
+      toBe: 'Dom',
+      test: (value: any) => isDom(value)
+    },
+  })
+  
+  return result
 }