@orbcharts/plugins-basic 3.0.0-alpha.44 → 3.0.0-alpha.46

package/src/grid/plugins/GroupAux.ts

@@ -336,7 +336,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
         ? data.computedData[0].length
         : 0
 
-      let _labels = data.fullDataFormatter.grid.gridData.seriesDirection === 'row'
+      let _labels = data.fullDataFormatter.grid.seriesDirection === 'row'
         // ? data.fullDataFormatter.grid.columnLabels
         // : data.fullDataFormatter.grid.rowLabels
         ? (data.computedData[0] ?? []).map(d => d.groupLabel)
@@ -391,7 +391,6 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     groupScale: groupScale$,
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
     

package/src/grid/plugins/GroupAxis.ts

@@ -1,5 +1,10 @@
 import { 
-  Subject } from 'rxjs'
+  Subject,
+  takeUntil,
+  map,
+  distinctUntilChanged,
+  shareReplay
+} from 'rxjs'
 import {
   defineGridPlugin } from '@orbcharts/core'
 import { DEFAULT_GROUP_AXIS_PARAMS } from '../defaults'
@@ -11,6 +16,13 @@ export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUP_AXIS_PARAMS)
   
   const destroy$ = new Subject()
 
+  const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
+    takeUntil(destroy$),
+    map(d => d.grid.separateSeries),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+
   const unsubscribeBaseGroupAxis = createBaseGroupAxis(pluginName, {
     selection,
     computedData$: observer.computedData$,
@@ -20,8 +32,8 @@ export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUP_AXIS_PARAMS)
     gridAxesTransform$: observer.gridAxesTransform$,
     gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
     gridAxesSize$: observer.gridAxesSize$,
-    gridContainer$: observer.gridContainer$,
-    isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
+    gridContainerPosition$: observer.gridContainerPosition$,
+    isSeriesSeprate$,
   })
 
   return () => {

package/src/grid/plugins/LineAreas.ts

@@ -14,7 +14,10 @@ export const LineAreas = defineGridPlugin(pluginName, DEFAULT_LINE_AREAS_PARAMS)
   const unsubscribeBaseBars = createBaseLineAreas(pluginName, {
     selection,
     computedData$: observer.computedData$,
-    existSeriesLabels$: observer.existSeriesLabels$,
+    visibleComputedData$: observer.visibleComputedData$,
+    computedLayoutData$: observer.computedLayoutData$,
+    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,
@@ -24,7 +27,7 @@ export const LineAreas = defineGridPlugin(pluginName, DEFAULT_LINE_AREAS_PARAMS)
     gridGraphicTransform$: observer.gridGraphicTransform$,
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
-    gridContainer$: observer.gridContainer$,
+    gridContainerPosition$: observer.gridContainerPosition$,
     layout$: observer.layout$,
     event$: subject.event$,
   })

package/src/grid/plugins/Lines.ts

@@ -14,7 +14,10 @@ export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PARAMS)(({ selec
   const unsubscribeBaseBars = createBaseLines(pluginName, {
     selection,
     computedData$: observer.computedData$,
-    existSeriesLabels$: observer.existSeriesLabels$,
+    computedLayoutData$: observer.computedLayoutData$,
+    visibleComputedData$: observer.visibleComputedData$,
+    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,
@@ -24,7 +27,7 @@ export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PARAMS)(({ selec
     gridGraphicTransform$: observer.gridGraphicTransform$,
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
-    gridContainer$: observer.gridContainer$,
+    gridContainerPosition$: observer.gridContainerPosition$,
     event$: subject.event$,
   })
 

package/src/grid/plugins/ScalingArea.ts

@@ -76,7 +76,6 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
     axisSize: observer.gridAxesSize$
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
     const groupMin = 0

package/src/grid/plugins/ValueAxis.ts

@@ -1,5 +1,10 @@
 import {
-  Subject } from 'rxjs'
+  Subject,
+  takeUntil,
+  map,
+  distinctUntilChanged,
+  shareReplay
+} from 'rxjs'
 import {
   defineGridPlugin } from '@orbcharts/core'
 import { DEFAULT_VALUE_AXIS_PARAMS } from '../defaults'
@@ -12,6 +17,13 @@ export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PARAMS)
   
   const destroy$ = new Subject()
 
+  const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
+    takeUntil(destroy$),
+    map(d => d.grid.separateSeries),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+
   const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
     selection,
     computedData$: observer.computedData$,
@@ -21,8 +33,8 @@ export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PARAMS)
     gridAxesTransform$: observer.gridAxesTransform$,
     gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
     gridAxesSize$: observer.gridAxesSize$,
-    gridContainer$: observer.gridContainer$,
-    isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
+    gridContainerPosition$: observer.gridContainerPosition$,
+    isSeriesSeprate$,
   })
 
   return () => {

package/src/grid/plugins/ValueStackAxis.ts

@@ -1,6 +1,8 @@
 import {
   takeUntil,
   map,
+  distinctUntilChanged,
+  shareReplay,
   switchMap,
   iif,
   Subject } from 'rxjs'
@@ -47,11 +49,18 @@ export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_A
     }),
   )
 
+  const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
+    takeUntil(destroy$),
+    map(d => d.grid.separateSeries),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+
   const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
     selection,
-    computedData$: observer.isSeriesPositionSeprate$.pipe(
-      switchMap(isSeriesPositionSeprate => {
-        return iif(() => isSeriesPositionSeprate, observer.computedData$, stackedData$)
+    computedData$: isSeriesSeprate$.pipe(
+      switchMap(isSeriesSeprate => {
+        return iif(() => isSeriesSeprate, observer.computedData$, stackedData$)
       })
     ),
     fullParams$: observer.fullParams$,
@@ -60,8 +69,8 @@ export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_A
     gridAxesTransform$: observer.gridAxesTransform$,
     gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
     gridAxesSize$: observer.gridAxesSize$,
-    gridContainer$: observer.gridContainer$,
-    isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
+    gridContainerPosition$: observer.gridContainerPosition$,
+    isSeriesSeprate$,
   })
 
   return () => {

package/src/multiGrid/multiGridObservables.ts

@@ -10,280 +10,33 @@ import {
   distinctUntilChanged,
   shareReplay
 } from 'rxjs'
-import type { ContextObserverMultiGrid, ComputedDataGrid, DataFormatterGrid, ContextObserverGridDetail } from '@orbcharts/core'
-// import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '@orbcharts/core/src/defaults'
-
-// interface GridPluginParams {
-//   gridIndex: number
-// }
-
-// interface GridPluginObservables extends ContextObserverGridDetail {
-//   gridComputedData$: Observable<ComputedDataGrid>
-//   gridDataFormatter$: Observable<DataFormatterGrid>
-// }
-
-// // 對應grid資料的plugin所需Observable（必須有gridIndex）
-// export const gridPluginObservables = (observer: ContextObserverMultiGrid<GridPluginParams>): GridPluginObservables => {
-//   const gridIndex$ = observer.fullParams$.pipe(
-//     map(fullParams => fullParams.gridIndex),
-//     distinctUntilChanged(),
-//     shareReplay(1)
-//   )
-
-//   const gridComputedData$: Observable<ComputedDataGrid> = combineLatest({
-//     computedData: observer.computedData$,
-//     gridIndex: gridIndex$,
-//   }).pipe(
-//     map((data) => {
-//       return data.computedData[data.gridIndex] ?? data.computedData[0]
-//     })
-//   )
-
-//   const gridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
-//     fullDataFormatter: observer.fullDataFormatter$,
-//     gridIndex: gridIndex$,
-//   }).pipe(
-//     map((data) => {
-//       const defaultGrid = data.fullDataFormatter.gridList[0] // ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
-      
-//       return {
-//         type: 'grid',
-//         grid: {
-//           ...data.fullDataFormatter.gridList[data.gridIndex] ?? defaultGrid
-//         },
-//         container: {
-//           ...data.fullDataFormatter.container
-//         }
-//       }
-//     })
-//   )
-
-//   const gridDetail$ = combineLatest({
-//     multiGridEachDetail: observer.multiGridEachDetail$,
-//     gridIndex: gridIndex$,
-//   }).pipe(
-//     switchMap(async d => d),
-//     map(data => {
-//       return data.multiGridEachDetail[data.gridIndex] ?? data.multiGridEachDetail[0]
-//     }),
-//     shareReplay(1)
-//   )
-
-//   const isSeriesPositionSeprate$ = gridDetail$.pipe(
-//     switchMap(d => d.isSeriesPositionSeprate$)
-//   )
-
-//   const gridContainer$ = gridDetail$.pipe(
-//     switchMap(d => d.gridContainer$)
-//   )
-
-//   const gridAxesTransform$ = gridDetail$.pipe(
-//     switchMap(d => d.gridAxesTransform$)
-//   )
-
-//   const gridAxesReverseTransform$ = gridDetail$.pipe(
-//     switchMap(d => d.gridAxesReverseTransform$)
-//   )
-  
-//   const gridAxesSize$ = gridDetail$.pipe(
-//     switchMap(d => d.gridAxesSize$)
-//   )
-  
-//   const gridGraphicTransform$ = gridDetail$.pipe(
-//     switchMap(d => d.gridGraphicTransform$)
-//   )
-
-//   const gridGraphicReverseScale$ = gridDetail$.pipe(
-//     switchMap(d => d.gridGraphicReverseScale$)
-//   )
-
-//   const gridHighlight$ = gridDetail$.pipe(
-//     switchMap(d => d.gridHighlight$)
-//   )
-
-//   const existSeriesLabels$ = gridDetail$.pipe(
-//     switchMap(d => d.existSeriesLabels$)
-//   )
-
-//   const SeriesDataMap$ = gridDetail$.pipe(
-//     switchMap(d => d.SeriesDataMap$)
-//   )
-
-//   const GroupDataMap$ = gridDetail$.pipe(
-//     switchMap(d => d.GroupDataMap$)
-//   )
-
-//   const visibleComputedData$ = gridDetail$.pipe(
-//     switchMap(d => d.visibleComputedData$)
-//   )
-
-  
-
-//   return {
-//     gridComputedData$,
-//     gridDataFormatter$,
-//     gridAxesTransform$,
-//     gridGraphicTransform$,
-//     gridGraphicReverseScale$,
-//     gridAxesReverseTransform$,
-//     gridAxesSize$,
-//     gridHighlight$,
-//     existSeriesLabels$,
-//     SeriesDataMap$,
-//     GroupDataMap$,
-//     visibleComputedData$,
-//     isSeriesPositionSeprate$,
-//     gridContainer$
-//   }
-// }
+import type {
+  ContextObserverMultiGrid,
+  ComputedDataGrid,
+  DataFormatterGrid,
+  ContextObserverGridDetail,
+  ContextObserverMultiGridDetail } from '@orbcharts/core'
 
 // 可設定多個gridIndex的params
 interface MultiGridPluginParams {
   gridIndexes: number[]
 }
 
-interface MultiGridDetailObservables extends ContextObserverGridDetail {
-  gridComputedData$: Observable<ComputedDataGrid>
-  gridDataFormatter$: Observable<DataFormatterGrid>
-}
-
-
 // 對應grid資料的plugin所需Observable（必須有gridIndexes）
-export const multiGridDetailObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<MultiGridDetailObservables[]> => {
+export const multiGridPluginObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<ContextObserverMultiGridDetail[]> => {
   const gridIndexes$ = observer.fullParams$.pipe(
     map(fullParams => fullParams.gridIndexes),
     distinctUntilChanged(),
     shareReplay(1)
   )
-  const destroy$ = new Subject()
-
-  // 合併所有gridHighlight$
-  const gridHighlight$ = observer.multiGridEachDetail$.pipe(
-    // switchMap(data => concat(...data.map(d => d.gridHighlight$))),
-    switchMap(data => {
-      return combineLatest(data.map(d => d.gridHighlight$))
-    }),
-    map(d => d.flat()),
-    shareReplay(1)
-  )
-
-  return gridIndexes$.pipe(
-    map(gridIndexes => {
-      return gridIndexes.map(gridIndex => {
-        // 每次重新計算時，清除之前的訂閱
-        destroy$.next(undefined)
-
-        const gridIndex$ = of(gridIndex).pipe(
-          takeUntil(destroy$),
-          shareReplay(1)
-        )
 
-        const gridComputedData$: Observable<ComputedDataGrid> = combineLatest({
-          computedData: observer.computedData$,
-          gridIndex: gridIndex$,
-        }).pipe(
-          takeUntil(destroy$),
-          map((data) => {
-            return data.computedData[data.gridIndex] ?? data.computedData[0]
-          })
-        )
-      
-        const gridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
-          fullDataFormatter: observer.fullDataFormatter$,
-          gridIndex: gridIndex$,
-        }).pipe(
-          takeUntil(destroy$),
-          map((data) => {
-            const defaultGrid = data.fullDataFormatter.gridList[0] // ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
-            
-            return {
-              type: 'grid',
-              grid: {
-                ...data.fullDataFormatter.gridList[data.gridIndex] ?? defaultGrid
-              },
-              container: {
-                ...data.fullDataFormatter.container
-              }
-            }
-          })
-        )
-      
-        const gridDetail$ = combineLatest({
-          multiGridEachDetail: observer.multiGridEachDetail$,
-          gridIndex: gridIndex$,
-        }).pipe(
-          takeUntil(destroy$),
-          switchMap(async d => d),
-          map(data => {
-            return data.multiGridEachDetail[data.gridIndex] ?? data.multiGridEachDetail[0]
-          }),
-          shareReplay(1)
-        )
-      
-        const isSeriesPositionSeprate$ = gridDetail$.pipe(
-          switchMap(d => d.isSeriesPositionSeprate$)
-        )
-      
-        const gridContainer$ = gridDetail$.pipe(
-          switchMap(d => d.gridContainer$)
-        )
-      
-        const gridAxesTransform$ = gridDetail$.pipe(
-          switchMap(d => d.gridAxesTransform$)
-        )
-      
-        const gridAxesReverseTransform$ = gridDetail$.pipe(
-          switchMap(d => d.gridAxesReverseTransform$)
-        )
-        
-        const gridAxesSize$ = gridDetail$.pipe(
-          switchMap(d => d.gridAxesSize$)
-        )
-        
-        const gridGraphicTransform$ = gridDetail$.pipe(
-          switchMap(d => d.gridGraphicTransform$)
-        )
-      
-        const gridGraphicReverseScale$ = gridDetail$.pipe(
-          switchMap(d => d.gridGraphicReverseScale$)
-        )
-      
-        // const gridHighlight$ = gridDetail$.pipe(
-        //   switchMap(d => d.gridHighlight$)
-        // )
-      
-        const existSeriesLabels$ = gridDetail$.pipe(
-          switchMap(d => d.existSeriesLabels$)
-        )
-      
-        const SeriesDataMap$ = gridDetail$.pipe(
-          switchMap(d => d.SeriesDataMap$)
-        )
-      
-        const GroupDataMap$ = gridDetail$.pipe(
-          switchMap(d => d.GroupDataMap$)
-        )
-      
-        const visibleComputedData$ = gridDetail$.pipe(
-          switchMap(d => d.visibleComputedData$)
-        )
-      
-        return {
-          gridComputedData$,
-          gridDataFormatter$,
-          gridAxesTransform$,
-          gridGraphicTransform$,
-          gridGraphicReverseScale$,
-          gridAxesReverseTransform$,
-          gridAxesSize$,
-          gridHighlight$,
-          existSeriesLabels$,
-          SeriesDataMap$,
-          GroupDataMap$,
-          visibleComputedData$,
-          isSeriesPositionSeprate$,
-          gridContainer$
-        }
+  return combineLatest({
+    multiGridEachDetail: observer.multiGridEachDetail$,
+    gridIndexes: gridIndexes$,
+  }).pipe(
+    map(data => {
+      return data.gridIndexes.map(gridIndex => {
+        return data.multiGridEachDetail[gridIndex] ?? data.multiGridEachDetail[0]
       })
     })
   )

package/src/multiGrid/plugins/MultiBarStack.ts

@@ -1,11 +1,16 @@
 import * as d3 from 'd3'
 import {
-  Subject } from 'rxjs'
+  Subject,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
 import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
 import { createBaseBarStack } from '../../base/BaseBarStack'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiBarStack'
@@ -17,7 +22,7 @@ export const MultiBarStack = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BAR
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -31,23 +36,32 @@ export const MultiBarStack = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BAR
 
         const gridSelection = d3.select(g[i])
 
+        const isSeriesSeprate$ = d.dataFormatter$.pipe(
+          takeUntil(destroy$),
+          map(d => d.grid.separateSeries),
+          distinctUntilChanged(),
+          shareReplay(1)
+        )
+
         unsubscribeFnArr[i] = createBaseBarStack(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
+          computedData$: d.computedData$,
           visibleComputedData$: d.visibleComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
+          computedLayoutData$: d.computedLayoutData$,
+          visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+          seriesLabels$: d.seriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
           fullParams$: observer.fullParams$,
-          fullDataFormatter$: d.gridDataFormatter$,
+          fullDataFormatter$: d.dataFormatter$,
           fullChartParams$: observer.fullChartParams$,
           gridAxesTransform$: d.gridAxesTransform$,
           gridGraphicTransform$: d.gridGraphicTransform$,
           gridGraphicReverseScale$: d.gridGraphicReverseScale$,
           gridAxesSize$: d.gridAxesSize$,
           gridHighlight$: d.gridHighlight$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          gridContainerPosition$: d.gridContainerPosition$,
+          isSeriesSeprate$,
           event$: subject.event$ as Subject<any>,
         })
       })

package/src/multiGrid/plugins/MultiBars.ts

@@ -1,11 +1,16 @@
 import * as d3 from 'd3'
 import {
-  Subject } from 'rxjs'
+  Subject,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
 import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_BARS_PARAMS } from '../defaults'
 import { createBaseBars } from '../../base/BaseBars'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiBars'
@@ -17,7 +22,7 @@ export const MultiBars = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_PA
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -31,11 +36,20 @@ export const MultiBars = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_PA
 
         const gridSelection = d3.select(g[i])
 
+        const isSeriesSeprate$ = d.dataFormatter$.pipe(
+          takeUntil(destroy$),
+          map(d => d.grid.separateSeries),
+          distinctUntilChanged(),
+          shareReplay(1)
+        )
+
         unsubscribeFnArr[i] = createBaseBars(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
+          computedData$: d.computedData$,
           visibleComputedData$: d.visibleComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
+          computedLayoutData$: d.computedLayoutData$,
+          visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+          seriesLabels$: d.seriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
           fullParams$: observer.fullParams$,
@@ -45,8 +59,8 @@ export const MultiBars = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_PA
           gridGraphicReverseScale$: d.gridGraphicReverseScale$,
           gridAxesSize$: d.gridAxesSize$,
           gridHighlight$: d.gridHighlight$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          gridContainerPosition$: d.gridContainerPosition$,
+          isSeriesSeprate$,
           event$: subject.event$ as Subject<any>,
         })
       })

package/src/multiGrid/plugins/MultiBarsTriangle.ts

@@ -1,11 +1,16 @@
 import * as d3 from 'd3'
 import {
-  Subject } from 'rxjs'
+  Subject,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
 import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_BARS_TRIANGLE_PARAMS } from '../defaults'
 import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiBarsTriangle'
@@ -17,7 +22,7 @@ export const MultiBarsTriangle = defineMultiGridPlugin(pluginName, DEFAULT_MULTI
   
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -31,21 +36,31 @@ export const MultiBarsTriangle = defineMultiGridPlugin(pluginName, DEFAULT_MULTI
 
         const gridSelection = d3.select(g[i])
 
+        const isSeriesSeprate$ = d.dataFormatter$.pipe(
+          takeUntil(destroy$),
+          map(d => d.grid.separateSeries),
+          distinctUntilChanged(),
+          shareReplay(1)
+        )
+
         unsubscribeFnArr[i] = createBaseBarsTriangle(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
+          computedData$: d.computedData$,
           visibleComputedData$: d.visibleComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
+          computedLayoutData$: d.computedLayoutData$,
+          visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+          seriesLabels$: d.seriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,
+          fullDataFormatter$: d.dataFormatter$,
           gridAxesTransform$: d.gridAxesTransform$,
           gridGraphicTransform$: d.gridGraphicTransform$,
           gridAxesSize$: d.gridAxesSize$,
           gridHighlight$: d.gridHighlight$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          gridContainerPosition$: d.gridContainerPosition$,
+          isSeriesSeprate$: isSeriesSeprate$,
           event$: subject.event$ as Subject<any>,
         })
       })