@orbcharts/plugins-basic 3.0.0-alpha.34 → 3.0.0-alpha.35

package/src/base/BaseBars.ts

@@ -11,12 +11,14 @@ import type { BasePluginFn } from './types'
 import type {
   ComputedDatumGrid,
   ComputedDataGrid,
+  ContainerPosition,
   EventGrid,
   ChartParams, 
   Layout,
   TransformData } from '@orbcharts/core'
 import { getD3TransitionEase } from '../utils/d3Utils'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
+import { gridSelectionsObservable } from '../grid/gridObservables'
 
 export interface BaseBarsParams {
   // barType: BarType
@@ -30,32 +32,38 @@ interface BaseBarsContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
+  existedSeriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullParams$: Observable<BaseBarsParams>
   fullChartParams$: Observable<ChartParams>
   gridAxesTransform$: Observable<TransformData>
   gridGraphicTransform$: Observable<TransformData>
+  gridGraphicReverseScale$: Observable<[number, number][]>
   gridAxesSize$: Observable<{
     width: number;
     height: number;
   }>
   gridHighlight$: Observable<string[]>
+  gridContainer$: Observable<ContainerPosition[]>
+  isSeriesPositionSeprate$: Observable<boolean>
   event$: Subject<EventGrid>
 }
 
 interface RenderBarParams {
-  selection: d3.Selection<SVGGElement, unknown, any, any>
-  data: ComputedDatumGrid[][]
-  zeroY: number
+  graphicGSelection: d3.Selection<SVGGElement, string, any, any>
+  rectClassName: string
+  computedData: ComputedDatumGrid[][]
+  zeroYArr: number[]
   groupLabels: string[]
   barScale: d3.ScalePoint<string>
   params: BaseBarsParams
   chartParams: ChartParams
   barWidth: number
-  transformedBarRadius: [number, number]
+  transformedBarRadius: [number, number][]
   delayGroup: number
   transitionItem: number
+  isSeriesPositionSeprate: boolean
 }
 
 type ClipPathDatum = {
@@ -66,9 +74,8 @@ type ClipPathDatum = {
   height: number;
 }
 
-const pluginName = 'Bars'
-const gClassName = getClassName(pluginName, 'g')
-const rectClassName = getClassName(pluginName, 'rect')
+// const pluginName = 'Bars'
+// const rectClassName = getClassName(pluginName, 'rect')
 // group的delay在動畫中的佔比（剩餘部份的時間為圖形本身的動畫時間，因為delay時間和最後一個group的動畫時間加總為1）
 const groupDelayProportionOfDuration = 0.3
 
@@ -107,50 +114,36 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
   }
   return totalDuration * (1 - groupDelayProportionOfDuration) // delay後剩餘的時間
 }
+// let _data: ComputedDatumGrid[][] = []
+
+function renderRectBars ({ graphicGSelection, rectClassName, computedData, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem, isSeriesPositionSeprate }: RenderBarParams) {
 
-function renderRectBars ({ selection, data, zeroY, groupLabels, barScale, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem }: RenderBarParams) {
-  
   const barHalfWidth = barWidth! / 2
 
-  const barGroup = selection
-    .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${gClassName}`)
-    .data(data, (d, i) => groupLabels[i])
-    .join(
-      enter => {
-        return enter
-          .append('g')
-          .classed(gClassName, true)
-          .attr('cursor', 'pointer')
-      },
-      update => update,
-      exit => exit.remove()
-    )
-    .attr('transform', (d, i) => `translate(${d[0] ? d[0].axisX : 0}, ${0})`)
-    .each((d, i, g) => {
-      const bars = d3.select(g[i])
-        .selectAll<SVGRectElement, ComputedDatumGrid>('rect')
-        .data(d, d => d.id)
+  graphicGSelection
+    .each((seriesData, seriesIndex, g) => {
+      d3.select(g[seriesIndex])
+        .selectAll<SVGGElement, ComputedDatumGrid>(`rect.${rectClassName}`)
+        .data(computedData[seriesIndex] ?? [], d => d.id)
         .join(
           enter => {
+            // console.log('enter')
             return enter
               .append('rect')
               .classed(rectClassName, true)
+              .attr('cursor', 'pointer')
               .attr('height', d => 0)
           },
           update => update,
           exit => exit.remove()
         )
+        .attr('transform', (d, i) => `translate(${(d ? d.axisX : 0) - barHalfWidth}, ${0})`)
         .attr('fill', d => d.color)
-        .attr('y', d => d.axisY < zeroY ? d.axisY : zeroY)
-        .attr('x', d => barScale(d.seriesLabel)!)
+        .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
+        .attr('x', d => isSeriesPositionSeprate ? 0 : barScale(d.seriesLabel)!)
         .attr('width', barWidth!)
-        .attr('transform', `translate(${-barHalfWidth}, 0)`)
-        // .attr('rx', params.barRadius == true ? barHalfWidth
-        //   : params.barRadius == false ? 0
-        //   : typeof params.barRadius == 'number' ? params.barRadius
-        //   : 0)
-        .attr('rx', transformedBarRadius[0])
-        .attr('ry', transformedBarRadius[1])
+        .attr('rx', transformedBarRadius[seriesIndex][0] ?? 1)
+        .attr('ry', transformedBarRadius[seriesIndex][1] ?? 1)
         .transition()
         .duration(transitionItem)
         .ease(getD3TransitionEase(chartParams.transitionEase))
@@ -158,7 +151,50 @@ function renderRectBars ({ selection, data, zeroY, groupLabels, barScale, params
         .attr('height', d => Math.abs(d.axisYFromZero))
     })
 
-  const graphicBarSelection: d3.Selection<SVGRectElement, ComputedDatumGrid, SVGGElement, unknown> = barGroup.selectAll(`rect.${rectClassName}`)
+
+  // graphicGSelection
+  //   .each((d, seriesIndex, g) => {
+  //     d3.select(g[seriesIndex])
+  //       .selectAll<SVGGElement, ComputedDatumGrid>(`g.${barClassName}`)
+  //       .data(computedData[seriesIndex], d => d.seriesIndex)
+  //       .join('g')
+  //       .classed(barClassName, true)
+  //       .attr('transform', (d, i) => `translate(${d ? d.axisX : 0}, ${0})`)
+  //       .each((datum, i, g) => {
+  //         d3.select(g[i])
+  //           .selectAll<SVGRectElement, ComputedDatumGrid>(`rect.${rectClassName}`)
+  //           .data([computedData[seriesIndex][i]], d => d.id)
+  //           .join(
+  //             enter => {
+  //               return enter
+  //                 .append('rect')
+  //                 .classed(rectClassName, true)
+  //                 .attr('height', d => 0)
+  //             },
+  //             update => update,
+  //             exit => exit.remove()
+  //           )
+  //           .attr('cursor', 'pointer')
+  //           .attr('fill', d => d.color)
+  //           .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
+  //           .attr('x', d => isSeriesPositionSeprate ? 0 : barScale(d.seriesLabel)!)
+  //           .attr('width', barWidth!)
+  //           .attr('transform', `translate(${-barHalfWidth}, 0)`)
+  //           // .attr('rx', params.barRadius == true ? barHalfWidth
+  //           //   : params.barRadius == false ? 0
+  //           //   : typeof params.barRadius == 'number' ? params.barRadius
+  //           //   : 0)
+  //           .attr('rx', transformedBarRadius[0])
+  //           .attr('ry', transformedBarRadius[1])
+  //           .transition()
+  //           .duration(transitionItem)
+  //           .ease(getD3TransitionEase(chartParams.transitionEase))
+  //           .delay((d, i) => d.groupIndex * delayGroup)
+  //           .attr('height', d => Math.abs(d.axisYFromZero))
+  //       })
+  //   })
+
+  const graphicBarSelection: d3.Selection<SVGRectElement, ComputedDatumGrid, SVGGElement, unknown> = graphicGSelection.selectAll(`rect.${rectClassName}`)
 
   return graphicBarSelection
 }
@@ -231,101 +267,194 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
   selection,
   computedData$,
   visibleComputedData$,
+  existedSeriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
   fullParams$,
   fullChartParams$,
   gridAxesTransform$,
   gridGraphicTransform$,
+  gridGraphicReverseScale$,
   gridAxesSize$,
   gridHighlight$,
+  gridContainer$,
+  isSeriesPositionSeprate$,
   event$
 }) => {
 
   const destroy$ = new Subject()
 
   const clipPathID = getUniID(pluginName, 'clipPath-box')
+  const rectClassName = getClassName(pluginName, 'rect')
+  
+  // const seriesSelection$ = computedData$.pipe(
+  //   takeUntil(destroy$),
+  //   distinctUntilChanged((a, b) => {
+  //     // 只有當series的數量改變時，才重新計算
+  //     return a.length === b.length
+  //   }),
+  //   map((computedData, i) => {
+  //     return selection
+  //       .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
+  //       .data(computedData, d => d[0] ? d[0].seriesIndex : i)
+  //       .join(
+  //         enter => {
+  //           return enter
+  //             .append('g')
+  //             .classed(seriesClassName, true)
+  //             .each((d, i, g) => {
+  //               const axesSelection = d3.select(g[i])
+  //                 .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
+  //                 .data([i])
+  //                 .join(
+  //                   enter => {
+  //                     return enter
+  //                       .append('g')
+  //                       .classed(axesClassName, true)
+  //                       .attr('clip-path', `url(#${clipPathID})`)
+  //                       .each((d, i, g) => {
+  //                         const defsSelection = d3.select(g[i])
+  //                           .selectAll<SVGDefsElement, any>('defs')
+  //                           .data([i])
+  //                           .join('defs')
+            
+  //                         const graphicGSelection = d3.select(g[i])
+  //                           .selectAll<SVGGElement, any>('g')
+  //                           .data([i])
+  //                           .join('g')
+  //                           .classed(graphicClassName, true)
+  //                       })
+  //                   },
+  //                   update => update,
+  //                   exit => exit.remove()
+  //                 )
+  //             })
+  //         },
+  //         update => update,
+  //         exit => exit.remove()
+  //       )
+  //   })
+  // )
 
-  const axesSelection: d3.Selection<SVGGElement, any, any, any> = selection
-    .append('g')
-    .attr('clip-path', `url(#${clipPathID})`)
-  const defsSelection: d3.Selection<SVGDefsElement, ComputedDatumGrid, any, any> = axesSelection.append('defs')
-  const graphicGSelection: d3.Selection<SVGGElement, any, any, any> = axesSelection.append('g')
-  const barSelection$: Subject<d3.Selection<SVGRectElement, ComputedDatumGrid, SVGGElement, unknown>> = new Subject()
-
-  gridAxesTransform$
-    .pipe(
-      takeUntil(destroy$),
-      map(d => d.value),
-      distinctUntilChanged()
-    ).subscribe(d => {
-      axesSelection
-        .style('transform', d)
-    })
+  // combineLatest({
+  //   seriesSelection: seriesSelection$,
+  //   gridContainer: gridContainer$                                                                                                                                                                                       
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   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]})`
+  //     })
+  // })
 
-  gridGraphicTransform$
-    .pipe(
-      takeUntil(destroy$),
-      map(d => d.value),
-      distinctUntilChanged()
-    ).subscribe(d => {
-      graphicGSelection
-        .transition()
-        .duration(50)
-        .style('transform', d)
-    })
 
-  // const visibleComputedData$ = computedData$.pipe(
+  // const axesSelection$ = combineLatest({
+  //   seriesSelection: seriesSelection$,
+  //   gridAxesTransform: gridAxesTransform$
+  // }).pipe(
   //   takeUntil(destroy$),
+  //   switchMap(async d => d),
   //   map(data => {
-  //     const visibleComputedData = data
-  //       .map(d => {
-  //         return d.filter(_d => {
-  //           return _d.visible == true
-  //         })
-  //       })
-  //       .filter(d => d.length)
-  //     return visibleComputedData
+  //     return data.seriesSelection
+  //       .select<SVGGElement>(`g.${axesClassName}`)
+  //       .style('transform', data.gridAxesTransform.value)
+  //   })
+  // )
+  // const defsSelection$ = axesSelection$.pipe(
+  //   takeUntil(destroy$),
+  //   map(axesSelection => {
+  //     return axesSelection.select<SVGDefsElement>('defs')
+  //   })
+  // )
+  // const graphicGSelection$ = combineLatest({
+  //   axesSelection: axesSelection$,
+  //   gridGraphicTransform: gridGraphicTransform$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async d => d),
+  //   map(data => {
+  //     const graphicGSelection = data.axesSelection
+  //       .select<SVGGElement>(`g.${graphicClassName}`)
+  //     graphicGSelection
+  //       .transition()
+  //       .duration(50)
+  //       .style('transform', data.gridGraphicTransform.value)
+  //     return graphicGSelection
   //   })
   // )
 
-  const zeroY$ = visibleComputedData$.pipe(
-    map(d => d[0] && d[0][0]
-      ? d[0][0].axisY - d[0][0].axisYFromZero
-      : 0),
+  const { 
+    seriesSelection$,
+    axesSelection$,
+    defsSelection$,
+    graphicGSelection$
+  } = gridSelectionsObservable({
+    selection,
+    pluginName,
+    clipPathID,
+    existedSeriesLabels$,
+    gridContainer$,
+    gridAxesTransform$,
+    gridGraphicTransform$
+  })
+
+  const zeroYArr$ = visibleComputedData$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return data.map(d => {
+        return d[0] ? d[0].axisY - d[0].axisYFromZero : 0
+      })
+    }),
     distinctUntilChanged()
   )
 
-  const barWidth$ = new Observable<number>(subscriber => {
-    combineLatest({
-      computedData: computedData$,
-      visibleComputedData: visibleComputedData$,
-      params: fullParams$,
-      gridAxesSize: gridAxesSize$
-    }).pipe(
-      switchMap(async d => d)
-    ).subscribe(data => {
-      const barWidth = data.params.barWidth
-        ? data.params.barWidth
-        : calcBarWidth({
-            axisWidth: data.gridAxesSize.width,
-            groupAmount: data.computedData[0] ? data.computedData[0].length : 0,
-            barAmountOfGroup: data.visibleComputedData.length,
-            barPadding: data.params.barPadding,
-            barGroupPadding: data.params.barGroupPadding
-          })
-      subscriber.next(barWidth)
-    })
+  const barWidth$ = combineLatest({
+    computedData: computedData$,
+    visibleComputedData: visibleComputedData$,
+    params: fullParams$,
+    gridAxesSize: gridAxesSize$,
+    isSeriesPositionSeprate: isSeriesPositionSeprate$
   }).pipe(
     takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      if (data.params.barWidth) {
+        return data.params.barWidth
+      } else if (data.isSeriesPositionSeprate) {
+        return calcBarWidth({
+          axisWidth: data.gridAxesSize.width,
+          groupAmount: data.computedData[0] ? data.computedData[0].length : 0,
+          barAmountOfGroup: 1,
+          barPadding: data.params.barPadding,
+          barGroupPadding: data.params.barGroupPadding
+        })
+      } else {
+        return calcBarWidth({
+          axisWidth: data.gridAxesSize.width,
+          groupAmount: data.computedData[0] ? data.computedData[0].length : 0,
+          barAmountOfGroup: data.visibleComputedData.length,
+          barPadding: data.params.barPadding,
+          barGroupPadding: data.params.barGroupPadding
+        })
+      }
+    }),
     distinctUntilChanged()
   )
 
   // 圓角的值 [rx, ry]
-  const transformedBarRadius$: Observable<[number, number]> = combineLatest({
-    gridGraphicTransform: gridGraphicTransform$,
+  const transformedBarRadius$: Observable<[number, number][]> = combineLatest({
+    computedData: computedData$,
+    // gridGraphicTransform: gridGraphicTransform$,
     barWidth: barWidth$,
-    params: fullParams$
+    params: fullParams$,
+    // gridContainer: gridContainer$,
+    // gridAxesTransform: gridAxesTransform$
+    gridGraphicReverseScale: gridGraphicReverseScale$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async data => data),
@@ -335,24 +464,44 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
         : data.params.barRadius === false ? 0
         : typeof data.params.barRadius == 'number' ? data.params.barRadius
         : 0
-      const transformedRx = radius == 0
-        ? 0
-        : radius / data.gridGraphicTransform.scale[0] // 反向外層scale的變型
-      const transformedRy = radius == 0
-        ? 0
-        : radius / data.gridGraphicTransform.scale[1]
-      return [transformedRx, transformedRy]
+      
+      return data.computedData.map((series, seriesIndex) => {
+        const gridGraphicReverseScale = data.gridGraphicReverseScale[seriesIndex] ?? data.gridGraphicReverseScale[0]
+
+        let transformedRx = radius * gridGraphicReverseScale[0]
+        let transformedRy = radius * gridGraphicReverseScale[1]
+        // if (radius == 0) {
+        //   transformedRx = 0
+        //   transformedRy = 0
+        // } else if (data.gridAxesTransform.rotate == 0) {
+        //   transformedRx = radius
+        //     // 抵消外層scale的變型
+        //     / data.gridGraphicTransform.scale[0] / data.gridContainer[0].scale[0]
+        //   transformedRy = radius
+        //     // 抵消外層scale的變型
+        //     / data.gridGraphicTransform.scale[1] / data.gridContainer[0].scale[1]
+        // } else if (data.gridAxesTransform.rotate != 0) {
+        //   transformedRx = radius
+        //     // 抵消外層scale的變型，由於有90度的旋轉，所以外層 (container) x和y的scale要互換
+        //     / data.gridGraphicTransform.scale[0] / data.gridContainer[0].scale[1]
+        //   transformedRy = radius
+        //     // 抵消外層scale的變型，由於有90度的旋轉，所以外層 (container) x和y的scale要互換
+        //     / data.gridGraphicTransform.scale[1] / data.gridContainer[0].scale[0]
+        // }
+        
+        // 如果計算出來的x圓角值大於寬度一半則進行修正
+        if (transformedRx > barHalfWidth) {
+          const rScale = barHalfWidth / transformedRx
+          transformedRx = transformedRx * rScale
+          transformedRy = transformedRy * rScale
+        }
+
+        return [transformedRx, transformedRy] 
+      })
     })
   )
 
-  // const SeriesDataMap$ = visibleComputedData$.pipe(
-  //   map(d => makeGridSeriesDataMap(d))
-  // )
-
-  // const GroupDataMap$ = visibleComputedData$.pipe(
-  //   map(d => makeGridGroupDataMap(d))
-  // )
-
+  
   const seriesLabels$ = visibleComputedData$.pipe(
     takeUntil(destroy$),
     map(data => {
@@ -379,20 +528,18 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
     })
   )
 
-  const barScale$: Observable<d3.ScalePoint<string>> = new Observable(subscriber => {
-    combineLatest({
-      seriesLabels: seriesLabels$,
-      barWidth: barWidth$,
-      params: fullParams$,
-    }).pipe(
-      takeUntil(destroy$),
-      switchMap(async d => d)
-    ).subscribe(data => {
-      const barScale = makeBarScale(data.barWidth, data.seriesLabels, data.params)
-      subscriber.next(barScale)
+  const barScale$ = combineLatest({
+    seriesLabels: seriesLabels$,
+    barWidth: barWidth$,
+    params: fullParams$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      return makeBarScale(data.barWidth, data.seriesLabels, data.params)
     })
-  })
-
+  )
+  
   const transitionDuration$ = fullChartParams$.pipe(
     takeUntil(destroy$),
     map(d => d.transitionDuration),
@@ -429,51 +576,24 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
     distinctUntilChanged()
   )
 
-  const barData$ = visibleComputedData$.pipe(
+  combineLatest({
+    defsSelection: defsSelection$,
+    gridAxesSize: gridAxesSize$,
+  }).pipe(
     takeUntil(destroy$),
-    map(data => {
-      // 取得原始陣列的維度
-      const rows = data.length;
-      const cols = data.reduce((prev, current) => {
-        return Math.max(prev, current.length)
-      }, 0)
-
-      // 初始化轉換後的陣列
-      const transposedArray = new Array(cols).fill(null).map(() => new Array(rows).fill(null))
-
-      // 遍歷原始陣列，進行轉換
-      for (let i = 0; i < rows; i++) {
-          for (let j = 0; j < cols; j++) {
-              transposedArray[j][i] = data[i][j]
-          }
-      }
-// console.log('transposedArray', transposedArray)
-      return transposedArray
-    })
-  )
-
-  gridAxesSize$.pipe(
-    takeUntil(destroy$)
+    switchMap(async d => d)
   ).subscribe(data => {
     const clipPathData = [{
       id: clipPathID,
-      width: data.width,
-      height: data.height
+      width: data.gridAxesSize.width,
+      height: data.gridAxesSize.height
     }]
     renderClipPath({
-      defsSelection,
+      defsSelection: data.defsSelection,
       clipPathData
     })
   })
 
-  // const renderBarsFn$ = fullParams$.pipe(
-  //   takeUntil(destroy$),
-  //   map(d => d.barType === 'rect'
-  //     ? renderRectBars
-  //     : d.barType === 'triangle'
-  //       ? renderTriangleBars
-  //       : renderRectBars),
-  // )
 
   const highlightTarget$ = fullChartParams$.pipe(
     takeUntil(destroy$),
@@ -481,11 +601,13 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
     distinctUntilChanged()
   )
 
+  const barSelection$ = new Subject<d3.Selection<SVGRectElement, ComputedDatumGrid, SVGGElement, unknown>>()
+
   combineLatest({
-    // renderBarsFn: renderBarsFn$,
+    graphicGSelection: graphicGSelection$,
     computedData: computedData$,
-    barData$: barData$,
-    zeroY: zeroY$,
+    // barData$: barData$,
+    zeroYArr: zeroYArr$,
     groupLabels: groupLabels$,
     barScale: barScale$,
     params: fullParams$,
@@ -496,17 +618,18 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
     delayGroup: delayGroup$,
     transitionItem: transitionItem$,
     SeriesDataMap: SeriesDataMap$,
-    GroupDataMap: GroupDataMap$
+    GroupDataMap: GroupDataMap$,
+    isSeriesPositionSeprate: isSeriesPositionSeprate$
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
     
     const barSelection = renderRectBars({
-      selection: graphicGSelection,
-      data: data.barData$,
-      zeroY: data.zeroY,
+      graphicGSelection: data.graphicGSelection,
+      rectClassName,
+      computedData: data.computedData,
+      zeroYArr: data.zeroYArr,
       groupLabels: data.groupLabels,
       barScale: data.barScale,
       params: data.params,
@@ -514,7 +637,8 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
       barWidth: data.barWidth,
       transformedBarRadius: data.transformedBarRadius,
       delayGroup: data.delayGroup,
-      transitionItem: data.transitionItem
+      transitionItem: data.transitionItem,
+      isSeriesPositionSeprate: data.isSeriesPositionSeprate
     })
 
     barSelection!
@@ -598,24 +722,6 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
     barSelection$.next(barSelection!)
   })
 
-  // combineLatest({
-  //   barSelection: barSelection$,
-  //   chartParams: fullChartParams$,
-  //   barData$: barData$,
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d)
-  // ).subscribe(data => {
-  //   const ids = getGridHighlightIds(data.barData$, data.chartParams.highlightDefault)
-  //   highlight(data.barSelection, ids)
-  // })
-
-  // const datumList$ = computedData$.pipe(
-  //   takeUntil(destroy$),
-  //   map(d => d.flat())
-  // )
-  // const highlight$ = highlightObservable({ datumList$, fullChartParams$, event$: subject.event$ })
-  const highlightSubscription = gridHighlight$.subscribe()
   
   combineLatest({
     barSelection: barSelection$,
@@ -632,8 +738,8 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
     })
   })
 
+
   return () => {
     destroy$.next(undefined)
-    highlightSubscription.unsubscribe()
   }
 }