@orbcharts/core 3.0.0-alpha.21

package/src/grid/gridObservables.ts

@@ -0,0 +1,359 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable } from 'rxjs'
+import type {
+  AxisPosition,
+  ChartType,
+  ChartParams,
+  ComputedDataTypeMap,
+  ComputedDatumTypeMap,
+  ContextObserverFn,
+  DataTypeMap,
+  DataFormatterTypeMap,
+  DataFormatterGrid,
+  DataFormatterContext,
+  DataFormatterValueAxis,
+  DataFormatterGroupAxis,
+  HighlightTarget,
+  Layout,
+  TransformData } from '../types'
+import { getMinAndMaxGrid, transposeData } from '../utils/orbchartsUtils'
+import { createAxisLinearScale, createAxisPointScale, createAxisQuantizeScale } from '../utils/d3Utils'
+import { highlightObservable } from '../utils/observables'
+
+export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
+  layout$: Observable<Layout>
+}): Observable<TransformData> => {
+  const destroy$ = new Subject()
+
+  function calcAxesTransform ({ xAxis, yAxis, width, height }: {
+    xAxis: DataFormatterGroupAxis | DataFormatterValueAxis,
+    yAxis: DataFormatterValueAxis,
+    width: number,
+    height: number
+  }): TransformData {
+    if (!xAxis || !yAxis) {
+      return {
+        translate: [0, 0],
+        scale: [0, 0],
+        rotate: 0,
+        rotateX: 0,
+        rotateY: 0,
+        value: ''
+      }
+    }
+    // const width = size.width - fullChartParams.layout.left - fullChartParams.layout.right
+    // const height = size.height - fullChartParams.layout.top - fullChartParams.layout.bottom
+    let translateX = 0
+    let translateY = 0
+    let rotate = 0
+    let rotateX = 0
+    let rotateY = 0
+    if (xAxis.position === 'bottom') {
+      if (yAxis.position === 'left') {
+        rotateX = 180
+        translateY = height
+      } else if (yAxis.position === 'right') {
+        rotateX = 180
+        rotateY = 180
+        translateX = width
+        translateY = height
+      } else {
+        // 預設
+        rotateX = 180
+        translateY = height
+      }
+    } else if (xAxis.position === 'top') {
+      if (yAxis.position === 'left') {
+      } else if (yAxis.position === 'right') {
+        rotateY = 180
+        translateX = width
+      } else {
+        // 預設
+        rotateX = 180
+        translateY = height
+      }
+    } else if (xAxis.position === 'left') {
+      if (yAxis.position === 'bottom') {
+        rotate = -90
+        translateY = height
+      } else if (yAxis.position === 'top') {
+        rotate = -90
+        rotateY = 180
+      } else {
+        // 預設
+        rotateX = 180
+        translateY = height
+      }
+    } else if (xAxis.position === 'right') {
+      if (yAxis.position === 'bottom') {
+        rotate = -90
+        rotateX = 180
+        translateY = height
+        translateX = width
+      } else if (yAxis.position === 'top') {
+        rotate = -90
+        translateX = width
+      } else {
+        // 預設
+        rotateX = 180
+        translateY = height
+      }
+    }
+    
+    // selection.style('transform', `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`)
+  
+    return {
+      translate: [translateX, translateY],
+      scale: [0, 0],
+      rotate,
+      rotateX,
+      rotateY,
+      value: `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
+    }
+  }
+
+  return new Observable(subscriber => {
+    combineLatest({
+      fullDataFormatter: fullDataFormatter$,
+      layout: layout$
+    }).pipe(
+      takeUntil(destroy$)
+    ).subscribe(data => {
+      const axesTransformData = calcAxesTransform({
+        xAxis: data.fullDataFormatter.groupAxis,
+        yAxis: data.fullDataFormatter.valueAxis,
+        width: data.layout.width,
+        height: data.layout.height
+      })
+    
+      subscriber.next(axesTransformData)
+    })
+
+    return function unscbscribe () {
+      destroy$.next(undefined)
+    }
+  })
+}
+
+export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'grid'>>
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
+  layout$: Observable<Layout>
+}): Observable<TransformData> => {
+  const destroy$ = new Subject()
+
+  function calcGridDataAreaTransform ({ data, groupAxis, valueAxis, width, height }: {
+    data: ComputedDataTypeMap<'grid'>
+    groupAxis: DataFormatterGroupAxis
+    valueAxis: DataFormatterValueAxis
+    width: number
+    height: number
+  }): TransformData {
+    let translateX = 0
+    let translateY = 0
+    let scaleX = 0
+    let scaleY = 0
+  
+    // -- groupScale --
+    const groupAxisWidth = (groupAxis.position === 'top' || groupAxis.position === 'bottom')
+      ? width
+      : height
+    const groupMin = 0
+    const groupMax = data[0] ? data[0].length - 1 : 0
+    const groupScaleDomainMin = groupAxis.scaleDomain[0] === 'auto'
+      ? groupMin - groupAxis.scalePadding
+      : groupAxis.scaleDomain[0] as number - groupAxis.scalePadding
+    const groupScaleDomainMax = groupAxis.scaleDomain[1] === 'auto'
+      ? groupMax + groupAxis.scalePadding
+      : groupAxis.scaleDomain[1] as number + groupAxis.scalePadding
+    
+    const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+      maxValue: groupMax,
+      minValue: groupMin,
+      axisWidth: groupAxisWidth,
+      // scaleDomain: groupAxis.scaleDomain,
+      scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
+      scaleRange: [0, 1]
+    })
+  
+    // -- translateX, scaleX --
+    const rangeMinX = groupScale(groupMin)
+    const rangeMaxX = groupScale(groupMax)
+    translateX = rangeMinX
+    const gWidth = rangeMaxX - rangeMinX
+    scaleX = gWidth / groupAxisWidth
+  
+    // -- valueScale --
+    const filteredData = data.map((d, i) => {
+      return d.filter((_d, _i) => {
+        return _i >= groupScaleDomainMin && _i <= groupScaleDomainMax && _d.visible == true
+      })
+    })
+  
+    const filteredMinAndMax = getMinAndMaxGrid(filteredData)
+  
+    const valueAxisWidth = (valueAxis.position === 'left' || valueAxis.position === 'right')
+      ? height
+      : width
+  
+    const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+      maxValue: filteredMinAndMax[1],
+      minValue: filteredMinAndMax[0],
+      axisWidth: valueAxisWidth,
+      scaleDomain: valueAxis.scaleDomain,
+      scaleRange: valueAxis.scaleRange
+    })
+  
+    // -- translateY, scaleY --
+    const minAndMax = getMinAndMaxGrid(data)
+    const rangeMinY = valueScale(minAndMax[0])
+    const rangeMaxY = valueScale(minAndMax[1])
+    translateY = rangeMinY
+    const gHeight = rangeMaxY - rangeMinY
+    scaleY = gHeight / valueAxisWidth
+  
+    return {
+      translate: [translateX, translateY],
+      scale: [scaleX, scaleY],
+      rotate: 0,
+      rotateX: 0,
+      rotateY: 0,
+      value: `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`
+    }
+  }
+
+  return new Observable(subscriber => {
+    combineLatest({
+      computedData: computedData$,
+      fullDataFormatter: fullDataFormatter$,
+      layout: layout$
+    }).pipe(
+      takeUntil(destroy$)
+    ).subscribe(data => {
+      const dataAreaTransformData = calcGridDataAreaTransform ({
+        data: data.computedData,
+        groupAxis: data.fullDataFormatter.groupAxis,
+        valueAxis: data.fullDataFormatter.valueAxis,
+        width: data.layout.width,
+        height: data.layout.height
+      })
+    
+      subscriber.next(dataAreaTransformData)
+    })
+
+    return function unscbscribe () {
+      destroy$.next(undefined)
+    }
+  })
+}
+
+export const gridAxesOppositeTransformObservable = ({ gridAxesTransform$ }: {
+  gridAxesTransform$: Observable<TransformData>
+}): Observable<TransformData> => {
+  return gridAxesTransform$.pipe(
+    map(d => {
+      // const translate: [number, number] = [d.translate[0] * -1, d.translate[1] * -1]
+      const translate: [number, number] = [0, 0] // 無需逆轉
+      const scale: [number, number] = [d.scale[0] * -1, d.scale[1] * -1]
+      const rotate = d.rotate * -1
+      const rotateX = d.rotateX * -1
+      const rotateY = d.rotateY * -1
+      return {
+        translate,
+        scale,
+        rotate,
+        rotateX,
+        rotateY,
+        value: `translate(${translate[0]}px, ${translate[1]}px) rotate(${rotate}deg) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
+      }
+    }),
+  )
+}
+
+export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
+  fullDataFormatter$: Observable<DataFormatterGrid>
+  layout$: Observable<Layout>
+}): Observable<{
+  width: number;
+  height: number;
+}> => {
+  const destroy$ = new Subject()
+
+  function calcAxesSize ({ xAxisPosition, yAxisPosition, width, height }: {
+    xAxisPosition: AxisPosition
+    yAxisPosition: AxisPosition
+    width: number
+    height: number
+  }) {
+    if ((xAxisPosition === 'bottom' || xAxisPosition === 'top') && (yAxisPosition === 'left' || yAxisPosition === 'right')) {
+      return { width, height }
+    } else if ((xAxisPosition === 'left' || xAxisPosition === 'right') && (yAxisPosition === 'bottom' || yAxisPosition === 'top')) {
+      return {
+        width: height,
+        height: width
+      }
+    }
+  }
+
+  return new Observable(subscriber => {
+    combineLatest({
+      fullDataFormatter: fullDataFormatter$,
+      layout: layout$
+    }).pipe(
+      takeUntil(destroy$),
+      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
+      switchMap(async (d) => d),
+    ).subscribe(data => {
+      
+      const axisSize = calcAxesSize({
+        xAxisPosition: data.fullDataFormatter.groupAxis.position,
+        yAxisPosition: data.fullDataFormatter.valueAxis.position,
+        width: data.layout.width,
+        height: data.layout.height,
+      })
+
+      subscriber.next(axisSize)
+
+      return function unsubscribe () {
+        destroy$.next(undefined)
+      }
+    })
+  })
+}
+
+// export const gridHighlightObservable = ({ computedData$, fullChartParams$, event$ }: {
+//   computedData$: Observable<ComputedDataTypeMap<'grid'>>
+//   fullChartParams$: Observable<ChartParams>
+//   event$: Subject<any>
+// }): Observable<string[]> => {
+//   const datumList$ = computedData$.pipe(
+//     map(d => d.flat())
+//   )
+//   return highlightObservable ({ datumList$, fullChartParams$, event$ })
+// }
+
+export const gridVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'grid'>> }) => {
+  return computedData$.pipe(
+    map(data => {
+      const visibleComputedData = data
+        .map(d => {
+          return d.filter(_d => {
+            return _d.visible == true
+          })
+        })
+        .filter(d => d.length)
+      return visibleComputedData
+    })
+  )
+}
+

package/src/index.ts

@@ -0,0 +1,21 @@
+
+export { SeriesChart } from './SeriesChart'
+export { GridChart } from './GridChart'
+export { MultiGridChart } from './MultiGridChart'
+export { MultiValueChart } from './MultiValueChart'
+export { RelationshipChart } from './RelationshipChart'
+export { TreeChart } from './TreeChart'
+
+export { defineSeriesPlugin } from './defineSeriesPlugin'
+export { defineGridPlugin } from './defineGridPlugin'
+export { defineMultiGridPlugin } from './defineMultiGridPlugin'
+export { defineMultiValuePlugin } from './defineMultiValuePlugin'
+export { defineNoneDataPlugin } from './defineNoneDataPlugin'
+export { defineRelationshipPlugin } from './defineRelationshipPlugin'
+export { defineTreePlugin } from './defineTreePlugin'
+
+export * from './types'
+export * from './utils'
+
+
+

package/src/multiGrid/computeMultiGridData.ts

@@ -0,0 +1,48 @@
+import type { ComputedDataFn } from '../types/ComputedData'
+import type { DataFormatterGrid } from '../types/DataFormatterGrid'
+import type { ComputedDataGrid } from '../types/ComputedDataGrid'
+import { computeGridData } from '../grid/computeGridData'
+
+export const computeMultiGridData: ComputedDataFn<'multiGrid'> = ({ data = [], dataFormatter, chartParams, layout }) => {
+  if (!data.length) {
+    return []
+  }
+
+  let multiGridData: ComputedDataGrid[] = []
+
+  try {
+    multiGridData = data.map((d, i) => {
+      const dataFormatterGrid: DataFormatterGrid = {
+        ...dataFormatter.multiGrid[i],
+        type: `multiGrid_${i}` as any, // 非規範的名稱，用作 datum id 前綴
+        // colors: dataFormatter.colors,
+        colorsPredicate: dataFormatter.multiGrid[i].colorsPredicate,
+        visibleFilter: dataFormatter.visibleFilter as any, // 用any避開function參數型別不同
+        // padding: dataFormatter.padding,
+        tooltipContentFormat: dataFormatter.tooltipContentFormat as any, // 用any避開function參數型別不同
+      }
+      // const layoutGrid: ComputedLayoutBase = {
+      //   width: layout.width,
+      //   height: layout.height,
+      //   top: layout.top,
+      //   right: layout.right,
+      //   bottom: layout.bottom,
+      //   left: layout.left,
+      //   rootWidth: layout.rootWidth,
+      //   rootHeight: layout.rootHeight,
+      //   // content: layout.content[i]
+      // }
+      return computeGridData({
+        data: d,
+        dataFormatter: dataFormatterGrid,
+        chartParams,
+        layout
+      })
+    })
+  } catch (e) {
+    // console.error(e)
+    throw Error(e)
+  }
+
+  return multiGridData
+}

package/src/multiGrid/createMultiGridContextObserver.ts

@@ -0,0 +1,12 @@
+import type { ContextObserverFn } from '../types'
+
+export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({ subject, observer }) => {
+
+  return {
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
+    layout$: observer.layout$,
+  }
+}

package/src/multiValue/computeMultiValueData.ts

@@ -0,0 +1,127 @@
+import type { DataMultiValue, DataMultiValueDatum } from '../types/DataMultiValue'
+import type { DataFormatterContext } from '../types/DataFormatter'
+import type { ComputedDataFn } from '../types/ComputedData'
+import type { ComputedDataMultiValue, ComputedDatumMultiValue } from '../types/ComputedDataMultiValue'
+import { formatValueToLabel, createDefaultDatumId } from '../utils/orbchartsUtils'
+import { createAxisLinearScale, createAxisPointScale } from '../utils/d3Utils'
+import { getMinAndMaxValue } from '../utils/orbchartsUtils'
+
+export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) => {
+  const { data, dataFormatter, chartParams, layout } = context
+  if (!data.length) {
+    return []
+  }
+
+  let computedDataMultiValue: ComputedDatumMultiValue[][] = []
+
+  try {
+    const dataMultiValue: DataMultiValueDatum[][] = data.map((d, i) => {
+      return d.map((_d, _i) => {
+        const datum: DataMultiValueDatum = typeof _d === 'number'
+          ? {
+            id: '',
+            label: '',
+            tooltipContent: '',
+            data: {},
+            value: _d
+          }
+          : {
+            id: _d.id ?? '',
+            label: _d.label ?? '',
+            tooltipContent: _d.tooltipContent ?? '',
+            data: _d.data ?? {},
+            value: _d.value
+          }
+        
+        return datum
+      })
+    })
+  
+    // x軸資料最小及最大值（第二維陣列中的第1筆為x軸資料）
+    const [xMinValue, xMaxValue] = getMinAndMaxValue(dataMultiValue.map(d => d[0]))
+    // y軸資料最小及最大值（第二維陣列中的第2筆為y軸資料）
+    const [yMinValue, yMaxValue] = getMinAndMaxValue(dataMultiValue.map(d => d[1]))
+  
+    // const axisWidth = layout.width - dataFormatter.padding.left - dataFormatter.padding.right
+    // const axisHeight = layout.height - dataFormatter.padding.top - dataFormatter.padding.bottom
+    // const axisWidth = layout.width
+    // const axisHeight = layout.height
+    const xAxisWidth = (dataFormatter.xAxis.position === 'top' || dataFormatter.xAxis.position === 'bottom')
+      ? layout.width
+      : layout.height
+    const yAxisWidth = (dataFormatter.yAxis.position === 'left' || dataFormatter.yAxis.position === 'right')
+      ? layout.height
+      : layout.width
+  
+    const xScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+      maxValue: xMaxValue,
+      minValue: xMinValue,
+      axisWidth: xAxisWidth,
+      // scaleDomain: dataFormatter.xAxis.scaleDomain,
+      // scaleRange: dataFormatter.xAxis.scaleRange
+      scaleDomain: [xMinValue, xMaxValue],
+      scaleRange: [0, 1]
+    })
+    const yScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+      maxValue: yMaxValue,
+      minValue: yMinValue,
+      axisWidth: yAxisWidth,
+      // scaleDomain: dataFormatter.yAxis.scaleDomain,
+      // scaleRange: dataFormatter.yAxis.scaleRange
+      scaleDomain: [yMinValue, yMaxValue],
+      scaleRange: [0, 1]
+    })
+
+    const _xScaleDoamin: [number, number] = [
+      dataFormatter.xAxis.scaleDomain[0] === 'auto' ? xMinValue : dataFormatter.xAxis.scaleDomain[0],
+      dataFormatter.xAxis.scaleDomain[1] === 'auto' ? xMaxValue : dataFormatter.xAxis.scaleDomain[1]
+    ]
+    const _yScaleDoamin: [number, number] = [
+      dataFormatter.yAxis.scaleDomain[0] === 'auto' ? yMinValue : dataFormatter.yAxis.scaleDomain[0],
+      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
+      }
+      
+      return dataFormatter.visibleFilter(datum, rowIndex, columnIndex, context)
+    }
+  
+    let index = 0
+  
+    computedDataMultiValue = dataMultiValue.map((d, i) => {
+      return d.map((_d, _i) => {
+        const currentIndex = index
+        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,
+          index: currentIndex,
+          label: _d.label ? _d.label : defaultId,
+          tooltipContent: _d.tooltipContent ? _d.tooltipContent : dataFormatter.tooltipContentFormat(_d, i, _i, context),
+          data: _d.data,
+          value: _d.value,
+          // valueLabel: formatValueToLabel(_d.value, dataFormatter.multiValue[_i].valueFormat),
+          axis: _i == 0 ? xScale(_d.value) : yScale(_d.value),
+          visible
+        }
+        return computedDatum
+      })
+    })
+  } catch (e) {
+    // console.error(e)
+    throw Error(e)
+  }
+
+  return computedDataMultiValue
+}

package/src/multiValue/createMultiValueContextObserver.ts

@@ -0,0 +1,12 @@
+import type { ContextObserverFn } from '../types'
+
+export const createMultiValueContextObserver: ContextObserverFn<'multiValue'> = ({ subject, observer }) => {
+
+  return {
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
+    layout$: observer.layout$,
+  }
+}

package/src/relationship/computeRelationshipData.ts

@@ -0,0 +1,101 @@
+import type { DataRelationship, DataRelationshipObj, DataRelationshipList, Node, Edge } from '../types/DataRelationship'
+import type { ComputedDataFn } from '../types/ComputedData'
+import type { ComputedDataRelationship, ComputedNode, ComputedEdge } from '../types/ComputedDataRelationship'
+
+export const computeRelationshipData: ComputedDataFn<'relationship'> = (context) => {
+  const { data, dataFormatter, chartParams } = context
+
+  let computedNodes: ComputedNode[] = []
+  let computedEdges: ComputedEdge[] = []
+
+  try {
+    // -- 取得nodes和edges資料 --
+    let nodes: Node[] = []
+    let edges: Edge[] = []
+    if ((data as DataRelationshipObj).nodes) {
+      nodes = (data as DataRelationshipObj).nodes
+      edges = (data as DataRelationshipObj).edges
+    } else if ((data as DataRelationshipList)[0]) {
+      nodes = (data as DataRelationshipList)[0]
+      edges = (data as DataRelationshipList)[1]
+    } else {
+      // 無值直接回傳
+      return {
+        nodes: [],
+        edges: []
+      } as ComputedDataRelationship
+    }
+
+    // -- nodes --
+    computedNodes = nodes.map((node, i) => {
+      return {
+        id: node.id,
+        index: i,
+        label: node.label ?? '',
+        tooltipContent: node.tooltipContent ? node.tooltipContent : dataFormatter.tooltipContentFormat(node, 0, i, context), // 0代表node
+        data: node.data ?? {},
+        value: node.value ?? 0,
+        startNodes: [], // 後面再取得資料
+        startNodeIds: [], // 後面再取得資料
+        endNodes: [], // 後面再取得資料
+        endNodeIds: [], // 後面再取得資料
+        visible: dataFormatter.visibleFilter(node, 0, i, context) // 0代表node
+      }
+    })
+
+    const NodesMap: Map<string, ComputedNode> = new Map(computedNodes.map(d => [d.id, d]))
+
+    // -- edges --
+    computedEdges = edges.map((edge, i) => {
+      return {
+        id: edge.id,
+        index: i,
+        label: edge.label ?? '',
+        tooltipContent: edge.tooltipContent ? edge.tooltipContent : dataFormatter.tooltipContentFormat(edge, 1, i, context), // 1代表edge
+        data: edge.data ?? {},
+        value: edge.value ?? 0,
+        startNode: NodesMap.get(edge.start),
+        startNodeId: edge.start,
+        endNode: NodesMap.get(edge.end),
+        endNodeId: edge.end,
+        visible: dataFormatter.visibleFilter(edge, 1, i, context) // 1代表edge
+      }
+    })
+
+    const StartNodesMap: Map<string, ComputedNode[]> = (function () {
+      const _StartNodesMap = new Map()
+      computedEdges.forEach(edge => {
+        const startNodes: ComputedNode[] = _StartNodesMap.get(edge.endNodeId) ?? []
+        startNodes.push(edge.startNode)
+        _StartNodesMap.set(edge.endNodeId, startNodes)
+      })
+      return _StartNodesMap
+    })()
+    
+    const EndNodesMap: Map<string, ComputedNode[]> = (function () {
+      const _EndNodesMap = new Map()
+      computedEdges.forEach(edge => {
+        const endNodes: ComputedNode[] = _EndNodesMap.get(edge.startNodeId) ?? []
+        endNodes.push(edge.endNode)
+        _EndNodesMap.set(edge.startNodeId, endNodes)
+      })
+      return _EndNodesMap
+    })()
+
+    // -- 補齊nodes資料 --
+    Array.from(NodesMap).forEach(([nodeId, node]) => {
+      node.startNodes = StartNodesMap.get(nodeId)
+      node.startNodeIds = node.startNodes.map(d => d.id)
+      node.endNodes = EndNodesMap.get(nodeId)
+      node.endNodeIds = node.endNodes.map(d => d.id)
+    })
+  } catch (e) {
+    // console.error(e)
+    throw Error(e)
+  }
+
+  return {
+    nodes: computedNodes,
+    edges: computedEdges
+  }
+}