@orbcharts/core 3.0.0-beta.4 → 3.0.0-beta.6

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,102 @@ 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]))
 
+    // 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
+    // })()
+
     // -- edges --
     computedEdges = edges.map((edge, i) => {
+      const categoryLabel = edge.categoryLabel ?? defaultCategoryLabel
+      const startNode = NodesMap.get(edge.start)
+      const endNode = NodesMap.get(edge.end)
+
       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 // 先給預設值
+        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
       }
 
       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)

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/utils/d3Scale.ts

@@ -1,13 +1,13 @@
 import * as d3 from 'd3'
-import { DATA_FORMATTER_VALUE_AXIS_DEFAULT } from '../defaults'
+import { DEFAULT_DATA_FORMATTER_VALUE_AXIS } from '../defaults'
 
 // scaleLinear - 連續資料 -> 座標
 export const createValueToAxisScale = ({
   maxValue = 1,
   minValue = 0,
   axisWidth,
-  scaleDomain = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain,
-  scaleRange = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange,
+  scaleDomain = DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleDomain,
+  scaleRange = DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleRange,
   reverse = false
 }: {
   maxValue: number
@@ -17,16 +17,16 @@ export const createValueToAxisScale = ({
   scaleRange: [number, number] // 0-1
   reverse?: boolean
 }) => {
-  if (minValue === maxValue) {
-    maxValue += 1 // 避免最大及最小值相同造成無法計算scale
-    minValue -= 1
-  }
+  // if (minValue === maxValue) {
+  //   maxValue += 1 // 避免最大及最小值相同造成無法計算scale
+  //   minValue -= 1
+  // }
   
   // -- 無值補上預設值 --
-  const domainMin: number | 'min' | 'auto' = scaleDomain[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[0]
-  const domainMax: number | 'max' | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[1]
-  const rangeMin: number = scaleRange[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[0]
-  const rangeMax: number = scaleRange[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[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 = (() => {
@@ -83,8 +83,8 @@ export const createAxisToValueScale = ({
   maxValue = 1,
   minValue = 0,
   axisWidth,
-  scaleDomain = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain,
-  scaleRange = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange,
+  scaleDomain = DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleDomain,
+  scaleRange = DEFAULT_DATA_FORMATTER_VALUE_AXIS.scaleRange,
   reverse = false
 }: {
   maxValue: number
@@ -100,10 +100,10 @@ export const createAxisToValueScale = ({
   }
   
   // -- 無值補上預設值 --
-  const domainMin: number | 'min' | 'auto' = scaleDomain[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[0]
-  const domainMax: number | 'max' | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[1]
-  const rangeMin: number = scaleRange[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[0]
-  const rangeMax: number = scaleRange[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[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 = (() => {

package/src/utils/gridObservables.ts

@@ -30,10 +30,10 @@ import type {
   HighlightTarget,
   Layout,
   TransformData } from '../../lib/core-types'
-import { getMinAndMaxGrid } from './orbchartsUtils'
+import { getMinMaxGrid } from './orbchartsUtils'
 import { createValueToAxisScale, createLabelToAxisScale, createAxisToLabelIndexScale } from './d3Scale'
 import { calcGridContainerLayout } from './orbchartsUtils'
-import { getMinAndMaxValue } from './orbchartsUtils'
+import { getMinMaxValue } from './orbchartsUtils'
 
 export const gridComputedLayoutDataObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
   computedData$: Observable<ComputedDataTypeMap<'grid'>>
@@ -43,7 +43,7 @@ export const gridComputedLayoutDataObservable = ({ computedData$, fullDataFormat
 
   // 未篩選group範圍前的group scale（ * 不受到dataFormatter設定影響）
   function createOriginGroupScale (computedData: ComputedDatumGrid[][], dataFormatter: DataFormatterGrid, layout: Layout) {
-    const groupAxisWidth = (dataFormatter.grid.groupAxis.position === 'top' || dataFormatter.grid.groupAxis.position === 'bottom')
+    const groupAxisWidth = (dataFormatter.groupAxis.position === 'top' || dataFormatter.groupAxis.position === 'bottom')
       ? layout.width
       : layout.height
     const groupEndIndex = computedData[0] ? computedData[0].length - 1 : 0
@@ -60,12 +60,16 @@ export const gridComputedLayoutDataObservable = ({ computedData$, fullDataFormat
 
   // 未篩選group範圍及visible前的value scale（ * 不受到dataFormatter設定影響）
   function createOriginValueScale (computedData: ComputedDatumGrid[][], dataFormatter: DataFormatterGrid, layout: Layout) {
-    const valueAxisWidth = (dataFormatter.grid.valueAxis.position === 'left' || dataFormatter.grid.valueAxis.position === 'right')
+    const valueAxisWidth = (dataFormatter.valueAxis.position === 'left' || dataFormatter.valueAxis.position === 'right')
       ? layout.height
       : layout.width
   
     const listData = computedData.flat()
-    const [minValue, maxValue] = getMinAndMaxValue(listData)
+    let [minValue, maxValue] = getMinMaxValue(listData)
+    if (minValue === maxValue && maxValue === 0) {
+      // 避免最大及最小值相同造成無法計算scale
+      maxValue = 1
+    }
 
     const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
       maxValue,
@@ -144,8 +148,8 @@ export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
     ).subscribe(data => {
       
       const axisSize = calcAxesSize({
-        xAxisPosition: data.fullDataFormatter.grid.groupAxis.position,
-        yAxisPosition: data.fullDataFormatter.grid.valueAxis.position,
+        xAxisPosition: data.fullDataFormatter.groupAxis.position,
+        yAxisPosition: data.fullDataFormatter.valueAxis.position,
         width: data.layout.width,
         height: data.layout.height,
       })
@@ -230,7 +234,7 @@ export const gridContainerPositionObservable = ({ computedData$, fullDataFormatt
     switchMap(async (d) => d),
     map(data => {
       
-      if (data.fullDataFormatter.grid.separateSeries) {
+      if (data.fullDataFormatter.separateSeries) {
         // -- 依slotIndexes計算 --
         return calcGridContainerLayout(data.layout, data.fullDataFormatter.container, data.computedData.length)
         // return data.computedData.map((seriesData, seriesIndex) => {
@@ -319,7 +323,7 @@ export const groupScaleDomainValueObservable = ({ computedData$, fullDataFormatt
   }).pipe(
     switchMap(async (d) => d),
     map(data => {
-      const groupAxis = data.fullDataFormatter.grid.groupAxis
+      const groupAxis = data.fullDataFormatter.groupAxis
       const groupMin = 0
       const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
       // const groupScaleDomainMin = groupAxis.scaleDomain[0] === 'min'
@@ -352,11 +356,11 @@ export const filteredMinMaxValueObservable = ({ computedData$, groupScaleDomainV
         })
       })
     
-      const filteredMinAndMax = getMinAndMaxGrid(filteredData)
-      // if (filteredMinAndMax[0] === filteredMinAndMax[1]) {
-      //   filteredMinAndMax[0] = filteredMinAndMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
+      const filteredMinMax = getMinMaxGrid(filteredData)
+      // if (filteredMinMax[0] === filteredMinMax[1]) {
+      //   filteredMinMax[0] = filteredMinMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
       // }
-      return filteredMinAndMax
+      return filteredMinMax
     }),
   )
 }
@@ -468,8 +472,8 @@ export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
       switchMap(async (d) => d),
     ).subscribe(data => {
       const axesTransformData = calcAxesTransform({
-        xAxis: data.fullDataFormatter.grid.groupAxis,
-        yAxis: data.fullDataFormatter.grid.valueAxis,
+        xAxis: data.fullDataFormatter.groupAxis,
+        yAxis: data.fullDataFormatter.valueAxis,
         width: data.layout.width,
         height: data.layout.height
       })
@@ -570,10 +574,11 @@ export const gridGraphicTransformObservable = ({ computedData$, groupScaleDomain
     //   })
     // })
   
-    // const filteredMinAndMax = getMinAndMaxGrid(filteredData)
-    // if (filteredMinAndMax[0] === filteredMinAndMax[1]) {
-    //   filteredMinAndMax[0] = filteredMinAndMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
-    // }
+    // const filteredMinMax = getMinMaxGrid(filteredData)
+    if (filteredMinMaxValue[0] === filteredMinMaxValue[1] && filteredMinMaxValue[1] === 0) {
+      // filteredMinMaxValue[0] = filteredMinMaxValue[1] - 1 // 避免最大及最小值相同造成無法計算scale
+      filteredMinMaxValue[1] = 1 // 避免最大及最小值同等於 0 造成無法計算scale
+    }
   
     const valueAxisWidth = (valueAxis.position === 'left' || valueAxis.position === 'right')
       ? height
@@ -586,15 +591,22 @@ export const gridGraphicTransformObservable = ({ computedData$, groupScaleDomain
       scaleDomain: valueAxis.scaleDomain,
       scaleRange: valueAxis.scaleRange
     })
-  
+  // console.log({
+  //   maxValue: filteredMinMaxValue[1],
+  //   minValue: filteredMinMaxValue[0],
+  //   axisWidth: valueAxisWidth,
+  //   scaleDomain: valueAxis.scaleDomain,
+  //   scaleRange: valueAxis.scaleRange
+  // })
     // -- translateY, scaleY --
-    const minAndMax = getMinAndMaxGrid(data)
-    if (minAndMax[0] === minAndMax[1]) {
-      minAndMax[0] = minAndMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
+    const minMax = getMinMaxGrid(data)
+    if (minMax[0] === minMax[1] && minMax[1] === 0) {
+      // minMax[0] = minMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
+      minMax[1] = 1 // 避免最大及最小值同等於 0 造成無法計算scale
     }
-    // const rangeMinY = valueScale(minAndMax[0])
-    const rangeMinY = valueScale(minAndMax[0] > 0 ? 0 : minAndMax[0]) // * 因為原本的座標就是以 0 到最大值或最小值範範圍計算的，所以這邊也是用同樣的方式計算
-    const rangeMaxY = valueScale(minAndMax[1] < 0 ? 0 : minAndMax[1]) // * 因為原本的座標就是以 0 到最大值或最小值範範圍計算的，所以這邊也是用同樣的方式計算
+    // const rangeMinY = valueScale(minMax[0])
+    const rangeMinY = valueScale(minMax[0] > 0 ? 0 : minMax[0]) // * 因為原本的座標就是以 0 到最大值或最小值範範圍計算的，所以這邊也是用同樣的方式計算
+    const rangeMaxY = valueScale(minMax[1] < 0 ? 0 : minMax[1]) // * 因為原本的座標就是以 0 到最大值或最小值範範圍計算的，所以這邊也是用同樣的方式計算
     translateY = rangeMinY
     const gHeight = rangeMaxY - rangeMinY
     scaleY = gHeight / valueAxisWidth
@@ -622,8 +634,8 @@ export const gridGraphicTransformObservable = ({ computedData$, groupScaleDomain
     ).subscribe(data => {
       const dataAreaTransformData = calcGridDataAreaTransform ({
         data: data.computedData,
-        groupAxis: data.fullDataFormatter.grid.groupAxis,
-        valueAxis: data.fullDataFormatter.grid.valueAxis,
+        groupAxis: data.fullDataFormatter.groupAxis,
+        valueAxis: data.fullDataFormatter.valueAxis,
         groupScaleDomainValue: data.groupScaleDomainValue,
         filteredMinMaxValue: data.filteredMinMaxValue,
         width: data.layout.width,

package/src/utils/multiGridObservables.ts

@@ -47,7 +47,7 @@ import {
   gridGraphicTransformObservable,
   gridGraphicReverseScaleObservable,
 } from './gridObservables'
-import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
+import { DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID } from '../defaults'
 import { calcGridContainerLayout } from './orbchartsUtils'
 
 // 每一個grid計算出來的所有Observable
@@ -95,7 +95,7 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
       // 每次重新計算時，清除之前的訂閱
       destroy$.next(undefined)
 
-      const defaultGrid = data.fullDataFormatter.gridList[0] ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+      const defaultGrid = data.fullDataFormatter.gridList[0] ?? DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID
 
       return data.computedData.map((gridComputedData, gridIndex) => {
 
@@ -104,9 +104,9 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
         const gridDataFormatter: DataFormatterGrid = {
           type: 'grid',
           visibleFilter: data.fullDataFormatter.visibleFilter as any,
-          grid: {
-            ...grid
-          },
+          // grid: {
+            ...grid,
+          // },
           container: {
             ...data.fullDataFormatter.container
           }
@@ -137,7 +137,7 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
         // )
 
         const isSeriesSeprate$ = gridDataFormatter$.pipe(
-          map(d => d.grid.separateSeries),
+          map(d => d.separateSeries),
           distinctUntilChanged(),
           shareReplay(1)
         )
@@ -314,7 +314,7 @@ export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$
     switchMap(async (d) => d),
     map(data => {
 
-      const defaultGrid = data.fullDataFormatter.gridList[0] ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+      const defaultGrid = data.fullDataFormatter.gridList[0] ?? DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID
       const slotAmount = data.computedData.reduce((acc, gridData, gridIndex) => {
         const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
         const gridSlotAmount = grid.separateSeries

package/src/utils/multiValueObservables.ts

@@ -27,7 +27,7 @@ import type {
   HighlightTarget,
   Layout,
   TransformData } from '../../lib/core-types'
-import { getMinAndMax, getMinAndMaxMultiValue } from './orbchartsUtils'
+import { getMinMax, getMinMaxMultiValue } from './orbchartsUtils'
 import { createValueToAxisScale, createLabelToAxisScale, createAxisToLabelIndexScale } from './d3Scale'
 import { calcGridContainerLayout } from './orbchartsUtils'
 
@@ -35,8 +35,8 @@ export const minMaxXYObservable = ({ computedData$ }: { computedData$: Observabl
   return computedData$.pipe(
     map(data => {
       const flatData = data.flat()
-      const [minX, maxX] = getMinAndMax(flatData.map(d => d.value[0]))
-      const [minY, maxY] = getMinAndMax(flatData.map(d => d.value[1]))
+      const [minX, maxX] = getMinMax(flatData.map(d => d.value[0]))
+      const [minY, maxY] = getMinMax(flatData.map(d => d.value[1]))
       return { minX, maxX, minY, maxY }
     })
   )
@@ -51,9 +51,15 @@ export const multiValueComputedLayoutDataObservable = ({ computedData$, minMaxXY
 
   // 未篩選範圍前的 scale
   function createOriginXScale (minMaxXY: { minX: number, maxX: number, minY: number, maxY: number }, layout: Layout) {
+    let maxValue = minMaxXY.maxX
+    let minValue = minMaxXY.minX
+    if (minValue === maxValue && maxValue === 0) {
+      // 避免最大及最小值相同造成無法計算scale
+      maxValue = 1
+    }
     const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-      maxValue: minMaxXY.maxX,
-      minValue: minMaxXY.minX,
+      maxValue,
+      minValue,
       axisWidth: layout.width,
       scaleDomain: ['auto', 'auto'], // 不使用dataFormatter設定 --> 以0為基準到最大或最小值為範圍（ * 如果是使用[minValue, maxValue]的話，在兩者很接近的情況下有可能造成scale倍率過高而svg變型時失真的情況）
       scaleRange: [0, 1] // 不使用dataFormatter設定
@@ -64,9 +70,15 @@ export const multiValueComputedLayoutDataObservable = ({ computedData$, minMaxXY
 
   // 未篩選範圍及visible前的 scale
   function createOriginYScale (minMaxXY: { minX: number, maxX: number, minY: number, maxY: number }, layout: Layout) {
+    let maxValue = minMaxXY.maxY
+    let minValue = minMaxXY.minY
+    if (minValue === maxValue && maxValue === 0) {
+      // 避免最大及最小值相同造成無法計算scale
+      maxValue = 1
+    }
     const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-      maxValue: minMaxXY.maxY,
-      minValue: minMaxXY.minY,
+      maxValue,
+      minValue,
       axisWidth: layout.height,
       scaleDomain: ['auto', 'auto'], // 不使用dataFormatter設定 --> 以0為基準到最大或最小值為範圍（ * 如果是使用[minValue, maxValue]的話，在兩者很接近的情況下有可能造成scale倍率過高而svg變型時失真的情況）
       scaleRange: [0, 1], // 不使用dataFormatter設定
@@ -402,7 +414,7 @@ export const filteredMinMaxXYDataObservable = ({ visibleComputedLayoutData$, min
       let maxYDatum: ComputedLayoutDatumMultiValue | null = null
       // console.log('data.visibleComputedLayoutData', data.visibleComputedLayoutData)
       // minX, maxX, minY, maxY 範圍內的最大最小值資料
-      
+      // console.log({ minX, maxX, minY, maxY })
       for (let categoryData of data.visibleComputedLayoutData) {
         for (let datum of categoryData) {
           // 比較矩形範圍（所以 minX, maxX, minY, maxY 要同時比較）
@@ -471,7 +483,7 @@ export const multiValueGraphicTransformObservable = ({ minMaxXY$, filteredMinMax
     // // minX, maxX, filteredMinX, filteredMaxX
     // let filteredMinX = 0
     // let filteredMaxX = 0
-    // let [minX, maxX] = getMinAndMax(flatData.map(d => d.value[0]))
+    // let [minX, maxX] = getMinMax(flatData.map(d => d.value[0]))
     // if (minX === maxX) {
     //   minX = maxX - 1 // 避免最大及最小值相同造成無法計算scale
     // }
@@ -496,7 +508,7 @@ export const multiValueGraphicTransformObservable = ({ minMaxXY$, filteredMinMax
     // // minY, maxY, filteredMinY, filteredMaxY
     // let filteredMinY = 0
     // let filteredMaxY = 0
-    // let [minY, maxY] = getMinAndMax(flatData.map(d => d.value[1]))
+    // let [minY, maxY] = getMinMax(flatData.map(d => d.value[1]))
 // console.log('filteredMinMaxXYData', filteredMinMaxXYData)
     let { minX, maxX, minY, maxY } = minMaxXY
     // console.log({ minX, maxX, minY, maxY })
@@ -505,14 +517,6 @@ export const multiValueGraphicTransformObservable = ({ minMaxXY$, filteredMinMax
     let filteredMinY = filteredMinMaxXYData.minYDatum.value[1] ?? 0
     let filteredMaxY = filteredMinMaxXYData.maxYDatum.value[1] ?? 0
 
-    if (minX === maxX) {
-      maxX += 1 // 避免最大及最小值相同造成無法計算scale
-      minX -= 1
-    }
-    if (minY === maxY) {
-      maxY += 1 // 避免最大及最小值相同造成無法計算scale
-      minY -= 1
-    }
     // if (yAxis.scaleDomain[0] === 'auto' && filteredMinY > 0) {
     //   filteredMinY = 0
     // } else if (typeof yAxis.scaleDomain[0] === 'number') {
@@ -527,15 +531,24 @@ export const multiValueGraphicTransformObservable = ({ minMaxXY$, filteredMinMax
     // } else {
     //   filteredMaxY = maxY
     // }
-    // if (filteredMinX === filteredMaxX) {
-    //   filteredMaxX += 1 // 避免最大及最小值相同造成無法計算scale
-    //   filteredMinX -= 1
-    // }
-    // if (filteredMinY === filteredMaxY) {
-    //   filteredMaxY += 1 // 避免最大及最小值相同造成無法計算scale
-    //   filteredMinY -= 1
-    // }
+
     // console.log({ minX, maxX, minY, maxY, filteredMinX, filteredMaxX, filteredMinY, filteredMaxY })
+    if (filteredMinX === filteredMaxX && filteredMaxX === 0) {
+      // 避免最大及最小值相同造成無法計算scale
+      filteredMaxX = 1
+    }
+    if (filteredMinY === filteredMaxY && filteredMaxY === 0) {
+      // 避免最大及最小值相同造成無法計算scale
+      filteredMaxY = 1
+    }
+    if (minX === maxX && maxX === 0) {
+      // 避免最大及最小值相同造成無法計算scale
+      maxX = 1
+    }
+    if (minY === maxY && maxY === 0) {
+      // 避免最大及最小值相同造成無法計算scale
+      maxY = 1
+    }
     // -- xScale --
     const xScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
       maxValue: filteredMaxX,
@@ -568,7 +581,6 @@ export const multiValueGraphicTransformObservable = ({ minMaxXY$, filteredMinMax
     translateY = rangeMaxY // 最大值的 y 最小（最上方）
     const gHeight = rangeMinY - rangeMaxY // 最大的 y 減最小的 y
     scaleY = gHeight / height
-    // console.log({ gHeight, height, rangeMaxY, rangeMinY, scaleY, translateY })
 
     return {
       translate: [translateX, translateY],
@@ -590,6 +602,13 @@ export const multiValueGraphicTransformObservable = ({ minMaxXY$, filteredMinMax
       takeUntil(destroy$),
       switchMap(async (d) => d),
     ).subscribe(data => {
+      if (!data.filteredMinMaxXYData.minXDatum || !data.filteredMinMaxXYData.maxXDatum
+        || data.filteredMinMaxXYData.minXDatum.value[0] == null || data.filteredMinMaxXYData.maxXDatum.value[0] == null
+        || !data.filteredMinMaxXYData.minYDatum || !data.filteredMinMaxXYData.maxYDatum
+        || data.filteredMinMaxXYData.minYDatum.value[1] == null || data.filteredMinMaxXYData.maxYDatum.value[1] == null
+      ) {
+        return
+      }
       const dataAreaTransformData = calcDataAreaTransform({
         minMaxXY: data.minMaxXY,
         filteredMinMaxXYData: data.filteredMinMaxXYData,