@orbcharts/core 3.0.0-alpha.36 → 3.0.0-alpha.38

package/src/tree/treeObservables.ts

@@ -0,0 +1,95 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable } from 'rxjs'
+import type {
+  ChartParams,
+  ComputedDataTree,
+  ComputedDataTypeMap,
+  DataFormatterTree } from '../types'
+
+
+// 所有節點list結構
+export const nodeListObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTree> }) => {
+  return computedData$.pipe(
+    map(data => {
+      function setNodeList (accNodeList: ComputedDataTree[], branch: ComputedDataTree) {
+        accNodeList.push(branch)
+        if (branch.children) {
+          branch.children.forEach(childBranch => {
+            accNodeList = setNodeList(accNodeList, childBranch) // 遞迴子節點
+          })
+        }
+        return accNodeList
+      }
+      return setNodeList([], data)
+    })
+  )
+}
+
+export const existCategoryLabelsObservable = ({ 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
+    }),
+  )
+
+  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)
+    }),
+    distinctUntilChanged((a, b) => {
+      return JSON.stringify(a).length === JSON.stringify(b).length
+    }),
+  )
+}
+
+// 所有可見的節點
+export const treeVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTree> }) => {
+  return computedData$.pipe(
+    map(data => {
+      function filterChildren (accTree: ComputedDataTree) {
+        if (accTree.children) {
+          accTree.children = accTree.children
+            .filter(child => child.visible) // 篩選visible
+            .map(child => filterChildren(child)) // 遞迴子節點
+        }
+        return accTree
+      }
+      return filterChildren(data)
+    })
+  )
+}

package/src/types/ChartParams.ts

@@ -33,7 +33,7 @@ function test (): ChartParamsPartial {
   }
 }
 
-export type HighlightTarget = 'series' | 'group' | 'datum' | 'none'
+export type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none'
 
 export interface Styles {
   textSize: number

package/src/types/ComputedData.ts

@@ -40,13 +40,30 @@ export interface ComputedDatumBase {
 //   axisY: number
 // }
 
-// datum - 序列顏色
+// datum - 序列資料
 export interface ComputedDatumSeriesValue {
   color: string
   seriesIndex: number
   seriesLabel: string
 }
 
+// datum - 矩陣資料
+export interface ComputedDatumGridValue {
+  gridIndex: number
+  color: string
+  seriesIndex: number
+  seriesLabel: string
+  groupIndex: number
+  groupLabel: string
+}
+
+// datum - 類別資料
+export interface ComputedDatumCategoryValue {
+  color: string
+  categoryIndex: number
+  categoryLabel: string | null
+}
+
 // 透過類型選擇ComputedData
 export type ComputedDataTypeMap<T extends ChartType> = T extends 'series' ? ComputedDataSeries
   : T extends 'grid' ? ComputedDataGrid

package/src/types/ComputedDataGrid.ts

@@ -1,11 +1,11 @@
-import { ComputedDatumBase, ComputedDatumSeriesValue } from './ComputedData'
+import { ComputedDatumBase, ComputedDatumGridValue } from './ComputedData'
 
 export interface ComputedDatumGrid
-  extends ComputedDatumBase, ComputedDatumSeriesValue {
+  extends ComputedDatumBase, ComputedDatumGridValue {
   // accSeriesIndex: number // 每一個grid累加的seriesIndex
-  gridIndex: number
-  groupIndex: number
-  groupLabel: string
+  // gridIndex: number
+  // groupIndex: number
+  // groupLabel: string
   axisX: number
   axisY: number
   axisYFromZero: number

package/src/types/ComputedDataMultiValue.ts

@@ -1,9 +1,8 @@
-import type { ComputedDatumBase } from './ComputedData'
+import type { ComputedDatumBase, ComputedDatumCategoryValue } from './ComputedData'
 
 export type ComputedDataMultiValue = ComputedDatumMultiValue[][]
 
-export interface ComputedDatumMultiValue
-  extends ComputedDatumBase {
+export interface ComputedDatumMultiValue extends ComputedDatumBase, ComputedDatumCategoryValue {
   axis: number
 }
 

package/src/types/ComputedDataRelationship.ts

@@ -1,11 +1,11 @@
-import type { ComputedDatumBase } from './ComputedData'
+import type { ComputedDatumBase, ComputedDatumCategoryValue } from './ComputedData'
 
 export type ComputedDataRelationship = {
   nodes: ComputedNode[]
   edges: ComputedEdge[]
 }
 
-export interface ComputedNode extends ComputedDatumBase {
+export interface ComputedNode extends ComputedDatumBase, ComputedDatumCategoryValue {
   startNodes: ComputedNode[]
   startNodeIds: string[]
   endNodes: ComputedNode[]

package/src/types/ComputedDataTree.ts

@@ -1,4 +1,4 @@
-import type { ComputedDatumBase } from './ComputedData'
+import type { ComputedDatumBase, ComputedDatumCategoryValue } from './ComputedData'
 
 // export type ComputedDataTree = ComputedDataTreeDatum[]
 
@@ -13,7 +13,7 @@ import type { ComputedDatumBase } from './ComputedData'
 // }
 
 // 樹狀結構
-export interface ComputedDataTree extends ComputedDatumBase {
+export interface ComputedDataTree extends ComputedDatumBase, ComputedDatumCategoryValue {
   level: number
   seq: number
   children?: ComputedDataTree[]

package/src/types/ContextObserverGrid.ts

@@ -18,7 +18,7 @@ export interface ContextObserverGridDetail {
   gridGraphicReverseScale$: Observable<[number, number][]>
   gridAxesSize$: Observable<{ width: number; height: number; }>
   gridHighlight$: Observable<string[]>
-  existedSeriesLabels$: Observable<string[]>
+  existSeriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   visibleComputedData$: Observable<ComputedDataGrid>

package/src/types/ContextObserverMultiGrid.ts

@@ -19,7 +19,7 @@ export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverB
 //   gridGraphicReverseScale$: Observable<[number, number][]>
 //   gridAxesSize$: Observable<{ width: number; height: number; }>
 //   gridHighlight$: Observable<string[]>
-//   existedSeriesLabels$: Observable<string[]>
+//   existSeriesLabels$: Observable<string[]>
 //   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
 //   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
 //   visibleComputedData$: Observable<ComputedDataGrid>

package/src/types/ContextObserverTree.ts

@@ -1,5 +1,10 @@
+import { Observable } from 'rxjs'
 import type { ContextObserverBase } from './ContextObserver'
+import type { ComputedDataTree } from './ComputedDataTree'
 
 export interface ContextObserverTree<PluginParams> extends ContextObserverBase<'tree', PluginParams> {
-
+  treeHighlight$: Observable<string[]>
+  existCategoryLabels$: Observable<string[]>
+  CategoryDataMap$: Observable<Map<string, ComputedDataTree[]>>
+  visibleComputedData$: Observable<ComputedDataTree>
 }

package/src/types/DataFormatterMultiGrid.ts

@@ -9,13 +9,13 @@ import type {
 import type { AxisPosition } from './Axis'
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
-  visibleFilter: VisibleFilter<'multiGrid'>
+  // visibleFilter: VisibleFilter<'multiGrid'>
   gridList: Array<DataFormatterGridGrid>
   container: DataFormatterMultiGridContainer
 }
 
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
-  visibleFilter?: VisibleFilter<'multiGrid'>
+  // visibleFilter?: VisibleFilter<'multiGrid'>
   gridList?: Array<DataFormatterGridGridPartial>
   container?: Partial<DataFormatterMultiGridContainer>
 }

package/src/types/DataFormatterMultiValue.ts

@@ -17,5 +17,5 @@ export interface DataFormatterMultiValuePartial extends DataFormatterBasePartial
 
 // multiValue欄位
 export interface DataFormatterMultiValueMultiValue {
-  unitLabel: string
+  // unitLabel: string
 }

package/src/types/DataFormatterSeries.ts

@@ -5,7 +5,7 @@ import { DataFormatterBase, DataFormatterBasePartial, VisibleFilter } from './Da
 export interface DataFormatterSeries extends DataFormatterBase<'series'> {
   visibleFilter: VisibleFilter<'series'>
   // series: DataFormatterSeriesSeries
-  unitLabel: string
+  // unitLabel: string
   seriesLabels: string[]
   // labelFormat: (datum: DataSeriesDatum) => string
   // mapSeries: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
@@ -16,7 +16,7 @@ export interface DataFormatterSeries extends DataFormatterBase<'series'> {
 
 export interface DataFormatterSeriesPartial extends DataFormatterBasePartial<'series'> {
   // series: Partial<DataFormatterSeriesSeries>
-  unitLabel?: string
+  // unitLabel?: string
   seriesLabels?: string[]
   // colorsPredicate?: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
   sort?: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null

package/src/types/DataFormatterTree.ts

@@ -6,6 +6,7 @@ export interface DataFormatterTree
     visibleFilter: VisibleFilter<'tree'>
   // labelFormat: (datum: unknown) => string
   // descriptionFormat: (datum: unknown) => string
+    categoryLabels: string[]
 }
 
 export type DataFormatterTreePartial = Partial<DataFormatterTree>

package/src/types/DataMultiValue.ts

@@ -6,6 +6,7 @@ export type DataMultiValue = (DataMultiValueDatum | DataMultiValueValue)[][]
 export type DataMultiValueValue = number
 
 export interface DataMultiValueDatum extends DatumBase, DatumValue {
+  categoryLabel?: string
 }
 
 

package/src/types/DataRelationship.ts

@@ -18,6 +18,7 @@ export type DataRelationshipList = [
 export interface Node extends DatumBase {
   id: string
   value?: number
+  categoryLabel?: string
 }
 
 export interface Edge extends DatumBase {

package/src/types/DataTree.ts

@@ -7,6 +7,7 @@ export interface DataTreeObj extends DatumBase {
   id: string
   value?: number
   children?: DataTreeObj[]
+  categoryLabel?: string
 }
 
 // 陣列資料
@@ -14,5 +15,6 @@ export interface DataTreeDatum extends DatumBase {
   id: string
   value?: number
   parent?: string
+  categoryLabel?: string
 }
 

package/src/types/Event.ts

@@ -5,7 +5,7 @@ import type { ComputedDataSeries, ComputedDatumSeries } from './ComputedDataSeri
 import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
 import type { ComputedDataMultiGrid } from './ComputedDataMultiGrid'
 import type { ComputedDataMultiValue, ComputedDatumMultiValue } from './ComputedDataMultiValue'
-import type { ComputedNode } from './ComputedDataRelationship'
+import type { ComputedDataRelationship, ComputedNode } from './ComputedDataRelationship'
 import type { ComputedDataTree } from './ComputedDataTree'
 import type { HighlightTarget } from './ChartParams'
 
@@ -41,74 +41,113 @@ export type EventTypeMap<T extends ChartType> = T extends 'series' ? EventSeries
   : T extends 'multiValue' ? EventMultiValue
   : T extends 'relationship' ? EventRelationship
   : T extends 'tree' ? EventTree
-  : EventBase
+  : EventBase<any>
 
-export interface EventBase {
+export interface EventBase<T extends ChartType> {
+  type: T
   eventName: EventName
   pluginName: string
-  // data: EventData
-  type: ChartType
   event: MouseEvent | undefined
   highlightTarget: HighlightTarget
-  datum: ComputedDatumBase | null
+  // datum: ComputedDatumBase | null
   tween?: number
 }
 
-export interface EventSeries extends EventBase {
-  type: 'series'
-  data: ComputedDataSeries
-  series: ComputedDatumSeries[]
+export interface EventBaseSeriesValue<DatumType, DataType> {
+  data: DataType
+  series: DatumType[]
   seriesIndex: number
   seriesLabel: string
-  datum: ComputedDatumSeries | null
-  // highlightTarget: 'series' | 'datum' | 'none'
-  // highlightLabel: string | null
-  // highlightId: string | null
+  datum: DatumType | null
 }
 
-export interface EventGrid extends EventBase {
-  type: 'grid'
-  data: ComputedDataGrid
-  series: ComputedDatumGrid[]
+export interface EventBaseGridValue<DatumType, DataType> {
+  data: DataType
+  gridIndex: number
+  series: DatumType[]
   seriesIndex: number
   seriesLabel: string
-  groups: ComputedDatumGrid[]
+  groups: DatumType[]
   groupIndex: number
   groupLabel: string
-  datum: ComputedDatumGrid | null
-  // highlightTarget: 'series' | 'group' | 'datum' | 'none'
-  // highlightLabel: string | null
-  // highlightId: string | null
+  datum: DatumType | null
 }
 
-export interface EventMultiGrid extends EventBase {
-  type: 'multiGrid'
-  data: ComputedDataMultiGrid
-  gridIndex: number
-  series: ComputedDatumGrid[]
-  seriesIndex: number
-  seriesLabel: string
-  group: ComputedDatumGrid[]
-  groupIndex: number
-  groupLabel: string
-  datum: ComputedDatumGrid | null
-  // highlightTarget: 'series' | 'group' | 'datum' | 'none'
-  // highlightLabel: string | null
-  // highlightId: string | null
+export interface EventBaseCategoryValue<DatumType, DataType> {
+  data: DataType
+  category: DatumType[]
+  categoryIndex: number
+  categoryLabel: string
+  datum: DatumType | null
+}
+
+export interface EventSeries extends EventBase<'series'>, EventBaseSeriesValue<ComputedDatumSeries, ComputedDataSeries> {
+  // type: 'series'
+  // data: ComputedDataSeries
+  // series: ComputedDatumSeries[]
+  // seriesIndex: number
+  // seriesLabel: string
+  // datum: ComputedDatumSeries | null
+  // // highlightTarget: 'series' | 'datum' | 'none'
+  // // highlightLabel: string | null
+  // // highlightId: string | null
+}
+
+export interface EventGrid extends EventBase<'grid'>, EventBaseGridValue<ComputedDatumGrid, ComputedDataGrid> {
+  // type: 'grid'
+  // data: ComputedDataGrid
+  // series: ComputedDatumGrid[]
+  // seriesIndex: number
+  // seriesLabel: string
+  // groups: ComputedDatumGrid[]
+  // groupIndex: number
+  // groupLabel: string
+  // datum: ComputedDatumGrid | null
+  // // highlightTarget: 'series' | 'group' | 'datum' | 'none'
+  // // highlightLabel: string | null
+  // // highlightId: string | null
+}
+
+export interface EventMultiGrid extends EventBase<'multiGrid'>, EventBaseGridValue<ComputedDatumGrid, ComputedDataMultiGrid> {
+  // type: 'multiGrid'
+  // data: ComputedDataMultiGrid
+  // gridIndex: number
+  // series: ComputedDatumGrid[]
+  // seriesIndex: number
+  // seriesLabel: string
+  // group: ComputedDatumGrid[]
+  // groupIndex: number
+  // groupLabel: string
+  // datum: ComputedDatumGrid | null
+  // // highlightTarget: 'series' | 'group' | 'datum' | 'none'
+  // // highlightLabel: string | null
+  // // highlightId: string | null
 }
 
-export interface EventMultiValue extends EventBase {
-  type: 'multiValue'
-  datum: ComputedDatumMultiValue | null
+export interface EventMultiValue extends EventBase<'multiValue'>, EventBaseCategoryValue<ComputedDatumMultiValue, ComputedDataMultiValue> {
+  // type: 'multiValue'
+  // data: ComputedDataMultiValue
+  // category: ComputedDatumMultiValue[]
+  // categoryIndex: number
+  // categoryLabel: string
+  // datum: ComputedDatumMultiValue | null
 }
 
-export interface EventRelationship extends EventBase {
-  type: 'relationship'
-  datum: ComputedNode | null
+export interface EventRelationship extends EventBase<'relationship'>, EventBaseCategoryValue<ComputedNode, ComputedDataRelationship> {
+  // type: 'relationship'
+  // data: ComputedDataRelationship
+  // category: ComputedNode[]
+  // categoryIndex: number
+  // categoryLabel: string
+  // datum: ComputedNode | null
 }
 
-export interface EventTree extends EventBase {
-  type: 'tree'
-  datum: ComputedDataTree | null
+export interface EventTree extends EventBase<'tree'>, EventBaseCategoryValue<ComputedDataTree, ComputedDataTree> {
+  // type: 'tree'
+  // data: ComputedDataTree
+  // category: ComputedDataTree[]
+  // categoryIndex: number
+  // categoryLabel: string
+  // datum: ComputedDataTree | null
 }
 

package/src/utils/d3Utils.ts

@@ -15,7 +15,6 @@ export const createAxisLinearScale = ({
   scaleDomain: [number | 'auto', number | 'auto']
   scaleRange: [number, number] // 0-1
 }) => {
-
   // -- 無值補上預設值 --
   const domainMin: number | 'auto' = scaleDomain[0] ?? DATA_FORMATTER_VALUE_AXIS.scaleDomain[0]
   const domainMax: number | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS.scaleDomain[1]