@orbcharts/plugins-basic 3.0.0-alpha.51 → 3.0.0-alpha.52

package/src/grid/plugins/GroupAux.ts

@@ -10,12 +10,14 @@ import {
   first,
   takeUntil,
   distinctUntilChanged,
+  shareReplay,
   Subject,
   Observable } from 'rxjs'
 import {
   defineGridPlugin } from '@orbcharts/core'
 import type {
   TransformData,
+  DataFormatterGrid,
   ChartParams } from '@orbcharts/core'
 import { DEFAULT_GROUP_AREA_PARAMS } from '../defaults'
 import { parseTickFormatValue } from '../../utils/d3Utils'
@@ -25,6 +27,7 @@ import { d3EventObservable } from '../../utils/observables'
 import { gridGroupPositionFnObservable } from '../gridObservables'
 import { createAxisPointScale } from '@orbcharts/core'
 import type { GroupAuxParams } from '../types'
+import { gridSelectionsObservable } from '../gridObservables'
 
 interface LineDatum {
   id: string
@@ -126,12 +129,14 @@ function createLabelData ({ groupLabel, axisX, fullParams }: {
     : []
 }
 
-function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesReverseTransformValue, textSizePx }: {
+function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, fullChartParams, labelTransform, textSizePx }: {
   selection: d3.Selection<any, unknown, any, unknown>
   labelData: LabelDatum[]
   fullParams: GroupAuxParams
+  fullDataFormatter: DataFormatterGrid
   fullChartParams: ChartParams
-  gridAxesReverseTransformValue: string
+  // gridAxesReverseTransformValue: string
+  labelTransform: string
   textSizePx: number
 }) {
   const rectHeight = textSizePx + 4
@@ -159,7 +164,22 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
 
   axisLabelSelection.each((datum, i, n) => {
     const rectWidth = measureTextWidth(datum.text, textSizePx) + 12
-    const rectX = - rectWidth / 2
+    // -- label偏移位置 --
+    let rectX = - rectWidth / 2
+    let rectY = -2
+    if (fullDataFormatter.grid.groupAxis.position === 'bottom') {
+      rectX = - rectWidth / 2
+      rectY = 2
+    } else if (fullDataFormatter.grid.groupAxis.position === 'left') {
+      rectX = - rectWidth + 2
+      rectY = - rectHeight / 2
+    } else if (fullDataFormatter.grid.groupAxis.position === 'right') {
+      rectX = - 2
+      rectY = - rectHeight / 2
+    } else if (fullDataFormatter.grid.groupAxis.position === 'top') {
+      rectX = - rectWidth / 2
+      rectY = - rectHeight + 2
+    }
 
     const rectUpdate = d3.select(n[i])
       .selectAll<SVGRectElement, LabelDatum>('rect')
@@ -170,14 +190,14 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
       .attr('height', `${rectHeight}px`)
       .attr('fill', d => getColor(fullParams.labelColorType, fullChartParams))
       .attr('x', rectX)
-      .attr('y', -2)
+      .attr('y', rectY)
       .attr('rx', 5)
       .attr('ry', 5)
       .style('cursor', 'pointer')
       // .style('pointer-events', 'none')
     const rect = rectUpdate.merge(rectEnter)
       .attr('width', d => `${rectWidth}px`)
-      .style('transform', gridAxesReverseTransformValue)
+      .style('transform', labelTransform)
     rectUpdate.exit().remove()
 
     const textUpdate = d3.select(n[i])
@@ -191,10 +211,11 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
       // .style('pointer-events', 'none')
     const text = textUpdate.merge(textEnter)
       .text(d => d.text)
-      .style('transform', gridAxesReverseTransformValue)
+      .style('transform', labelTransform)
       .attr('fill', d => getColor(fullParams.labelTextColorType, fullChartParams))
       .attr('font-size', fullChartParams.styles.textSize)
       .attr('x', rectX + 6)
+      .attr('y', rectY)
     textUpdate.exit().remove()
   })
 
@@ -212,13 +233,30 @@ function removeLabel (selection: d3.Selection<any, unknown, any, unknown>) {
 export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(({ selection, rootSelection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
+  let isLabelMouseover = false
+
   const rootRectSelection: d3.Selection<SVGRectElement, any, any, any> = rootSelection
     .insert('rect', 'g')
     .classed(getClassName(pluginName, 'rect'), true)
     .attr('opacity', 0)
 
-  const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection
-    .append('g')
+  // const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection
+  //   .append('g')
+
+  const { 
+    seriesSelection$,
+    axesSelection$,
+    defsSelection$,
+    graphicGSelection$
+  } = gridSelectionsObservable({
+    selection,
+    pluginName,
+    clipPathID: 'test',
+    seriesLabels$: observer.seriesLabels$,
+    gridContainerPosition$: observer.gridContainerPosition$,
+    gridAxesTransform$: observer.gridAxesTransform$,
+    gridGraphicTransform$: observer.gridGraphicTransform$
+  })
 
   observer.layout$.pipe(
     takeUntil(destroy$),
@@ -228,15 +266,15 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
       .attr('height', d.rootHeight)
   })
 
-  observer.gridAxesTransform$
-    .pipe(
-      takeUntil(destroy$),
-      map(d => d.value),
-      distinctUntilChanged()
-    ).subscribe(d => {
-      axisSelection
-        .style('transform', d)
-    })
+  // observer.gridAxesTransform$
+  //   .pipe(
+  //     takeUntil(destroy$),
+  //     map(d => d.value),
+  //     distinctUntilChanged()
+  //   ).subscribe(d => {
+  //     axisSelection
+  //       .style('transform', d)
+  //   })
 
   // const visibleComputedData$ = observer.computedData$.pipe(
   //   takeUntil(destroy$),
@@ -379,176 +417,253 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     distinctUntilChanged()
   )
 
-  combineLatest({
-    computedData: observer.computedData$,
-    gridAxesSize: observer.gridAxesSize$,
-    fullParams: observer.fullParams$,
-    fullChartParams: observer.fullChartParams$,
-    highlightTarget: highlightTarget$,
-    SeriesDataMap: observer.SeriesDataMap$,
-    GroupDataMap: observer.GroupDataMap$,
-    gridGroupPositionFn: gridGroupPositionFn$,
-    groupScale: groupScale$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-  ).subscribe(data => {
+  // combineLatest({
+  //   computedData: observer.computedData$,
+  //   gridAxesSize: observer.gridAxesSize$,
+  //   fullParams: observer.fullParams$,
+  //   fullChartParams: observer.fullChartParams$,
+  //   highlightTarget: highlightTarget$,
+  //   SeriesDataMap: observer.SeriesDataMap$,
+  //   GroupDataMap: observer.GroupDataMap$,
+  //   gridGroupPositionFn: gridGroupPositionFn$,
+  //   groupScale: groupScale$,
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async (d) => d),
+  // ).subscribe(data => {
     
-    // store.selection
-    rootSelection
-      .on('mouseover', (event, datum) => {
-        // event.stopPropagation()
-
-        const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
-
-        subject.event$.next({
-          type: 'grid',
-          pluginName: name,
-          eventName: 'mouseover',
-          highlightTarget: data.highlightTarget,
-          datum: null,
-          gridIndex: 0, // @Q@ 暫不處理
-          series: [],
-          seriesIndex: -1,
-          seriesLabel: '',
-          groups: data.GroupDataMap.get(groupLabel) ?? [],
-          groupIndex,
-          groupLabel,
-          event,
-          data: data.computedData
-        })
-      })
-      .on('mousemove', (event, datum) => {
-        // event.stopPropagation()
+  //   // store.selection
+  //   rootSelection
+  //     .on('mouseover', (event, datum) => {
+  //       // event.stopPropagation()
+
+  //       const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+
+  //       subject.event$.next({
+  //         type: 'grid',
+  //         pluginName: name,
+  //         eventName: 'mouseover',
+  //         highlightTarget: data.highlightTarget,
+  //         datum: null,
+  //         gridIndex: 0, // @Q@ 暫不處理
+  //         series: [],
+  //         seriesIndex: -1,
+  //         seriesLabel: '',
+  //         groups: data.GroupDataMap.get(groupLabel) ?? [],
+  //         // groups: [],
+  //         groupIndex,
+  //         groupLabel,
+  //         event,
+  //         data: data.computedData
+  //       })
+  //     })
+  //     .on('mousemove', (event, datum) => {
+  //       // event.stopPropagation()
+
+  //       const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+
+  //       subject.event$.next({
+  //         type: 'grid',
+  //         pluginName: name,
+  //         eventName: 'mousemove',
+  //         highlightTarget: data.highlightTarget,
+  //         datum: null,
+  //         gridIndex: 0, // @Q@ 暫不處理
+  //         series: [],
+  //         seriesIndex: -1,
+  //         seriesLabel: '',
+  //         groups: data.GroupDataMap.get(groupLabel) ?? [],
+  //         // groups: [],
+  //         groupIndex,
+  //         groupLabel,
+  //         event,
+  //         data: data.computedData
+  //       })
+  //     })
+  //     .on('mouseout', (event, datum) => {
+  //       // event.stopPropagation()
+
+  //       const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+
+  //       subject.event$.next({
+  //         type: 'grid',
+  //         pluginName: name,
+  //         eventName: 'mouseout',
+  //         highlightTarget: data.highlightTarget,
+  //         datum: null,
+  //         gridIndex: 0, // @Q@ 暫不處理
+  //         series: [],
+  //         seriesIndex: -1,
+  //         seriesLabel: '',
+  //         groups: data.GroupDataMap.get(groupLabel) ?? [],
+  //         // groups: [],
+  //         groupIndex,
+  //         groupLabel,
+  //         event,
+  //         data: data.computedData
+  //       })
+  //     })
+  //     .on('click', (event, datum) => {
+  //       event.stopPropagation()
+
+  //       const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+
+  //       subject.event$.next({
+  //         type: 'grid',
+  //         pluginName: name,
+  //         eventName: 'click',
+  //         highlightTarget: data.highlightTarget,
+  //         datum: null,
+  //         gridIndex: 0, // @Q@ 暫不處理
+  //         series: [],
+  //         seriesIndex: -1,
+  //         seriesLabel: '',
+  //         // groups: data.GroupDataMap.get(groupLabel) ?? [],
+  //         groups: [],
+  //         groupIndex,
+  //         groupLabel,
+  //         event,
+  //         data: data.computedData
+  //       })
+  //     })
 
-        const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+  //   // barSelection$.next(barSelection!)
+  // })
 
-        subject.event$.next({
-          type: 'grid',
-          pluginName: name,
-          eventName: 'mousemove',
-          highlightTarget: data.highlightTarget,
-          datum: null,
-          gridIndex: 0, // @Q@ 暫不處理
-          series: [],
-          seriesIndex: -1,
-          seriesLabel: '',
-          groups: data.GroupDataMap.get(groupLabel) ?? [],
-          groupIndex,
-          groupLabel,
-          event,
-          data: data.computedData
-        })
-      })
-      .on('mouseout', (event, datum) => {
-        // event.stopPropagation()
+  const rootMousemove$: Observable<any> = d3EventObservable(rootSelection, 'mousemove').pipe(
+    takeUntil(destroy$),
+  )
 
-        const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
 
-        subject.event$.next({
-          type: 'grid',
-          pluginName: name,
-          eventName: 'mouseout',
-          highlightTarget: data.highlightTarget,
-          datum: null,
-          gridIndex: 0, // @Q@ 暫不處理
-          series: [],
-          seriesIndex: -1,
-          seriesLabel: '',
-          groups: data.GroupDataMap.get(groupLabel) ?? [],
-          groupIndex,
-          groupLabel,
-          event,
-          data: data.computedData
-        })
-      })
-      .on('click', (event, datum) => {
-        event.stopPropagation()
+  // const mousemoveGroupLabel$ = combineLatest({
+  //   rootMousemove: rootMousemove$,
+  //   gridGroupPositionFn: gridGroupPositionFn$,
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async d => d),
+  //   map(data => {
+  //     const { groupIndex, groupLabel } = data.gridGroupPositionFn(data.rootMousemove)
+  //     return { groupIndex, groupLabel }
+  //   }),
+  //   shareReplay(1)
+  // )
 
-        const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+  const labelTransform$ = combineLatest({
+    fullParams: observer.fullParams$,
+    fullDataFormatter: observer.fullDataFormatter$,
+    gridAxesReverseTransform: observer.gridAxesReverseTransform$,
+    gridContainerPosition: observer.gridContainerPosition$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      const axisReverseTranslateValue = `translate(${data.gridAxesReverseTransform.translate[0]}px, ${data.gridAxesReverseTransform.translate[1]}px)`
+      const axisReverseRotateValue = `rotate(${data.gridAxesReverseTransform.rotate}deg) rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
+      const containerScaleReverseScaleValue = `scale(${1 / data.gridContainerPosition[0].scale[0]}, ${1 / data.gridContainerPosition[0].scale[1]})`
+      const tickTextRotateDeg = (data.fullDataFormatter.grid.groupAxis.position === 'left' && data.fullDataFormatter.grid.valueAxis.position === 'top')
+        || (data.fullDataFormatter.grid.groupAxis.position === 'right' && data.fullDataFormatter.grid.valueAxis.position === 'bottom')
+          // ? data.fullParams.tickTextRotate + 180 // 修正文字倒轉
+          // : data.fullParams.tickTextRotate
+          ? 180 // 修正文字倒轉
+          : 0
+      
+      const textRotateValue = `rotate(${tickTextRotateDeg}deg)`
+      
+      // 必須按照順序（先抵消外層rotate，再抵消最外層scale，最後再做本身的rotate）
+      return `${axisReverseTranslateValue} ${axisReverseRotateValue} ${containerScaleReverseScaleValue} ${textRotateValue}`
+    }),
+    distinctUntilChanged()
+  )
 
-        subject.event$.next({
-          type: 'grid',
-          pluginName: name,
-          eventName: 'click',
-          highlightTarget: data.highlightTarget,
-          datum: null,
-          gridIndex: 0, // @Q@ 暫不處理
-          series: [],
-          seriesIndex: -1,
-          seriesLabel: '',
-          groups: data.GroupDataMap.get(groupLabel) ?? [],
-          groupIndex,
-          groupLabel,
-          event,
-          data: data.computedData
-        })
-      })
+  const columnAmount$ = observer.gridContainerPosition$.pipe(
+    takeUntil(destroy$),
+    map(gridContainerPosition => {
+      const maxColumnIndex = gridContainerPosition.reduce((acc, current) => {
+        return current.columnIndex > acc ? current.columnIndex : acc
+      }, 0)
+      return maxColumnIndex + 1
+    }),
+    distinctUntilChanged()
+  )
 
-    // barSelection$.next(barSelection!)
-  })
+  const rowAmount$ = observer.gridContainerPosition$.pipe(
+    takeUntil(destroy$),
+    map(gridContainerPosition => {
+      const maxRowIndex = gridContainerPosition.reduce((acc, current) => {
+        return current.rowIndex > acc ? current.rowIndex : acc
+      }, 0)
+      return maxRowIndex + 1
+    }),
+    distinctUntilChanged()
+  )
 
-  // -- highlight（無論highlightTarget設定為何，一律依從groupLabel來顯示） --
   combineLatest({
-    // highlight: highlight$,
-    event: subject.event$.pipe(
-      filter(d => d.eventName === 'mouseover' || d.eventName === 'mousemove')
-    ),
+    axesSelection: axesSelection$,
+    columnAmount: columnAmount$,
+    rowAmount: rowAmount$,
+    layout: observer.layout$,
+    rootMousemove: rootMousemove$,
+    gridGroupPositionFn: gridGroupPositionFn$,
     computedData: observer.computedData$,
     groupScale: groupScale$,
     gridAxesSize: observer.gridAxesSize$,
     fullParams: observer.fullParams$,
+    fullDataFormatter: observer.fullDataFormatter$,
     fullChartParams: observer.fullChartParams$,
     highlightTarget: highlightTarget$,
-    gridAxesReverseTransform: observer.gridAxesReverseTransform$,
+    // gridAxesReverseTransform: observer.gridAxesReverseTransform$,
+    labelTransform: labelTransform$,
     GroupDataMap: observer.GroupDataMap$,
-    gridGroupPositionFn: gridGroupPositionFn$,
     textSizePx: observer.textSizePx$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d)
-  ).subscribe(data => {
-    // const groups = data.event.eventName === 'mouseover' || data.event.eventName === 'mousemove'
-    //   ? data.event.groups
-    //   : []
-    
-    // const groupLabel = data.event.eventName === 'mouseover' || data.event.eventName === 'mousemove'
-    //   ? data.event.groupLabel
-    //   : ''
-    const axisX = data.groupScale(data.event.groupLabel) ?? 0
+  }).subscribe(data => {
+    // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
+    const eventData = {
+      offsetX: data.rootMousemove.offsetX * data.columnAmount % data.layout.rootWidth,
+      offsetY: data.rootMousemove.offsetY * data.rowAmount % data.layout.rootHeight
+    }
+    // 依event的座標取得group資料
+    const { groupIndex, groupLabel } = data.gridGroupPositionFn(eventData)
+
+    const axisX = data.groupScale(groupLabel) ?? 0
     
     const lineData = createLineData({
-      groupLabel: data.event.groupLabel,
+      groupLabel: groupLabel,
       axisX,
       axisHeight: data.gridAxesSize.height,
       fullParams: data.fullParams,
     })
     renderLine({
-      selection: axisSelection,
+      // selection: axisSelection,
+      selection: data.axesSelection,
       pluginName: name,
       lineData,
       fullParams: data.fullParams,
       fullChartParams: data.fullChartParams
     })
     const labelData = createLabelData({
-      groupLabel: data.event.groupLabel,
+      groupLabel: groupLabel,
       axisX,
       fullParams: data.fullParams
     })
     const labelSelection = renderLabel({
-      selection: axisSelection,
+      // selection: axisSelection,
+      selection: data.axesSelection,
       labelData,
       fullParams: data.fullParams,
+      fullDataFormatter: data.fullDataFormatter,
       fullChartParams: data.fullChartParams,
-      gridAxesReverseTransformValue: data.gridAxesReverseTransform.value,
+      // gridAxesReverseTransformValue: data.gridAxesReverseTransform.value,
+      labelTransform: data.labelTransform,
       textSizePx: data.textSizePx
     })
 
     // label的事件
     labelSelection
       .on('mouseover', (event, datum) => {
-  
-        const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+        event.stopPropagation()
+        // const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+
+        isLabelMouseover = true
 
         subject.event$.next({
           type: 'grid',
@@ -560,7 +675,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
-          groups: data.event.groups,
+          groups: data.GroupDataMap.get(groupLabel) ?? [],
           groupIndex,
           groupLabel,
           event,
@@ -568,7 +683,8 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
         })
       })
       .on('mousemove', (event, datum) => {
-        const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+        event.stopPropagation()
+        // const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
 
         subject.event$.next({
           type: 'grid',
@@ -580,7 +696,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
-          groups: data.event.groups,
+          groups: data.GroupDataMap.get(groupLabel) ?? [],
           groupIndex,
           groupLabel,
           event,
@@ -588,7 +704,10 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
         })
       })
       .on('mouseout', (event, datum) => {
-        const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+        event.stopPropagation()
+        // const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+
+        isLabelMouseover = false
 
         subject.event$.next({
           type: 'grid',
@@ -600,7 +719,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
-          groups: data.event.groups,
+          groups: data.GroupDataMap.get(groupLabel) ?? [],
           groupIndex,
           groupLabel,
           event,
@@ -608,7 +727,8 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
         })
       })
       .on('click', (event, datum) => {
-        const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+        event.stopPropagation()
+        // const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
 
         subject.event$.next({
           type: 'grid',
@@ -620,23 +740,180 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
-          groups: data.event.groups,
+          groups: data.GroupDataMap.get(groupLabel) ?? [],
           groupIndex,
           groupLabel,
           event,
           data: data.computedData
         })
       })
+
   })
 
-  const rootMouseout$ = d3EventObservable(rootRectSelection, 'mouseout').pipe(
+  // // -- highlight（無論highlightTarget設定為何，一律依從groupLabel來顯示） --
+  // combineLatest({
+  //   event: subject.event$.pipe(
+  //     filter(d => d.eventName === 'mouseover' || d.eventName === 'mousemove')
+  //   ),
+  //   computedData: observer.computedData$,
+  //   groupScale: groupScale$,
+  //   gridAxesSize: observer.gridAxesSize$,
+  //   fullParams: observer.fullParams$,
+  //   fullChartParams: observer.fullChartParams$,
+  //   highlightTarget: highlightTarget$,
+  //   gridAxesReverseTransform: observer.gridAxesReverseTransform$,
+  //   GroupDataMap: observer.GroupDataMap$,
+  //   gridGroupPositionFn: gridGroupPositionFn$,
+  //   textSizePx: observer.textSizePx$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async d => d)
+  // ).subscribe(data => {
+  //   // const groups = data.event.eventName === 'mouseover' || data.event.eventName === 'mousemove'
+  //   //   ? data.event.groups
+  //   //   : []
+    
+  //   // const groupLabel = data.event.eventName === 'mouseover' || data.event.eventName === 'mousemove'
+  //   //   ? data.event.groupLabel
+  //   //   : ''
+  //   const axisX = data.groupScale(data.event.groupLabel) ?? 0
+    
+  //   const lineData = createLineData({
+  //     groupLabel: data.event.groupLabel,
+  //     axisX,
+  //     axisHeight: data.gridAxesSize.height,
+  //     fullParams: data.fullParams,
+  //   })
+  //   renderLine({
+  //     selection: axisSelection,
+  //     pluginName: name,
+  //     lineData,
+  //     fullParams: data.fullParams,
+  //     fullChartParams: data.fullChartParams
+  //   })
+  //   const labelData = createLabelData({
+  //     groupLabel: data.event.groupLabel,
+  //     axisX,
+  //     fullParams: data.fullParams
+  //   })
+  //   const labelSelection = renderLabel({
+  //     selection: axisSelection,
+  //     labelData,
+  //     fullParams: data.fullParams,
+  //     fullChartParams: data.fullChartParams,
+  //     gridAxesReverseTransformValue: data.gridAxesReverseTransform.value,
+  //     textSizePx: data.textSizePx
+  //   })
+
+  //   // label的事件
+  //   labelSelection
+  //     .on('mouseover', (event, datum) => {
+  
+  //       const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+
+  //       subject.event$.next({
+  //         type: 'grid',
+  //         pluginName: name,
+  //         eventName: 'mouseover',
+  //         highlightTarget: data.highlightTarget,
+  //         datum: null,
+  //         gridIndex: 0, // @Q@ 暫不處理
+  //         series: [],
+  //         seriesIndex: -1,
+  //         seriesLabel: '',
+  //         groups: data.event.groups,
+  //         groupIndex,
+  //         groupLabel,
+  //         event,
+  //         data: data.computedData
+  //       })
+  //     })
+  //     .on('mousemove', (event, datum) => {
+  //       const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+
+  //       subject.event$.next({
+  //         type: 'grid',
+  //         pluginName: name,
+  //         eventName: 'mousemove',
+  //         highlightTarget: data.highlightTarget,
+  //         datum: null,
+  //         gridIndex: 0, // @Q@ 暫不處理
+  //         series: [],
+  //         seriesIndex: -1,
+  //         seriesLabel: '',
+  //         groups: data.event.groups,
+  //         groupIndex,
+  //         groupLabel,
+  //         event,
+  //         data: data.computedData
+  //       })
+  //     })
+  //     .on('mouseout', (event, datum) => {
+  //       const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+
+  //       subject.event$.next({
+  //         type: 'grid',
+  //         pluginName: name,
+  //         eventName: 'mouseout',
+  //         highlightTarget: data.highlightTarget,
+  //         datum: null,
+  //         gridIndex: 0, // @Q@ 暫不處理
+  //         series: [],
+  //         seriesIndex: -1,
+  //         seriesLabel: '',
+  //         groups: data.event.groups,
+  //         groupIndex,
+  //         groupLabel,
+  //         event,
+  //         data: data.computedData
+  //       })
+  //     })
+  //     .on('click', (event, datum) => {
+  //       const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+
+  //       subject.event$.next({
+  //         type: 'grid',
+  //         pluginName: name,
+  //         eventName: 'click',
+  //         highlightTarget: data.highlightTarget,
+  //         datum: null,
+  //         gridIndex: 0, // @Q@ 暫不處理
+  //         series: [],
+  //         seriesIndex: -1,
+  //         seriesLabel: '',
+  //         groups: data.event.groups,
+  //         groupIndex,
+  //         groupLabel,
+  //         event,
+  //         data: data.computedData
+  //       })
+  //     })
+  // })
+
+  
+
+  const rootRectMouseout$ = d3EventObservable(rootRectSelection, 'mouseout').pipe(
     takeUntil(destroy$),
   )
 
-  rootMouseout$.subscribe(event => {
-    console.log('rootMouseout')
-    removeLine(axisSelection)
-    removeLabel(axisSelection)
+
+  combineLatest({
+    rootRectMouseout: rootRectMouseout$,
+    axesSelection: axesSelection$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d)
+  ).subscribe(data => {
+
+    setTimeout(() => {
+      // @Q@ workaround - 不知為何和 label 會有衝突，當滑鼠移動到 label 上時，會觸發 mouseout 事件
+      if (isLabelMouseover == true) {
+        return
+      }
+      
+      removeLine(data.axesSelection)
+      removeLabel(data.axesSelection)
+    })
   })
 
   return () => {