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

package/src/multiValue/computeMultiValueData.ts

@@ -1,136 +1,143 @@
-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: '',
-            description: '',
-            // tooltipContent: '',
-            data: {},
-            categoryLabel: '',
-            value: _d
-          }
-          : {
-            id: _d.id ?? '',
-            label: _d.label ?? '',
-            description: _d.description ?? '',
-            // tooltipContent: _d.tooltipContent ?? '',
-            data: _d.data ?? {},
-            categoryLabel: _d.categoryLabel ??'',
-            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,
-          description: _d.description ?? '',
-          // tooltipContent: _d.tooltipContent ? _d.tooltipContent : dataFormatter.tooltipContentFormat(_d, i, _i, context),
-          data: _d.data,
-          value: _d.value,
-          categoryIndex: 0, // @Q@ 未完成
-          categoryLabel: '', // @Q@ 未完成
-          // valueLabel: formatValueToLabel(_d.value, dataFormatter.multiValue[_i].valueFormat),
-          axis: _i == 0 ? xScale(_d.value) : yScale(_d.value),
-          visible,
-          color: '' // @Q@ 未完成
-        }
-        return computedDatum
-      })
-    })
-  } catch (e) {
-    // console.error(e)
-    throw Error(e)
-  }
-
-  return computedDataMultiValue
-}
+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 } = context
+  if (!data.length) {
+    return []
+  }
+
+  // @Q@ 假資料待改寫
+  const layout = {
+    width: 1000,
+    height: 1000
+  }
+
+  let computedDataMultiValue: ComputedDatumMultiValue[][] = []
+
+  try {
+    const dataMultiValue: DataMultiValueDatum[][] = data.map((d, i) => {
+      return d.map((_d, _i) => {
+        const datum: DataMultiValueDatum = typeof _d === 'number'
+          ? {
+            id: '',
+            label: '',
+            description: '',
+            // tooltipContent: '',
+            data: {},
+            categoryLabel: '',
+            value: _d
+          }
+          : {
+            id: _d.id ?? '',
+            label: _d.label ?? '',
+            description: _d.description ?? '',
+            // tooltipContent: _d.tooltipContent ?? '',
+            data: _d.data ?? {},
+            categoryLabel: _d.categoryLabel ??'',
+            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 computedDatum: ComputedDatumMultiValue = {
+          id: _d.id ? _d.id : defaultId,
+          index: currentIndex,
+          label: _d.label ? _d.label : defaultId,
+          description: _d.description ?? '',
+          // tooltipContent: _d.tooltipContent ? _d.tooltipContent : dataFormatter.tooltipContentFormat(_d, i, _i, context),
+          data: _d.data,
+          value: _d.value,
+          categoryIndex: 0, // @Q@ 未完成
+          categoryLabel: '', // @Q@ 未完成
+          // valueLabel: formatValueToLabel(_d.value, dataFormatter.multiValue[_i].valueFormat),
+          axis: _i == 0 ? xScale(_d.value) : yScale(_d.value),
+          visible: true, // 先給預設值
+          color: '' // @Q@ 未完成
+        }
+
+        computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
+
+        return computedDatum
+      })
+    })
+  } catch (e) {
+    // console.error(e)
+    throw Error(e)
+  }
+
+  return computedDataMultiValue
+}

package/src/multiValue/createMultiValueContextObserver.ts

@@ -1,12 +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$,
-  }
-}
+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

@@ -1,106 +1,118 @@
-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 ?? '',
-        description: node.description ?? '',
-        // tooltipContent: node.tooltipContent ? node.tooltipContent : dataFormatter.tooltipContentFormat(node, 0, i, context), // 0代表node
-        data: node.data ?? {},
-        value: node.value ?? 0,
-        categoryIndex: 0, // @Q@ 未完成
-        categoryLabel: '', // @Q@ 未完成
-        color: '', // @Q@ 未完成
-        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 ?? '',
-        description: edge.description ?? '',
-        // 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
-  }
-}
+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) => {
+      const computedNode: ComputedNode = {
+        id: node.id,
+        index: i,
+        label: node.label ?? '',
+        description: node.description ?? '',
+        // tooltipContent: node.tooltipContent ? node.tooltipContent : dataFormatter.tooltipContentFormat(node, 0, i, context), // 0代表node
+        data: node.data ?? {},
+        value: node.value ?? 0,
+        categoryIndex: 0, // @Q@ 未完成
+        categoryLabel: '', // @Q@ 未完成
+        color: '', // @Q@ 未完成
+        startNodes: [], // 後面再取得資料
+        startNodeIds: [], // 後面再取得資料
+        endNodes: [], // 後面再取得資料
+        endNodeIds: [], // 後面再取得資料
+        visible: true // 後面再取得資料
+      }
+      return computedNode
+    })
+
+    const NodesMap: Map<string, ComputedNode> = new Map(computedNodes.map(d => [d.id, d]))
+
+    // -- edges --
+    computedEdges = edges.map((edge, i) => {
+      const computedEdge: ComputedEdge = {
+        id: edge.id,
+        index: i,
+        label: edge.label ?? '',
+        description: edge.description ?? '',
+        // 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: true // 先給預設值
+      }
+
+      return computedEdge
+    })
+
+    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)
+      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)
+    throw Error(e)
+  }
+
+  return {
+    nodes: computedNodes,
+    edges: computedEdges
+  }
+}

package/src/relationship/createRelationshipContextObserver.ts

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