@orbcharts/plugins-basic 3.0.0-alpha.43 → 3.0.0-alpha.45

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

package/src/multiGrid/plugins/MultiDots.ts

@@ -5,7 +5,7 @@ import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_DOTS_PARAMS } from '../defaults'
 import { createBaseDots } from '../../base/BaseDots'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiDots'
@@ -17,7 +17,7 @@ export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PA
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -33,9 +33,11 @@ export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PA
 
         unsubscribeFnArr[i] = createBaseDots(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,7 +47,7 @@ export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PA
           gridGraphicReverseScale$: d.gridGraphicReverseScale$,
           gridAxesSize$: d.gridAxesSize$,
           gridHighlight$: d.gridHighlight$,
-          gridContainer$: d.gridContainer$,
+          gridContainerPosition$: d.gridContainerPosition$,
           event$: subject.event$ as Subject<any>,
         })
       })

package/src/multiGrid/plugins/MultiGridLegend.ts

@@ -35,7 +35,7 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
 
   const seriesList$ = combineLatest({
     fullParams: observer.fullParams$,
-    multiGrid: observer.multiGridEachDetail$,
+    // multiGrid: observer.multiGridEachDetail$,
     computedData: observer.computedData$,
   }).pipe(
     takeUntil(destroy$),
@@ -77,7 +77,8 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
     seriesLabels$,
     fullParams$,
     layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
   })
 
   return () => {

package/src/multiGrid/plugins/MultiGroupAxis.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_GROUP_AXIS_PARAMS } from '../defaults'
 import { createBaseGroupAxis } from '../../base/BaseGroupAxis'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiGroupAxis'
@@ -17,7 +22,7 @@ export const MultiGroupAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_GR
   
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -31,17 +36,24 @@ export const MultiGroupAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_GR
 
         const gridSelection = d3.select(g[i])
 
+        const isSeriesSeprate$ = d.dataFormatter$.pipe(
+          takeUntil(destroy$),
+          map(d => d.grid.separateSeries),
+          distinctUntilChanged(),
+          shareReplay(1)
+        )
+
         unsubscribeFnArr[i] = createBaseGroupAxis(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
+          computedData$: d.computedData$,
           fullParams$: observer.fullParams$,
-          fullDataFormatter$: d.gridDataFormatter$,
+          fullDataFormatter$: d.dataFormatter$,
           fullChartParams$: observer.fullChartParams$,  
           gridAxesTransform$: d.gridAxesTransform$,
           gridAxesReverseTransform$: d.gridAxesReverseTransform$,
           gridAxesSize$: d.gridAxesSize$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          gridContainerPosition$: d.gridContainerPosition$,
+          isSeriesSeprate$,
         })
       })
   })

package/src/multiGrid/plugins/MultiLineAreas.ts

@@ -6,7 +6,7 @@ import {
 
 import { DEFAULT_MULTI_LINE_AREAS_PARAMS } from '../defaults'
 import { createBaseLineAreas } from '../../base/BaseLineAreas'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiLineAreas'
@@ -18,7 +18,7 @@ export const MultiLineAreas = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LI
   
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -34,18 +34,21 @@ export const MultiLineAreas = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LI
 
         unsubscribeFnArr[i] = createBaseLineAreas(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
+          computedData$: d.computedData$,
+          computedLayoutData$: d.computedLayoutData$,
+          visibleComputedData$: d.visibleComputedData$,
+          visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+          seriesLabels$: d.seriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
-          fullDataFormatter$: d.gridDataFormatter$,
+          fullDataFormatter$: d.dataFormatter$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,
           gridAxesTransform$: d.gridAxesTransform$,
           gridGraphicTransform$: d.gridGraphicTransform$,
           gridAxesSize$: d.gridAxesSize$,
           gridHighlight$: d.gridHighlight$,
-          gridContainer$: d.gridContainer$,
+          gridContainerPosition$: d.gridContainerPosition$,
           layout$: observer.layout$,
           event$: subject.event$ as Subject<any>,
         })