@orbcharts/core 3.0.0-alpha.61 → 3.0.0-alpha.62

package/src/base/createBasePlugin.ts

@@ -1,95 +1,152 @@
-import { of, takeUntil, map, switchMap, shareReplay, startWith, Subject, BehaviorSubject, Observable } from 'rxjs'
-import type { ChartType, CreateBasePlugin, PluginInitFn, PluginContext } from '../types'
-import { mergeOptionsWithDefault } from '../utils'
-
-// 建立plugin實例
-function createPlugin <T extends ChartType, PluginName, PluginParams>({ name, defaultParams, initFn }: {
-  name: PluginName
-  defaultParams: PluginParams
-  initFn: PluginInitFn<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(defaultParams)
-  const params$: Subject<Partial<typeof defaultParams>> = new BehaviorSubject({})
-  const fullParams$ = mergedDefaultParams$.pipe(
-    switchMap(mergedDefaultParams => {
-      return params$.pipe(
-        takeUntil(destroy$),
-        map(d => mergeOptionsWithDefault(d, mergedDefaultParams)),
-      )
-    }),
-    shareReplay(1)
-  )
-
-  // 建立plugin實例
-  const pluginEntity = {
-    params$,
-    name,
-    defaultParams,
-    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, defaultParams))
-      
-    },
-    setContext: (_pluginContext: PluginContext<T, PluginName, PluginParams>) => {
-      pluginContext = _pluginContext
-      pluginContext.observer.fullParams$ = fullParams$
-    }
-  }
-
-  return pluginEntity
-}
-
-// 建立plugin類別
-export const createBasePlugin: CreateBasePlugin = <T extends ChartType>() => {
-  
-  // 定義plugin
-  return function definePlugin<PluginName, PluginParams>(name: PluginName, defaultParams: PluginParams) {
-
-    // 定義plugin的初始化function
-    return function definePluginInitFn (initFn: PluginInitFn<T, PluginName, PluginParams>) {
-
-      return class Plugin  {
-        params$: Subject<Partial<PluginParams>>
-        name: PluginName
-        defaultParams: PluginParams
-        // presetParams: Partial<PluginParams>
-        init: () => void
-        destroy: () => void
-        setPresetParams: (presetParams: Partial<PluginParams>) => void
-        setContext: (pluginContext: PluginContext<T, PluginName, PluginParams>) => void
-        constructor () {
-          const pluginEntity = createPlugin<T, PluginName, PluginParams>({ name, defaultParams, initFn })
-          
-          this.params$ = pluginEntity.params$
-          this.name = pluginEntity.name
-          this.defaultParams = pluginEntity.defaultParams
-          // 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,
+  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: 'Chart.constructor'
+                }))
+              } else if (status === 'warning') {
+                console.warn(createValidatorWarningMessage({
+                  columnName,
+                  expectToBe,
+                  from: 'Chart.constructor'
+                }))
+              }
+              
+              return mergeOptionsWithDefault(d, mergedDefaultParams)
+            } catch (e) {
+              throw new Error(e.message)
+            }
+          }),
+          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
+        }
+      }
+    }
+  }
+}

package/src/base/validators/chartOptionsValidator.ts

@@ -0,0 +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
+}

package/src/base/validators/chartParamsValidator.ts

@@ -0,0 +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, {
+        series: {
+          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, {
+        series: {
+          toBeTypes: ['string[]'],
+        },
+        primary: {
+          toBeTypes: ['string'],
+        },
+        secondary: {
+          toBeTypes: ['string'],
+        },
+        white: {
+          toBeTypes: ['string'],
+        },
+        background: {
+          toBeTypes: ['string'],
+        },
+      })
+      
+      if (darkResult.status === 'error') {
+        return darkResult
+      }
+    }
+  }
+  
+  return result
+}

package/src/base/validators/elementValidator.ts

@@ -0,0 +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
+}

package/src/base/validators/pluginsValidator.ts

@@ -0,0 +1,15 @@
+import type { ChartType, PluginEntity, ValidatorResult } from '../../../lib/core-types'
+import { validateColumns } from '../../utils/validator'
+
+export function pluginsValidator (chartType: ChartType, pluginEntities: PluginEntity<any, any, any>[]): ValidatorResult {
+  const result = validateColumns({ pluginEntities }, {
+    pluginEntities: {
+      toBe: `PluginEntity<'${chartType}'>[]`,
+      test: (value: PluginEntity<any, any, any>[]) => {
+        return Array.isArray(value) && value.every((v) => v.chartType === chartType || v.chartType === 'noneData')
+      }
+    }
+  })
+  
+  return result
+}