@orbcharts/core 3.0.0-beta.1 → 3.0.0-beta.11

package/src/multiValue/computedDataFn.ts

@@ -1,7 +1,6 @@
 import type { DataMultiValueDatum, ComputedDataFn, ComputedDatumMultiValue } from '../../lib/core-types'
-import { formatValueToLabel, createDefaultDatumId } from '../utils/orbchartsUtils'
-import { createAxisLinearScale, createAxisPointScale } from '../utils/d3Utils'
-import { getMinAndMaxValue } from '../utils/orbchartsUtils'
+import { createDefaultCategoryLabel, createDefaultDatumId, seriesColorPredicate } from '../utils/orbchartsUtils'
+import { isPlainObject } from '../utils'
 
 export const computedDataFn: ComputedDataFn<'multiValue'> = (context) => {
   const { data, dataFormatter, chartParams } = context
@@ -9,163 +8,98 @@ export const computedDataFn: ComputedDataFn<'multiValue'> = (context) => {
     return []
   }
 
-  // @Q@ 假資料待改寫
-  const layout = {
-    width: 1000,
-    height: 1000
-  }
+  const defaultCategoryLabel = createDefaultCategoryLabel()
 
   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],
-      (() => {
-        if (dataFormatter.xAxis.scaleDomain[0] === 'auto') {
-          return xMinValue < 0 ? xMinValue : 0
-        } else if (dataFormatter.xAxis.scaleDomain[0] === 'min') {
-          return xMinValue
-        } else {
-          return dataFormatter.xAxis.scaleDomain[0]
+    const dataMultiValue: DataMultiValueDatum[] = data.map((d, i) => {
+      if (Array.isArray(d)) {
+        return {
+          id: '',
+          label: '',
+          description: '',
+          // tooltipContent: '',
+          data: {},
+          categoryLabel: defaultCategoryLabel,
+          value: d
         }
-      })(),
-      // dataFormatter.xAxis.scaleDomain[1] === 'auto' ? xMaxValue : dataFormatter.xAxis.scaleDomain[1]
-      (() => {
-        if (dataFormatter.xAxis.scaleDomain[1] === 'auto') {
-          return xMaxValue >= 0 ? xMaxValue : 0
-        } else if (dataFormatter.xAxis.scaleDomain[1] === 'max') {
-          return xMaxValue
-        } else {
-          return dataFormatter.xAxis.scaleDomain[1]
+      } else if (isPlainObject(d)) {
+        return {
+          id: d.id ?? '',
+          label: d.label ?? '',
+          description: d.description ?? '',
+          // tooltipContent: _d.tooltipContent ?? '',
+          data: d.data ?? {},
+          categoryLabel: d.categoryLabel ?? defaultCategoryLabel,
+          value: d.value
         }
-      })()
-    ]
-    const _yScaleDoamin: [number, number] = [
-      // dataFormatter.yAxis.scaleDomain[0] === 'auto' ? yMinValue : dataFormatter.yAxis.scaleDomain[0],
-      (() => {
-        if (dataFormatter.yAxis.scaleDomain[0] === 'auto') {
-          return xMinValue < 0 ? xMinValue : 0
-        } else if (dataFormatter.yAxis.scaleDomain[0] === 'min') {
-          return xMinValue
-        } else {
-          return dataFormatter.yAxis.scaleDomain[0]
+      } else {
+        return {
+          id: '',
+          label: '',
+          description: '',
+          // tooltipContent: '',
+          data: {},
+          categoryLabel: defaultCategoryLabel,
+          value: []
         }
-      })(),
-      // dataFormatter.yAxis.scaleDomain[1] === 'auto' ? yMaxValue : dataFormatter.yAxis.scaleDomain[1]
-      (() => {
-        if (dataFormatter.yAxis.scaleDomain[1] === 'auto') {
-          return xMaxValue >= 0 ? xMaxValue : 0
-        } else if (dataFormatter.yAxis.scaleDomain[1] === 'max') {
-          return xMaxValue
-        } else {
-          return dataFormatter.yAxis.scaleDomain[1]
-        }
-      })()
-    ]
+      }
+    })
+
+    const categoryLabels = (() => {
+      // 先使用 dataFormatter.categoryLabels
+      const CategoryLabelsSet = new Set(dataFormatter.categoryLabels)
+      // 再加入 datum 中的 categoryLabel
+      for (let datum of dataMultiValue) {
+        const categoryLabel = datum.categoryLabel ?? defaultCategoryLabel
+        CategoryLabelsSet.add(categoryLabel) // 不重覆
+      }
+      return Array.from(CategoryLabelsSet)
+    })()
     
-    // // 篩選顯示狀態
-    // 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)
-    // }
+    // <categoryLabel, categoryIndex>
+    const CategoryIndexMap = new Map<string, number>(
+      categoryLabels.map((label, index) => [label, index])
+    )
+
   
     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@ 未完成
-        }
+    dataMultiValue.forEach((d, i) => {
+      const currentIndex = index
+      index++
+
+      const defaultId = createDefaultDatumId(dataFormatter.type, i)
+
+      const categoryIndex = CategoryIndexMap.get(d.categoryLabel) ?? 0
+
+      const color = seriesColorPredicate(categoryIndex, chartParams)
+
+      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,
+        datumIndex: i,
+        value: d.value,
+        categoryIndex,
+        categoryLabel: d.categoryLabel,
+        // valueLabel: formatValueToLabel(_d.value, dataFormatter.multiValue[_i].valueFormat),
+        // axis: _i == 0 ? xScale(_d.value) : yScale(_d.value),
+        visible: true, // 先給預設值
+        color
+      }
 
-        computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
+      computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
 
-        return computedDatum
-      })
+      // 依 categoryIndex 分組
+      if (!computedDataMultiValue[categoryIndex]) {
+        computedDataMultiValue[categoryIndex] = []
+      }
+      computedDataMultiValue[categoryIndex].push(computedDatum)
     })
   } catch (e) {
     // console.error(e)

package/src/multiValue/contextObserverCallback.ts

@@ -1,12 +1,160 @@
-import type { ContextObserverCallback } from '../../lib/core-types'
+import { map, shareReplay, distinctUntilChanged } from 'rxjs'
+import type { ContextObserverCallback, ContextObserverTypeMap } from '../../lib/core-types'
+import {
+  highlightObservable,
+  categoryDataMapObservable,
+  textSizePxObservable
+} from '../utils/observables'
+import {
+  multiValueComputedLayoutDataObservable,
+  // multiValueAxesTransformObservable,
+  // multiValueAxesReverseTransformObservable,
+  multiValueGraphicTransformObservable,
+  multiValueGraphicReverseScaleObservable,
+  multiValueCategoryLabelsObservable,
+  multiValueVisibleComputedDataObservable,
+  multiValueVisibleComputedLayoutDataObservable,
+  multiValueContainerPositionObservable,
+  minMaxXYObservable,
+  filteredMinMaxXYDataObservable
+} from '../utils/multiValueObservables'
 
 export const contextObserverCallback: ContextObserverCallback<'multiValue'> = ({ subject, observer }) => {
 
-  return {
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
+    shareReplay(1)
+  )
+
+  const isCategorySeprate$ = observer.fullDataFormatter$.pipe(
+    map(d => d.separateCategory),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+  
+  const multiValueContainerPosition$ = multiValueContainerPositionObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$,
+  })
+
+  // const multiValueAxesSize$ = multiValueAxesSizeObservable({
+  //   fullDataFormatter$: observer.fullDataFormatter$,
+  //   layout$: observer.layout$
+  // }).pipe(
+  //   shareReplay(1)
+  // )
+
+  const datumList$ = observer.computedData$.pipe(
+    map(d => d.flat().flat())
+  ).pipe(
+    shareReplay(1)
+  )
+
+  const multiValueHighlight$ = highlightObservable({
+    datumList$,
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const categoryLabels$ = multiValueCategoryLabelsObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+  })
+
+  const CategoryDataMap$ = categoryDataMapObservable({
+    datumList$: datumList$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const minMaxXY$ = minMaxXYObservable({
+    computedData$: observer.computedData$
+  }).pipe(
+    shareReplay(1)
+  )
+
+
+  const computedLayoutData$ = multiValueComputedLayoutDataObservable({
+    computedData$: observer.computedData$,
+    minMaxXY$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const visibleComputedData$ = multiValueVisibleComputedDataObservable({
+    computedData$: observer.computedData$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const visibleComputedLayoutData$ = multiValueVisibleComputedLayoutDataObservable({
+    computedLayoutData$: computedLayoutData$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const filteredMinMaxXYData$ = filteredMinMaxXYDataObservable({
+    visibleComputedLayoutData$: visibleComputedLayoutData$,
+    minMaxXY$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  // const multiValueAxesTransform$ = multiValueAxesTransformObservable({
+  //   fullDataFormatter$: observer.fullDataFormatter$,
+  //   layout$: observer.layout$
+  // }).pipe(
+  //   shareReplay(1)
+  // )
+
+  // const multiValueAxesReverseTransform$ = multiValueAxesReverseTransformObservable({
+  //   multiValueAxesTransform$
+  // }).pipe(
+  //   shareReplay(1)
+  // )
+  
+  const multiValueGraphicTransform$ = multiValueGraphicTransformObservable({
+    minMaxXY$,
+    filteredMinMaxXYData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const multiValueGraphicReverseScale$ = multiValueGraphicReverseScaleObservable({
+    multiValueContainerPosition$: multiValueContainerPosition$,
+    // multiValueAxesTransform$: multiValueAxesTransform$,
+    multiValueGraphicTransform$: multiValueGraphicTransform$,
+  })
+
+
+  return <ContextObserverTypeMap<'multiValue', any>>{
     fullParams$: observer.fullParams$,
     fullChartParams$: observer.fullChartParams$,
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
+    textSizePx$,
+    isCategorySeprate$,
+    multiValueContainerPosition$,
+    // multiValueAxesSize$,
+    multiValueHighlight$,
+    categoryLabels$,
+    CategoryDataMap$,
+    minMaxXY$,
+    computedLayoutData$,
+    visibleComputedData$,
+    visibleComputedLayoutData$,
+    filteredMinMaxXYData$,
+    // multiValueAxesTransform$,
+    // multiValueAxesReverseTransform$,
+    multiValueGraphicTransform$,
+    multiValueGraphicReverseScale$,
   }
 }

package/src/relationship/computedDataFn.ts

@@ -8,10 +8,13 @@ import type {
   ComputedNode,
   ComputedEdge
 } from '../../lib/core-types'
+import { createDefaultCategoryLabel, seriesColorPredicate } from '../utils/orbchartsUtils'
 
 export const computedDataFn: ComputedDataFn<'relationship'> = (context) => {
   const { data, dataFormatter, chartParams } = context
 
+  const defaultCategoryLabel = createDefaultCategoryLabel()
+
   let computedNodes: ComputedNode[] = []
   let computedEdges: ComputedEdge[] = []
 
@@ -33,86 +36,117 @@ export const computedDataFn: ComputedDataFn<'relationship'> = (context) => {
       } as ComputedDataRelationship
     }
 
+    const categoryLabels = (() => {
+      // 先使用 dataFormatter.categoryLabels
+      const CategoryLabelsSet = new Set(dataFormatter.categoryLabels)
+      // 再加入 datum 中的 categoryLabel
+      for (let datum of nodes) {
+        const categoryLabel = datum.categoryLabel ?? defaultCategoryLabel
+        CategoryLabelsSet.add(categoryLabel) // 不重覆
+      }
+      for (let datum of edges) {
+        const categoryLabel = datum.categoryLabel ?? defaultCategoryLabel
+        CategoryLabelsSet.add(categoryLabel) // 不重覆
+      }
+      return Array.from(CategoryLabelsSet)
+    })()
+    
+    // <categoryLabel, categoryIndex>
+    const CategoryIndexMap = new Map<string, number>(
+      categoryLabels.map((label, index) => [label, index])
+    )
+
     // -- nodes --
     computedNodes = nodes.map((node, i) => {
+      const categoryLabel = node.categoryLabel ?? defaultCategoryLabel
+      const categoryIndex = CategoryIndexMap.get(categoryLabel) ?? 0
+      
       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 // 後面再取得資料
+        categoryIndex,
+        categoryLabel,
+        color: seriesColorPredicate(categoryIndex, chartParams),
+        // startNodes: [], // 後面再取得資料
+        // startNodeIds: [], // 後面再取得資料
+        // endNodes: [], // 後面再取得資料
+        // endNodeIds: [], // 後面再取得資料
+        visible: true // 先給預設值
       }
+      
+      computedNode.visible = dataFormatter.visibleFilter(computedNode, context)
+
       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
+    // })()
 
-    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)
+    // -- edges --
+    computedEdges = edges
+      .map((edge, i) => {
+        const startNode = NodesMap.get(edge.start)
+        const endNode = NodesMap.get(edge.end)
+        return {
+          edge,
+          startNode,
+          endNode
+        }
       })
-      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)
+      .filter(({ edge }) => {
+        const startNode = NodesMap.get(edge.start)
+        const endNode = NodesMap.get(edge.end)
+        return startNode != null && endNode != null
       })
-      return _EndNodesMap
-    })()
+      .map(({ edge, startNode, endNode }, i) => {
+        const categoryLabel = edge.categoryLabel ?? defaultCategoryLabel
+        // const startNode = NodesMap.get(edge.start)
+        // const endNode = NodesMap.get(edge.end)
 
-    // -- 補齊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)
-    })
+        const computedEdge: ComputedEdge = {
+          id: edge.id,
+          index: i,
+          label: edge.label ?? '',
+          description: edge.description ?? '',
+          data: edge.data ?? {},
+          value: edge.value ?? 0,
+          categoryIndex: CategoryIndexMap.get(categoryLabel),
+          categoryLabel,
+          color: seriesColorPredicate(i, chartParams),
+          startNode,
+          // startNodeId: edge.start,
+          endNode,
+          // endNodeId: edge.end,
+          visible: startNode.visible && endNode.visible
+        }
 
-    // -- 補齊edges資料 --
-    computedEdges = computedEdges.map(edge => {
-      edge.visible = edge.startNode.visible && edge.endNode.visible
-        ? true
-        : false
-      return edge
-    })
+        return computedEdge
+      })
+
+    
   } catch (e) {
     // console.error(e)
     throw Error(e)