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

package/src/grid/gridObservables.ts

@@ -19,18 +19,19 @@ import type {
   ComputedDataGrid,
   ComputedDatumGrid,
   TransformData,
-  ContainerPosition,
+  GridContainerPosition,
   Layout } from '@orbcharts/core'
 import { createAxisQuantizeScale } from '@orbcharts/core'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
 
-export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, existSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
+// grid選取器
+export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, seriesLabels$, gridContainerPosition$, gridAxesTransform$, gridGraphicTransform$ }: {
   selection: d3.Selection<any, unknown, any, unknown>
   pluginName: string
   clipPathID: string
   // computedData$: Observable<ComputedDataGrid>
-  existSeriesLabels$: Observable<string[]>
-  gridContainer$: Observable<ContainerPosition[]>
+  seriesLabels$: Observable<string[]>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
   gridAxesTransform$: Observable<TransformData>
   gridGraphicTransform$: Observable<TransformData>
 }) => {
@@ -38,7 +39,7 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, ex
   const axesClassName = getClassName(pluginName, 'axes')
   const graphicClassName = getClassName(pluginName, 'graphic')
 
-  const seriesSelection$ = existSeriesLabels$.pipe(
+  const seriesSelection$ = seriesLabels$.pipe(
     map((existSeriesLabels, i) => {
       return selection
         .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
@@ -80,39 +81,24 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, ex
           exit => exit.remove()
         )
     }),
-    switchMap(selection => combineLatest({
-      seriesSelection: of(selection),
-      gridContainer: gridContainer$                                                                                                                                                                                       
-    })),
-    map(data => {
-      data.seriesSelection
-        .transition()
-        .attr('transform', (d, i) => {
-          const gridContainer = data.gridContainer[i] ?? data.gridContainer[0]
-          const translate = gridContainer.translate
-          const scale = gridContainer.scale
-          return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
-        })
-      return data.seriesSelection
-    }),
     shareReplay(1)
   )
 
-  // combineLatest({
-  //   seriesSelection: seriesSelection$,
-  //   gridContainer: gridContainer$                                                                                                                                                                                       
-  // }).pipe(
-  //   switchMap(async d => d)
-  // ).subscribe(data => {
-  //   data.seriesSelection
-  //     .transition()
-  //     .attr('transform', (d, i) => {
-  //       const translate = data.gridContainer[i].translate
-  //       const scale = data.gridContainer[i].scale
-  //       return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
-  //     })
-  // })
-
+  combineLatest({
+    seriesSelection: seriesSelection$,
+    gridContainerPosition: gridContainerPosition$                                                                                                                                                                                       
+  }).pipe(
+    switchMap(async d => d)
+  ).subscribe(data => {
+    data.seriesSelection
+      .transition()
+      .attr('transform', (d, i) => {
+        const gridContainerPosition = data.gridContainerPosition[i] ?? data.gridContainerPosition[0]
+        const translate = gridContainerPosition.translate
+        const scale = gridContainerPosition.scale
+        return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
+      })
+  })
 
   const axesSelection$ = combineLatest({
     seriesSelection: seriesSelection$,
@@ -177,7 +163,6 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
       computedData: computedData$
     }).pipe(
       takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
       switchMap(async (d) => d),
     ).subscribe(data => {
       const groupMin = 0
@@ -193,7 +178,7 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
       //   ? data.computedData[0].length
       //   : 0
 
-      let _labels = data.dataFormatter.grid.gridData.seriesDirection === 'row'
+      let _labels = data.dataFormatter.grid.seriesDirection === 'row'
         ? (data.computedData[0] ?? []).map(d => d.groupLabel)
         : data.computedData.map(d => d[0].groupLabel)
 
@@ -220,7 +205,6 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
       scaleRangeGroupLabels: scaleRangeGroupLabels$
     }).pipe(
       takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
       switchMap(async (d) => d),
     ).subscribe(data => {
       

package/src/grid/plugins/BarStack.ts

@@ -1,4 +1,8 @@
 import {
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil,
   Subject,
   Observable } from 'rxjs'
 import { defineGridPlugin } from '@orbcharts/core'
@@ -11,11 +15,20 @@ 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$,
+    computedLayoutData$: observer.computedLayoutData$,
     visibleComputedData$: observer.visibleComputedData$,
-    existSeriesLabels$: observer.existSeriesLabels$,
+    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,
@@ -26,8 +39,8 @@ export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)((
     gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
-    gridContainer$: observer.gridContainer$,
-    isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
+    gridContainerPosition$: observer.gridContainerPosition$,
+    isSeriesSeprate$,
     event$: subject.event$,
   })
 

package/src/grid/plugins/Bars.ts

@@ -1,6 +1,11 @@
 import {
   Subject,
-  Observable } from 'rxjs'
+  Observable,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
 import {
   defineGridPlugin } from '@orbcharts/core'
 import { DEFAULT_BARS_PARAMS } from '../defaults'
@@ -11,11 +16,20 @@ 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$,
+    computedLayoutData$: observer.computedLayoutData$,
     visibleComputedData$: observer.visibleComputedData$,
-    existSeriesLabels$: observer.existSeriesLabels$,
+    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,
@@ -25,8 +39,8 @@ export const Bars = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selecti
     gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
-    gridContainer$: observer.gridContainer$,
-    isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
+    gridContainerPosition$: observer.gridContainerPosition$,
+    isSeriesSeprate$: isSeriesSeprate$,
     event$: subject.event$,
   })
 

package/src/grid/plugins/BarsDiverging.ts

@@ -15,8 +15,10 @@ export const BarsDiverging = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)((
   const unsubscribeBaseBars = createBaseBars(pluginName, {
     selection,
     computedData$: observer.computedData$,
+    computedLayoutData$: observer.computedLayoutData$,
     visibleComputedData$: observer.visibleComputedData$,
-    existSeriesLabels$: observer.existSeriesLabels$,
+    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,
@@ -26,9 +28,9 @@ export const BarsDiverging = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)((
     gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
-    gridContainer$: observer.gridContainer$,
-    // isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
-    isSeriesPositionSeprate$: of(true), // hack: 永遠為true，可以強制讓每組series的bars的x位置都是一樣的
+    gridContainerPosition$: observer.gridContainerPosition$,
+    // isSeriesSeprate$: observer.isSeriesSeprate$,
+    isSeriesSeprate$: of(true), // hack: 永遠為true，可以強制讓每組series的bars的x位置都是一樣的
     event$: subject.event$,
   })
 

package/src/grid/plugins/BarsTriangle.ts

@@ -1,6 +1,11 @@
 import {
   Subject,
-  Observable } from 'rxjs'
+  Observable,
+  takeUntil,
+  map,
+  distinctUntilChanged,
+  shareReplay
+} from 'rxjs'
 import { defineGridPlugin } from '@orbcharts/core'
 import { DEFAULT_BARS_TRIANGLE_PARAMS } from '../defaults'
 import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
@@ -10,11 +15,22 @@ 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$,
+    computedLayoutData$: observer.computedLayoutData$,
     visibleComputedData$: observer.visibleComputedData$,
-    existSeriesLabels$: observer.existSeriesLabels$,
+    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,
@@ -23,8 +39,8 @@ export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_P
     gridGraphicTransform$: observer.gridGraphicTransform$,
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
-    gridContainer$: observer.gridContainer$,
-    isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
+    gridContainerPosition$: observer.gridContainerPosition$,
+    isSeriesSeprate$,
     event$: subject.event$,
   })
 

package/src/grid/plugins/Dots.ts

@@ -14,8 +14,10 @@ export const Dots = defineGridPlugin(pluginName, DEFAULT_DOTS_PARAMS)(({ selecti
   const unsubscribeBaseBars = createBaseDots(pluginName, {
     selection,
     computedData$: observer.computedData$,
+    computedLayoutData$: observer.computedLayoutData$,
     visibleComputedData$: observer.visibleComputedData$,
-    existSeriesLabels$: observer.existSeriesLabels$,
+    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,
@@ -25,7 +27,7 @@ export const Dots = defineGridPlugin(pluginName, DEFAULT_DOTS_PARAMS)(({ selecti
     gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
-    gridContainer$: observer.gridContainer$,
+    gridContainerPosition$: observer.gridContainerPosition$,
     event$: subject.event$,
   })
 

package/src/grid/plugins/GridLegend.ts

@@ -47,7 +47,8 @@ export const GridLegend = defineGridPlugin(pluginName, DEFAULT_GRID_LEGEND_PARAM
     seriesLabels$,
     fullParams$,
     layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
   })
 
   return () => {

package/src/grid/plugins/GroupAux.ts

@@ -126,14 +126,15 @@ function createLabelData ({ groupLabel, axisX, fullParams }: {
     : []
 }
 
-function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesReverseTransformValue }: {
+function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesReverseTransformValue, textSizePx }: {
   selection: d3.Selection<any, unknown, any, unknown>
   labelData: LabelDatum[]
   fullParams: GroupAuxParams
   fullChartParams: ChartParams
   gridAxesReverseTransformValue: string
+  textSizePx: number
 }) {
-  const rectHeight = fullChartParams.styles.textSize + 4
+  const rectHeight = textSizePx + 4
 
   const gUpdate = selection
     .selectAll<SVGGElement, LabelDatum>(`g.${labelClassName}`)
@@ -157,7 +158,7 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
   gUpdate.exit().remove()
 
   axisLabelSelection.each((datum, i, n) => {
-    const rectWidth = measureTextWidth(datum.text, fullChartParams.styles.textSize) + 12
+    const rectWidth = measureTextWidth(datum.text, textSizePx) + 12
     const rectX = - rectWidth / 2
 
     const rectUpdate = d3.select(n[i])
@@ -335,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)
@@ -390,7 +391,6 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     groupScale: groupScale$,
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
     
@@ -503,6 +503,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     gridAxesReverseTransform: observer.gridAxesReverseTransform$,
     GroupDataMap: observer.GroupDataMap$,
     gridGroupPositionFn: gridGroupPositionFn$,
+    textSizePx: observer.textSizePx$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d)
@@ -539,7 +540,8 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
       labelData,
       fullParams: data.fullParams,
       fullChartParams: data.fullChartParams,
-      gridAxesReverseTransformValue: data.gridAxesReverseTransform.value
+      gridAxesReverseTransformValue: data.gridAxesReverseTransform.value,
+      textSizePx: data.textSizePx
     })
 
     // label的事件

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 () => {