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

package/src/grid/gridObservables.ts

@@ -19,15 +19,18 @@ import type {
   DataTypeMap,
   DataFormatterTypeMap,
   DataFormatterGrid,
-  DataFormatterContext,
+  DataFormatterGridContainer,
   DataFormatterValueAxis,
   DataFormatterGroupAxis,
+  ContainerPosition,
   HighlightTarget,
   Layout,
   TransformData } from '../types'
-import { getMinAndMaxGrid, transposeData } from '../utils/orbchartsUtils'
+import { getMinAndMaxGrid } from '../utils/orbchartsUtils'
 import { createAxisLinearScale, createAxisPointScale, createAxisQuantizeScale } from '../utils/d3Utils'
 import { highlightObservable } from '../utils/observables'
+import { calcGridContainerPosition } from '../utils/orbchartsUtils'
+import { DATA_FORMATTER_GRID_GRID_DEFAULT } from '../defaults'
 
 export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
   fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
@@ -44,7 +47,7 @@ export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
     if (!xAxis || !yAxis) {
       return {
         translate: [0, 0],
-        scale: [0, 0],
+        scale: [1, 1],
         rotate: 0,
         rotateX: 0,
         rotateY: 0,
@@ -102,6 +105,8 @@ export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
         translateX = width
       } else if (yAxis.position === 'top') {
         rotate = -90
+        rotateX = 180
+        rotateY = 180
         translateX = width
       } else {
         // 預設
@@ -109,12 +114,11 @@ export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
         translateY = height
       }
     }
-    
     // selection.style('transform', `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`)
   
     return {
       translate: [translateX, translateY],
-      scale: [0, 0],
+      scale: [1, 1],
       rotate,
       rotateX,
       rotateY,
@@ -131,8 +135,8 @@ export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
       switchMap(async (d) => d),
     ).subscribe(data => {
       const axesTransformData = calcAxesTransform({
-        xAxis: data.fullDataFormatter.groupAxis,
-        yAxis: data.fullDataFormatter.valueAxis,
+        xAxis: data.fullDataFormatter.grid.groupAxis,
+        yAxis: data.fullDataFormatter.grid.valueAxis,
         width: data.layout.width,
         height: data.layout.height
       })
@@ -146,6 +150,30 @@ export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
   })
 }
 
+
+export const gridAxesReverseTransformObservable = ({ gridAxesTransform$ }: {
+  gridAxesTransform$: Observable<TransformData>
+}): Observable<TransformData> => {
+  return gridAxesTransform$.pipe(
+    map(d => {
+      // const translate: [number, number] = [d.translate[0] * -1, d.translate[1] * -1]
+      const translate: [number, number] = [0, 0] // 無需逆轉
+      const scale: [number, number] = [1 / d.scale[0], 1 / d.scale[1]]
+      const rotate = d.rotate * -1
+      const rotateX = d.rotateX * -1
+      const rotateY = d.rotateY * -1
+      return {
+        translate,
+        scale,
+        rotate,
+        rotateX,
+        rotateY,
+        value: `translate(${translate[0]}px, ${translate[1]}px) rotate(${rotate}deg) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
+      }
+    }),
+  )
+}
+
 export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
   computedData$: Observable<ComputedDataTypeMap<'grid'>>
   fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
@@ -244,8 +272,8 @@ export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatte
     ).subscribe(data => {
       const dataAreaTransformData = calcGridDataAreaTransform ({
         data: data.computedData,
-        groupAxis: data.fullDataFormatter.groupAxis,
-        valueAxis: data.fullDataFormatter.valueAxis,
+        groupAxis: data.fullDataFormatter.grid.groupAxis,
+        valueAxis: data.fullDataFormatter.grid.valueAxis,
         width: data.layout.width,
         height: data.layout.height
       })
@@ -259,24 +287,33 @@ export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatte
   })
 }
 
-export const gridAxesOppositeTransformObservable = ({ gridAxesTransform$ }: {
+export const gridGraphicReverseScaleObservable = ({ gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
+  gridContainer$: Observable<ContainerPosition[]>
   gridAxesTransform$: Observable<TransformData>
-}): Observable<TransformData> => {
-  return gridAxesTransform$.pipe(
-    map(d => {
-      // const translate: [number, number] = [d.translate[0] * -1, d.translate[1] * -1]
-      const translate: [number, number] = [0, 0] // 無需逆轉
-      const scale: [number, number] = [d.scale[0] * -1, d.scale[1] * -1]
-      const rotate = d.rotate * -1
-      const rotateX = d.rotateX * -1
-      const rotateY = d.rotateY * -1
-      return {
-        translate,
-        scale,
-        rotate,
-        rotateX,
-        rotateY,
-        value: `translate(${translate[0]}px, ${translate[1]}px) rotate(${rotate}deg) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
+  gridGraphicTransform$: Observable<TransformData>
+}): Observable<[number, number][]> => {
+  return combineLatest({
+    gridContainer: gridContainer$,
+    gridAxesTransform: gridAxesTransform$,
+    gridGraphicTransform: gridGraphicTransform$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      if (data.gridAxesTransform.rotate == 0 || data.gridAxesTransform.rotate == 180) {
+        return data.gridContainer.map((series, seriesIndex) => {
+          return [
+            1 / data.gridGraphicTransform.scale[0] / data.gridContainer[seriesIndex].scale[0],
+            1 / data.gridGraphicTransform.scale[1] / data.gridContainer[seriesIndex].scale[1],
+          ]
+        })
+      } else {
+        return data.gridContainer.map((series, seriesIndex) => {
+          // 由於有垂直的旋轉，所以外層 (container) x和y的scale要互換
+          return [
+            1 / data.gridGraphicTransform.scale[0] / data.gridContainer[seriesIndex].scale[1],
+            1 / data.gridGraphicTransform.scale[1] / data.gridContainer[seriesIndex].scale[0],
+          ]
+        })
       }
     }),
   )
@@ -317,8 +354,8 @@ export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
     ).subscribe(data => {
       
       const axisSize = calcAxesSize({
-        xAxisPosition: data.fullDataFormatter.groupAxis.position,
-        yAxisPosition: data.fullDataFormatter.valueAxis.position,
+        xAxisPosition: data.fullDataFormatter.grid.groupAxis.position,
+        yAxisPosition: data.fullDataFormatter.grid.valueAxis.position,
         width: data.layout.width,
         height: data.layout.height,
       })
@@ -343,6 +380,21 @@ export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
 //   return highlightObservable ({ datumList$, fullChartParams$, event$ })
 // }
 
+export const existedSeriesLabelsObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'grid'>> }) => {
+  return computedData$.pipe(
+    map(data => {
+      return data
+        .filter(series => series.length)
+        .map(series => {
+          return series[0].seriesLabel
+        })
+    }),
+    distinctUntilChanged((a, b) => {
+      return JSON.stringify(a).length === JSON.stringify(b).length
+    }),
+  )
+}
+
 export const gridVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'grid'>> }) => {
   return computedData$.pipe(
     map(data => {
@@ -358,3 +410,78 @@ export const gridVisibleComputedDataObservable = ({ computedData$ }: { computedD
   )
 }
 
+export const isSeriesPositionSeprateObservable = ({ computedData$, fullDataFormatter$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'grid'>>
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
+}) => {
+  return combineLatest({
+    computedData: computedData$,
+    fullDataFormatter: fullDataFormatter$
+  }).pipe(
+    map(data => {
+      return data.fullDataFormatter.grid.seriesSlotIndexes && data.fullDataFormatter.grid.seriesSlotIndexes.length === data.computedData.length
+        ? true
+        : false
+    }),
+    distinctUntilChanged()
+  )
+}
+
+// 所有container位置（對應series）
+export const gridContainerObservable = ({ computedData$, fullDataFormatter$, fullChartParams$, layout$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'grid'>>
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
+  fullChartParams$: Observable<ChartParams>
+  layout$: Observable<Layout>
+}) => {
+
+  const gridContainer$ = combineLatest({
+    computedData: computedData$,
+    fullDataFormatter: fullDataFormatter$,
+    fullChartParams: fullChartParams$,
+    layout: layout$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+
+      const grid = data.fullDataFormatter.grid
+      
+      // 有設定series定位
+      const hasSeriesPosition = grid.seriesSlotIndexes && grid.seriesSlotIndexes.length === data.computedData.length
+        ? true
+        : false
+      
+      if (hasSeriesPosition) {
+        // -- 依seriesSlotIndexes計算 --
+        return data.computedData.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 data.computedData.map((seriesData, seriesIndex) => {
+          const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+          return {
+            slotIndex: grid.slotIndex,
+            rowIndex,
+            columnIndex,
+            translate,
+            scale,
+          }
+        })
+      }
+    })
+  )
+
+  return gridContainer$
+}

package/src/multiGrid/computeMultiGridData.ts

@@ -1,9 +1,9 @@
 import type { DataGrid } from '../types/DataGrid'
 import type { ComputedDataFn } from '../types/ComputedData'
-import type { DataFormatterMultiGrid } from '../types/DataFormatterMultiGrid'
-import type { ComputedDataGrid } from '../types/ComputedDataGrid'
+import type { DataFormatterGrid } from '../types/DataFormatterGrid'
+import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
 import { computeBaseGridData } from '../grid/computeGridData'
-import { DATA_FORMATTER_MULTI_GRID_DEFAULT } from '../defaults'
+import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
 import { seriesColorPredicate } from '../utils/orbchartsUtils'
 
 export const computeMultiGridData: ComputedDataFn<'multiGrid'> = ({ data = [], dataFormatter, chartParams, layout }) => {
@@ -11,23 +11,27 @@ export const computeMultiGridData: ComputedDataFn<'multiGrid'> = ({ data = [], d
     return []
   }
 
-  let multiGridData: ComputedDataGrid[] = []
+  let multiGridData: ComputedDataMultiGrid = []
 
   try {
-    const defaultDataFormatterGrid = Object.assign({}, DATA_FORMATTER_MULTI_GRID_DEFAULT.multiGrid[0])
+    const defaultGrid = dataFormatter.gridList[0] || DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
 
     // 計算每個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,
-      // }
+      const currentDataFormatterGrid = dataFormatter.gridList[gridIndex] || defaultGrid
+
       return computeBaseGridData(
         {
           data: gridData,
-          dataFormatter: currentDataFormatterGrid,
+          dataFormatter: {
+            type: 'grid',
+            grid: {
+              ...currentDataFormatterGrid
+            },
+            container: {
+              ...dataFormatter.container
+            }
+          },
           chartParams,
           layout
         },

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
     }),