@orbcharts/plugins-basic 3.0.0-alpha.49 → 3.0.0-alpha.50

package/dist/src/multiGrid/defaults.d.ts

@@ -1,8 +1,9 @@
-import { MultiGridLegendParams, MultiBarsParams, MultiBarStackParams, MultiBarsTriangleParams, MultiLinesParams, MultiLineAreasParams, MultiDotsParams, MultiGroupAxisParams, MultiValueAxisParams, OverlappingValueAxesParams } from './types';
+import { MultiGridLegendParams, MultiBarsParams, MultiBarStackParams, MultiBarsTriangleParams, MultiLinesParams, MultiLineAreasParams, MultiDotsParams, MultiGroupAxisParams, MultiValueAxisParams, MultiValueStackAxisParams, OverlappingValueAxesParams } from './types';
 
 export declare const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams;
 export declare const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams;
 export declare const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams;
+export declare const DEFAULT_MULTI_VALUE_STACK_AXIS_PARAMS: MultiValueStackAxisParams;
 export declare const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams;
 export declare const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams;
 export declare const DEFAULT_MULTI_BARS_TRIANGLE_PARAMS: MultiBarsTriangleParams;

package/dist/src/multiGrid/index.d.ts

@@ -9,4 +9,6 @@ export { MultiLineAreas } from './plugins/MultiLineAreas';
 export { MultiDots } from './plugins/MultiDots';
 export { MultiGroupAxis } from './plugins/MultiGroupAxis';
 export { MultiValueAxis } from './plugins/MultiValueAxis';
+export { MultiValueStackAxis } from './plugins/MultiValueStackAxis';
 export { OverlappingValueAxes } from './plugins/OverlappingValueAxes';
+export { OverlappingValueStackAxes } from './plugins/OverlappingValueStackAxes';

package/dist/src/multiGrid/multiGridObservables.d.ts

@@ -4,5 +4,5 @@ import { ContextObserverMultiGrid, ContextObserverMultiGridDetail } from '@orbch
 interface MultiGridPluginParams {
     gridIndexes: number[];
 }
-export declare const multiGridPluginObservables: (observer: ContextObserverMultiGrid<MultiGridPluginParams>) => Observable<ContextObserverMultiGridDetail[]>;
+export declare const multiGridPluginDetailObservables: (observer: ContextObserverMultiGrid<MultiGridPluginParams>) => Observable<ContextObserverMultiGridDetail[]>;
 export {};

package/dist/src/multiGrid/plugins/MultiValueStackAxis.d.ts

@@ -0,0 +1 @@
+export declare const MultiValueStackAxis: import('@orbcharts/core').PluginConstructor<"multiGrid", string, import('..').MultiValueAxisParams>;

package/dist/src/multiGrid/plugins/OverlappingValueStackAxes.d.ts

@@ -0,0 +1 @@
+export declare const OverlappingValueStackAxes: import('@orbcharts/core').PluginConstructor<"multiGrid", string, import('..').OverlappingValueAxesParams>;

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

@@ -31,6 +31,9 @@ export interface MultiGroupAxisParams extends BaseGroupAxisParams {
 export interface MultiValueAxisParams extends BaseValueAxisParams {
     gridIndexes: number[];
 }
+export interface MultiValueStackAxisParams extends BaseValueAxisParams {
+    gridIndexes: number[];
+}
 export interface MultiBarsParams extends BaseBarsParams {
     gridIndexes: number[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.49",
+  "version": "3.0.0-alpha.50",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.0-alpha.47",
+    "@orbcharts/core": "^3.0.0-alpha.48",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/grid/defaults.ts

@@ -99,7 +99,9 @@ export const DEFAULT_VALUE_AXIS_PARAMS: ValueAxisParams = {
   tickTextColorType: 'primary'
 }
 
-export const DEFAULT_VALUE_STACK_AXIS_PARAMS: ValueStackAxisParams = DEFAULT_VALUE_AXIS_PARAMS
+export const DEFAULT_VALUE_STACK_AXIS_PARAMS: ValueStackAxisParams = {
+  ...DEFAULT_VALUE_AXIS_PARAMS
+}
 
 export const DEFAULT_SCALING_AREA_PARAMS: ScalingAreaParams = {
 

package/src/grid/gridObservables.ts

@@ -245,3 +245,4 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
     })
   })
 }
+

package/src/grid/plugins/BarStack.ts

@@ -15,13 +15,6 @@ const pluginName = 'BarStack'
 export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
-  const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
-    takeUntil(destroy$),
-    map(d => d.grid.separateSeries),
-    distinctUntilChanged(),
-    shareReplay(1)
-  )
-
   const unsubscribeBaseBars = createBaseBarStack(pluginName, {
     selection,
     computedData$: observer.computedData$,
@@ -40,7 +33,7 @@ export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)((
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
     gridContainerPosition$: observer.gridContainerPosition$,
-    isSeriesSeprate$,
+    isSeriesSeprate$: observer.isSeriesSeprate$,
     event$: subject.event$,
   })
 

package/src/grid/plugins/Bars.ts

@@ -16,13 +16,6 @@ const pluginName = 'Bars'
 export const Bars = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
-  const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
-    takeUntil(destroy$),
-    map(d => d.grid.separateSeries),
-    distinctUntilChanged(),
-    shareReplay(1)
-  )
-
   const unsubscribeBaseBars = createBaseBars(pluginName, {
     selection,
     computedData$: observer.computedData$,
@@ -40,7 +33,7 @@ export const Bars = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selecti
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
     gridContainerPosition$: observer.gridContainerPosition$,
-    isSeriesSeprate$: isSeriesSeprate$,
+    isSeriesSeprate$: observer.isSeriesSeprate$,
     event$: subject.event$,
   })
 

package/src/grid/plugins/BarsTriangle.ts

@@ -15,14 +15,6 @@ const pluginName = 'BarsTriangle'
 export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_PARAMS)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
-
-  const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
-    takeUntil(destroy$),
-    map(d => d.grid.separateSeries),
-    distinctUntilChanged(),
-    shareReplay(1)
-  )
-
   const unsubscribeBaseBars = createBaseBarsTriangle(pluginName, {
     selection,
     computedData$: observer.computedData$,
@@ -40,7 +32,7 @@ export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_P
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
     gridContainerPosition$: observer.gridContainerPosition$,
-    isSeriesSeprate$,
+    isSeriesSeprate$: observer.isSeriesSeprate$,
     event$: subject.event$,
   })
 

package/src/grid/plugins/GroupAxis.ts

@@ -16,13 +16,6 @@ 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$,
@@ -33,7 +26,7 @@ export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUP_AXIS_PARAMS)
     gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
     gridAxesSize$: observer.gridAxesSize$,
     gridContainerPosition$: observer.gridContainerPosition$,
-    isSeriesSeprate$,
+    isSeriesSeprate$: observer.isSeriesSeprate$,
   })
 
   return () => {

package/src/grid/plugins/ValueAxis.ts

@@ -17,13 +17,6 @@ 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$,
@@ -34,7 +27,7 @@ export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PARAMS)
     gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
     gridAxesSize$: observer.gridAxesSize$,
     gridContainerPosition$: observer.gridContainerPosition$,
-    isSeriesSeprate$,
+    isSeriesSeprate$: observer.isSeriesSeprate$,
   })
 
   return () => {

package/src/grid/plugins/ValueStackAxis.ts

@@ -5,11 +5,12 @@ import {
   shareReplay,
   switchMap,
   iif,
+  Observable,
   Subject } from 'rxjs'
+import type { ComputedDataGrid } from '@orbcharts/core'
 import {
   defineGridPlugin } from '@orbcharts/core'
 import { DEFAULT_VALUE_STACK_AXIS_PARAMS } from '../defaults'
-
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
 
 const pluginName = 'ValueStackAxis'
@@ -18,51 +19,9 @@ export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_A
   
   const destroy$ = new Subject()
 
-  // 將原本的value全部替換成加總後的value
-  const stackedData$ = observer.computedData$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-      // 將同一group的value加總起來
-      const stackedValue = new Array(data[0] ? data[0].length : 0)
-        .fill(null)
-        .map((_, i) => {
-          return data.reduce((prev, current) => {
-            if (current && current[i]) {
-              const currentValue = current[i].value == null || current[i].visible == false
-                ? 0
-                : current[i].value!
-              return prev + currentValue
-            }
-            return prev
-          }, 0)
-        })
-      // 將原本的value全部替換成加總後的value
-      const computedData = data.map((series, seriesIndex) => {
-        return series.map((d, i) => {
-          return {
-            ...d,
-            value: stackedValue[i],
-          }
-        })
-      })
-      return computedData
-    }),
-  )
-
-  const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
-    takeUntil(destroy$),
-    map(d => d.grid.separateSeries),
-    distinctUntilChanged(),
-    shareReplay(1)
-  )
-
   const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
     selection,
-    computedData$: isSeriesSeprate$.pipe(
-      switchMap(isSeriesSeprate => {
-        return iif(() => isSeriesSeprate, observer.computedData$, stackedData$)
-      })
-    ),
+    computedData$: observer.computedStackedData$, // 計算疊加value的資料
     fullParams$: observer.fullParams$,
     fullDataFormatter$: observer.fullDataFormatter$,
     fullChartParams$: observer.fullChartParams$,  
@@ -70,7 +29,7 @@ export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_A
     gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
     gridAxesSize$: observer.gridAxesSize$,
     gridContainerPosition$: observer.gridContainerPosition$,
-    isSeriesSeprate$,
+    isSeriesSeprate$: observer.isSeriesSeprate$,
   })
 
   return () => {

package/src/multiGrid/defaults.ts

@@ -8,6 +8,7 @@ import type {
   MultiDotsParams,
   MultiGroupAxisParams,
   MultiValueAxisParams,
+  MultiValueStackAxisParams,
   OverlappingValueAxesParams
 } from './types'
 
@@ -66,6 +67,10 @@ export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
   gridIndexes: [0]
 }
 
+export const DEFAULT_MULTI_VALUE_STACK_AXIS_PARAMS: MultiValueStackAxisParams = {
+  ...DEFAULT_MULTI_VALUE_AXIS_PARAMS
+}
+
 export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
   barWidth: 0,
   barPadding: 1,

package/src/multiGrid/index.ts

@@ -9,4 +9,6 @@ export { MultiLineAreas } from './plugins/MultiLineAreas'
 export { MultiDots } from './plugins/MultiDots'
 export { MultiGroupAxis } from './plugins/MultiGroupAxis'
 export { MultiValueAxis } from './plugins/MultiValueAxis'
-export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'
+export { MultiValueStackAxis } from './plugins/MultiValueStackAxis'
+export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'
+export { OverlappingValueStackAxes } from './plugins/OverlappingValueStackAxes'

package/src/multiGrid/multiGridObservables.ts

@@ -23,7 +23,7 @@ interface MultiGridPluginParams {
 }
 
 // 對應grid資料的plugin所需Observable（必須有gridIndexes）
-export const multiGridPluginObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<ContextObserverMultiGridDetail[]> => {
+export const multiGridPluginDetailObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<ContextObserverMultiGridDetail[]> => {
   const gridIndexes$ = observer.fullParams$.pipe(
     map(fullParams => fullParams.gridIndexes),
     distinctUntilChanged(),
@@ -40,4 +40,5 @@ export const multiGridPluginObservables = (observer: ContextObserverMultiGrid<Mu
       })
     })
   )
-}
+}
+

package/src/multiGrid/plugins/MultiBarStack.ts

@@ -10,7 +10,7 @@ import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
 import { createBaseBarStack } from '../../base/BaseBarStack'
-import { multiGridPluginObservables } from '../multiGridObservables'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiBarStack'
@@ -22,9 +22,9 @@ export const MultiBarStack = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BAR
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridPluginObservables(observer)
+  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
 
-  multiGridPlugin$
+  multiGridPluginDetail$
     .pipe(
       takeUntil(destroy$)
     )

package/src/multiGrid/plugins/MultiBars.ts

@@ -10,7 +10,7 @@ import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_BARS_PARAMS } from '../defaults'
 import { createBaseBars } from '../../base/BaseBars'
-import { multiGridPluginObservables } from '../multiGridObservables'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiBars'
@@ -22,9 +22,9 @@ export const MultiBars = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_PA
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridPluginObservables(observer)
+  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
 
-  multiGridPlugin$
+  multiGridPluginDetail$
     .pipe(
       takeUntil(destroy$)
     )

package/src/multiGrid/plugins/MultiBarsTriangle.ts

@@ -10,7 +10,7 @@ import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_BARS_TRIANGLE_PARAMS } from '../defaults'
 import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
-import { multiGridPluginObservables } from '../multiGridObservables'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiBarsTriangle'
@@ -22,9 +22,9 @@ export const MultiBarsTriangle = defineMultiGridPlugin(pluginName, DEFAULT_MULTI
   
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridPluginObservables(observer)
+  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
 
-  multiGridPlugin$
+  multiGridPluginDetail$
     .pipe(
       takeUntil(destroy$)
     )

package/src/multiGrid/plugins/MultiDots.ts

@@ -6,7 +6,7 @@ import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_DOTS_PARAMS } from '../defaults'
 import { createBaseDots } from '../../base/BaseDots'
-import { multiGridPluginObservables } from '../multiGridObservables'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiDots'
@@ -18,9 +18,9 @@ export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PA
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridPluginObservables(observer)
+  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
 
-  multiGridPlugin$
+  multiGridPluginDetail$
     .pipe(
       takeUntil(destroy$)
     )

package/src/multiGrid/plugins/MultiGroupAxis.ts

@@ -10,7 +10,7 @@ import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_GROUP_AXIS_PARAMS } from '../defaults'
 import { createBaseGroupAxis } from '../../base/BaseGroupAxis'
-import { multiGridPluginObservables } from '../multiGridObservables'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiGroupAxis'
@@ -22,9 +22,9 @@ export const MultiGroupAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_GR
   
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridPluginObservables(observer)
+  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
 
-  multiGridPlugin$
+  multiGridPluginDetail$
     .pipe(
       takeUntil(destroy$)
     )

package/src/multiGrid/plugins/MultiLineAreas.ts

@@ -7,7 +7,7 @@ import {
 
 import { DEFAULT_MULTI_LINE_AREAS_PARAMS } from '../defaults'
 import { createBaseLineAreas } from '../../base/BaseLineAreas'
-import { multiGridPluginObservables } from '../multiGridObservables'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiLineAreas'
@@ -19,9 +19,9 @@ export const MultiLineAreas = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LI
   
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridPluginObservables(observer)
+  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
 
-  multiGridPlugin$
+  multiGridPluginDetail$
     .pipe(
       takeUntil(destroy$)
     )

package/src/multiGrid/plugins/MultiLines.ts

@@ -7,7 +7,7 @@ import {
 
 import { DEFAULT_MULTI_LINES_PARAMS } from '../defaults'
 import { createBaseLines } from '../../base/BaseLines'
-import { multiGridPluginObservables } from '../multiGridObservables'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiLines'
@@ -19,9 +19,9 @@ export const MultiLines = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINES_
   
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridPluginObservables(observer)
+  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
 
-  multiGridPlugin$
+  multiGridPluginDetail$
     .pipe(
       takeUntil(destroy$)
     )

package/src/multiGrid/plugins/MultiValueAxis.ts

@@ -10,7 +10,7 @@ import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_VALUE_AXIS_PARAMS } from '../defaults'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
-import { multiGridPluginObservables } from '../multiGridObservables'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiValueAxis'
@@ -22,9 +22,9 @@ export const MultiValueAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_VA
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridPluginObservables(observer)
+  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
 
-  multiGridPlugin$
+  multiGridPluginDetail$
     .pipe(
       takeUntil(destroy$)
     )

package/src/multiGrid/plugins/MultiValueStackAxis.ts

@@ -0,0 +1,69 @@
+import * as d3 from 'd3'
+import {
+  Subject,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_MULTI_VALUE_AXIS_PARAMS } from '../defaults'
+import { createBaseValueAxis } from '../../base/BaseValueAxis'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiValueStackAxis'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiValueStackAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_VALUE_AXIS_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeFnArr: (() => void)[] = []
+
+  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
+
+  multiGridPluginDetail$
+    .pipe(
+      takeUntil(destroy$)
+    )
+    .subscribe(data => {
+      // 每次重新計算時，清除之前的訂閱
+      unsubscribeFnArr.forEach(fn => fn())
+
+      selection.selectAll(`g.${gridClassName}`)
+        .data(data)
+        .join('g')
+        .attr('class', gridClassName)
+        .each((d, i, g) => {
+
+          const gridSelection = d3.select(g[i])
+
+          const isSeriesSeprate$ = d.dataFormatter$.pipe(
+            takeUntil(destroy$),
+            map(d => d.grid.separateSeries),
+            distinctUntilChanged(),
+            shareReplay(1)
+          )
+
+          unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
+            selection: gridSelection,
+            computedData$: d.computedStackedData$, // 計算疊加value的資料
+            fullParams$: observer.fullParams$,
+            fullDataFormatter$: d.dataFormatter$,
+            fullChartParams$: observer.fullChartParams$,  
+            gridAxesTransform$: d.gridAxesTransform$,
+            gridAxesReverseTransform$: d.gridAxesReverseTransform$,
+            gridAxesSize$: d.gridAxesSize$,
+            gridContainerPosition$: d.gridContainerPosition$,
+            isSeriesSeprate$,
+          })
+        })
+    })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})

package/src/multiGrid/plugins/OverlappingValueAxes.ts

@@ -15,7 +15,7 @@ import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS } from '../defaults'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
-import { multiGridPluginObservables } from '../multiGridObservables'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '@orbcharts/core/src/grid/gridObservables'
 
@@ -78,7 +78,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
     })
   )
 
-  const multiGridPlugin$ = of(observer).pipe(
+  const multiGridPluginDetail$ = of(observer).pipe(
     takeUntil(destroy$),
     map(observer => {
       // 將observer的gridIndexes限制在2個
@@ -94,7 +94,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
         )
       }
     }),
-    switchMap(observer => multiGridPluginObservables(observer)),
+    switchMap(observer => multiGridPluginDetailObservables(observer)),
     map(data => {
       return data.map((observables, index) => {
         if (index === 0) {
@@ -123,7 +123,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
     })
   )
 
-  multiGridPlugin$
+  multiGridPluginDetail$
     .pipe(
       takeUntil(destroy$)
     )
@@ -142,13 +142,6 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
 
           const gridSelection = d3.select(g[i])
 
-          const isSeriesSeprate$ = d.dataFormatter$.pipe(
-            takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
-            distinctUntilChanged(),
-            shareReplay(1)
-          )
-
           unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
             selection: gridSelection,
             computedData$: d.computedData$,
@@ -161,7 +154,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
             gridAxesReverseTransform$: d.gridAxesReverseTransform$,
             gridAxesSize$: d.gridAxesSize$,
             gridContainerPosition$: d.gridContainerPosition$,
-            isSeriesSeprate$,
+            isSeriesSeprate$: d.isSeriesSeprate$,
           })
         })
     })