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

package/src/utils/observables.ts

@@ -45,6 +45,15 @@ export function resizeObservable(elem: HTMLElement | Element): Observable<DOMRec
   })
 }
 
+interface HighlightTargetValue {
+  id: string | null
+  label: string | null
+  seriesLabel: string | null
+  groupLabel: string | null
+  categoryLabel: string | null
+  highlightDefault: string | null
+}
+
 // 通用 highlight Observable
 export const highlightObservable = <T extends ChartType, D>({ datumList$, fullChartParams$, event$ }: {
   datumList$: Observable<D[]>
@@ -54,11 +63,12 @@ export const highlightObservable = <T extends ChartType, D>({ datumList$, fullCh
   const destroy$ = new Subject()
 
   // 預設的highlight
-  const highlightDefault$ = fullChartParams$.pipe(
+  const highlightDefault$: Observable<HighlightTargetValue> = fullChartParams$.pipe(
     takeUntil(destroy$),
     map(d => {
       return {
         id: null,
+        label: null,
         seriesLabel: null,
         groupLabel: null,
         categoryLabel: null,
@@ -69,22 +79,25 @@ export const highlightObservable = <T extends ChartType, D>({ datumList$, fullCh
   )
 
   // 事件觸發的highlight
-  const highlightMouseover$ = event$.pipe(
+  const highlightMouseover$: Observable<HighlightTargetValue> = event$.pipe(
     takeUntil(destroy$),
     // filter(d => d.eventName === 'mouseover' || d.eventName === 'mousemove'),
     filter(d => d.eventName === 'mouseover'),
     // distinctUntilChanged((prev, current) => prev.eventName === current.eventName)
-    map(d => {
-      return (d as any).datum
+    map(_d => {
+      const d = _d as any
+      return d.datum
         ? {
-          id: ((d as any).datum as any).id,
-          seriesLabel: ((d as any).datum as any).seriesLabel,
-          groupLabel: ((d as any).datum as any).groupLabel,
-          categoryLabel: ((d as any).datum as any).categoryLabel,
+          id: d.datum.id,
+          label: d.datum.label,
+          seriesLabel: d.datum.seriesLabel,
+          groupLabel: d.datum.groupLabel,
+          categoryLabel: d.datum.categoryLabel,
           highlightDefault: null
         }
         : {
           id: null,
+          label: null,
           seriesLabel: null,
           groupLabel: null,
           categoryLabel: null,
@@ -102,9 +115,14 @@ export const highlightObservable = <T extends ChartType, D>({ datumList$, fullCh
     switchMap(d => highlightDefault$)
   )
 
-  function getDatumIds (datumList: ComputedDatumTypeMap<T>[], id: string | null) {
-    const datum = datumList.find(d => (d as ComputedDatumBase).id === id)
-    return datum ? [datum] : []
+  // function getDatumIds (datumList: ComputedDatumTypeMap<T>[], id: string | null) {
+  //   const datum = datumList.find(d => (d as ComputedDatumBase).id === id)
+  //   return datum ? [datum] : []
+  // }
+  function getDatumIds (datumList: ComputedDatumTypeMap<T>[], id: string | null, label: string | null) {
+    return id == null && label == null
+      ? []
+      : datumList.filter(d => (d as ComputedDatumBase).id === id || (d as ComputedDatumBase).label === label)
   }
 
   function getSeriesIds (datumList: ComputedDatumTypeMap<T>[], seriesLabel: string | null) {
@@ -136,7 +154,7 @@ export const highlightObservable = <T extends ChartType, D>({ datumList$, fullCh
     ).subscribe(data => {
       let datumList: ComputedDatumTypeMap<T>[] = []
       if (data.fullChartParams.highlightTarget === 'datum') {
-        datumList = getDatumIds(data.datumList as ComputedDatumTypeMap<T>[], data.target.id)
+        datumList = getDatumIds(data.datumList as ComputedDatumTypeMap<T>[], data.target.id, data.target.label)
       } else if (data.fullChartParams.highlightTarget === 'series') {
         datumList = getSeriesIds(data.datumList as ComputedDatumTypeMap<T>[], data.target.seriesLabel)
       } else if (data.fullChartParams.highlightTarget === 'group') {

package/src/utils/orbchartsUtils.ts

@@ -13,11 +13,12 @@ import type {
   DataMultiValue,
   DataMultiValueDatum,
   DataMultiValueValue,
+  ComputedLayoutDatumMultiValue,
   DataFormatterContainer,
   SeriesDirection,
   DataFormatterGridGrid,
-  SeriesContainerPosition,
-  GridContainerPosition,
+  ContainerPosition,
+  ContainerPositionScaled,
   Layout
 } from '../../lib/core-types'
 import { isPlainObject } from './commonUtils'
@@ -29,8 +30,11 @@ export function formatValueToLabel (value: any, valueFormatter: string | ((text:
   return d3.format(valueFormatter as string)!(value)
 }
 
-export function createDefaultDatumId (chartTypeOrPrefix: string, levelOneIndex: number, levelTwoIndex: number, levelThreeIndex?: number) {
-  let text = `${chartTypeOrPrefix}_${levelOneIndex}_${levelTwoIndex}`
+export function createDefaultDatumId (chartTypeOrPrefix: string, levelOneIndex: number, levelTwoIndex?: number, levelThreeIndex?: number) {
+  let text = `${chartTypeOrPrefix}_${levelOneIndex}`
+  if (levelTwoIndex != null) {
+    text += `_${levelTwoIndex}`
+  }
   if (levelThreeIndex != null) {
     text += `_${levelThreeIndex}`
   }
@@ -45,6 +49,11 @@ export function createDefaultGroupLabel (chartTypeOrPrefix: string, groupIndex:
   return `${chartTypeOrPrefix}_group${groupIndex}`
 }
 
+export function createDefaultCategoryLabel () {
+  // return `${chartTypeOrPrefix}_category`
+  return '' // 空值
+}
+
 export function createGridSeriesLabels ({ transposedDataGrid, dataFormatterGrid, chartType = 'grid' }: {
   transposedDataGrid: DataGridDatum[][],
   dataFormatterGrid: DataFormatterGridGrid
@@ -114,76 +123,125 @@ export function createMultiGridGroupLabels ({ transposedDataGrid, dataFormatterG
 }
 
 // 取得最小及最大值 - 數字陣列
-export function getMinAndMax (data: number[]): [number, number] {
-  const defaultMinAndMax: [number, number] = [0, 0] // default
+export function getMinMax (data: number[]): [number, number] {
+  const defaultMinMax: [number, number] = [0, 0] // default
   if (!data.length) {
-    return defaultMinAndMax
+    return defaultMinMax
   }
-  const minAndMax: [number, number] = data.reduce((prev, current) => {
+  const minMax: [number, number] = data.reduce((prev, current) => {
     // [min, max]
     return [
       current < prev[0] ? current : prev[0],
       current > prev[1] ? current : prev[1]
     ]
   }, [data[0], data[0]])
-  return minAndMax
+  return minMax
 }
 
 // 取得最小及最大值 - datum格式陣列資料
-export function getMinAndMaxValue (data: DatumValue[]): [number, number] {
+export function getMinMaxValue (data: DatumValue[]): [number, number] {
   const arr = data
     .filter(d => d != null && d.value != null)
     .map(d => d.value )
-  return getMinAndMax(arr)
+  return getMinMax(arr)
 }
 
 // 取得最小及最大值 - Series Data
-export function getMinAndMaxSeries (data: DataSeries): [number, number] {
+export function getMinMaxSeries (data: DataSeries): [number, number] {
   const flatData: (DataSeriesValue | DataSeriesDatum)[] = data[0] && Array.isArray((data as (DataSeriesValue | DataSeriesDatum)[][])[0])
     ? data.flat()
     : data as (DataSeriesValue | DataSeriesDatum)[]
   const arr = flatData
     .filter(d => (d == null || (isPlainObject(d) && (d as DataSeriesDatum).value == null)) === false) // 過濾掉null &
     .map(d => typeof d === 'number' ? d : d.value )
-  return getMinAndMax(arr)
+  return getMinMax(arr)
 }
 
 // 取得最小及最大值 - Grid Data
-export function getMinAndMaxGrid (data: DataGrid): [number, number] {
+export function getMinMaxGrid (data: DataGrid): [number, number] {
   const flatData: (DataGridValue | DataGridDatum)[] = data.flat()
   const arr = flatData
     .filter(d => (d == null || (isPlainObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
     .map(d => typeof d === 'number' ? d : d.value )
-  return getMinAndMax(arr)
+  return getMinMax(arr)
 }
 
 // 取得最小及最大值 - MultiGrid Data
-export function getMinAndMaxMultiGrid (data: DataMultiGrid): [number, number] {
+export function getMinMaxMultiGrid (data: DataMultiGrid): [number, number] {
   const flatData: (DataGridValue | DataGridDatum)[] = data.flat().flat()
   const arr = flatData
     .filter(d => (d == null || (isPlainObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
     .map(d => typeof d === 'number' ? d : d.value )
-  return getMinAndMax(arr)
+  return getMinMax(arr)
 }
 
 // 取得最小及最大值 - MultiValue Data
-export function getMinAndMaxMultiValue (data: DataMultiValue, valueIndex: number = 2): [number, number] {
-  const flatData: (DataMultiValueDatum | DataMultiValueValue)[] = data.flat().filter((d, i) => i == valueIndex)
-  const arr = flatData
-    .filter(d => (d == null || (isPlainObject(d) && (d as DataMultiValueDatum).value == null)) === false) // 過濾掉null
-    .map(d => typeof d === 'number' ? d : d.value )
-  return getMinAndMax(arr)
+export function getMinMaxMultiValue (data: DataMultiValue, valueIndex: number): [number, number] {
+  const arr: number[] = data
+    .map(d => {
+      if (Array.isArray(d)) {
+        return d[valueIndex] ?? null
+      } else if (isPlainObject(d)) {
+        return (d as DataMultiValueDatum).value[valueIndex] ?? null
+      } else {
+        return null
+      }
+    })
+    .filter(d => d != null)
+  return getMinMax(arr)
+}
+
+export function getMinMaxMultiValueXY ({ data, minX, maxX, minY, maxY }: {
+  data: ComputedLayoutDatumMultiValue[][]
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}) {
+  let filteredData: ComputedLayoutDatumMultiValue[][] = []
+  let minXDatum: ComputedLayoutDatumMultiValue | null = null
+  let maxXDatum: ComputedLayoutDatumMultiValue | null = null
+  let minYDatum: ComputedLayoutDatumMultiValue | null = null
+  let maxYDatum: ComputedLayoutDatumMultiValue | null = null
+  
+  for (let categoryData of data) {
+    for (let datum of categoryData) {
+      if (datum.axisX >= minX && datum.axisX <= maxX && datum.axisY >= minY && datum.axisY <= maxY) {
+        filteredData.push(categoryData)
+        if (minXDatum == null || datum.axisX < minXDatum.axisX) {
+          minXDatum = datum
+        }
+        if (maxXDatum == null || datum.axisX > maxXDatum.axisX) {
+          maxXDatum = datum
+        }
+        if (minYDatum == null || datum.axisY < minYDatum.axisY) {
+          minYDatum = datum
+        }
+        if (maxYDatum == null || datum.axisY > maxYDatum.axisY) {
+          maxYDatum = datum
+        }
+      }
+    }
+  }
+
+  return {
+    minXDatum,
+    maxXDatum,
+    minYDatum,
+    maxYDatum,
+    filteredData
+  }
 }
 
 // @Q@ 待處理
 // // 取得最小及最大值 - Relationship Data
-// export function getMinAndMaxRelationship (data: DataRelationship, target: 'nodes' | 'edges' = 'nodes'): [number, number] {
+// export function getMinMaxRelationship (data: DataRelationship, target: 'nodes' | 'edges' = 'nodes'): [number, number] {
 
 // }
 
 // @Q@ 待處理
 // // 取得最小及最大值 - Tree Data
-// export function getMinAndMaxTree (data: DataTree): [number, number] {
+// export function getMinMaxTree (data: DataTree): [number, number] {
 
 // }
 
@@ -213,31 +271,13 @@ export function transposeData<T> (seriesDirection: SeriesDirection, data: T[][])
 
 
 export function seriesColorPredicate (seriesIndex: number, chartParams: ChartParams) {
-  return seriesIndex < chartParams.colors[chartParams.colorScheme].series.length
-    ? chartParams.colors[chartParams.colorScheme].series[seriesIndex]
-    : chartParams.colors[chartParams.colorScheme].series[
-      seriesIndex % chartParams.colors[chartParams.colorScheme].series.length
+  return seriesIndex < chartParams.colors[chartParams.colorScheme].label.length
+    ? chartParams.colors[chartParams.colorScheme].label[seriesIndex]
+    : chartParams.colors[chartParams.colorScheme].label[
+      seriesIndex % chartParams.colors[chartParams.colorScheme].label.length
     ]
 }
 
-// export function calcSeriesContainerPosition (layout: Layout, container: DataFormatterContainer, rowIndex: number, columnIndex: number) {
-//   const { gap, rowAmount, columnAmount } = container
-//   const width = (layout.width - (gap * (columnAmount - 1))) / columnAmount
-//   const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
-//   const x = columnIndex * width + (columnIndex * gap)
-//   const y = rowIndex * height + (rowIndex * gap)
-//   // const translate: [number, number] = [x, y]
-  
-//   return {
-//     // translate,
-//     startX: x,
-//     startY: y,
-//     centerX: x + width / 2,
-//     centerY: y + height / 2,
-//     width,
-//     height
-//   }
-// }
 
 // 計算預設欄列數量
 // 規則1.rowAmount*columnAmount要大於或等於amount，並且數字要盡可能小
@@ -251,7 +291,7 @@ function calcGridDimensions (amount: number): { rowAmount: number; columnAmount:
   return { rowAmount, columnAmount }
 }
 
-export function calcSeriesContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): SeriesContainerPosition[] {
+export function calcSeriesContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): ContainerPosition[] {
   const { gap } = container
   const { rowAmount, columnAmount } = (container.rowAmount * container.columnAmount) >= amount
     // 如果container設定的rowAmount和columnAmount的乘積大於或等於amount，則使用目前設定
@@ -284,22 +324,7 @@ export function calcSeriesContainerLayout (layout: Layout, container: DataFormat
   })
 }
 
-// export function calcGridContainerPosition (layout: Layout, container: DataFormatterContainer, rowIndex: number, columnIndex: number) {
-//   const { gap, rowAmount, columnAmount } = container
-//   const width = (layout.width - (gap * (columnAmount - 1))) / columnAmount
-//   const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
-//   const x = columnIndex * width + (columnIndex * gap)
-//   const y = rowIndex * height + (rowIndex * gap)
-//   const translate: [number, number] = [x, y]
-//   const scale: [number, number] = [width / layout.width, height / layout.height]
-
-//   return {
-//     translate,
-//     scale
-//   }
-// }
-
-export function calcGridContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): GridContainerPosition[] {
+export function calcGridContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): ContainerPositionScaled[] {
   const { gap } = container
   const { rowAmount, columnAmount } = (container.rowAmount * container.columnAmount) >= amount
     // 如果container設定的rowAmount和columnAmount的乘積大於或等於amount，則使用目前設定
@@ -318,7 +343,7 @@ export function calcGridContainerLayout (layout: Layout, container: DataFormatte
     const translate: [number, number] = [x, y]
     const scale: [number, number] = [width / layout.width, height / layout.height]
 
-    return {
+    return {                      
       slotIndex: index,
       rowIndex,
       columnIndex,

package/src/utils/relationshipObservables.ts

@@ -0,0 +1,85 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable } from 'rxjs'
+import type {
+  ChartParams,
+  ComputedDataRelationship,
+  ComputedDataTypeMap,
+  ComputedNode,
+  ComputedEdge,
+  DataFormatterTree } from '../../lib/core-types'
+
+
+export const categoryLabelsObservable = (
+  CategoryNodeMap$: Observable<Map<string, ComputedNode[]>>,
+  CategoryEdgeMap$: Observable<Map<string, ComputedEdge[]>>
+): Observable<string[]> => {
+  return combineLatest({
+    CategoryNodeMap: CategoryNodeMap$,
+    CategoryEdgeMap: CategoryEdgeMap$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return [...Array.from(data.CategoryNodeMap.keys()), ...Array.from(data.CategoryEdgeMap.keys())]
+    }),
+    distinctUntilChanged((a, b) => {
+      return JSON.stringify(a).length === JSON.stringify(b).length
+    }),
+  )
+}
+
+export const NodeMapObservable = (computedData$: Observable<ComputedDataRelationship>) => {
+  return computedData$.pipe(
+    map(data => {
+      const nodeMap = new Map<string, ComputedNode>()
+      data.nodes.forEach(node => {
+        nodeMap.set(node.id, node)
+      })
+      return nodeMap
+    }),
+  )
+}
+
+export const EdgeMapObservable = (computedData$: Observable<ComputedDataRelationship>) => {
+  return computedData$.pipe(
+    map(data => {
+      const edgeMap = new Map<string, ComputedEdge>()
+      data.edges.forEach(edge => {
+        edgeMap.set(edge.id, edge)
+      })
+      return edgeMap
+    }),
+  )
+}
+
+// 所有可見的節點
+export const relationshipVisibleComputedDataObservable = ({ computedData$, NodeMap$ }: {
+  computedData$: Observable<ComputedDataRelationship>
+  NodeMap$: Observable<Map<string, ComputedNode>>
+}) => {
+  return combineLatest({
+    computedData: computedData$,
+    NodeMap: NodeMap$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return {
+        nodes: data.computedData.nodes.filter(node => node.visible),
+        edges: data.computedData.edges
+          .filter(edge => edge.visible)
+          // 依照節點是否存在篩選
+          .filter(edge => {
+            return data.NodeMap.has(edge.startNode.id) && data.NodeMap.has(edge.endNode.id)
+          })
+      }
+    })
+  )
+}

package/src/utils/seriesObservables.ts

@@ -14,7 +14,7 @@ import type {
   ComputedDatumSeries,
   ComputedDataTypeMap,
   DataFormatterTypeMap,
-  SeriesContainerPosition,
+  ContainerPosition,
   Layout } from '../../lib/core-types'
 import { calcSeriesContainerLayout } from './orbchartsUtils'
 
@@ -97,7 +97,7 @@ export const seriesContainerPositionObservable = ({ computedData$, fullDataForma
   computedData$: Observable<ComputedDataTypeMap<'series'>>
   fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>>
   layout$: Observable<Layout>
-}): Observable<SeriesContainerPosition[]> => {
+}): Observable<ContainerPosition[]> => {
 
   const gridContainerPosition$ = combineLatest({
     computedData: computedData$,
@@ -113,7 +113,7 @@ export const seriesContainerPositionObservable = ({ computedData$, fullDataForma
         // return data.computedData.map((seriesData, seriesIndex) => {
         //   const columnIndex = seriesIndex % data.fullDataFormatter.container.columnAmount
         //   const rowIndex = Math.floor(seriesIndex / data.fullDataFormatter.container.columnAmount)
-        //   const { startX, startY, centerX, centerY, width, height } = calcSeriesContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+        //   const { startX, startY, centerX, centerY, width, height } = calcContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
         //   return {
         //     slotIndex: seriesIndex,
         //     rowIndex,
@@ -132,7 +132,7 @@ export const seriesContainerPositionObservable = ({ computedData$, fullDataForma
         // const columnIndex = 0
         // const rowIndex = 0
         // return data.computedData.map((seriesData, seriesIndex) => {
-        //   const { startX, startY, centerX, centerY, width, height } = calcSeriesContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+        //   const { startX, startY, centerX, centerY, width, height } = calcContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
         //   return {
         //     slotIndex: 0,
         //     rowIndex,
@@ -153,7 +153,7 @@ export const seriesContainerPositionObservable = ({ computedData$, fullDataForma
 }
 
 export const seriesContainerPositionMapObservable = ({ seriesContainerPosition$, seriesLabels$, separateSeries$ }: {
-  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
+  seriesContainerPosition$: Observable<ContainerPosition[]>
   seriesLabels$: Observable<string[]>
   separateSeries$: Observable<boolean>
 }) => {
@@ -165,10 +165,10 @@ export const seriesContainerPositionMapObservable = ({ seriesContainerPosition$,
     switchMap(async (d) => d),
     map(data => {
       return data.separateSeries
-        ? new Map<string, SeriesContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
+        ? new Map<string, ContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
           return [seriesLabel, data.seriesContainerPosition[seriesIndex] ?? data.seriesContainerPosition[0]]
         }))
-        : new Map<string, SeriesContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
+        : new Map<string, ContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
           return [seriesLabel, data.seriesContainerPosition[0]]
         }))
     })

package/src/utils/treeObservables.ts

@@ -34,42 +34,53 @@ export const nodeListObservable = ({ computedData$ }: { computedData$: Observabl
   )
 }
 
-export const existCategoryLabelsObservable = ({ nodeList$, fullDataFormatter$ }: {
-  nodeList$: Observable<ComputedDataTree[]>
-  fullDataFormatter$: Observable<DataFormatterTree>
-}) => {
+// export const categoryLabelsObservable = ({ nodeList$, fullDataFormatter$ }: {
+//   nodeList$: Observable<ComputedDataTree[]>
+//   fullDataFormatter$: Observable<DataFormatterTree>
+// }) => {
 
-  const categoryLabels$ = fullDataFormatter$.pipe(
-    map(d => d.categoryLabels),
-    distinctUntilChanged((a, b) => {
-      return JSON.stringify(a).length === JSON.stringify(b).length
-    }),
-  )
+//   const categoryLabels$ = fullDataFormatter$.pipe(
+//     map(d => d.categoryLabels),
+//     distinctUntilChanged((a, b) => {
+//       return JSON.stringify(a).length === JSON.stringify(b).length
+//     }),
+//   )
 
-  return combineLatest({
-    nodeList: nodeList$,
-    categoryLabels: categoryLabels$
-  }).pipe(
-    switchMap(async d => d),
-    map(data => {
-      const CurrentLabelSet = new Set(data.categoryLabels)
-      const ExistLabelSet = new Set(
-        data.nodeList.filter(node => node.visible).map(node => node.categoryLabel)
-      )
-      // 加入已存在的label（data.nodeList有，但是dataFormatter.categoryLabels沒有）
-      Array.from(ExistLabelSet).forEach(label => {
-        if (!CurrentLabelSet.has(label)) {
-          CurrentLabelSet.add(label)
-        }
-      })
-      // 移除不存在的label（dataFormatter.categoryLabels有，但是data.nodeList沒有）
-      Array.from(CurrentLabelSet).forEach(label => {
-        if (!ExistLabelSet.has(label)) {
-          ExistLabelSet.delete(label)
-        }
-      })
+//   return combineLatest({
+//     nodeList: nodeList$,
+//     categoryLabels: categoryLabels$
+//   }).pipe(
+//     switchMap(async d => d),
+//     map(data => {
+//       const CurrentLabelSet = new Set(data.categoryLabels)
+//       const ExistLabelSet = new Set(
+//         data.nodeList.filter(node => node.visible).map(node => node.categoryLabel)
+//       )
+//       // 加入已存在的label（data.nodeList有，但是dataFormatter.categoryLabels沒有）
+//       Array.from(ExistLabelSet).forEach(label => {
+//         if (!CurrentLabelSet.has(label)) {
+//           CurrentLabelSet.add(label)
+//         }
+//       })
+//       // 移除不存在的label（dataFormatter.categoryLabels有，但是data.nodeList沒有）
+//       Array.from(CurrentLabelSet).forEach(label => {
+//         if (!ExistLabelSet.has(label)) {
+//           ExistLabelSet.delete(label)
+//         }
+//       })
 
-      return Array.from(CurrentLabelSet)
+//       return Array.from(CurrentLabelSet)
+//     }),
+//     distinctUntilChanged((a, b) => {
+//       return JSON.stringify(a).length === JSON.stringify(b).length
+//     }),
+//   )
+// }
+
+export const categoryLabelsObservable = (CategoryDataMap$: Observable<Map<string, ComputedDataTree[]>>) => {
+  return CategoryDataMap$.pipe(
+    map(data => {
+      return Array.from(data.keys())
     }),
     distinctUntilChanged((a, b) => {
       return JSON.stringify(a).length === JSON.stringify(b).length

package/src/utils/validator.ts

@@ -1,4 +1,5 @@
 import type {
+  ColorType,
   ValidatorResult,
   ToBeTypes,
   ToBeOption,
@@ -40,14 +41,14 @@ function getInvalidColumn<T> (data: T, rules: Partial<ValidatorRule<T>>) {
   }
   // "toBeOption" 的測試
   const testOption: {[key in ToBeOption]: (value: any) => boolean} = {
-    ColorType: (value: any) => {
+    ColorType: (value: ColorType) => {
       return value === 'none'
-        || value === 'series'
+        || value === 'label'
         || value === 'primary'
         || value === 'secondary'
-        || value === 'white'
+        || value === 'labelContrast'
         || value === 'background'
-    }
+    },
   }
 
   const failColumn = Object.keys(data).find((columnName: string) => {

package/dist/src/utils/d3Utils.d.ts

@@ -1,19 +0,0 @@
-import * as d3 from 'd3';
-export declare const createAxisLinearScale: ({ maxValue, minValue, axisWidth, scaleDomain, scaleRange, }: {
-    maxValue: number;
-    minValue: number;
-    axisWidth: number;
-    scaleDomain: [number | "min" | "auto", number | "max" | "auto"];
-    scaleRange: [number, number];
-}) => d3.ScaleLinear<number, number, never>;
-export declare const createAxisPointScale: ({ axisLabels, axisWidth, padding }: {
-    axisLabels: string[];
-    axisWidth: number;
-    padding?: number;
-}) => d3.ScalePoint<string>;
-export declare const createAxisQuantizeScale: ({ axisLabels, axisWidth, padding, reverse }: {
-    axisLabels: string[] | Date[];
-    axisWidth: number;
-    padding?: number;
-    reverse?: boolean;
-}) => d3.ScaleQuantize<number, never>;