@orbcharts/plugins-basic 3.0.0-alpha.56 → 3.0.0-alpha.58

package/dist/src/base/BaseLineAreas.d.ts

@@ -26,6 +26,7 @@ interface BaseLineAreasContext {
     }>;
     gridHighlight$: Observable<ComputedDatumGrid[]>;
     gridContainerPosition$: Observable<GridContainerPosition[]>;
+    allContainerPosition$: Observable<GridContainerPosition[]>;
     layout$: Observable<Layout>;
     event$: Subject<EventGrid>;
 }

package/dist/src/base/BaseLines.d.ts

@@ -1,6 +1,6 @@
 import { Observable, Subject } from 'rxjs';
 import { BasePluginFn } from './types';
-import { ComputedDatumGrid, ComputedDataGrid, ComputedLayoutDataGrid, DataFormatterGrid, EventGrid, GridContainerPosition, ChartParams, TransformData } from '@orbcharts/core';
+import { ComputedDatumGrid, ComputedDataGrid, ComputedLayoutDataGrid, DataFormatterGrid, EventGrid, GridContainerPosition, ChartParams, Layout, TransformData } from '@orbcharts/core';
 import * as d3 from 'd3';
 export interface BaseLinesParams {
     lineCurve: string;
@@ -26,6 +26,8 @@ interface BaseLinesContext {
     }>;
     gridHighlight$: Observable<ComputedDatumGrid[]>;
     gridContainerPosition$: Observable<GridContainerPosition[]>;
+    allContainerPosition$: Observable<GridContainerPosition[]>;
+    layout$: Observable<Layout>;
     event$: Subject<EventGrid>;
 }
 export declare const createBaseLines: BasePluginFn<BaseLinesContext>;

package/dist/src/grid/gridObservables.d.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs';
-import { ChartParams, DataFormatterGrid, ComputedDataGrid, TransformData, GridContainerPosition } from '@orbcharts/core';
+import { ChartParams, DataFormatterGrid, ComputedDataGrid, TransformData, GridContainerPosition, Layout } from '@orbcharts/core';
 import * as d3 from 'd3';
 export declare const gridSelectionsObservable: ({ selection, pluginName, clipPathID, seriesLabels$, gridContainerPosition$, gridAxesTransform$, gridGraphicTransform$ }: {
     selection: d3.Selection<any, unknown, any, unknown>;
@@ -15,7 +15,7 @@ export declare const gridSelectionsObservable: ({ selection, pluginName, clipPat
     defsSelection$: Observable<d3.Selection<SVGDefsElement, string, any, unknown>>;
     graphicGSelection$: Observable<d3.Selection<SVGGElement, string, any, unknown>>;
 };
-export declare const gridGroupPositionFnObservable: ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$ }: {
+export declare const gridGroupPositionFnObservable: ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$, gridContainerPosition$, layout$ }: {
     fullDataFormatter$: Observable<DataFormatterGrid>;
     gridAxesSize$: Observable<{
         width: number;
@@ -23,7 +23,24 @@ export declare const gridGroupPositionFnObservable: ({ fullDataFormatter$, gridA
     }>;
     computedData$: Observable<ComputedDataGrid>;
     fullChartParams$: Observable<ChartParams>;
+    gridContainerPosition$: Observable<GridContainerPosition[]>;
+    layout$: Observable<Layout>;
 }) => Observable<(event: any) => {
     groupIndex: number;
     groupLabel: string;
 }>;
+export declare const gridGroupPosition: ({ rootSelection, fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$, gridContainerPosition$, layout$ }: {
+    rootSelection: d3.Selection<any, unknown, any, unknown>;
+    fullDataFormatter$: Observable<DataFormatterGrid>;
+    gridAxesSize$: Observable<{
+        width: number;
+        height: number;
+    }>;
+    computedData$: Observable<ComputedDataGrid>;
+    fullChartParams$: Observable<ChartParams>;
+    gridContainerPosition$: Observable<GridContainerPosition[]>;
+    layout$: Observable<Layout>;
+}) => Observable<{
+    groupIndex: number;
+    groupLabel: string;
+}>;

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

@@ -24,6 +24,7 @@ export interface GroupAuxParams {
     labelTextColorType: ColorType;
     labelTextFormat: string | ((text: any) => string);
     labelPadding: number;
+    labelRotate: number;
 }
 export interface BarsParams {
     barWidth: number;

package/dist/vite.config.d.mts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfigFnObject;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.56",
+  "version": "3.0.0-alpha.58",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -25,17 +25,18 @@
   "types": "./dist/src/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "vite build --mode release"
+    "build": "vite build --mode production"
   },
   "devDependencies": {
     "@types/d3": "^7.4.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.4",
     "vite": "^5.3.5",
-    "vite-plugin-dts": "^3.7.3"
+    "vite-plugin-dts": "^3.7.3",
+    "vite-plugin-tsconfig": "^1.0.5"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.0-alpha.52",
+    "@orbcharts/core": "^3.0.0-alpha.54",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/BaseGroupAxis.ts

@@ -115,7 +115,7 @@ function renderAxis ({ selection, xAxisClassName, groupingLabelClassName, params
         .attr('dominant-baseline', axisLabelAlign.dominantBaseline)
         .attr('font-size', chartParams.styles.textSize)
         .style('fill', getColor(params.labelColorType, chartParams))
-        .style('transform', textTransform)
+        // .style('transform', textTransform)
         .text(d => fullDataFormatter.grid.groupAxis.label)
     })
     .attr('transform', d => `translate(${gridAxesSize.width + d.tickPadding + params.labelOffset[0]}, ${- d.tickPadding - defaultTickSize - params.labelOffset[1]})`)

package/src/base/BaseLineAreas.ts

@@ -52,6 +52,7 @@ interface BaseLineAreasContext {
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
   gridContainerPosition$: Observable<GridContainerPosition[]>
+  allContainerPosition$: Observable<GridContainerPosition[]>
   layout$: Observable<Layout>
   event$: Subject<EventGrid>
 }
@@ -408,7 +409,9 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     fullDataFormatter$,
     gridAxesSize$: gridAxesSize$,
     computedData$: computedData$,
-    fullChartParams$: fullChartParams$
+    fullChartParams$: fullChartParams$,
+    gridContainerPosition$: gridContainerPosition$,
+    layout$: layout$
   })
 
   const highlightTarget$ = fullChartParams$.pipe(

package/src/base/BaseLines.ts

@@ -57,6 +57,8 @@ interface BaseLinesContext {
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
   gridContainerPosition$: Observable<GridContainerPosition[]>
+  allContainerPosition$: Observable<GridContainerPosition[]>
+  layout$: Observable<Layout>
   event$: Subject<EventGrid>
 }
 
@@ -240,6 +242,8 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
   gridAxesSize$,
   gridHighlight$,
   gridContainerPosition$,
+  allContainerPosition$,
+  layout$,
   event$
 }) => {
 
@@ -496,7 +500,9 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
     fullDataFormatter$,
     gridAxesSize$: gridAxesSize$,
     computedData$: computedData$,
-    fullChartParams$: fullChartParams$
+    fullChartParams$: fullChartParams$,
+    gridContainerPosition$: allContainerPosition$,
+    layout$: layout$
   })
 
   const highlightTarget$ = fullChartParams$.pipe(
@@ -541,8 +547,6 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
 
       return pathSelectionArr
     })
-
-
   )
 
   combineLatest({
@@ -563,6 +567,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
 
           const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
           const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+          // console.log('groupIndex', groupIndex)
           const groupData = data.GroupDataMap.get(groupLabel)!
           const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
           const _datum = targetDatum ?? datum[0]

package/src/base/BaseValueAxis.ts

@@ -109,7 +109,7 @@ function renderAxis ({ selection, yAxisClassName, textClassName, fullParams, tic
         .attr('dominant-baseline', axisLabelAlign.dominantBaseline)
         .attr('font-size', fullChartParams.styles.textSize)
         .style('fill', getColor(fullParams.labelColorType, fullChartParams))
-        .style('transform', textTransform)
+        // .style('transform', textTransform)
         .text(d => fullDataFormatter.grid.valueAxis.label)
     })
     .attr('transform', d => `translate(${- d.tickPadding + fullParams.labelOffset[0]}, ${gridAxesSize.height + d.tickPadding + fullParams.labelOffset[1]})`)

package/src/grid/defaults.ts

@@ -40,6 +40,7 @@ export const DEFAULT_GROUP_AREA_PARAMS: GroupAuxParams = {
   labelTextColorType: 'background',
   labelTextFormat: text => text,
   labelPadding: 24,
+  labelRotate: 0
 }
 DEFAULT_GROUP_AREA_PARAMS.labelTextFormat.toString = () => `text => text`
 

package/src/grid/gridObservables.ts

@@ -23,6 +23,7 @@ import type {
   Layout } from '@orbcharts/core'
 import { createAxisQuantizeScale } from '@orbcharts/core'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
+import { d3EventObservable } from '../utils/observables'
 
 // grid選取器
 export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, seriesLabels$, gridContainerPosition$, gridAxesTransform$, gridGraphicTransform$ }: {
@@ -144,7 +145,8 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
 }
 
 // 由事件取得group data的function
-export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$ }: {
+// @Q@ 之後重構改用 gridGroupPosition
+export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$, gridContainerPosition$, layout$ }: {
   fullDataFormatter$: Observable<DataFormatterGrid>
   gridAxesSize$: Observable<{
     width: number;
@@ -153,56 +155,128 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
   computedData$: Observable<ComputedDataGrid>
   // GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullChartParams$: Observable<ChartParams>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
+  layout$: Observable<Layout>
 }): Observable<(event: any) => { groupIndex: number; groupLabel: string }> => {
   const destroy$ = new Subject()
 
   // 顯示範圍內的group labels
-  const scaleRangeGroupLabels$: Observable<string[]> = new Observable(subscriber => {
-    combineLatest({
-      dataFormatter: fullDataFormatter$,
-      computedData: computedData$
-    }).pipe(
-      takeUntil(destroy$),
-      switchMap(async (d) => d),
-    ).subscribe(data => {
+  // const scaleRangeGroupLabels$: Observable<string[]> = new Observable(subscriber => {
+  //   combineLatest({
+  //     dataFormatter: fullDataFormatter$,
+  //     computedData: computedData$
+  //   }).pipe(
+  //     takeUntil(destroy$),
+  //     switchMap(async (d) => d),
+  //   ).subscribe(data => {
+  //     const groupMin = 0
+  //     const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
+  //     const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
+  //       ? groupMin - data.dataFormatter.grid.groupAxis.scalePadding
+  //       : data.dataFormatter.grid.groupAxis.scaleDomain[0] as number - data.dataFormatter.grid.groupAxis.scalePadding
+  //     const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
+  //       ? groupMax + data.dataFormatter.grid.groupAxis.scalePadding
+  //       : data.dataFormatter.grid.groupAxis.scaleDomain[1] as number + data.dataFormatter.grid.groupAxis.scalePadding
+      
+  //     // const groupingAmount = data.computedData[0]
+  //     //   ? data.computedData[0].length
+  //     //   : 0
+
+  //     let _labels = data.dataFormatter.grid.seriesDirection === 'row'
+  //       ? (data.computedData[0] ?? []).map(d => d.groupLabel)
+  //       : data.computedData.map(d => d[0].groupLabel)
+
+  //     const _axisLabels = 
+  //     // new Array(groupingAmount).fill(0)
+  //     //   .map((d, i) => {
+  //     //     return _labels[i] != null
+  //     //       ? _labels[i]
+  //     //       : String(i) // 沒有label則用序列號填充
+  //     //   })
+  //       _labels
+  //       .filter((d, i) => {
+  //         return i >= groupScaleDomainMin && i <= groupScaleDomainMax
+  //       })
+  //     subscriber.next(_axisLabels)
+  //   })
+  // })
+  const groupScaleDomain$ = combineLatest({
+    fullDataFormatter: fullDataFormatter$,
+    gridAxesSize: gridAxesSize$,
+    computedData: computedData$
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
       const groupMin = 0
       const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-      const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
-        ? groupMin - data.dataFormatter.grid.groupAxis.scalePadding
-        : data.dataFormatter.grid.groupAxis.scaleDomain[0] as number - data.dataFormatter.grid.groupAxis.scalePadding
-      const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
-        ? groupMax + data.dataFormatter.grid.groupAxis.scalePadding
-        : data.dataFormatter.grid.groupAxis.scaleDomain[1] as number + data.dataFormatter.grid.groupAxis.scalePadding
-      
-      // const groupingAmount = data.computedData[0]
-      //   ? data.computedData[0].length
-      //   : 0
+      const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
+        ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
+        : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
+      const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
+        ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
+        : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
 
-      let _labels = data.dataFormatter.grid.seriesDirection === 'row'
+      return [groupScaleDomainMin, groupScaleDomainMax]
+    }),
+    shareReplay(1)
+  )
+
+  const groupLabels$ = combineLatest({
+    fullDataFormatter: fullDataFormatter$,
+    computedData: computedData$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return data.fullDataFormatter.grid.seriesDirection === 'row'
         ? (data.computedData[0] ?? []).map(d => d.groupLabel)
         : data.computedData.map(d => d[0].groupLabel)
+    })
+  )
 
-      const _axisLabels = 
-      // new Array(groupingAmount).fill(0)
-      //   .map((d, i) => {
-      //     return _labels[i] != null
-      //       ? _labels[i]
-      //       : String(i) // 沒有label則用序列號填充
-      //   })
-        _labels
+  // 顯示範圍內的group labels
+  const scaleRangeGroupLabels$ = combineLatest({
+    groupScaleDomain: groupScaleDomain$,
+    groupLabels: groupLabels$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return data.groupLabels
         .filter((d, i) => {
-          return i >= groupScaleDomainMin && i <= groupScaleDomainMax
+          return i >= data.groupScaleDomain[0] && i <= data.groupScaleDomain[1]
         })
-      subscriber.next(_axisLabels)
     })
-  })
+  )
+
+  const columnAmount$ = gridContainerPosition$.pipe(
+    map(gridContainerPosition => {
+      const maxColumnIndex = gridContainerPosition.reduce((acc, current) => {
+        return current.columnIndex > acc ? current.columnIndex : acc
+      }, 0)
+      return maxColumnIndex + 1
+    }),
+    distinctUntilChanged()
+  )
+
+  const rowAmount$ = gridContainerPosition$.pipe(
+    map(gridContainerPosition => {
+      const maxRowIndex = gridContainerPosition.reduce((acc, current) => {
+        return current.rowIndex > acc ? current.rowIndex : acc
+      }, 0)
+      return maxRowIndex + 1
+    }),
+    distinctUntilChanged()
+  )
 
   return new Observable<(event: any) => { groupIndex: number; groupLabel: string }>(subscriber => {
     combineLatest({
       dataFormatter: fullDataFormatter$,
       axisSize: gridAxesSize$,
       fullChartParams: fullChartParams$,
-      scaleRangeGroupLabels: scaleRangeGroupLabels$
+      scaleRangeGroupLabels: scaleRangeGroupLabels$,
+      groupScaleDomain: groupScaleDomain$,
+      columnAmount: columnAmount$,
+      rowAmount: rowAmount$,
+      layout: layout$
     }).pipe(
       takeUntil(destroy$),
       switchMap(async (d) => d),
@@ -213,9 +287,10 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
           ? true : false
 
       // 比例尺座標對應非連續資料索引
-      const groupIndexScale = createAxisQuantizeScale({
+      const xIndexScale = createAxisQuantizeScale({
         axisLabels: data.scaleRangeGroupLabels,
         axisWidth: data.axisSize.width,
+        padding: data.dataFormatter.grid.groupAxis.scalePadding,
         reverse
       })
 
@@ -229,8 +304,16 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
 
       // 比例尺座標取得groupData的function
       const createEventGroupData: (event: any) => { groupIndex: number; groupLabel: string } = (event: any) => {
-        const axisValue = axisValuePredicate(event)
-        const groupIndex = groupIndexScale(axisValue)
+        // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
+        const eventData = {
+          offsetX: event.offsetX * data.columnAmount % data.layout.rootWidth,
+          offsetY: event.offsetY * data.rowAmount % data.layout.rootHeight
+        }
+        // console.log('data.columnAmount', data.columnAmount, 'data.rowAmount', data.rowAmount, 'data.layout.rootWidth', data.layout.rootWidth, 'data.layout.rootHeight', data.layout.rootHeight)
+        const axisValue = axisValuePredicate(eventData)
+        const xIndex = xIndexScale(axisValue)
+        const currentxIndexStart = Math.ceil(data.groupScaleDomain[0]) // 因為有padding所以會有小數點，所以要無條件進位
+        const groupIndex =  xIndex + currentxIndexStart
         return {
           groupIndex,
           groupLabel: data.scaleRangeGroupLabels[groupIndex] ?? ''
@@ -246,3 +329,214 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
   })
 }
 
+export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$, gridContainerPosition$, layout$ }: {
+  rootSelection: d3.Selection<any, unknown, any, unknown>
+  fullDataFormatter$: Observable<DataFormatterGrid>
+  gridAxesSize$: Observable<{
+    width: number;
+    height: number;
+  }>
+  computedData$: Observable<ComputedDataGrid>
+  fullChartParams$: Observable<ChartParams>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
+  layout$: Observable<Layout>
+}) => {
+  const rootMousemove$: Observable<any> = d3EventObservable(rootSelection, 'mousemove')
+
+  const groupScaleDomain$ = combineLatest({
+    fullDataFormatter: fullDataFormatter$,
+    gridAxesSize: gridAxesSize$,
+    computedData: computedData$
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      const groupMin = 0
+      const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
+      const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
+        ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
+        : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
+      const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
+        ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
+        : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
+
+      return [groupScaleDomainMin, groupScaleDomainMax]
+    }),
+    shareReplay(1)
+  )
+
+  const groupLabels$ = combineLatest({
+    fullDataFormatter: fullDataFormatter$,
+    computedData: computedData$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return data.fullDataFormatter.grid.seriesDirection === 'row'
+        ? (data.computedData[0] ?? []).map(d => d.groupLabel)
+        : data.computedData.map(d => d[0].groupLabel)
+    })
+  )
+
+  const scaleRangeGroupLabels$ = combineLatest({
+    groupScaleDomain: groupScaleDomain$,
+    groupLabels: groupLabels$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return data.groupLabels
+        .filter((d, i) => {
+          return i >= data.groupScaleDomain[0] && i <= data.groupScaleDomain[1]
+        })
+    })
+  )
+
+  const reverse$ = fullDataFormatter$.pipe(
+    map(d => {
+      return d.grid.valueAxis.position === 'right' || d.grid.valueAxis.position === 'bottom'
+          ? true
+          : false
+    })
+  )
+
+  // 比例尺座標對應非連續資料索引
+  const xIndexScale$ = combineLatest({
+    reverse: reverse$,
+    gridAxesSize: gridAxesSize$,
+    scaleRangeGroupLabels: scaleRangeGroupLabels$,
+    fullDataFormatter: fullDataFormatter$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return createAxisQuantizeScale({
+        axisLabels: data.scaleRangeGroupLabels,
+        axisWidth: data.gridAxesSize.width,
+        padding: data.fullDataFormatter.grid.groupAxis.scalePadding,
+        reverse: data.reverse
+      })
+    })
+  )
+
+  const columnAmount$ = gridContainerPosition$.pipe(
+    map(gridContainerPosition => {
+      const maxColumnIndex = gridContainerPosition.reduce((acc, current) => {
+        return current.columnIndex > acc ? current.columnIndex : acc
+      }, 0)
+      return maxColumnIndex + 1
+    }),
+    distinctUntilChanged()
+  )
+
+  const rowAmount$ = gridContainerPosition$.pipe(
+    map(gridContainerPosition => {
+      const maxRowIndex = gridContainerPosition.reduce((acc, current) => {
+        return current.rowIndex > acc ? current.rowIndex : acc
+      }, 0)
+      return maxRowIndex + 1
+    }),
+    distinctUntilChanged()
+  )
+
+  const axisValue$ = combineLatest({
+    fullDataFormatter: fullDataFormatter$,
+    fullChartParams: fullChartParams$,
+    rootMousemove: rootMousemove$,
+    columnAmount: columnAmount$,
+    rowAmount: rowAmount$,
+    layout: layout$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
+      const eventData = {
+        offsetX: data.rootMousemove.offsetX * data.columnAmount % data.layout.rootWidth,
+        offsetY: data.rootMousemove.offsetY * data.rowAmount % data.layout.rootHeight
+      }
+      return data.fullDataFormatter.grid.groupAxis.position === 'bottom'
+          || data.fullDataFormatter.grid.groupAxis.position === 'top'
+            ? eventData.offsetX - data.fullChartParams.padding.left
+            : eventData.offsetY - data.fullChartParams.padding.top
+    })
+  )
+
+  const groupIndex$ = combineLatest({
+    xIndexScale: xIndexScale$,
+    axisValue: axisValue$,
+    groupScaleDomain: groupScaleDomain$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      const xIndex = data.xIndexScale(data.axisValue)
+      const currentxIndexStart = Math.ceil(data.groupScaleDomain[0]) // 因為有padding所以會有小數點，所以要無條件進位
+      return xIndex + currentxIndexStart
+    })
+  )
+
+  const groupLabel$ = combineLatest({
+    groupIndex: groupIndex$,
+    groupLabels: groupLabels$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return data.groupLabels[data.groupIndex] ?? ''
+    })
+  )
+
+  return combineLatest({
+    groupIndex: groupIndex$,
+    groupLabel: groupLabel$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return {
+        groupIndex: data.groupIndex,
+        groupLabel: data.groupLabel
+      }
+    })
+  )
+}
+
+// const gridContainerEventData$ = ({ eventData$, gridContainerPosition$, layout$ }: {
+//   eventData$: Observable<any>
+//   gridContainerPosition$: Observable<GridContainerPosition[]>
+//   layout$: Observable<Layout>
+// }): Observable<{
+//   offsetX: number;
+//   offsetY: number;
+// }> => {
+//   const columnAmount$ = gridContainerPosition$.pipe(
+//     map(gridContainerPosition => {
+//       const maxColumnIndex = gridContainerPosition.reduce((acc, current) => {
+//         return current.columnIndex > acc ? current.columnIndex : acc
+//       }, 0)
+//       return maxColumnIndex + 1
+//     }),
+//     distinctUntilChanged()
+//   )
+
+//   const rowAmount$ = gridContainerPosition$.pipe(
+//     map(gridContainerPosition => {
+//       const maxRowIndex = gridContainerPosition.reduce((acc, current) => {
+//         return current.rowIndex > acc ? current.rowIndex : acc
+//       }, 0)
+//       return maxRowIndex + 1
+//     }),
+//     distinctUntilChanged()
+//   )
+
+//   return combineLatest({
+//     eventData: eventData$,
+//     gridContainerPosition: gridContainerPosition$,
+//     layout: layout$,
+//     columnAmount: columnAmount$,
+//     rowAmount: rowAmount$
+//   }).pipe(
+//     switchMap(async d => d),
+//     map(data => {
+//       // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
+//       const eventData = {
+//         offsetX: data.eventData.offsetX * data.columnAmount % data.layout.rootWidth,
+//         offsetY: data.eventData.offsetY * data.rowAmount % data.layout.rootHeight
+//       }
+//       return eventData
+//     })
+//   )
+// }