@orbcharts/core 3.0.0-alpha.33 → 3.0.0-alpha.35

package/dist/src/utils/orbchartsUtils.d.ts

@@ -12,13 +12,23 @@ export declare function formatValueToLabel(value: any, valueFormatter: string |
 export declare function createDefaultDatumId(chartTypeOrPrefix: string, levelOneIndex: number, levelTwoIndex: number, levelThreeIndex?: number): string;
 export declare function createDefaultSeriesLabel(chartTypeOrPrefix: string, seriesIndex: number): string;
 export declare function createDefaultGroupLabel(chartTypeOrPrefix: string, groupIndex: number): string;
-export declare function createGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex }: {
+export declare function createGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType }: {
+    transposedDataGrid: DataGridDatum[][];
+    dataFormatter: DataFormatterGrid;
+    chartType?: ChartType;
+}): string[];
+export declare function createMultiGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex }: {
     transposedDataGrid: DataGridDatum[][];
     dataFormatter: DataFormatterGrid;
     chartType?: ChartType;
     gridIndex?: number;
 }): string[];
-export declare function createGridGroupLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex }: {
+export declare function createGridGroupLabels({ transposedDataGrid, dataFormatter, chartType }: {
+    transposedDataGrid: DataGridDatum[][];
+    dataFormatter: DataFormatterGrid;
+    chartType?: ChartType;
+}): string[];
+export declare function createMultiGridGroupLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex }: {
     transposedDataGrid: DataGridDatum[][];
     dataFormatter: DataFormatterGrid;
     chartType?: ChartType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.33",
+  "version": "3.0.0-alpha.35",
   "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",

package/src/base/createBaseChart.ts

@@ -84,6 +84,20 @@ function resizeObservable(elem: HTMLElement | Element): Observable<DOMRectReadOn
   })
 }
 
+function mergeDataFormatter <T>(dataFormatter: any, defaultDataFormatter: T, chartType: ChartType): T {
+  const mergedData = mergeOptionsWithDefault(dataFormatter, defaultDataFormatter)
+
+  if (chartType === 'multiGrid' && (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList != null) {
+    // multiGrid欄位為陣列，需要各別來merge預設值
+    (mergedData as DataFormatterTypeMap<'multiGrid'>).gridList = (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList.map((d, i) => {
+      const defaultGrid = (defaultDataFormatter as DataFormatterTypeMap<'multiGrid'>).gridList[i] || (defaultDataFormatter as DataFormatterTypeMap<'multiGrid'>).gridList[0]
+      return mergeOptionsWithDefault(d, defaultGrid)
+    })
+  }
+  console.log(mergedData)
+  return mergedData
+}
+
 export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultDataFormatter, computedDataFn, contextObserverFn }: {
   defaultDataFormatter: DataFormatterTypeMap<T>
   computedDataFn: ComputedDataFn<T>
@@ -127,12 +141,14 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
     const mergedPresetWithDefault: Preset<T> = ((options) => {
       const _options = options ? options : CHART_OPTIONS_DEFAULT as ChartOptionsPartial<T>
       const preset = _options.preset ? _options.preset : {} as PresetPartial<T>
+
       return {
         chartParams: preset.chartParams
           ? mergeOptionsWithDefault(preset.chartParams, CHART_PARAMS_DEFAULT)
           : CHART_PARAMS_DEFAULT,
         dataFormatter: preset.dataFormatter
-          ? mergeOptionsWithDefault(preset.dataFormatter, defaultDataFormatter)
+          // ? mergeOptionsWithDefault(preset.dataFormatter, defaultDataFormatter)
+          ? mergeDataFormatter(preset.dataFormatter, defaultDataFormatter, chartType)
           : defaultDataFormatter,
         allPluginParams: preset.allPluginParams
           ? preset.allPluginParams
@@ -147,15 +163,16 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
         takeUntil(destroy$),
         startWith({}),
         map((dataFormatter) => {
-          const mergedData = mergeOptionsWithDefault(dataFormatter, mergedPresetWithDefault.dataFormatter)
+          // const mergedData = mergeOptionsWithDefault(dataFormatter, mergedPresetWithDefault.dataFormatter)
 
-          if (chartType === 'multiGrid' && (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList != null) {
-            // multiGrid欄位為陣列，需要各別來merge預設值
-            (mergedData as DataFormatterTypeMap<'multiGrid'>).gridList = (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList.map(d => {
-              return mergeOptionsWithDefault(d, (mergedPresetWithDefault.dataFormatter as DataFormatterTypeMap<'multiGrid'>).gridList[0])
-            })
-          }
-          return mergedData
+          // if (chartType === 'multiGrid' && (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList != null) {
+          //   // multiGrid欄位為陣列，需要各別來merge預設值
+          //   (mergedData as DataFormatterTypeMap<'multiGrid'>).gridList = (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList.map(d => {
+          //     return mergeOptionsWithDefault(d, (mergedPresetWithDefault.dataFormatter as DataFormatterTypeMap<'multiGrid'>).gridList[0])
+          //   })
+          // }
+          // return mergedData
+          return mergeDataFormatter(dataFormatter, mergedPresetWithDefault.dataFormatter, chartType)
         }),
         shareReplay(1)
       )

package/src/defaults.ts

@@ -34,7 +34,6 @@ export const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any> = {
 // }
 
 // export const COLORS_DEFAULT = ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67']
-// @Q@ 桃園儀表板
 // ['#ff7ab9', '#66dec8', '#84c8ff', '#30ad1b', '#f8c43e', '#fa5640', '#9d79d7', '#ea4f98']
 
 export const PADDING_DEFAULT: Padding = {

package/src/grid/computeGridData.ts

@@ -4,28 +4,21 @@ import type { DataGrid, DataGridDatum } from '../types/DataGrid'
 import type { DataFormatterContext } from '../types/DataFormatter'
 import type { DataFormatterGrid } from '../types/DataFormatterGrid'
 import type { ComputedDataGrid, ComputedDatumGrid } from '../types/ComputedDataGrid'
+import type { Layout } from '../types/Layout'
 import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, createDefaultGroupLabel } from '../utils/orbchartsUtils'
 import { createAxisLinearScale, createAxisPointScale } from '../utils/d3Utils'
 import { getMinAndMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels, seriesColorPredicate } from '../utils/orbchartsUtils'
 
-interface DataGridDatumTemp extends DataGridDatum {
+export interface DataGridDatumTemp extends DataGridDatum {
   // _color: string // 暫放的顏色資料
   _visible: boolean // 暫放的visible
 }
 
-export const computeGridData: ComputedDataFn<'grid'> = (context) => {
-  return computeBaseGridData(context, 'grid', 0)
-}
-
-// 共用的計算grid資料 - 只有multiGrid計算時才會有gridIndex參數
-export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chartType: 'grid' | 'multiGrid', gridIndex = 0) => {
+export function createTransposedDataGrid (context: DataFormatterContext<'grid'>): DataGridDatumTemp[][] {
   const { data = [], dataFormatter, chartParams, layout } = context
   if (!data.length) {
     return []
   }
-
-  let computedDataGrid: ComputedDatumGrid[][]
-
   try {
     // 最多的array length
     const maxArrayLength = data.reduce((prev, current) => {
@@ -88,120 +81,75 @@ export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chart
     // 依seriesDirection轉置資料矩陣
     const transposedDataGrid = transposeData(dataFormatter.grid.gridData.seriesDirection, dataGrid)
 
-    // -- groupScale --
-    const { groupScale } = (() => {
-      const groupAxisWidth = (dataFormatter.grid.groupAxis.position === 'top' || dataFormatter.grid.groupAxis.position === 'bottom')
-        ? layout.width
-        : layout.height
-      const groupEndIndex = transposedDataGrid[0] ? transposedDataGrid[0].length - 1 : 0
-      const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-        maxValue: groupEndIndex,
-        minValue: 0,
-        axisWidth: groupAxisWidth,
-        scaleDomain: [0, groupEndIndex], // 不使用dataFormatter設定
-        scaleRange: [0, 1] // 不使用dataFormatter設定
-      })
-      return { groupScale }
-    })()
-
-    
-
-    // const seriesColors = chartParams.colors[chartParams.colorScheme].series
-
-    // const groupScaleDomain = [
-    //   dataFormatter.groupAxis.scaleDomain[0] === 'auto'
-    //     ? 0
-    //     : dataFormatter.groupAxis.scaleDomain[0],
-    //   dataFormatter.groupAxis.scaleDomain[1] === 'auto'
-    //     ? groupEndIndex
-    //     : dataFormatter.groupAxis.scaleDomain[1]
-    // ]
-    
+    return transposedDataGrid
+  } catch (e) {
+    return []
+  }
+}
 
-    // -- 依groupScale算visible --
-    // 篩選顯示狀態
-    // const scaleDomainFilter = (columnIndex: number) => {
-    //   // 如果groupIndex不在scale的範圍內則為false，不再做visibleFilter的判斷
-    //   if (columnIndex < groupScaleDomain[0] || columnIndex > groupScaleDomain[1]) {
-    //     return false
-    //   }
-    //   return true
-    // }
-    // transposedDataGrid.forEach((seriesData, seriesIndex) => {
-    //   seriesData.forEach((groupDatum, groupIndex) => {
-    //     // in-place修改visible
-    //     groupDatum._visible = groupDatum._visible == true && scaleDomainFilter(groupIndex) == true
-    //       ? true
-    //       : false // 兩者有一個false即為false
-    //   })
-    // })
+export function createGroupScale (transposedDataGrid: DataGridDatumTemp[][], dataFormatter: DataFormatterGrid, layout: Layout) {
+  const groupAxisWidth = (dataFormatter.grid.groupAxis.position === 'top' || dataFormatter.grid.groupAxis.position === 'bottom')
+    ? layout.width
+    : layout.height
+  const groupEndIndex = transposedDataGrid[0] ? transposedDataGrid[0].length - 1 : 0
+  const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+    maxValue: groupEndIndex,
+    minValue: 0,
+    axisWidth: groupAxisWidth,
+    scaleDomain: [0, groupEndIndex], // 不使用dataFormatter設定
+    scaleRange: [0, 1] // 不使用dataFormatter設定
+  })
+  return groupScale
+}
 
-    const seriesLabels = createGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex })
-    const groupLabels = createGridGroupLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex })
+export function createSeriesValueScaleArr (transposedDataGrid: DataGridDatumTemp[][], dataFormatter: DataFormatterGrid, layout: Layout) {
+  const valueAxisWidth = (dataFormatter.grid.valueAxis.position === 'left' || dataFormatter.grid.valueAxis.position === 'right')
+    ? layout.height
+    : layout.width
+
+  const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
+  const [minValue, maxValue] = getMinAndMaxValue(visibleData)
+  
+  return transposedDataGrid.map((seriesData, seriesIndex) => {
+    const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+      maxValue,
+      minValue,
+      axisWidth: valueAxisWidth,
+      scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
+      scaleRange: [0, 1] // 不使用dataFormatter設定
+    })
+    return valueScale
+  })
+}
 
-    // 每一個series的valueScale
-    const seriesValueScaleArr = (() => {
-      const valueAxisWidth = (dataFormatter.grid.valueAxis.position === 'left' || dataFormatter.grid.valueAxis.position === 'right')
-        ? layout.height
-        : layout.width
+export const computeGridData: ComputedDataFn<'grid'> = (context) => {
+  const { data = [], dataFormatter, chartParams, layout } = context
+  if (!data.length) {
+    return []
+  }
 
-      // // 每一個series的 [minValue, maxValue]
-      // const minAndMaxValueArr = (() => {
-      //   // 有設定series定位，各別series計算各自的最大最小值
-      //   if (dataFormatter.grid.seriesSlotIndexes
-      //     && dataFormatter.grid.seriesSlotIndexes.length === transposedDataGrid.length
-      //   ) {
-      //     return transposedDataGrid
-      //       .map(series => {
-      //         const visibleData = series.filter(d => d._visible != false)
-      //         return getMinAndMaxValue(visibleData)
-      //       })
-      //   } else {
-      //     // 沒有設定series定位，全部資料一起計算最大值最小值
-      //     const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
-      //     const [minValue, maxValue] = getMinAndMaxValue(visibleData)
-      //     return transposedDataGrid
-      //       .map(series => {
-      //         return [minValue, maxValue]
-      //       })
-      //   }
-      // })()
+  let computedDataGrid: ComputedDatumGrid[][]
 
-      const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
-      const [minValue, maxValue] = getMinAndMaxValue(visibleData)
-      
-      return transposedDataGrid.map((seriesData, seriesIndex) => {
-        // const minValue = minAndMaxValueArr[seriesIndex][0]
-        // const maxValue = minAndMaxValueArr[seriesIndex][1]
-        const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-          maxValue,
-          minValue,
-          axisWidth: valueAxisWidth,
-          scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
-          scaleRange: [0, 1] // 不使用dataFormatter設定
-        })
-        return valueScale
-      })
-    })()
+  try {
+    
+    // 依seriesDirection轉置資料矩陣
+    const transposedDataGrid = createTransposedDataGrid(context)
 
-    // const { valueScale } = (() => {
-      
-    //   const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
-    //   const [minValue, maxValue] = getMinAndMaxValue(visibleData)
+    const groupScale = createGroupScale(transposedDataGrid, dataFormatter, layout)
 
-    //   const valueAxisWidth = (dataFormatter.grid.valueAxis.position === 'left' || dataFormatter.grid.valueAxis.position === 'right')
-    //     ? layout.height
-    //     : layout.width
+    const seriesLabels = createGridSeriesLabels({
+      transposedDataGrid,
+      dataFormatter,
+      chartType: 'grid'
+    })
+    const groupLabels = createGridGroupLabels({
+      transposedDataGrid,
+      dataFormatter,
+      chartType: 'grid'
+    })
 
-    //   const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-    //     maxValue,
-    //     minValue,
-    //     axisWidth: valueAxisWidth,
-    //     scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
-    //     scaleRange: [0, 1] // 不使用dataFormatter設定
-    //   })
-    //   return { valueScale }
-    // })()
+    // 每一個series的valueScale
+    const seriesValueScaleArr = createSeriesValueScaleArr(transposedDataGrid, dataFormatter, layout)
     
     const zeroYArr = transposedDataGrid.map((series, seriesIndex) => {
       return seriesValueScaleArr[seriesIndex]!(0)
@@ -211,7 +159,7 @@ export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chart
     computedDataGrid = transposedDataGrid.map((seriesData, seriesIndex) => {
       return seriesData.map((groupDatum, groupIndex) => {
         
-        const defaultId = createDefaultDatumId(chartType, gridIndex, seriesIndex, groupIndex)
+        const defaultId = createDefaultDatumId('grid', 0, seriesIndex, groupIndex)
         // const visible = visibleFilter(groupDatum, seriesIndex, groupIndex, context)
         const groupLabel = groupLabels[groupIndex]
         const valueScale = seriesValueScaleArr[seriesIndex]
@@ -227,8 +175,8 @@ export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chart
           data: groupDatum.data,
           value: groupDatum.value,
           // valueLabel: formatValueToLabel(groupDatum.value, dataFormatter.valueFormat),
-          gridIndex,
-          accSeriesIndex: seriesIndex, // 預設為seriesIndex
+          gridIndex: 0,
+          // accSeriesIndex: seriesIndex, // 預設為seriesIndex
           seriesIndex,
           seriesLabel: seriesLabels[seriesIndex],
           groupIndex,

package/src/multiGrid/computeMultiGridData.ts

@@ -1,10 +1,86 @@
 import type { DataGrid } from '../types/DataGrid'
 import type { ComputedDataFn } from '../types/ComputedData'
+import type { ComputedDatumGrid } from '../types/ComputedDataGrid'
+import type { DataFormatterContext } from '../types/DataFormatter'
 import type { DataFormatterGrid } from '../types/DataFormatterGrid'
 import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
-import { computeBaseGridData } from '../grid/computeGridData'
+// import { computeBaseGridData } from '../grid/computeGridData'
 import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
-import { seriesColorPredicate } from '../utils/orbchartsUtils'
+import {
+  createDefaultDatumId,
+  seriesColorPredicate,
+  createGridSeriesLabels,
+  createMultiGridSeriesLabels,
+  createMultiGridGroupLabels
+} from '../utils/orbchartsUtils'
+import type { DataGridDatumTemp } from '../grid/computeGridData'
+import { createTransposedDataGrid, createGroupScale, createSeriesValueScaleArr } from '../grid/computeGridData'
+
+function createGridData ({ context, gridIndex, transposedDataGrid, gridSeriesLabels, SeriesLabelColorMap }: {
+  context: DataFormatterContext<'grid'>
+  gridIndex: number
+  transposedDataGrid: DataGridDatumTemp[][]
+  gridSeriesLabels: string[]
+  SeriesLabelColorMap: Map<string, string>
+}) {
+  const { data = [], dataFormatter, chartParams, layout } = context
+  if (!data.length) {
+    return []
+  }
+  
+  const groupScale = createGroupScale(transposedDataGrid, dataFormatter, layout)
+
+  // const seriesLabels = createGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType: 'multiGrid', gridIndex })
+  
+  const groupLabels = createMultiGridGroupLabels({ transposedDataGrid, dataFormatter, chartType: 'multiGrid', gridIndex })
+
+  // 每一個series的valueScale
+  const seriesValueScaleArr = createSeriesValueScaleArr(transposedDataGrid, dataFormatter, layout)
+
+  const zeroYArr = transposedDataGrid.map((series, seriesIndex) => {
+    return seriesValueScaleArr[seriesIndex]!(0)
+  })
+
+  let _index = 0
+  let computedDataGrid: ComputedDatumGrid[][] = transposedDataGrid.map((seriesData, seriesIndex) => {
+    return seriesData.map((groupDatum, groupIndex) => {
+      
+      const defaultId = createDefaultDatumId('multiGrid', gridIndex, seriesIndex, groupIndex)
+      const groupLabel = groupLabels[groupIndex]
+      const seriesLabel = gridSeriesLabels[seriesIndex]
+      const valueScale = seriesValueScaleArr[seriesIndex]
+      const axisY = valueScale(groupDatum.value ?? 0)
+      const zeroY = zeroYArr[seriesIndex]
+
+      const computedDatum: ComputedDatumGrid = {
+        id: groupDatum.id ? groupDatum.id : defaultId,
+        index: _index,
+        label: groupDatum.label ? groupDatum.label : defaultId,
+        description: groupDatum.description ?? '',
+        data: groupDatum.data,
+        value: groupDatum.value,
+        gridIndex,
+        // accSeriesIndex: seriesIndex, // 預設為seriesIndex
+        seriesIndex,
+        seriesLabel,
+        groupIndex,
+        groupLabel,
+        // color: seriesColorPredicate(seriesIndex, chartParams),
+        color: SeriesLabelColorMap.get(seriesLabel),
+        axisX: groupScale(groupIndex),
+        axisY,
+        axisYFromZero: axisY - zeroY,
+        visible: groupDatum._visible
+      }
+
+      _index ++
+
+      return computedDatum
+    })
+  })
+
+  return computedDataGrid
+}
 
 export const computeMultiGridData: ComputedDataFn<'multiGrid'> = ({ data = [], dataFormatter, chartParams, layout }) => {
   if (!data.length) {
@@ -16,43 +92,78 @@ export const computeMultiGridData: ComputedDataFn<'multiGrid'> = ({ data = [], d
   try {
     const defaultGrid = dataFormatter.gridList[0] || DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
 
-    // 計算每個grid的資料
-    multiGridData = data.map((gridData, gridIndex) => {
+    // 計算每個grid的dataFormatter
+    const gridDataFormatterList: DataFormatterGrid[] = data.map((gridData, gridIndex) => {
       const currentDataFormatterGrid = dataFormatter.gridList[gridIndex] || defaultGrid
 
-      return computeBaseGridData(
-        {
-          data: gridData,
-          dataFormatter: {
-            type: 'grid',
-            grid: {
-              ...currentDataFormatterGrid
-            },
-            container: {
-              ...dataFormatter.container
-            }
-          },
-          chartParams,
-          layout
+      return {
+        type: 'grid',
+        grid: {
+          ...currentDataFormatterGrid
         },
-        'multiGrid',
-        gridIndex
-      )
+        container: {
+          ...dataFormatter.container
+        }
+      }
+    })
+
+    const gridContextList = data.map((gridData, gridIndex) => {
+      // grid context
+      return {
+        data: gridData,
+        dataFormatter: gridDataFormatterList[gridIndex],
+        chartParams,
+        layout
+      }  
+    })
+
+    const transposedDataGridList = data.map((gridData, gridIndex) => {
+      // 依seriesDirection轉置資料矩陣
+      return createTransposedDataGrid(gridContextList[gridIndex])
+    })
+
+    const createSeriesLabelsFn = (() => {
+      const SlotIndexSet = new Set(gridDataFormatterList.map(d => d.grid.slotIndex))
+      // 判斷是否有重疊的grid
+      const isOverlappingMultiGrid = SlotIndexSet.size !== gridDataFormatterList.length
+      return isOverlappingMultiGrid
+        ? createMultiGridSeriesLabels // 有重疊的grid則使用「不同」的seriesLabels
+        : createGridSeriesLabels // 沒有重疊的grid則使用「相同」的seriesLabels
+    })()
+    
+
+    const multiGridSeriesLabels = transposedDataGridList
+      .map((gridData, gridIndex) => {
+        return createSeriesLabelsFn({
+          transposedDataGrid: gridData,
+          dataFormatter: gridDataFormatterList[gridIndex],
+          chartType: 'multiGrid',
+          gridIndex
+        } as any)
+      })
+
+    const SeriesLabelColorMap: Map<string, string> = new Map()
+    let accIndex = 0
+    multiGridSeriesLabels.flat().forEach((label, i) => {
+      if (!SeriesLabelColorMap.has(label)) {
+        const color = seriesColorPredicate(accIndex, chartParams)
+        SeriesLabelColorMap.set(label, color)
+        accIndex ++
+      }
     })
 
-    // 修正多個grid的欄位資料
-    let accSeriesIndex = -1
-    multiGridData = multiGridData.map((gridData, i) => {
-      return gridData.map((series, j) => {
-        accSeriesIndex ++
-        return series.map(d => {
-          d.accSeriesIndex = accSeriesIndex
-          d.color = seriesColorPredicate(accSeriesIndex, chartParams)
-          return d
-        })
+    // 計算每個grid的資料
+    multiGridData = data.map((gridData, gridIndex) => {
+      return createGridData({
+        context: gridContextList[gridIndex],
+        gridIndex,
+        transposedDataGrid: transposedDataGridList[gridIndex],
+        gridSeriesLabels: multiGridSeriesLabels[gridIndex],
+        SeriesLabelColorMap
       })
     })
 
+
   } catch (e) {
     // console.error(e)
     throw Error(e)

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/ComputedDataGrid.ts

@@ -2,7 +2,7 @@ import { ComputedDatumBase, ComputedDatumSeriesValue } from './ComputedData'
 
 export interface ComputedDatumGrid
   extends ComputedDatumBase, ComputedDatumSeriesValue {
-  accSeriesIndex: number // 每一個grid累加的seriesIndex
+  // accSeriesIndex: number // 每一個grid累加的seriesIndex
   gridIndex: number
   groupIndex: number
   groupLabel: 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]
       }