@orbcharts/plugins-basic 3.0.0-beta.3 → 3.0.0-beta.5

package/src/grid/gridObservables.ts

@@ -19,20 +19,20 @@ import type {
   ComputedDataGrid,
   ComputedDatumGrid,
   TransformData,
-  GridContainerPosition,
+  ContainerPositionScaled,
   Layout } from '../../lib/core-types'
-import { createAxisQuantizeScale } from '../../lib/core'
+import { createAxisToLabelIndexScale } from '../../lib/core'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
 import { d3EventObservable } from '../utils/observables'
 
-// grid選取器
+// 建立 grid 主要的 selection 
 export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, seriesLabels$, gridContainerPosition$, gridAxesTransform$, gridGraphicTransform$ }: {
   selection: d3.Selection<any, unknown, any, unknown>
   pluginName: string
   clipPathID: string
   // computedData$: Observable<ComputedDataGrid>
   seriesLabels$: Observable<string[]>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   gridAxesTransform$: Observable<TransformData>
   gridGraphicTransform$: Observable<TransformData>
 }) => {
@@ -40,11 +40,15 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
   const axesClassName = getClassName(pluginName, 'axes')
   const graphicClassName = getClassName(pluginName, 'graphic')
 
+  // <g> series selection（container排放位置）
+  //   <g> axes selection（旋轉圖軸方向）
+  //     <defs> clipPath selection
+  //     <g> graphic selection（圖形 scale 範圍的變形）
   const seriesSelection$ = seriesLabels$.pipe(
-    map((existSeriesLabels, i) => {
+    map((seriesLabels, i) => {
       return selection
         .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
-        .data(existSeriesLabels, d => d)
+        .data(seriesLabels, d => d)
         .join(
           enter => {
             return enter
@@ -85,6 +89,7 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
     shareReplay(1)
   )
 
+  // <g> series selection
   combineLatest({
     seriesSelection: seriesSelection$,
     gridContainerPosition: gridContainerPosition$                                                                                                                                                                                       
@@ -101,6 +106,7 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
       })
   })
 
+  // <g> axes selection
   const axesSelection$ = combineLatest({
     seriesSelection: seriesSelection$,
     gridAxesTransform: gridAxesTransform$
@@ -113,12 +119,16 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
     }),
     shareReplay(1)
   )
+
+  // <defs> clipPath selection
   const defsSelection$ = axesSelection$.pipe(
     map(axesSelection => {
       return axesSelection.select<SVGDefsElement>('defs')
     }),
     shareReplay(1)
   )
+
+  // <g> graphic selection
   const graphicGSelection$ = combineLatest({
     axesSelection: axesSelection$,
     gridGraphicTransform: gridGraphicTransform$
@@ -145,7 +155,6 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
 }
 
 // 由事件取得group data的function
-// @Q@ 之後重構改用 gridGroupPosition
 export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$, gridContainerPosition$, layout$ }: {
   fullDataFormatter$: Observable<DataFormatterGrid>
   gridAxesSize$: Observable<{
@@ -155,7 +164,7 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
   computedData$: Observable<ComputedDataGrid>
   // GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullChartParams$: Observable<ChartParams>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   layout$: Observable<Layout>
 }): Observable<(event: any) => { groupIndex: number; groupLabel: string }> => {
   const destroy$ = new Subject()
@@ -289,7 +298,7 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
           ? true : false
 
       // 比例尺座標對應非連續資料索引
-      const xIndexScale = createAxisQuantizeScale({
+      const xIndexScale = createAxisToLabelIndexScale({
         axisLabels: data.scaleRangeGroupLabels,
         axisWidth: data.axisSize.width,
         padding: data.dataFormatter.grid.groupAxis.scalePadding,
@@ -305,7 +314,7 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
       }
 
       // 比例尺座標取得groupData的function
-      const createEventGroupData: (event: any) => { groupIndex: number; groupLabel: string } = (event: any) => {
+      const createEventGroupData: (event: MouseEvent) => { groupIndex: number; groupLabel: string } = (event: any) => {
         // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
         const eventData = {
           offsetX: event.offsetX * data.columnAmount % data.layout.rootWidth,
@@ -332,7 +341,7 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
   })
 }
 
-export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$, gridContainerPosition$, layout$ }: {
+export const gridGroupPositionObservable = ({ rootSelection, fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$, gridContainerPosition$, layout$ }: {
   rootSelection: d3.Selection<any, unknown, any, unknown>
   fullDataFormatter$: Observable<DataFormatterGrid>
   gridAxesSize$: Observable<{
@@ -341,10 +350,10 @@ export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesS
   }>
   computedData$: Observable<ComputedDataGrid>
   fullChartParams$: Observable<ChartParams>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   layout$: Observable<Layout>
 }) => {
-  const rootMousemove$: Observable<any> = d3EventObservable(rootSelection, 'mousemove')
+  const rootMousemove$ = d3EventObservable(rootSelection, 'mousemove')
 
   const groupScaleDomain$ = combineLatest({
     fullDataFormatter: fullDataFormatter$,
@@ -410,7 +419,7 @@ export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesS
   }).pipe(
     switchMap(async d => d),
     map(data => {
-      return createAxisQuantizeScale({
+      return createAxisToLabelIndexScale({
         axisLabels: data.scaleRangeGroupLabels,
         axisWidth: data.gridAxesSize.width,
         padding: data.fullDataFormatter.grid.groupAxis.scalePadding,
@@ -500,7 +509,7 @@ export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesS
 
 // const gridContainerEventData$ = ({ eventData$, gridContainerPosition$, layout$ }: {
 //   eventData$: Observable<any>
-//   gridContainerPosition$: Observable<GridContainerPosition[]>
+//   gridContainerPosition$: Observable<ContainerPositionScaled[]>
 //   layout$: Observable<Layout>
 // }): Observable<{
 //   offsetX: number;

package/src/grid/plugins/GridLegend.ts

@@ -85,14 +85,14 @@ export const GridLegend = defineGridPlugin(pluginConfig)(({ selection, rootSelec
       ]
       return {
         ...d,
-        seriesList
+        labelList: seriesList
       }
     })
   )
 
   const unsubscribeBaseLegend = createBaseLegend(pluginName, {
     rootSelection,
-    seriesLabels$,
+    legendLabels$: seriesLabels$,
     fullParams$,
     layout$: observer.layout$,
     fullChartParams$: observer.fullChartParams$,

package/src/grid/plugins/GridZoom.ts

@@ -12,7 +12,7 @@ import {
 import type { DefinePluginConfig } from '../../../lib/core-types'
 import type { DataFormatterGrid } from '../../../lib/core-types'
 import {
-  defineGridPlugin, createAxisLinearScale } from '../../../lib/core'
+  defineGridPlugin, createValueToAxisScale } from '../../../lib/core'
 import { DEFAULT_GRID_ZOOM_PARAMS } from '../defaults'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { LAYER_INDEX_OF_ROOT } from '../../const'
@@ -60,7 +60,7 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //     .attr('y', d.top)
   // })
 
-  const groupMax$ = observer.computedData$.pipe(
+  const groupMaxIndex$ = observer.computedData$.pipe(
     map(d => d[0] ? d[0].length - 1 : 0),
     distinctUntilChanged()
   )
@@ -82,10 +82,10 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   )
 
 
-  const groupScale$ = combineLatest({
+  const initGroupScale$ = combineLatest({
     initGroupAxis: initGroupAxis$,
-    fullDataFormatter: observer.fullDataFormatter$,
-    groupMax: groupMax$,
+    // fullDataFormatter: observer.fullDataFormatter$,
+    groupMaxIndex: groupMaxIndex$,
     layout: observer.layout$,
     axisSize: observer.gridAxesSize$
   }).pipe(
@@ -95,11 +95,11 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
       // const groupMin = 0
       const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] - data.initGroupAxis.scalePadding
       const groupScaleDomainMax = data.initGroupAxis.scaleDomain[1] === 'max'
-        ? data.groupMax + data.initGroupAxis.scalePadding
+        ? data.groupMaxIndex + data.initGroupAxis.scalePadding
         : data.initGroupAxis.scaleDomain[1] as number + data.initGroupAxis.scalePadding
 
-      const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-        maxValue: data.groupMax,
+      const groupScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+        maxValue: data.groupMaxIndex,
         minValue: 0,
         axisWidth: data.axisSize.width,
         scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
@@ -111,20 +111,20 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   )
 
   combineLatest({
-    groupScale: groupScale$,
+    initGroupScale: initGroupScale$,
     // initGroupAxis: initGroupAxis$,
     // fullDataFormatter: fullDataFormatter$.pipe(first()), // 只用第一次資料來計算scale才不會造成每次變動都受到影響
     fullDataFormatter: observer.fullDataFormatter$,
-    groupMax: groupMax$,
+    groupMaxIndex: groupMaxIndex$,
     // layout: observer.layout$,
     // axisSize: observer.gridAxesSize$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
   ).subscribe(data => {
-    const groupMin = 0
+    const groupMinIndex = 0
 
-    const shadowScale = data.groupScale.copy()
+    const shadowScale = data.initGroupScale.copy()
 
     const zoom = d3.zoom()
       // .scaleExtent([1, data.groupMaxIndex])
@@ -153,7 +153,7 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
         // console.log('t.x', t.x)
         const mapGroupindex = (d: number) => {
           const n = Math.round(d)
-          return Math.min(data.groupMax, Math.max(groupMin, n));
+          return Math.min(data.groupMaxIndex, Math.max(groupMinIndex, n));
         }
         
         const zoomedDomain = data.fullDataFormatter.grid.groupAxis.position === 'bottom' || data.fullDataFormatter.grid.groupAxis.position === 'top'
@@ -166,7 +166,7 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
 
 
         // domain超過極限值
-        if (zoomedDomain[0] <= groupMin && zoomedDomain[1] >= data.groupMax) {
+        if (zoomedDomain[0] <= groupMinIndex && zoomedDomain[1] >= data.groupMaxIndex) {
           // 繼續縮小
           if (t.k < lastTransform.k) {
             // 維持前一次的transform