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

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,10 +33,17 @@ import {
 import {
   gridAxesTransformObservable,
   gridGraphicTransformObservable,
-  gridAxesOppositeTransformObservable,
+  gridGraphicReverseScaleObservable,
+  gridAxesReverseTransformObservable,
   gridAxesSizeObservable,
-  gridVisibleComputedDataObservable } from '../grid/gridObservables'
+  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'>>
@@ -49,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({
@@ -56,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)
@@ -79,130 +207,76 @@ 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$
+        })
       })
     })
   )
 }
 
-interface GridContainerBox {
-  slotIndex: number
-  rowIndex: number
-  columnIndex: number
-  translate: [number, number]
-  scale: [number, number]
-}
 
-// 每一個grid的container位置
-export const multiGridContainerObservable = ({ fullDataFormatter$, layout$, fullChartParams$ }: {
+// 所有container位置（對應series）
+export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$, fullChartParams$, layout$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
   fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
-  layout$: Observable<Layout>
   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 / columnAmount) - (gap / 2)
-    const height = (layout.height / rowAmount) - (gap / 2)
-    const x = columnIndex * width + (columnIndex * gap)
-    const y = rowIndex * height + (columnIndex * 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$,
     fullDataFormatter: fullDataFormatter$,
+    fullChartParams: fullChartParams$,
     layout: layout$,
-    fullChartParams: fullChartParams$
   }).pipe(
     switchMap(async (d) => d),
     map(data => {
-      data.fullDataFormatter.container.rowAmount
-      const boxArr: GridContainerBox[] = data.fullDataFormatter.multiGrid.map((grid, gridIndex) => {
-        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 defaultGrid = data.fullDataFormatter.gridList[0] ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+      
+      const boxArr = data.computedData.map((gridData, gridIndex) => {
+        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/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,19 +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[]>
+  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>
+// }
+

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

@@ -6,11 +6,12 @@ import type { DataSeries, DataSeriesDatum, DataSeriesValue } from '../types/Data
 import type { DataGrid, DataGridDatum, DataGridValue } from '../types/DataGrid'
 import type { DataMultiGrid } from '../types/DataMultiGrid'
 import type { DataMultiValue, DataMultiValueDatum, DataMultiValueValue } from '../types/DataMultiValue'
-import type { SeriesType, DataFormatterGrid } from '../types/DataFormatterGrid'
+import type { SeriesDirection, DataFormatterGrid, DataFormatterGridContainer } from '../types/DataFormatterGrid'
 import type { ComputedDatumSeriesValue } from '../types/ComputedData'
 import type { ComputedDatumSeries } from '../types/ComputedDataSeries'
 import type { ComputedDatumGrid, ComputedDataGrid } from '../types/ComputedDataGrid'
 import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
+import type { Layout } from '../types/Layout'
 // import type { ComputedDatumMultiGrid } from '../types/ComputedDataMultiGrid'
 import { isObject } from './commonUtils'
 
@@ -43,9 +44,9 @@ export function createGridSeriesLabels ({ transposedDataGrid, dataFormatter, cha
   chartType?: ChartType
   gridIndex?: number
 }) {
-  const labels = dataFormatter.grid.seriesType === 'row'
-    ? dataFormatter.grid.rowLabels
-    : dataFormatter.grid.columnLabels
+  const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
+    ? dataFormatter.grid.gridData.rowLabels
+    : dataFormatter.grid.gridData.columnLabels
   return transposedDataGrid.map((_, rowIndex) => {
     return labels[rowIndex] != null
       ? labels[rowIndex]
@@ -62,9 +63,9 @@ export function createGridGroupLabels ({ transposedDataGrid, dataFormatter, char
   if (transposedDataGrid[0] == null) {
     return []
   }
-  const labels = dataFormatter.grid.seriesType === 'row'
-    ? dataFormatter.grid.columnLabels
-    : dataFormatter.grid.rowLabels
+  const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
+    ? dataFormatter.grid.gridData.columnLabels
+    : dataFormatter.grid.gridData.rowLabels
   return transposedDataGrid[0].map((_, columnLabels) => {
     return labels[columnLabels] != null
       ? labels[columnLabels]
@@ -146,9 +147,9 @@ export function getMinAndMaxMultiValue (data: DataMultiValue, valueIndex: number
 
 // }
 
-// 轉置成seriesType為main的陣列格式
-export function transposeData<T> (seriesType: SeriesType, data: T[][]): T[][] {
-  if (seriesType === 'row') {
+// 轉置成seriesDirection為main的陣列格式
+export function transposeData<T> (seriesDirection: SeriesDirection, data: T[][]): T[][] {
+  if (seriesDirection === 'row') {
     return Object.assign([], data)
   }
   // 取得原始陣列的維度
@@ -179,6 +180,21 @@ export function seriesColorPredicate (seriesIndex: number, chartParams: ChartPar
     ]
 }
 
+export function calcGridContainerPosition (layout: Layout, container: DataFormatterGridContainer, 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
+  }
+}
+
 // // multiGrid datum color
 // export function multiGridColorPredicate ({ seriesIndex, groupIndex, data, chartParams }: {
 //   seriesIndex: number