@orbcharts/core 3.0.0-alpha.42 → 3.0.0-alpha.44

package/src/multiGrid/multiGridObservables.ts

@@ -25,7 +25,7 @@ import type {
   HighlightTarget,
   Layout,
   TransformData } from '../types'
-import type { ContextObserverGridDetail } from '../types'
+import type { ContextObserverGridDetail, ContextObserverMultiGridDetail, GridContainerPosition } from '../types'
 import {
   highlightObservable,
   seriesDataMapObservable,
@@ -36,12 +36,14 @@ import {
   gridGraphicReverseScaleObservable,
   gridAxesReverseTransformObservable,
   gridAxesSizeObservable,
-  existSeriesLabelsObservable,
+  seriesLabelsObservable,
+  gridComputedLayoutDataObservable,
   gridVisibleComputedDataObservable,
-  isSeriesPositionSeprateObservable,
-  gridContainerObservable } from '../grid/gridObservables'
+  gridVisibleComputedLayoutDataObservable,
+  // isSeriesSeprateObservable,
+  gridContainerPositionObservable } from '../grid/gridObservables'
 import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
-import { calcGridContainerPosition } from '../utils/orbchartsUtils'
+import { calcGridContainerLayout } from '../utils/orbchartsUtils'
 
 // 每一個grid計算出來的所有Observable
 export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
@@ -50,128 +52,34 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
   layout$: Observable<Layout>
   fullChartParams$: Observable<ChartParams>
   event$: Subject<EventMultiGrid>
-}) => {
+}): Observable<ContextObserverMultiGridDetail[]> => {
 
-  // 建立Observables
-  function detailObservables ({ gridDataFormatter$, gridComputedData$, layout$, fullChartParams$, event$ }: {
-    // fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
-    // computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
-    gridDataFormatter$: Observable<DataFormatterGrid>
-    gridComputedData$: Observable<ComputedDataGrid>
-    layout$: Observable<Layout>
-    fullChartParams$: Observable<ChartParams>
-    event$: Subject<EventMultiGrid>
-  }): ContextObserverGridDetail {
-    
-    const isSeriesPositionSeprate$ = isSeriesPositionSeprateObservable({
-      computedData$: gridComputedData$,
-      fullDataFormatter$: gridDataFormatter$,
-    }).pipe(
-      shareReplay(1)
-    )
-  
-    const gridContainer$ = gridContainerObservable({
-      computedData$: gridComputedData$,
-      fullDataFormatter$: gridDataFormatter$,
-      fullChartParams$,
-      layout$
-    }).pipe(
-      shareReplay(1)
-    )
-    
-    const gridAxesTransform$ = gridAxesTransformObservable({
-      fullDataFormatter$: gridDataFormatter$,
-      layout$: layout$
-    }).pipe(
-      shareReplay(1)
-    )
-
-    
-    const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
-      gridAxesTransform$
-    }).pipe(
-      shareReplay(1)
-    )
-    
-    const gridGraphicTransform$ = gridGraphicTransformObservable({
-      computedData$: gridComputedData$,
-      fullDataFormatter$: gridDataFormatter$,
-      layout$: layout$
-    }).pipe(
-      shareReplay(1)
-    )
-
-    const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
-      gridContainer$: gridContainer$,
-      gridAxesTransform$: gridAxesTransform$,
-      gridGraphicTransform$: gridGraphicTransform$,
-    })
-
-    const gridAxesSize$ = gridAxesSizeObservable({
-      fullDataFormatter$: gridDataFormatter$,
-      layout$: layout$
-    }).pipe(
-      shareReplay(1)
-    )
-
-    const datumList$ = gridComputedData$.pipe(
-      map(d => d.flat())
-    ).pipe(
-      shareReplay(1)
-    )
-
-    const gridHighlight$ = highlightObservable({
-      datumList$,
-      fullChartParams$: fullChartParams$,
-      event$: event$
-    }).pipe(
-      shareReplay(1)
-    )
-
-    const existSeriesLabels$ = existSeriesLabelsObservable({
-      computedData$: gridComputedData$,
-    })
-
-    const SeriesDataMap$ = seriesDataMapObservable({
-      datumList$: datumList$
-    }).pipe(
-      shareReplay(1)
-    )
-
-    const GroupDataMap$ = groupDataMapObservable({
-      datumList$: datumList$
-    }).pipe(
-      shareReplay(1)
-    )
+  const destroy$ = new Subject()
 
-    const visibleComputedData$ = gridVisibleComputedDataObservable({
-      computedData$: gridComputedData$,
-    }).pipe(
+  // highlight全部grid
+  const allGridHighlight$ = highlightObservable({
+    datumList$: computedData$.pipe(
+      map(d => d.flat().flat()),
       shareReplay(1)
-    )
-
-
-    return {
-      isSeriesPositionSeprate$,
-      gridContainer$,
-      gridAxesTransform$,
-      gridAxesReverseTransform$,
-      gridGraphicTransform$,
-      gridGraphicReverseScale$,
-      gridAxesSize$,
-      gridHighlight$,
-      existSeriesLabels$,
-      SeriesDataMap$,
-      GroupDataMap$,
-      visibleComputedData$,
-    }
-  }
+    ),
+    fullChartParams$: fullChartParams$,
+    event$: event$
+  }).pipe(
+    shareReplay(1)
+  )
 
-  const destroy$ = new Subject()
+  const multiGridContainer$ = multiGridContainerObservable({
+    computedData$: computedData$,
+    fullDataFormatter$: fullDataFormatter$,
+    layout$: layout$,
+  }).pipe(
+    shareReplay(1)
+  )
 
   return combineLatest({
     fullDataFormatter: fullDataFormatter$,
     computedData: computedData$,
+    multiGridContainer: multiGridContainer$
   }).pipe(
     switchMap(async (d) => d),
     // distinctUntilChanged((a, b) => {
@@ -190,6 +98,7 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
         const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
         const gridDataFormatter: DataFormatterGrid = {
           type: 'grid',
+          visibleFilter: data.fullDataFormatter.visibleFilter as any,
           grid: {
             ...grid
           },
@@ -206,14 +115,143 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
           shareReplay(1)
         )
 
-        // -- 建立Observables --
-        return detailObservables ({
-          gridDataFormatter$,
-          gridComputedData$,
-          layout$,
-          fullChartParams$,
-          event$
+        // const isSeriesSeprate$ = isSeriesSeprateObservable({
+        //   computedData$: gridComputedData$,
+        //   fullDataFormatter$: gridDataFormatter$,
+        // }).pipe(
+        //   takeUntil(destroy$),
+        //   shareReplay(1)
+        // )
+      
+        // const gridContainerPosition$ = gridContainerPositionObservable({
+        //   computedData$: gridComputedData$,
+        //   fullDataFormatter$: gridDataFormatter$,
+        //   layout$
+        // }).pipe(
+        //   shareReplay(1)
+        // )
+
+        const gridContainerPosition$ = of(data.multiGridContainer[gridIndex]).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+        
+        const gridAxesTransform$ = gridAxesTransformObservable({
+          fullDataFormatter$: gridDataFormatter$,
+          layout$: layout$
+        }).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+    
+        
+        const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
+          gridAxesTransform$
+        }).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+        
+        const gridGraphicTransform$ = gridGraphicTransformObservable({
+          computedData$: gridComputedData$,
+          fullDataFormatter$: gridDataFormatter$,
+          layout$: layout$
+        }).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+    
+        const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
+          gridContainerPosition$: gridContainerPosition$,
+          gridAxesTransform$: gridAxesTransform$,
+          gridGraphicTransform$: gridGraphicTransform$,
         })
+    
+        const gridAxesSize$ = gridAxesSizeObservable({
+          fullDataFormatter$: gridDataFormatter$,
+          layout$: layout$
+        }).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+    
+        const datumList$ = gridComputedData$.pipe(
+          map(d => d.flat())
+        ).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+    
+        // const gridHighlight$ = highlightObservable({
+        //   datumList$,
+        //   fullChartParams$: fullChartParams$,
+        //   event$: event$
+        // }).pipe(
+        //   shareReplay(1)
+        // )
+    
+        const seriesLabels$ = seriesLabelsObservable({
+          computedData$: gridComputedData$,
+        }).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+    
+        const SeriesDataMap$ = seriesDataMapObservable({
+          datumList$: datumList$
+        }).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+    
+        const GroupDataMap$ = groupDataMapObservable({
+          datumList$: datumList$
+        }).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+    
+        const visibleComputedData$ = gridVisibleComputedDataObservable({
+          computedData$: gridComputedData$,
+        }).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+    
+        const computedLayoutData$ = gridComputedLayoutDataObservable({
+          computedData$: gridComputedData$,
+          fullDataFormatter$: gridDataFormatter$,
+          layout$: layout$,
+        }).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+    
+        const visibleComputedLayoutData$ = gridVisibleComputedLayoutDataObservable({
+          computedLayoutData$: computedLayoutData$,
+        }).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+
+        return <ContextObserverMultiGridDetail>{
+          gridContainerPosition$,
+          gridAxesTransform$,
+          gridAxesReverseTransform$,
+          gridGraphicTransform$,
+          gridGraphicReverseScale$,
+          gridAxesSize$,
+          gridHighlight$: allGridHighlight$,
+          seriesLabels$,
+          SeriesDataMap$,
+          GroupDataMap$,
+          dataFormatter$: gridDataFormatter$,
+          computedData$: gridComputedData$,
+          computedLayoutData$,
+          visibleComputedData$,
+          visibleComputedLayoutData$,
+          // isSeriesSeprate$
+        }
       })
     })
   )
@@ -221,66 +259,93 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
 
 
 // 所有container位置（對應series）
-export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$, fullChartParams$, layout$ }: {
+export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
   computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
   fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
-  fullChartParams$: Observable<ChartParams>
   layout$: Observable<Layout>
-}) => {
+}): Observable<GridContainerPosition[][]> => {
 
-  const multiGridContainer$ = combineLatest({
+  return combineLatest({
     computedData: computedData$,
     fullDataFormatter: fullDataFormatter$,
-    fullChartParams: fullChartParams$,
     layout: layout$,
   }).pipe(
     switchMap(async (d) => d),
     map(data => {
 
       const defaultGrid = data.fullDataFormatter.gridList[0] ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
-      
-      const boxArr = data.computedData.map((gridData, gridIndex) => {
+      const slotAmount = data.computedData.reduce((acc, gridData, gridIndex) => {
         const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
-        
-        // 有設定series定位
-        const hasSeriesPosition = grid.seriesSlotIndexes && grid.seriesSlotIndexes.length === gridData.length
-          ? true
-          : false
-        
-        if (hasSeriesPosition) {
-          // -- 依seriesSlotIndexes計算 --
-          return gridData.map((seriesData, seriesIndex) => {
-            const columnIndex = grid.seriesSlotIndexes[seriesIndex] % data.fullDataFormatter.container.columnAmount
-            const rowIndex = Math.floor(grid.seriesSlotIndexes[seriesIndex] / data.fullDataFormatter.container.columnAmount)
-            const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
-            return {
-              slotIndex: grid.seriesSlotIndexes[seriesIndex],
-              rowIndex,
-              columnIndex,
-              translate,
-              scale,
-            }
-          })
-        } else {
-          // -- 依grid的slotIndex計算 --
-          const columnIndex = grid.slotIndex % data.fullDataFormatter.container.columnAmount
-          const rowIndex = Math.floor(grid.slotIndex / data.fullDataFormatter.container.columnAmount)
-          return gridData.map((seriesData, seriesIndex) => {
-            const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
-            return {
-              slotIndex: grid.slotIndex,
-              rowIndex,
-              columnIndex,
-              translate,
-              scale,
-            }
-          })
-        }
+        const gridSlotAmount = grid.separateSeries
+          ? gridData.length
+          : data.fullDataFormatter.separateGrid
+            ? 1
+            : 0 // 如果grid和series都不分開，則slotAmount不增加（在相同的slot）
+        return acc + gridSlotAmount
+      }, 0) || 1
+
+      const gridContainerLayout = calcGridContainerLayout(data.layout, data.fullDataFormatter.container, slotAmount)
 
+      let accGridSlotIndex = 0
+      const gridContainerPositionArr = data.computedData.map((gridData, gridIndex) => {
+        const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
+        const seriesContainerArr = gridData.map((seriesData, seriesIndex) => {
+          const container = gridContainerLayout[accGridSlotIndex]
+          if (grid.separateSeries) {
+            accGridSlotIndex += 1
+          }
+          return container
+        })
+        if (!grid.separateSeries && data.fullDataFormatter.separateGrid) {
+          accGridSlotIndex += 1
+        }
+        return seriesContainerArr
       })
-      return boxArr
+
+      // let accGridSlotIndex = 0
+
+      // const gridContainerPositionArr = data.computedData.map((gridData, gridIndex) => {
+      //   const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
+        
+      //   if (grid.separateSeries) {
+      //     // -- 依seriesSlotIndexes計算 --
+      //     const seriesContainerArr = gridData.map((seriesData, seriesIndex) => {
+      //       const currentSlotIndex = accGridSlotIndex + seriesIndex
+      //       const columnIndex = currentSlotIndex % data.fullDataFormatter.container.columnAmount
+      //       const rowIndex = Math.floor(currentSlotIndex / data.fullDataFormatter.container.columnAmount)
+      //       const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+      //       return {
+      //         slotIndex: currentSlotIndex,
+      //         rowIndex,
+      //         columnIndex,
+      //         translate,
+      //         scale,
+      //       }
+      //     })
+      //     accGridSlotIndex += seriesContainerArr.length
+      //     return seriesContainerArr
+      //   } else {
+      //     // -- 依grid的slotIndex計算 --
+      //     const columnIndex = accGridSlotIndex % data.fullDataFormatter.container.columnAmount
+      //     const rowIndex = Math.floor(accGridSlotIndex / data.fullDataFormatter.container.columnAmount)
+      //     const seriesContainerArr = gridData.map((seriesData, seriesIndex) => {
+      //       const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+      //       return {
+      //         slotIndex: accGridSlotIndex,
+      //         rowIndex,
+      //         columnIndex,
+      //         translate,
+      //         scale,
+      //       }
+      //     })
+      //     if (data.fullDataFormatter.separateGrid) {
+      //       accGridSlotIndex += 1
+      //     }
+      //     return seriesContainerArr
+      //   }
+      // })
+
+      return gridContainerPositionArr
     }),
   )
-
-  return multiGridContainer$
 }

package/src/multiValue/computeMultiValueData.ts

@@ -7,11 +7,17 @@ import { createAxisLinearScale, createAxisPointScale } from '../utils/d3Utils'
 import { getMinAndMaxValue } from '../utils/orbchartsUtils'
 
 export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) => {
-  const { data, dataFormatter, chartParams, layout } = context
+  const { data, dataFormatter, chartParams } = context
   if (!data.length) {
     return []
   }
 
+  // @Q@ 假資料待改寫
+  const layout = {
+    width: 1000,
+    height: 1000
+  }
+
   let computedDataMultiValue: ComputedDatumMultiValue[][] = []
 
   try {
@@ -85,18 +91,18 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
       dataFormatter.yAxis.scaleDomain[1] === 'auto' ? yMaxValue : dataFormatter.yAxis.scaleDomain[1]
     ]
     
-    // 篩選顯示狀態
-    const visibleFilter = (datum: DataMultiValueDatum, rowIndex: number, columnIndex: number, context: DataFormatterContext<"multiValue">) => {
-      // 如果不在scale的範圍內則為false，不再做visibleFilter的判斷
-      if (columnIndex === 0 && datum.value != null && ((datum.value as number) < _xScaleDoamin[0] || datum.value > _xScaleDoamin[1])) {
-        return false
-      }
-      if (columnIndex === 1 && datum.value != null && (datum.value < _yScaleDoamin[0] || datum.value > _yScaleDoamin[1])) {
-        return false
-      }
+    // // 篩選顯示狀態
+    // const visibleFilter = (datum: DataMultiValueDatum, rowIndex: number, columnIndex: number, context: DataFormatterContext<"multiValue">) => {
+    //   // 如果不在scale的範圍內則為false，不再做visibleFilter的判斷
+    //   if (columnIndex === 0 && datum.value != null && ((datum.value as number) < _xScaleDoamin[0] || datum.value > _xScaleDoamin[1])) {
+    //     return false
+    //   }
+    //   if (columnIndex === 1 && datum.value != null && (datum.value < _yScaleDoamin[0] || datum.value > _yScaleDoamin[1])) {
+    //     return false
+    //   }
       
-      return dataFormatter.visibleFilter(datum, rowIndex, columnIndex, context)
-    }
+    //   return dataFormatter.visibleFilter(datum, rowIndex, columnIndex, context)
+    // }
   
     let index = 0
   
@@ -106,8 +112,6 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
         index++
   
         const defaultId = createDefaultDatumId(dataFormatter.type, i, _i)
-        // const visible = dataFormatter.visibleFilter(_d, i, _i, context)
-        const visible = visibleFilter(_d, i, _i, context)
   
         const computedDatum: ComputedDatumMultiValue = {
           id: _d.id ? _d.id : defaultId,
@@ -121,9 +125,12 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
           categoryLabel: '', // @Q@ 未完成
           // valueLabel: formatValueToLabel(_d.value, dataFormatter.multiValue[_i].valueFormat),
           axis: _i == 0 ? xScale(_d.value) : yScale(_d.value),
-          visible,
+          visible: true, // 先給預設值
           color: '' // @Q@ 未完成
         }
+
+        computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
+
         return computedDatum
       })
     })

package/src/relationship/computeRelationshipData.ts

@@ -28,7 +28,7 @@ export const computeRelationshipData: ComputedDataFn<'relationship'> = (context)
 
     // -- nodes --
     computedNodes = nodes.map((node, i) => {
-      return {
+      const computedNode: ComputedNode = {
         id: node.id,
         index: i,
         label: node.label ?? '',
@@ -43,15 +43,16 @@ export const computeRelationshipData: ComputedDataFn<'relationship'> = (context)
         startNodeIds: [], // 後面再取得資料
         endNodes: [], // 後面再取得資料
         endNodeIds: [], // 後面再取得資料
-        visible: dataFormatter.visibleFilter(node, 0, i, context) // 0代表node
+        visible: true // 後面再取得資料
       }
+      return computedNode
     })
 
     const NodesMap: Map<string, ComputedNode> = new Map(computedNodes.map(d => [d.id, d]))
 
     // -- edges --
     computedEdges = edges.map((edge, i) => {
-      return {
+      const computedEdge: ComputedEdge = {
         id: edge.id,
         index: i,
         label: edge.label ?? '',
@@ -63,8 +64,10 @@ export const computeRelationshipData: ComputedDataFn<'relationship'> = (context)
         startNodeId: edge.start,
         endNode: NodesMap.get(edge.end),
         endNodeId: edge.end,
-        visible: dataFormatter.visibleFilter(edge, 1, i, context) // 1代表edge
+        visible: true // 先給預設值
       }
+
+      return computedEdge
     })
 
     const StartNodesMap: Map<string, ComputedNode[]> = (function () {
@@ -93,6 +96,15 @@ export const computeRelationshipData: ComputedDataFn<'relationship'> = (context)
       node.startNodeIds = node.startNodes.map(d => d.id)
       node.endNodes = EndNodesMap.get(nodeId)
       node.endNodeIds = node.endNodes.map(d => d.id)
+      node.visible = dataFormatter.visibleFilter(node, context)
+    })
+
+    // -- 補齊edges資料 --
+    computedEdges = computedEdges.map(edge => {
+      edge.visible = edge.startNode.visible && edge.endNode.visible
+        ? true
+        : false
+      return edge
     })
   } catch (e) {
     // console.error(e)