@orbcharts/core 3.0.0-alpha.27 → 3.0.0-alpha.29

package/dist/src/types/DataFormatter.d.ts

@@ -20,8 +20,6 @@ export type DataFormatterTypeMap<T extends ChartType> = T extends 'series' ? Dat
 export type DataFormatterPartialTypeMap<T extends ChartType> = T extends 'series' ? DataFormatterSeriesPartial : T extends 'grid' ? DataFormatterGridPartial : T extends 'multiGrid' ? DataFormatterMultiGridPartial : T extends 'multiValue' ? DataFormatterMultiValuePartial : T extends 'relationship' ? DataFormatterRelationshipPartial : T extends 'tree' ? DataFormatterTreePartial : DataFormatterBasePartial<T>;
 export interface DataFormatterBase<T extends ChartType> {
     type: T;
-    visibleFilter: VisibleFilter<T>;
-    tooltipContentFormat: TooltipContentFormat<T>;
 }
 export type DataFormatterBasePartial<T extends ChartType> = Partial<DataFormatterBase<T>>;
 export interface DataFormatterValueAxis {

package/dist/src/types/DataFormatterGrid.d.ts

@@ -1,18 +1,16 @@
-import { DataGridDatum, DataGridValue } from './DataGrid';
-import { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterContext } from './DataFormatter';
+import { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, DataFormatterGroupAxis, VisibleFilter } from './DataFormatter';
 
 export type SeriesType = 'row' | 'column';
 export interface DataFormatterGrid extends DataFormatterBase<'grid'> {
+    visibleFilter: VisibleFilter<'grid'>;
     grid: DataFormatterGridGrid;
     valueAxis: DataFormatterValueAxis;
     groupAxis: DataFormatterGroupAxis;
-    colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string;
 }
 export interface DataFormatterGridPartial extends DataFormatterBasePartial<'grid'> {
     grid?: Partial<DataFormatterGridGrid>;
     valueAxis?: Partial<DataFormatterValueAxis>;
     groupAxis?: Partial<DataFormatterGroupAxis>;
-    colorsPredicate?: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string;
 }
 export interface DataFormatterGridGrid {
     rowLabels: string[];

package/dist/src/types/DataFormatterMultiGrid.d.ts

@@ -1,7 +1,8 @@
+import { VisibleFilter, DataFormatterBase, DataFormatterBasePartial } from './DataFormatter';
 import { DataFormatterGrid } from './DataFormatterGrid';
-import { DataFormatterBase, DataFormatterBasePartial } from './DataFormatter';
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
+    visibleFilter: VisibleFilter<'multiGrid'>;
     multiGrid: Array<DataFormatterGrid>;
 }
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {

package/dist/src/types/DataFormatterMultiValue.d.ts

@@ -1,6 +1,7 @@
-import { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis } from './DataFormatter';
+import { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, VisibleFilter } from './DataFormatter';
 
 export interface DataFormatterMultiValue extends DataFormatterBase<'multiValue'> {
+    visibleFilter: VisibleFilter<'multiValue'>;
     multiValue: Array<DataFormatterMultiValueMultiValue>;
     xAxis: DataFormatterValueAxis;
     yAxis: DataFormatterValueAxis;

package/dist/src/types/DataFormatterRelationship.d.ts

@@ -1,6 +1,7 @@
-import { DataFormatterBase, DataFormatterBasePartial } from './DataFormatter';
+import { DataFormatterBase, DataFormatterBasePartial, VisibleFilter } from './DataFormatter';
 
 export interface DataFormatterRelationship extends DataFormatterBase<'relationship'> {
+    visibleFilter: VisibleFilter<'relationship'>;
 }
 export interface DataFormatterRelationshipPartial extends DataFormatterBasePartial<'relationship'> {
 }

package/dist/src/types/DataFormatterSeries.d.ts

@@ -1,15 +1,14 @@
 import { DataSeriesDatum, DataSeriesValue } from './DataSeries';
-import { DataFormatterBase, DataFormatterBasePartial, DataFormatterContext } from './DataFormatter';
+import { DataFormatterBase, DataFormatterBasePartial, VisibleFilter } from './DataFormatter';
 
 export interface DataFormatterSeries extends DataFormatterBase<'series'> {
+    visibleFilter: VisibleFilter<'series'>;
     unitLabel: string;
     seriesLabels: string[];
-    colorsPredicate: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string;
     sort: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null;
 }
 export interface DataFormatterSeriesPartial extends DataFormatterBasePartial<'series'> {
     unitLabel?: string;
     seriesLabels?: string[];
-    colorsPredicate?: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string;
     sort?: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null;
 }

package/dist/src/types/DataFormatterTree.d.ts

@@ -1,5 +1,6 @@
-import { DataFormatterBase } from './DataFormatter';
+import { DataFormatterBase, VisibleFilter } from './DataFormatter';
 
 export interface DataFormatterTree extends DataFormatterBase<'tree'> {
+    visibleFilter: VisibleFilter<'tree'>;
 }
 export type DataFormatterTreePartial = Partial<DataFormatterTree>;

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

@@ -1,3 +1,5 @@
+import { ChartType } from '../types/Chart';
+import { ChartParams } from '../types/ChartParams';
 import { DatumValue } from '../types/Data';
 import { DataSeries } from '../types/DataSeries';
 import { DataGrid, DataGridDatum } from '../types/DataGrid';
@@ -6,11 +8,21 @@ import { DataMultiValue } from '../types/DataMultiValue';
 import { SeriesType, DataFormatterGrid } from '../types/DataFormatterGrid';
 import * as d3 from 'd3';
 export declare function formatValueToLabel(value: any, valueFormatter: string | ((text: d3.NumberValue) => string)): string;
-export declare function createDefaultDatumId(type: string, levelOneIndex: number, levelTwoIndex: number): string;
-export declare function createDefaultSeriesLabel(type: string, seriesIndex: number): string;
-export declare function createDefaultGroupLabel(type: string, groupIndex: number): string;
-export declare function createGridSeriesLabels(transposedDataGrid: DataGridDatum[][], dataFormatter: DataFormatterGrid): string[];
-export declare function createGridGroupLabels(transposedDataGrid: DataGridDatum[][], dataFormatter: DataFormatterGrid): 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 }: {
+    transposedDataGrid: DataGridDatum[][];
+    dataFormatter: DataFormatterGrid;
+    chartType?: ChartType;
+    gridIndex?: number;
+}): string[];
+export declare function createGridGroupLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex }: {
+    transposedDataGrid: DataGridDatum[][];
+    dataFormatter: DataFormatterGrid;
+    chartType?: ChartType;
+    gridIndex?: number;
+}): string[];
 export declare function getMinAndMax(data: number[]): [number, number];
 export declare function getMinAndMaxValue(data: DatumValue[]): [number, number];
 export declare function getMinAndMaxSeries(data: DataSeries): [number, number];
@@ -18,3 +30,4 @@ export declare function getMinAndMaxGrid(data: DataGrid): [number, number];
 export declare function getMinAndMaxMultiGrid(data: DataMultiGrid): [number, number];
 export declare function getMinAndMaxMultiValue(data: DataMultiValue, valueIndex?: number): [number, number];
 export declare function transposeData<T>(seriesType: SeriesType, data: T[][]): T[][];
+export declare function seriesColorPredicate(seriesIndex: number, chartParams: ChartParams): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.27",
+  "version": "3.0.0-alpha.29",
   "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/defaults.ts

@@ -104,24 +104,10 @@ export const DATA_RELATIONA_DEFAULTL: DataRelationship = {
 // -- Data Formatter --
 
 // 基本欄位
-export const DATA_FORMATTER: DataFormatterBase<ChartType> = {
-  // ...GLOBAL_DEFAULT,
-  type: ('' as any), // 後面需複蓋掉否則會有問題
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  tooltipContentFormat: (datum, rowIndex, columnIndex, context) => {
-    if (typeof datum === 'object') {
-      if (datum.tooltipContent) {
-        return datum.tooltipContent
-      } else if (datum.value) {
-        return String(datum.value)
-      }
-    } else if (typeof datum === 'number') {
-      return String(datum)
-    } else {
-      return ''
-    }
-  }
-}
+// export const DATA_FORMATTER: DataFormatterBase<ChartType> = {
+//   // ...GLOBAL_DEFAULT,
+//   type: ('' as any), // 後面需複蓋掉否則會有問題
+// }
 // 有value
 // export const DATA_FORMATTER_WITH_VALUE: DataFormatterValue = {
 //   valueFormat: ',.0f'
@@ -151,9 +137,9 @@ export const DATA_FORMATTER_GROUP_AXIS: DataFormatterGroupAxis = {
 }
 
 export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
-  ...DATA_FORMATTER,
   // ...DATA_FORMATTER_WITH_VALUE,
   type: 'series',
+  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
   unitLabel: '',
   seriesLabels: [],
   // mapSeries: (datum, rowIndex, columnIndex, { data, dataFormatter }) => {
@@ -162,20 +148,20 @@ export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
   //     : rowIndex
   //   return dataFormatter.seriesLabels[seriesIndex]
   // },
-  colorsPredicate: (datum, rowIndex, columnIndex, { chartParams }) => {
-    return rowIndex < chartParams.colors[chartParams.colorScheme].series.length
-      ? chartParams.colors[chartParams.colorScheme].series[rowIndex]
-      : chartParams.colors[chartParams.colorScheme].series[
-        rowIndex % chartParams.colors[chartParams.colorScheme].series.length
-      ]
-  },
+  // colorsPredicate: (datum, rowIndex, columnIndex, { chartParams }) => {
+  //   return rowIndex < chartParams.colors[chartParams.colorScheme].series.length
+  //     ? chartParams.colors[chartParams.colorScheme].series[rowIndex]
+  //     : chartParams.colors[chartParams.colorScheme].series[
+  //       rowIndex % chartParams.colors[chartParams.colorScheme].series.length
+  //     ]
+  // },
   sort: null,
 }
 
 export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
-  ...DATA_FORMATTER,
   // ...DATA_FORMATTER_WITH_VALUE,
   type: 'grid',
+  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
   grid: {
     // rowUnitLabel: '',
     rowLabels: [],
@@ -188,39 +174,35 @@ export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
   valueAxis: { ...DATA_FORMATTER_VALUE_AXIS },
   groupAxis: { ...DATA_FORMATTER_GROUP_AXIS, },
   // visibleGroupRange: null,
-  colorsPredicate: (datum, rowIndex, columnIndex, { chartParams, dataFormatter }) => {
-    const seriesIndex = dataFormatter.grid.seriesType === 'row' ? rowIndex : columnIndex
-    return chartParams.colors[chartParams.colorScheme].series[seriesIndex]
-  },
+  // colorsPredicate: (datum, rowIndex, columnIndex, { chartParams, dataFormatter }) => {
+  //   const seriesIndex = dataFormatter.grid.seriesType === 'row' ? rowIndex : columnIndex
+  //   return chartParams.colors[chartParams.colorScheme].series[seriesIndex]
+  // },
 }
 
 export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
-  ...DATA_FORMATTER,
   type: 'multiGrid',
+  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
   multiGrid: [
     {
       ...DATA_FORMATTER_GRID_DEFAULT
     },
-    {
-      ...DATA_FORMATTER_GRID_DEFAULT,
-      valueAxis: {
-        ...DATA_FORMATTER_VALUE_AXIS,
-        position: 'right'
-      },
-      colorsPredicate: (datum, rowIndex, columnIndex, { chartParams, dataFormatter }) => {
-        const seriesIndex = dataFormatter.grid.seriesType === 'row' ? rowIndex : columnIndex
-        // @Q@ 暫時性的邏輯，之後改寫成接續前一個grid的series index
-        const reverseIndex = chartParams.colors[chartParams.colorScheme].series.length - 1 - seriesIndex
-        return chartParams.colors[chartParams.colorScheme].series[reverseIndex]
-      },
-    }
+    // // @Q@ 暫時性的邏輯，之後colorsPredicate移除掉後，這邊也要移除（但colors使用的seriesIndex要接續前一組grid）
+    // {
+    //   ...DATA_FORMATTER_GRID_DEFAULT,
+    //   colorsPredicate: (datum, rowIndex, columnIndex, { data, chartParams, dataFormatter }) => {
+    //     const seriesIndex = dataFormatter.grid.seriesType === 'row' ? rowIndex : columnIndex
+    //     const reverseIndex = chartParams.colors[chartParams.colorScheme].series.length - 1 - seriesIndex
+    //     return chartParams.colors[chartParams.colorScheme].series[reverseIndex]
+    //   },
+    // }
   ],
   // visibleGroupRange: null,
 }
 
 export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
-  ...DATA_FORMATTER,
   type: 'multiValue',
+  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
   // labelFormat: (datum: any) => (datum && datum.label) ?? '',
   multiValue: [],
   xAxis: { ...DATA_FORMATTER_VALUE_AXIS },
@@ -228,14 +210,14 @@ export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
 }
 
 export const DATA_FORMATTER_TREE_DEFAULT: DataFormatterTree = {
-  ...DATA_FORMATTER,
   type: 'tree',
+  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
   // labelFormat: (datum: any) => (datum && datum.label) ?? '',
 }
 
 export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
-  ...DATA_FORMATTER,
   type: 'relationship',
+  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
   // node: {
   //   // labelFormat: (node: any) => (node && node.label) ?? '',
   //   descriptionFormat: (node: any) => (node && node.label) ?? ''

package/src/grid/computeGridData.ts

@@ -6,14 +6,19 @@ import type { DataFormatterGrid } from '../types/DataFormatterGrid'
 import type { ComputedDataGrid, ComputedDatumGrid } from '../types/ComputedDataGrid'
 import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, createDefaultGroupLabel } from '../utils/orbchartsUtils'
 import { createAxisLinearScale, createAxisPointScale } from '../utils/d3Utils'
-import { getMinAndMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels } from '../utils/orbchartsUtils'
+import { getMinAndMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels, seriesColorPredicate } from '../utils/orbchartsUtils'
 
 interface DataGridDatumTemp extends DataGridDatum {
-  _color: string // 暫放的顏色資料
+  // _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) => {
   const { data = [], dataFormatter, chartParams, layout } = context
   if (!data.length) {
     return []
@@ -43,36 +48,36 @@ export const computeGridData: ComputedDataFn<'grid'> = (context) => {
     const dataGrid: DataGridDatumTemp[][] = fullData.map((d, i) => {
       return d.map((_d, _i) => {
 
-        const _color = dataFormatter.colorsPredicate(_d, i, _i, context)
+        // const _color = dataFormatter.colorsPredicate(_d, i, _i, context)
         const _visible = dataFormatter.visibleFilter(_d, i, _i, context)
 
         const datum: DataGridDatumTemp = _d == null
           ? {
             id: '',
             label: '',
-            tooltipContent: '',
+            // tooltipContent: '',
             data: {},
             value: null,
-            _color,
+            // _color,
             _visible
           }
           : typeof _d === 'number'
             ? {
               id: '',
               label: '',
-              tooltipContent: '',
+              // tooltipContent: '',
               data: {},
               value: _d,
-              _color,
+              // _color,
               _visible
             }
             : {
               id: _d.id ?? '',
               label: _d.label ?? '',
-              tooltipContent: _d.tooltipContent ?? '',
+              // tooltipContent: _d.tooltipContent ?? '',
               data: _d.data ?? {},
               value: _d.value,
-              _color,
+              // _color,
               _visible
             }
         
@@ -98,14 +103,14 @@ export const computeGridData: ComputedDataFn<'grid'> = (context) => {
 
     // 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]
-    ]
+    // const groupScaleDomain = [
+    //   dataFormatter.groupAxis.scaleDomain[0] === 'auto'
+    //     ? 0
+    //     : dataFormatter.groupAxis.scaleDomain[0],
+    //   dataFormatter.groupAxis.scaleDomain[1] === 'auto'
+    //     ? groupEndIndex
+    //     : dataFormatter.groupAxis.scaleDomain[1]
+    // ]
     
 
     // -- 依groupScale算visible --
@@ -134,8 +139,8 @@ export const computeGridData: ComputedDataFn<'grid'> = (context) => {
       ? layout.height
       : layout.width
 
-    const seriesLabels = createGridSeriesLabels(transposedDataGrid, dataFormatter)
-    const groupLabels = createGridGroupLabels(transposedDataGrid, dataFormatter)
+    const seriesLabels = createGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex })
+    const groupLabels = createGridGroupLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex })
 
     const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
       maxValue,
@@ -151,7 +156,7 @@ export const computeGridData: ComputedDataFn<'grid'> = (context) => {
     computedDataGrid = transposedDataGrid.map((seriesData, seriesIndex) => {
       return seriesData.map((groupDatum, groupIndex) => {
         
-        const defaultId = createDefaultDatumId(dataFormatter.type, seriesIndex, groupIndex)
+        const defaultId = createDefaultDatumId(chartType, gridIndex, seriesIndex, groupIndex)
         // const visible = visibleFilter(groupDatum, seriesIndex, groupIndex, context)
         const groupLabel = groupLabels[groupIndex]
         const axisY = valueScale(groupDatum.value ?? 0)
@@ -160,16 +165,19 @@ export const computeGridData: ComputedDataFn<'grid'> = (context) => {
           id: groupDatum.id ? groupDatum.id : defaultId,
           index: _index,
           label: groupDatum.label ? groupDatum.label : defaultId,
-          tooltipContent: groupDatum.tooltipContent ? groupDatum.tooltipContent : dataFormatter.tooltipContentFormat(groupDatum, seriesIndex, groupIndex, context),
+          description: groupDatum.description ?? '',
+          // tooltipContent: groupDatum.tooltipContent ? groupDatum.tooltipContent : dataFormatter.tooltipContentFormat(groupDatum, seriesIndex, groupIndex, context),
           data: groupDatum.data,
           value: groupDatum.value,
           // valueLabel: formatValueToLabel(groupDatum.value, dataFormatter.valueFormat),
+          gridIndex,
+          accSeriesIndex: seriesIndex, // 預設為seriesIndex
           seriesIndex,
           seriesLabel: seriesLabels[seriesIndex],
           groupIndex,
           groupLabel,
-          // color: seriesColors[seriesIndex],
-          color: groupDatum._color,
+          // color: groupDatum._color,
+          color: seriesColorPredicate(seriesIndex, chartParams),
           axisX: groupScale(groupIndex),
           axisY,
           axisYFromZero: axisY - zeroY,

package/src/multiGrid/computeMultiGridData.ts

@@ -1,7 +1,10 @@
+import type { DataGrid } from '../types/DataGrid'
 import type { ComputedDataFn } from '../types/ComputedData'
-import type { DataFormatterGrid } from '../types/DataFormatterGrid'
+import type { DataFormatterMultiGrid } from '../types/DataFormatterMultiGrid'
 import type { ComputedDataGrid } from '../types/ComputedDataGrid'
-import { computeGridData } from '../grid/computeGridData'
+import { computeBaseGridData } from '../grid/computeGridData'
+import { DATA_FORMATTER_MULTI_GRID_DEFAULT } from '../defaults'
+import { seriesColorPredicate } from '../utils/orbchartsUtils'
 
 export const computeMultiGridData: ComputedDataFn<'multiGrid'> = ({ data = [], dataFormatter, chartParams, layout }) => {
   if (!data.length) {
@@ -11,34 +14,41 @@ export const computeMultiGridData: ComputedDataFn<'multiGrid'> = ({ data = [], d
   let multiGridData: ComputedDataGrid[] = []
 
   try {
-    multiGridData = data.map((d, i) => {
-      const dataFormatterGrid: DataFormatterGrid = {
-        ...dataFormatter.multiGrid[i],
-        type: `multiGrid_${i}` as any, // 非規範的名稱，用作 datum id 前綴
-        // colors: dataFormatter.colors,
-        colorsPredicate: dataFormatter.multiGrid[i].colorsPredicate,
-        visibleFilter: dataFormatter.visibleFilter as any, // 用any避開function參數型別不同
-        // padding: dataFormatter.padding,
-        tooltipContentFormat: dataFormatter.tooltipContentFormat as any, // 用any避開function參數型別不同
-      }
-      // const layoutGrid: ComputedLayoutBase = {
-      //   width: layout.width,
-      //   height: layout.height,
-      //   top: layout.top,
-      //   right: layout.right,
-      //   bottom: layout.bottom,
-      //   left: layout.left,
-      //   rootWidth: layout.rootWidth,
-      //   rootHeight: layout.rootHeight,
-      //   // content: layout.content[i]
+    const defaultDataFormatterGrid = Object.assign({}, DATA_FORMATTER_MULTI_GRID_DEFAULT.multiGrid[0])
+
+    // 計算每個grid的資料
+    multiGridData = data.map((gridData, gridIndex) => {
+      const currentDataFormatterGrid = dataFormatter.multiGrid[gridIndex] || defaultDataFormatterGrid
+      // const dataFormatterGrid: DataFormatterGrid = {
+      //   ...currentDataFormatterGrid,
+      //   type: `multiGrid` as any,
+      //   visibleFilter: dataFormatter.visibleFilter as any,
       // }
-      return computeGridData({
-        data: d,
-        dataFormatter: dataFormatterGrid,
-        chartParams,
-        layout
+      return computeBaseGridData(
+        {
+          data: gridData,
+          dataFormatter: currentDataFormatterGrid,
+          chartParams,
+          layout
+        },
+        'multiGrid',
+        gridIndex
+      )
+    })
+
+    // 修正多個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
+        })
       })
     })
+
   } catch (e) {
     // console.error(e)
     throw Error(e)

package/src/multiGrid/multiGridObservables.ts

@@ -56,21 +56,23 @@ export const multiGridObservable = ({ fullDataFormatter$, computedData$, layout$
   }).pipe(
     switchMap(async (d) => d),
     distinctUntilChanged((a, b) => {
-      return a.fullDataFormatter.multiGrid.length === b.fullDataFormatter.multiGrid.length
-        && a.computedData.length === b.computedData.length
+      // 只有當computedData的長度改變時，才重新計算
+      return a.computedData.length === b.computedData.length
     }),
     map(data => {
       // 每次重新計算時，清除之前的訂閱
       destroy$.next(undefined)
 
-      return data.fullDataFormatter.multiGrid.map((gridDataFormatter, gridIndex) => {
+      return data.computedData.map((gridComputedData, gridIndex) => {
 
         // -- 取得該grid的data和dataFormatter
+        const gridDataFormatter = data.fullDataFormatter.multiGrid[gridIndex]
+          ?? data.fullDataFormatter.multiGrid[0] // 預設使用第0筆資料
         const gridDataFormatter$ = of(gridDataFormatter).pipe(
           takeUntil(destroy$),
           shareReplay(1)
         )
-        const gridComputedData$ = of(data.computedData[gridIndex] || []).pipe(
+        const gridComputedData$ = of(gridComputedData).pipe(
           takeUntil(destroy$),
           shareReplay(1)
         )

package/src/multiValue/computeMultiValueData.ts

@@ -21,14 +21,16 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
           ? {
             id: '',
             label: '',
-            tooltipContent: '',
+            description: '',
+            // tooltipContent: '',
             data: {},
             value: _d
           }
           : {
             id: _d.id ?? '',
             label: _d.label ?? '',
-            tooltipContent: _d.tooltipContent ?? '',
+            description: _d.description ?? '',
+            // tooltipContent: _d.tooltipContent ?? '',
             data: _d.data ?? {},
             value: _d.value
           }
@@ -108,7 +110,8 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
           id: _d.id ? _d.id : defaultId,
           index: currentIndex,
           label: _d.label ? _d.label : defaultId,
-          tooltipContent: _d.tooltipContent ? _d.tooltipContent : dataFormatter.tooltipContentFormat(_d, i, _i, context),
+          description: _d.description ?? '',
+          // tooltipContent: _d.tooltipContent ? _d.tooltipContent : dataFormatter.tooltipContentFormat(_d, i, _i, context),
           data: _d.data,
           value: _d.value,
           // valueLabel: formatValueToLabel(_d.value, dataFormatter.multiValue[_i].valueFormat),

package/src/relationship/computeRelationshipData.ts

@@ -32,7 +32,8 @@ export const computeRelationshipData: ComputedDataFn<'relationship'> = (context)
         id: node.id,
         index: i,
         label: node.label ?? '',
-        tooltipContent: node.tooltipContent ? node.tooltipContent : dataFormatter.tooltipContentFormat(node, 0, i, context), // 0代表node
+        description: node.description ?? '',
+        // tooltipContent: node.tooltipContent ? node.tooltipContent : dataFormatter.tooltipContentFormat(node, 0, i, context), // 0代表node
         data: node.data ?? {},
         value: node.value ?? 0,
         startNodes: [], // 後面再取得資料
@@ -51,7 +52,8 @@ export const computeRelationshipData: ComputedDataFn<'relationship'> = (context)
         id: edge.id,
         index: i,
         label: edge.label ?? '',
-        tooltipContent: edge.tooltipContent ? edge.tooltipContent : dataFormatter.tooltipContentFormat(edge, 1, i, context), // 1代表edge
+        description: edge.description ?? '',
+        // tooltipContent: edge.tooltipContent ? edge.tooltipContent : dataFormatter.tooltipContentFormat(edge, 1, i, context), // 1代表edge
         data: edge.data ?? {},
         value: edge.value ?? 0,
         startNode: NodesMap.get(edge.start),

package/src/series/computeSeriesData.ts

@@ -1,7 +1,7 @@
 import type { DataSeries, DataSeriesDatum } from '../types/DataSeries'
 import type { ComputedDataFn } from '../types/ComputedData'
 import type { ComputedDataSeries, ComputedDatumSeries } from '../types/ComputedDataSeries'
-import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel } from '../utils/orbchartsUtils'
+import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, seriesColorPredicate } from '../utils/orbchartsUtils'
 
 interface SortValue {
   rowIndex: number
@@ -84,15 +84,13 @@ export const computeSeriesData: ComputedDataFn<'series'> = (context) => {
     // if (dataFormatter.sort) {
     //   SortedIndexMap = createSortedIndexMap(data, dataFormatter.sort)
     // }
-    
-    // const seriesColors = chartParams.colors[chartParams.colorScheme].series
 
     const createComputedDatumSeries = (detailData: number | DataSeriesDatum, rowIndex: number, columnIndex: number, currentIndex: number, sortedIndex: number): ComputedDatumSeries => {
       const defaultId = createDefaultDatumId(dataFormatter.type, rowIndex, columnIndex)
       // const seriesLabel = dataFormatter.mapSeries(detailData, rowIndex, columnIndex, context)
       const seriesLabel = dataFormatter.seriesLabels[rowIndex] || createDefaultSeriesLabel('series', rowIndex)
-      // const color = seriesColors[rowIndex]
-      const color = dataFormatter.colorsPredicate(detailData, rowIndex, columnIndex, context)
+      // const color = dataFormatter.colorsPredicate(detailData, rowIndex, columnIndex, context)
+      const color = seriesColorPredicate(rowIndex, chartParams)
       const visible = dataFormatter.visibleFilter(detailData, rowIndex, columnIndex, context)
       if (typeof detailData === 'number') {
         return {
@@ -100,7 +98,8 @@ export const computeSeriesData: ComputedDataFn<'series'> = (context) => {
           index: currentIndex,
           sortedIndex,
           label: defaultId,
-          tooltipContent: dataFormatter.tooltipContentFormat(detailData, rowIndex, columnIndex, context),
+          description: '',
+          // tooltipContent: dataFormatter.tooltipContentFormat(detailData, rowIndex, columnIndex, context),
           data: {},
           value: detailData,
           // valueLabel: formatValueToLabel(detailData, dataFormatter.valueFormat),
@@ -115,7 +114,8 @@ export const computeSeriesData: ComputedDataFn<'series'> = (context) => {
           index: currentIndex,
           sortedIndex,
           label: detailData.label ? detailData.label : defaultId,
-          tooltipContent: detailData.tooltipContent ? detailData.tooltipContent : dataFormatter.tooltipContentFormat(detailData, rowIndex, columnIndex, context),
+          description: detailData.description,
+          // tooltipContent: detailData.tooltipContent ? detailData.tooltipContent : dataFormatter.tooltipContentFormat(detailData, rowIndex, columnIndex, context),
           data: detailData.data ?? {},
           value: detailData.value,
           // valueLabel: formatValueToLabel(detailData.value, dataFormatter.valueFormat),
@@ -126,7 +126,6 @@ export const computeSeriesData: ComputedDataFn<'series'> = (context) => {
         }
       }
     }
-
     
     data.forEach((mainData, rowIndex) => {
       if (Array.isArray(mainData)) {