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

package/src/relationship/contextObserverCallback.ts

@@ -1,12 +1,80 @@
+import { map, shareReplay } from 'rxjs'
 import type { ContextObserverCallback } from '../../lib/core-types'
+import { highlightObservable, categoryDataMapObservable, textSizePxObservable } from '../utils/observables'
+import {
+  categoryLabelsObservable,
+  NodeMapObservable,
+  EdgeMapObservable,
+  relationshipVisibleComputedDataObservable
+} from '../utils/relationshipObservables'
 
 export const contextObserverCallback: ContextObserverCallback<'relationship'> = ({ subject, observer }) => {
 
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
+    shareReplay(1)
+  )
+
+  const relationshipHighlightNodes$ = highlightObservable({
+    datumList$: observer.computedData$.pipe(map(data => data.nodes)),
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const relationshipHighlightEdges$ = highlightObservable({
+    datumList$: observer.computedData$.pipe(map(data => data.edges)),
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const CategoryNodeMap$ = categoryDataMapObservable({
+    datumList$: observer.computedData$.pipe(map(data => data.nodes))
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const CategoryEdgeMap$ = categoryDataMapObservable({
+    datumList$: observer.computedData$.pipe(map(data => data.edges))
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const NodeMap$ = NodeMapObservable(observer.computedData$).pipe(
+    shareReplay(1)
+  )
+
+  const EdgeMap$ = EdgeMapObservable(observer.computedData$).pipe(
+    shareReplay(1)
+  )
+
+  const categoryLabels$ = categoryLabelsObservable(CategoryNodeMap$, CategoryEdgeMap$).pipe(
+    shareReplay(1)
+  )
+
+  const visibleComputedData$ = relationshipVisibleComputedDataObservable({
+    computedData$: observer.computedData$,
+    NodeMap$
+  }).pipe(
+    shareReplay(1)
+  )
+
   return {
     fullParams$: observer.fullParams$,
     fullChartParams$: observer.fullChartParams$,
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
+    textSizePx$,
+    relationshipHighlightNodes$,
+    relationshipHighlightEdges$,
+    categoryLabels$,
+    CategoryNodeMap$,
+    CategoryEdgeMap$,
+    NodeMap$,
+    EdgeMap$,
+    visibleComputedData$
   }
 }

package/src/tree/computedDataFn.ts

@@ -1,10 +1,12 @@
 import type { DataTree, DataTreeObj, DataTreeDatum, ComputedDataFn, ComputedDataTree } from '../../lib/core-types'
 import { isPlainObject } from '../utils/commonUtils'
-import { seriesColorPredicate } from '../utils/orbchartsUtils'
+import { seriesColorPredicate, createDefaultCategoryLabel } from '../utils/orbchartsUtils'
 
 export const computedDataFn: ComputedDataFn<'tree'> = (context) => {
   const { data = [], dataFormatter, chartParams } = context
 
+  const defaultCategoryLabel = createDefaultCategoryLabel()
+
   // <categoryLabel, categoryIndex>
   const CategoryIndexMap = new Map<string, number>(
     dataFormatter.categoryLabels.map((label, index) => [label, index])
@@ -15,7 +17,7 @@ export const computedDataFn: ComputedDataFn<'tree'> = (context) => {
     index: 0,
     label: '',
     description: '',
-    categoryIndex: 0,
+    categoryIndex: -1,
     categoryLabel: '',
     color: '',
     visible: true,
@@ -64,7 +66,7 @@ export const computedDataFn: ComputedDataFn<'tree'> = (context) => {
           data: root.data,
           // tooltipContent: root.tooltipContent,
           value: root.value,
-          categoryLabel: root.categoryLabel,
+          categoryLabel: root.categoryLabel ?? defaultCategoryLabel,
           children: (ChildrenMap.get(root.id) ?? []).map(d => {
             // 遞迴
             return createBranchData(d)
@@ -84,14 +86,11 @@ export const computedDataFn: ComputedDataFn<'tree'> = (context) => {
     
     const formatBranchData = (branch: DataTreeObj, level: number, seq: number): ComputedDataTree => {
       const childLayer = level + 1
-      const categoryLabel: string | null = branch.categoryLabel ?? null
-      let categoryIndex = 0
-      if (categoryLabel != null) {
-        if (!CategoryIndexMap.has(categoryLabel)) {
-          CategoryIndexMap.set(categoryLabel, CategoryIndexMap.size)
-        }
-        categoryIndex = CategoryIndexMap.get(categoryLabel) ?? 0
+      const categoryLabel: string = branch.categoryLabel ?? defaultCategoryLabel
+      if (!CategoryIndexMap.has(categoryLabel)) {
+        CategoryIndexMap.set(categoryLabel, CategoryIndexMap.size)
       }
+      const categoryIndex = CategoryIndexMap.get(categoryLabel) ?? 0
 
       const currentIndex = index
       index++

package/src/tree/contextObserverCallback.ts

@@ -3,7 +3,7 @@ import type { ContextObserverCallback } from '../../lib/core-types'
 import { highlightObservable, categoryDataMapObservable, textSizePxObservable } from '../utils/observables'
 import {
   nodeListObservable,
-  existCategoryLabelsObservable,
+  categoryLabelsObservable,
   treeVisibleComputedDataObservable
 } from '../utils/treeObservables'
 
@@ -27,18 +27,15 @@ export const contextObserverCallback: ContextObserverCallback<'tree'> = ({ subje
     shareReplay(1)
   )
 
-  const existCategoryLabels$ = existCategoryLabelsObservable({
-    nodeList$,
-    fullDataFormatter$: observer.fullDataFormatter$
-  }).pipe(
-    shareReplay(1)
-  )
-
   const CategoryDataMap$ = categoryDataMapObservable({
     datumList$: nodeList$
   }).pipe(
     shareReplay(1)
   )
+  
+  const categoryLabels$ = categoryLabelsObservable(CategoryDataMap$).pipe(
+    shareReplay(1)
+  )
 
   const visibleComputedData$ = treeVisibleComputedDataObservable({
     computedData$: observer.computedData$
@@ -54,7 +51,7 @@ export const contextObserverCallback: ContextObserverCallback<'tree'> = ({ subje
     layout$: observer.layout$,
     textSizePx$,
     treeHighlight$,
-    existCategoryLabels$,
+    categoryLabels$,
     CategoryDataMap$,
     visibleComputedData$
   }

package/src/utils/d3Scale.ts

@@ -0,0 +1,198 @@
+import * as d3 from 'd3'
+import { DEFAULT_DATA_FORMATTER_VALUE_AXIS } from '../defaults'
+
+// scaleLinear - 連續資料 -> 座標
+export const createValueToAxisScale = ({
+  maxValue = 1,
+  minValue = 0,
+  axisWidth,
+  scaleDomain = DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleDomain,
+  scaleRange = DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleRange,
+  reverse = false
+}: {
+  maxValue: number
+  minValue: number
+  axisWidth: number
+  scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto']
+  scaleRange: [number, number] // 0-1
+  reverse?: boolean
+}) => {
+  // if (minValue === maxValue) {
+  //   maxValue += 1 // 避免最大及最小值相同造成無法計算scale
+  //   minValue -= 1
+  // }
+  
+  // -- 無值補上預設值 --
+  const domainMin: number | 'min' | 'auto' = scaleDomain[0] ?? DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleDomain[0]
+  const domainMax: number | 'max' | 'auto' = scaleDomain[1] ?? DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleDomain[1]
+  const rangeMin: number = scaleRange[0] ?? DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleRange[0]
+  const rangeMax: number = scaleRange[1] ?? DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleRange[1]
+
+  // -- 'auto' | 'max' | 'min' 替換成實際值 --
+  let domainMinValue: number = (() => {
+    if (domainMin === 'auto') {
+      return minValue < 0 ? minValue : 0
+    } else if (domainMin === 'min') {
+      return minValue
+    } else {
+      return domainMin
+    }
+  })()
+  
+  let domainMaxValue: number = (() => {
+    if (domainMax === 'auto') {
+      return maxValue >= 0 ? maxValue : 0
+    } else if (domainMax === 'max') {
+      return maxValue
+    } else {
+      return domainMax
+    }
+  })()
+  // let rangeMinValue = axisWidth * rangeMin
+  // let rangeMaxValue = axisWidth * rangeMax
+
+  // -- 計算padding --
+  // if (padding > 0) {
+  //   const stepAmount = maxValue - minValue + (padding * 2)
+  //   const eachStepWidth = axisWidth / stepAmount
+  //   const paddingWidth = eachStepWidth * padding
+  //   rangeMinValue += paddingWidth
+  //   rangeMaxValue -= paddingWidth
+  // }
+
+  // -- 依場景大小換算 --
+  const axisDomainMinValue = maxValue - (maxValue - domainMinValue) / (1 - rangeMin)
+  const axisDomainMaxValue = domainMaxValue / rangeMax
+  
+  // return d3.scaleLinear()
+  //   .domain([domainMinValue, domainMaxValue])
+  //   .range([rangeMinValue, rangeMaxValue])
+  if (reverse) {
+    return d3.scaleLinear()
+      .domain([axisDomainMinValue, axisDomainMaxValue])
+      .range([axisWidth, 0])
+  } else {
+    return d3.scaleLinear()
+      .domain([axisDomainMinValue, axisDomainMaxValue])
+      .range([0, axisWidth])
+  }
+}
+
+// scaleLinear - 座標 -> 連續資料
+export const createAxisToValueScale = ({
+  maxValue = 1,
+  minValue = 0,
+  axisWidth,
+  scaleDomain = DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleDomain,
+  scaleRange = DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleRange,
+  reverse = false
+}: {
+  maxValue: number
+  minValue: number
+  axisWidth: number
+  scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto']
+  scaleRange: [number, number] // 0-1
+  reverse?: boolean
+}) => {
+  if (minValue === maxValue) {
+    maxValue += 1 // 避免最大及最小值相同造成無法計算scale
+    minValue -= 1
+  }
+  
+  // -- 無值補上預設值 --
+  const domainMin: number | 'min' | 'auto' = scaleDomain[0] ?? DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleDomain[0]
+  const domainMax: number | 'max' | 'auto' = scaleDomain[1] ?? DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleDomain[1]
+  const rangeMin: number = scaleRange[0] ?? DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleRange[0]
+  const rangeMax: number = scaleRange[1] ?? DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleRange[1]
+
+  // -- 'auto' | 'max' | 'min' 替換成實際值 --
+  let domainMinValue: number = (() => {
+    if (domainMin === 'auto') {
+      return minValue < 0 ? minValue : 0
+    } else if (domainMin === 'min') {
+      return minValue
+    } else {
+      return domainMin
+    }
+  })()
+  
+  let domainMaxValue: number = (() => {
+    if (domainMax === 'auto') {
+      return maxValue >= 0 ? maxValue : 0
+    } else if (domainMax === 'max') {
+      return maxValue
+    } else {
+      return domainMax
+    }
+  })()
+  // let rangeMinValue = axisWidth * rangeMin
+  // let rangeMaxValue = axisWidth * rangeMax
+
+  // -- 計算padding --
+  // if (padding > 0) {
+  //   const stepAmount = maxValue - minValue + (padding * 2)
+  //   const eachStepWidth = axisWidth / stepAmount
+  //   const paddingWidth = eachStepWidth * padding
+  //   rangeMinValue += paddingWidth
+  //   rangeMaxValue -= paddingWidth
+  // }
+
+  // -- 依場景大小換算 --
+  const axisDomainMinValue = maxValue - (maxValue - domainMinValue) / (1 - rangeMin)
+  const axisDomainMaxValue = domainMaxValue / rangeMax
+  
+  // return d3.scaleLinear()
+  //   .domain([domainMinValue, domainMaxValue])
+  //   .range([rangeMinValue, rangeMaxValue])
+  if (reverse) {
+    return d3.scaleLinear()
+      .domain([axisWidth, 0])
+      .range([axisDomainMinValue, axisDomainMaxValue])
+  } else {
+    return d3.scaleLinear()
+      .domain([0, axisWidth])
+      .range([axisDomainMinValue, axisDomainMaxValue])
+  }
+}
+
+// scalePoint - 非連續資料 -> 座標
+export const createLabelToAxisScale = ({ axisLabels, axisWidth, padding = 0.5 }: {
+  axisLabels: string[]
+  axisWidth: number
+  padding?: number
+  // reverse?: boolean  
+}) => {
+  let range: [d3.NumberValue, d3.NumberValue] = [0, axisWidth]
+
+  return d3.scalePoint()
+      .domain(axisLabels)
+      .range(range)
+      .padding(padding)
+}
+
+// scaleQuantize - 座標 -> 非連續資料索引
+export const createAxisToLabelIndexScale = ({ axisLabels, axisWidth, padding = 0, reverse = false }:{
+  axisLabels: string[] | Date[],
+  axisWidth: number
+  padding?: number
+  reverse?: boolean
+}) => {
+
+  let range: number[] = axisLabels.map((d: string | Date, i: number) => i)
+  if (reverse) {
+    range.reverse()
+  }
+  // if (reverse) {
+  //   range = axisLabels.map((d: string | Date, i: number) => axisLabels.length - 1 - i)
+  // } else {
+  //   range = axisLabels.map((d: string | Date, i: number) => i)
+  // }
+  const step = range.length - 1 + (padding * 2) // 圖軸刻度分段數量
+  const stepWidth = axisWidth / step
+  const rangePadding = stepWidth * padding - (stepWidth * 0.5) // 實際要計算的範圍是圖軸左右那邊增加0.5
+
+  // console.log('rangePadding', rangePadding)
+  return d3.scaleQuantize<number>()
+    .domain([rangePadding, axisWidth - rangePadding])
+    .range(range)
+}