@orbcharts/core 3.0.0-alpha.32 → 3.0.0-alpha.34

package/src/multiGrid/multiGridObservables.ts

@@ -16,21 +16,16 @@ import type {
   ChartType,
   ChartParams,
   ComputedDataTypeMap,
-  ComputedDatumTypeMap,
-  ContextObserverFn,
+  ComputedDataGrid,
   DataTypeMap,
   DataFormatterTypeMap,
   DataFormatterGrid,
-  DataFormatterContext,
-  DataFormatterValueAxis,
-  DataFormatterGroupAxis,
   DataFormatterMultiGridContainer,
   EventMultiGrid,
   HighlightTarget,
   Layout,
   TransformData } from '../types'
-import { getMinAndMaxGrid, transposeData } from '../utils/orbchartsUtils'
-import { createAxisLinearScale, createAxisPointScale, createAxisQuantizeScale } from '../utils/d3Utils'
+import type { ContextObserverGridDetail } from '../types'
 import {
   highlightObservable,
   seriesDataMapObservable,
@@ -38,11 +33,17 @@ import {
 import {
   gridAxesTransformObservable,
   gridGraphicTransformObservable,
-  gridAxesOppositeTransformObservable,
+  gridGraphicReverseScaleObservable,
+  gridAxesReverseTransformObservable,
   gridAxesSizeObservable,
-  gridVisibleComputedDataObservable } from '../grid/gridObservables'
-import { DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT } from '../defaults'
+  existedSeriesLabelsObservable,
+  gridVisibleComputedDataObservable,
+  isSeriesPositionSeprateObservable,
+  gridContainerObservable } from '../grid/gridObservables'
+import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
+import { calcGridContainerPosition } from '../utils/orbchartsUtils'
 
+// 每一個grid計算出來的所有Observable
 export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
   fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
   computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
@@ -50,6 +51,122 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
   fullChartParams$: Observable<ChartParams>
   event$: Subject<EventMultiGrid>
 }) => {
+
+  // 建立Observables
+  function detailObservables ({ gridDataFormatter$, gridComputedData$, layout$, fullChartParams$, event$ }: {
+    // fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
+    // computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
+    gridDataFormatter$: Observable<DataFormatterGrid>
+    gridComputedData$: Observable<ComputedDataGrid>
+    layout$: Observable<Layout>
+    fullChartParams$: Observable<ChartParams>
+    event$: Subject<EventMultiGrid>
+  }): ContextObserverGridDetail {
+    
+    const isSeriesPositionSeprate$ = isSeriesPositionSeprateObservable({
+      computedData$: gridComputedData$,
+      fullDataFormatter$: gridDataFormatter$,
+    }).pipe(
+      shareReplay(1)
+    )
+  
+    const gridContainer$ = gridContainerObservable({
+      computedData$: gridComputedData$,
+      fullDataFormatter$: gridDataFormatter$,
+      fullChartParams$,
+      layout$
+    }).pipe(
+      shareReplay(1)
+    )
+    
+    const gridAxesTransform$ = gridAxesTransformObservable({
+      fullDataFormatter$: gridDataFormatter$,
+      layout$: layout$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    
+    const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
+      gridAxesTransform$
+    }).pipe(
+      shareReplay(1)
+    )
+    
+    const gridGraphicTransform$ = gridGraphicTransformObservable({
+      computedData$: gridComputedData$,
+      fullDataFormatter$: gridDataFormatter$,
+      layout$: layout$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
+      gridContainer$: gridContainer$,
+      gridAxesTransform$: gridAxesTransform$,
+      gridGraphicTransform$: gridGraphicTransform$,
+    })
+
+    const gridAxesSize$ = gridAxesSizeObservable({
+      fullDataFormatter$: gridDataFormatter$,
+      layout$: layout$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const datumList$ = gridComputedData$.pipe(
+      map(d => d.flat())
+    ).pipe(
+      shareReplay(1)
+    )
+
+    const gridHighlight$ = highlightObservable({
+      datumList$,
+      fullChartParams$: fullChartParams$,
+      event$: event$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const existedSeriesLabels$ = existedSeriesLabelsObservable({
+      computedData$: gridComputedData$,
+    })
+
+    const SeriesDataMap$ = seriesDataMapObservable({
+      datumList$: datumList$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const GroupDataMap$ = groupDataMapObservable({
+      datumList$: datumList$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const visibleComputedData$ = gridVisibleComputedDataObservable({
+      computedData$: gridComputedData$,
+    }).pipe(
+      shareReplay(1)
+    )
+
+
+    return {
+      isSeriesPositionSeprate$,
+      gridContainer$,
+      gridAxesTransform$,
+      gridAxesReverseTransform$,
+      gridGraphicTransform$,
+      gridGraphicReverseScale$,
+      gridAxesSize$,
+      gridHighlight$,
+      existedSeriesLabels$,
+      SeriesDataMap$,
+      GroupDataMap$,
+      visibleComputedData$,
+    }
+  }
+
   const destroy$ = new Subject()
 
   return combineLatest({
@@ -57,19 +174,29 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
     computedData: computedData$,
   }).pipe(
     switchMap(async (d) => d),
-    distinctUntilChanged((a, b) => {
-      // 只有當computedData的長度改變時，才重新計算
-      return a.computedData.length === b.computedData.length
-    }),
+    // distinctUntilChanged((a, b) => {
+    //   // 只有當computedData的長度改變時，才重新計算
+    //   return a.computedData.length === b.computedData.length
+    // }),
     map(data => {
       // 每次重新計算時，清除之前的訂閱
       destroy$.next(undefined)
 
+      const defaultGrid = data.fullDataFormatter.gridList[0] ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+
       return data.computedData.map((gridComputedData, gridIndex) => {
 
         // -- 取得該grid的data和dataFormatter
-        const gridDataFormatter = data.fullDataFormatter.multiGrid[gridIndex]
-          ?? data.fullDataFormatter.multiGrid[0] // 預設使用第0筆資料
+        const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
+        const gridDataFormatter: DataFormatterGrid = {
+          type: 'grid',
+          grid: {
+            ...grid
+          },
+          container: {
+            ...data.fullDataFormatter.container
+          }
+        }
         const gridDataFormatter$ = of(gridDataFormatter).pipe(
           takeUntil(destroy$),
           shareReplay(1)
@@ -80,104 +207,26 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
         )
 
         // -- 建立Observables --
-        const gridAxesTransform$ = gridAxesTransformObservable({
-          fullDataFormatter$: gridDataFormatter$,
-          layout$: layout$
-        }).pipe(
-          shareReplay(1)
-        )
-      
-        const gridGraphicTransform$ = gridGraphicTransformObservable({
-          computedData$: gridComputedData$,
-          fullDataFormatter$: gridDataFormatter$,
-          layout$: layout$
-        }).pipe(
-          shareReplay(1)
-        )
-      
-        const gridAxesOppositeTransform$ = gridAxesOppositeTransformObservable({
-          gridAxesTransform$
-        }).pipe(
-          shareReplay(1)
-        )
-      
-        const gridAxesSize$ = gridAxesSizeObservable({
-          fullDataFormatter$: gridDataFormatter$,
-          layout$: layout$
-        }).pipe(
-          shareReplay(1)
-        )
-      
-        const datumList$ = gridComputedData$.pipe(
-          map(d => d.flat())
-        ).pipe(
-          shareReplay(1)
-        )
-      
-        const gridHighlight$ = highlightObservable({
-          datumList$,
-          fullChartParams$: fullChartParams$,
-          event$: event$
-        }).pipe(
-          shareReplay(1)
-        )
-      
-        const SeriesDataMap$ = seriesDataMapObservable({
-          datumList$: datumList$
-        }).pipe(
-          shareReplay(1)
-        )
-      
-        const GroupDataMap$ = groupDataMapObservable({
-          datumList$: datumList$
-        }).pipe(
-          shareReplay(1)
-        )
-      
-        const visibleComputedData$ = gridVisibleComputedDataObservable({
-          computedData$: gridComputedData$,
-        }).pipe(
-          shareReplay(1)
-        )
-      
-        return {
-          gridAxesTransform$,
-          gridGraphicTransform$,
-          gridAxesOppositeTransform$,
-          gridAxesSize$,
-          gridHighlight$,
-          SeriesDataMap$,
-          GroupDataMap$,
-          visibleComputedData$
-        }
+        return detailObservables ({
+          gridDataFormatter$,
+          gridComputedData$,
+          layout$,
+          fullChartParams$,
+          event$
+        })
       })
     })
   )
 }
 
 
-
-// 每一個grid的container位置
+// 所有container位置（對應series）
 export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$, fullChartParams$, layout$ }: {
   computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
   fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
   fullChartParams$: Observable<ChartParams>
   layout$: Observable<Layout>
 }) => {
-  function calcBox (layout: Layout, container: DataFormatterMultiGridContainer, rowIndex: number, columnIndex: number) {
-    const { gap, rowAmount, columnAmount } = container
-    const width = (layout.width - (gap * (columnAmount - 1))) / columnAmount
-    const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
-    const x = columnIndex * width + (columnIndex * gap)
-    const y = rowIndex * height + (rowIndex * gap)
-    const translate: [number, number] = [x, y]
-    const scale: [number, number] = [width / layout.width, height / layout.height]
-
-    return {
-      translate,
-      scale
-    }
-  }
 
   const multiGridContainer$ = combineLatest({
     computedData: computedData$,
@@ -188,21 +237,46 @@ export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$
     switchMap(async (d) => d),
     map(data => {
 
-      const defaultGrid = data.fullDataFormatter.multiGrid[0] ?? DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT
+      const defaultGrid = data.fullDataFormatter.gridList[0] ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
       
       const boxArr = data.computedData.map((gridData, gridIndex) => {
-        const grid = data.fullDataFormatter.multiGrid[gridIndex] ?? defaultGrid
-        const columnIndex = grid.slotIndex % data.fullDataFormatter.container.columnAmount
-        const rowIndex = Math.floor(grid.slotIndex / data.fullDataFormatter.container.columnAmount)
-        const {  translate, scale } = calcBox(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
-
-        return {
-          slotIndex: grid.slotIndex,
-          rowIndex,
-          columnIndex,
-          translate,
-          scale,
+        const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
+        
+        // 有設定series定位
+        const hasSeriesPosition = grid.seriesSlotIndexes && grid.seriesSlotIndexes.length === gridData.length
+          ? true
+          : false
+        
+        if (hasSeriesPosition) {
+          // -- 依seriesSlotIndexes計算 --
+          return gridData.map((seriesData, seriesIndex) => {
+            const columnIndex = grid.seriesSlotIndexes[seriesIndex] % data.fullDataFormatter.container.columnAmount
+            const rowIndex = Math.floor(grid.seriesSlotIndexes[seriesIndex] / data.fullDataFormatter.container.columnAmount)
+            const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+            return {
+              slotIndex: grid.seriesSlotIndexes[seriesIndex],
+              rowIndex,
+              columnIndex,
+              translate,
+              scale,
+            }
+          })
+        } else {
+          // -- 依grid的slotIndex計算 --
+          const columnIndex = grid.slotIndex % data.fullDataFormatter.container.columnAmount
+          const rowIndex = Math.floor(grid.slotIndex / data.fullDataFormatter.container.columnAmount)
+          return gridData.map((seriesData, seriesIndex) => {
+            const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+            return {
+              slotIndex: grid.slotIndex,
+              rowIndex,
+              columnIndex,
+              translate,
+              scale,
+            }
+          })
         }
+
       })
       return boxArr
     }),

package/src/multiValue/computeMultiValueData.ts

@@ -82,6 +82,7 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
       dataFormatter.yAxis.scaleDomain[0] === 'auto' ? yMinValue : dataFormatter.yAxis.scaleDomain[0],
       dataFormatter.yAxis.scaleDomain[1] === 'auto' ? yMaxValue : dataFormatter.yAxis.scaleDomain[1]
     ]
+    debugger
     // 篩選顯示狀態
     const visibleFilter = (datum: DataMultiValueDatum, rowIndex: number, columnIndex: number, context: DataFormatterContext<"multiValue">) => {
       // 如果不在scale的範圍內則為false，不再做visibleFilter的判斷

package/src/tree/computeTreeData.ts

@@ -1,7 +1,7 @@
 import type { DataTree, DataTreeObj, DataTreeDatum } from '../types/DataTree'
 import type { ComputedDataFn } from '../types/ComputedData'
 import type { ComputedDataTree } from '../types/ComputedDataTree'
-import { isObject } from '../utils/commonUtils'
+import { isPlainObject } from '../utils/commonUtils'
 
 export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
   const { data = [], dataFormatter, chartParams } = context
@@ -23,7 +23,7 @@ export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
   try {
     // 建立樹狀結構資料
     const dataTreeObj: DataTreeObj = (function () {
-      if (isObject(data) === true) {
+      if (isPlainObject(data) === true) {
         // 原本就是樹狀結構則直接複製
         return structuredClone(data) as DataTreeObj
       } else if (Array.isArray(data) === false) {

package/src/types/ContextObserverGrid.ts

@@ -3,14 +3,32 @@ import type { ContextObserverBase } from './ContextObserver'
 import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
 import type { TransformData } from './TransformData'
 
-export interface ContextObserverGrid<PluginParams> extends ContextObserverBase<'grid', PluginParams> {
+export interface ContextObserverGrid<PluginParams>
+  extends
+    ContextObserverBase<'grid', PluginParams>,
+    ContextObserverGridDetail {
+  
+    }
+
+export interface ContextObserverGridDetail {
+  gridContainer$: Observable<ContainerPosition[]>
   gridAxesTransform$: Observable<TransformData>
+  gridAxesReverseTransform$: Observable<TransformData>
   gridGraphicTransform$: Observable<TransformData>
-  gridAxesOppositeTransform$: Observable<TransformData>
+  gridGraphicReverseScale$: Observable<[number, number][]>
   gridAxesSize$: Observable<{ width: number; height: number; }>
   gridHighlight$: Observable<string[]>
+  existedSeriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   visibleComputedData$: Observable<ComputedDataGrid>
+  isSeriesPositionSeprate$: Observable<boolean>
 }
 
+export interface ContainerPosition {
+  slotIndex: number
+  rowIndex: number
+  columnIndex: number
+  translate: [number, number]
+  scale: [number, number]
+}

package/src/types/ContextObserverMultiGrid.ts

@@ -1,28 +1,27 @@
 import { Observable } from 'rxjs'
 import type { ContextObserverBase } from './ContextObserver'
 import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
+import type { ContainerPosition } from './ContextObserverGrid'
 import type { TransformData } from './TransformData'
+import type { ContextObserverGridDetail } from './ContextObserverGrid'
 
 export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverBase<'multiGrid', PluginParams> {
-  multiGridEachDetail$: Observable<MultiGridObservableAll[]>
-  multiGridContainer$: Observable<GridContainerBox[]>
+  multiGridEachDetail$: Observable<ContextObserverGridDetail[]>
+  multiGridContainer$: Observable<ContainerPosition[][]>
 }
 
-export interface MultiGridObservableAll {
-  gridAxesTransform$: Observable<TransformData>
-  gridGraphicTransform$: Observable<TransformData>
-  gridAxesOppositeTransform$: Observable<TransformData>
-  gridAxesSize$: Observable<{ width: number; height: number; }>
-  gridHighlight$: Observable<string[]>
-  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
-  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
-  visibleComputedData$: Observable<ComputedDataGrid>
-}
+// export interface MultiGridObservableAll {
+//   isSeriesPositionSeprate$: Observable<boolean>
+//   gridContainer$: Observable<ContainerPosition[]>
+//   gridAxesTransform$: Observable<TransformData>
+//   gridAxesReverseTransform$: Observable<TransformData>
+//   gridGraphicTransform$: Observable<TransformData>
+//   gridGraphicReverseScale$: Observable<[number, number][]>
+//   gridAxesSize$: Observable<{ width: number; height: number; }>
+//   gridHighlight$: Observable<string[]>
+//   existedSeriesLabels$: Observable<string[]>
+//   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
+//   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
+//   visibleComputedData$: Observable<ComputedDataGrid>
+// }
 
-export interface GridContainerBox {
-  slotIndex: number
-  rowIndex: number
-  columnIndex: number
-  translate: [number, number]
-  scale: [number, number]
-}

package/src/types/DataFormatterGrid.ts

@@ -2,34 +2,49 @@ import type { DataGridDatum, DataGridValue } from './DataGrid'
 import type { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, DataFormatterGroupAxis, VisibleFilter } from './DataFormatter'
 // import type { AxisPosition } from './Axis'
 
-export type SeriesType = 'row' | 'column' // default: 'row'
+export type SeriesDirection = 'row' | 'column' // default: 'row'
 
 export interface DataFormatterGrid extends DataFormatterBase<'grid'> {
-  visibleFilter: VisibleFilter<'grid'>
   grid: DataFormatterGridGrid
-  valueAxis: DataFormatterValueAxis
-  groupAxis: DataFormatterGroupAxis
+  container: DataFormatterGridContainer
   // visibleGroupRange: [number, number] | null
   // colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
 }
 
 export interface DataFormatterGridPartial extends DataFormatterBasePartial<'grid'> {
-  grid?: Partial<DataFormatterGridGrid>
+  grid?: DataFormatterGridGridPartial
+  container?: Partial<DataFormatterGridContainer>
+}
+
+export interface DataFormatterGridGrid {
+  visibleFilter: VisibleFilter<'grid'>
+  gridData: DataFormatterGridGridData
+  valueAxis: DataFormatterValueAxis
+  groupAxis: DataFormatterGroupAxis
+  slotIndex: number | null
+  seriesSlotIndexes: number[] | null
+}
+
+export interface DataFormatterGridGridPartial {
+  visibleFilter?: VisibleFilter<'grid'>
+  gridData?: Partial<DataFormatterGridGridData>
   valueAxis?: Partial<DataFormatterValueAxis>
   groupAxis?: Partial<DataFormatterGroupAxis>
-  // colorsPredicate?: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
+  slotIndex?: number | null
+  seriesSlotIndexes?: number[] | null
+}
+
+export interface DataFormatterGridContainer {
+  gap: number
+  rowAmount: number
+  columnAmount: number
 }
 
 // grid欄位
-export interface DataFormatterGridGrid {
-  // labelFormat: (datum: DataGridDatum) => string
-  // rowUnitLabel: string
+export interface DataFormatterGridGridData {
+  seriesDirection: SeriesDirection
   rowLabels: string[]
-  // rowLabelFormat: string | ((text: any) => string)
-  // columnUnitLabel: string
   columnLabels: string[]
-  // columnLabelFormat: string | ((text: any) => string)
-  seriesType: SeriesType
 }
 
 // const test: DataFormatterGridPartial = {

package/src/types/DataFormatterMultiGrid.ts

@@ -1,5 +1,5 @@
 import type { VisibleFilter } from './DataFormatter'
-import type { DataFormatterGrid } from './DataFormatterGrid'
+import type { DataFormatterGridGrid, DataFormatterGridGridPartial, DataFormatterGridContainer } from './DataFormatterGrid'
 import type {
   DataFormatterBase,
   DataFormatterBasePartial,
@@ -10,30 +10,32 @@ import type { AxisPosition } from './Axis'
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
   visibleFilter: VisibleFilter<'multiGrid'>
-  multiGrid: Array<DataFormatterMultiGridMultiGrid>
-  // visibleGroupRange: [number, number] | null
+  gridList: Array<DataFormatterGridGrid>
   container: DataFormatterMultiGridContainer
 }
 
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
-  multiGrid?: Array<Partial<DataFormatterMultiGridMultiGrid>>
+  visibleFilter?: VisibleFilter<'multiGrid'>
+  gridList?: Array<DataFormatterGridGridPartial>
+  container?: Partial<DataFormatterMultiGridContainer>
 }
 
-// 比grid還多出來的額外參數
-export interface DataFormatterMultiGridMultiGrid extends DataFormatterGrid {
-  slotIndex: number
+export interface DataFormatterMultiGridGrid extends DataFormatterGridGrid {
+
+}
+
+export interface DataFormatterMultiGridGridPartial extends DataFormatterGridGridPartial {
+
 }
 
 // container
-export interface DataFormatterMultiGridContainer {
-  gap: number
-  rowAmount: number
-  columnAmount: number
+export interface DataFormatterMultiGridContainer extends DataFormatterGridContainer {
+
 }
 
 // multiGrid欄位
 // export interface DataFormatterMultiGridMultiGrid {
-//   grid: DataFormatterGridGrid
+//   grid: DataFormatterGridGridData
 //   valueAxis: DataFormatterValueAxis // default: 'left'
 //   groupAxis: DataFormatterGroupAxis // default: 'bottom'
 //   colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string

package/src/utils/commonUtils.ts

@@ -1,7 +1,7 @@
 // import * as d3 from 'd3'
 
-// 是否為物件
-export function isObject(variable: any) {
+// 是否為原始物件
+export function isPlainObject(variable: any) {
   return Object.prototype.toString.call(variable) === "[object Object]";
 }
 
@@ -12,7 +12,7 @@ export function isFunction(fn: any) {
 
 // 將可選的參數和預設值合併
 export function mergeOptionsWithDefault<Options extends { [key: string]: any; }> (options: {[key: string]: any}, defaultOptions: Options): Options {
-  if (isObject(options) === false || isObject(defaultOptions) === false) {
+  if (isPlainObject(options) === false || isPlainObject(defaultOptions) === false) {
     return Object.assign({}, defaultOptions)
   }
   const mergeObjColumns = (_options: {[key: string]: any}, _defaultOptions: {[key: string]: any}) => {
@@ -22,12 +22,12 @@ export function mergeOptionsWithDefault<Options extends { [key: string]: any; }>
         continue
       }
       let objValue: any = undefined
-      // 下一層的object
-      if (isObject(_options[key]) && isObject(_defaultOptions[key])) {
+      // 下一層的plain object
+      if (isPlainObject(_options[key]) && isPlainObject(_defaultOptions[key])) {
         objValue = mergeObjColumns(_options[key], _defaultOptions[key])
         obj[key as keyof Options] = objValue
       }
-      // 不是object直接賦值
+      // 不是plain object直接賦值
       else {
         obj[key as keyof Options] = _options[key]
       }