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

package/dist/src/types/ComputedData.d.ts

@@ -24,5 +24,18 @@ export interface ComputedDatumSeriesValue {
     seriesIndex: number;
     seriesLabel: string;
 }
+export interface ComputedDatumGridValue {
+    gridIndex: number;
+    color: string;
+    seriesIndex: number;
+    seriesLabel: string;
+    groupIndex: number;
+    groupLabel: string;
+}
+export interface ComputedDatumCategoryValue {
+    color: string;
+    categoryIndex: number;
+    categoryLabel: string | null;
+}
 export type ComputedDataTypeMap<T extends ChartType> = T extends 'series' ? ComputedDataSeries : T extends 'grid' ? ComputedDataGrid : T extends 'multiGrid' ? ComputedDataMultiGrid : T extends 'multiValue' ? ComputedDataMultiValue : T extends 'relationship' ? ComputedDataRelationship : T extends 'tree' ? ComputedDataTree : ComputedDatumBase;
 export type ComputedDatumTypeMap<T extends ChartType> = T extends 'series' ? ComputedDatumSeries : T extends 'grid' ? ComputedDatumGrid : T extends 'multiGrid' ? ComputedDatumGrid : T extends 'multiValue' ? ComputedDatumMultiValue : T extends 'relationship' ? ComputedNode : T extends 'tree' ? ComputedDataTree : unknown;

package/dist/src/types/ComputedDataGrid.d.ts

@@ -1,9 +1,6 @@
-import { ComputedDatumBase, ComputedDatumSeriesValue } from './ComputedData';
+import { ComputedDatumBase, ComputedDatumGridValue } from './ComputedData';
 
-export interface ComputedDatumGrid extends ComputedDatumBase, ComputedDatumSeriesValue {
-    gridIndex: number;
-    groupIndex: number;
-    groupLabel: string;
+export interface ComputedDatumGrid extends ComputedDatumBase, ComputedDatumGridValue {
     axisX: number;
     axisY: number;
     axisYFromZero: number;

package/dist/src/types/ComputedDataMultiValue.d.ts

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

package/dist/src/types/ComputedDataRelationship.d.ts

@@ -1,10 +1,10 @@
-import { ComputedDatumBase } from './ComputedData';
+import { 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/dist/src/types/ComputedDataTree.d.ts

@@ -1,6 +1,6 @@
-import { ComputedDatumBase } from './ComputedData';
+import { ComputedDatumBase, ComputedDatumCategoryValue } from './ComputedData';
 
-export interface ComputedDataTree extends ComputedDatumBase {
+export interface ComputedDataTree extends ComputedDatumBase, ComputedDatumCategoryValue {
     level: number;
     seq: number;
     children?: ComputedDataTree[];

package/dist/src/types/ContextObserverTree.d.ts

@@ -1,4 +1,10 @@
+import { Observable } from 'rxjs';
 import { ContextObserverBase } from './ContextObserver';
+import { 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/dist/src/types/DataFormatterMultiGrid.d.ts

@@ -1,13 +1,11 @@
-import { VisibleFilter, DataFormatterBase, DataFormatterBasePartial } from './DataFormatter';
 import { DataFormatterGridGrid, DataFormatterGridGridPartial, DataFormatterGridContainer } from './DataFormatterGrid';
+import { DataFormatterBase, DataFormatterBasePartial } from './DataFormatter';
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
-    visibleFilter: VisibleFilter<'multiGrid'>;
     gridList: Array<DataFormatterGridGrid>;
     container: DataFormatterMultiGridContainer;
 }
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
-    visibleFilter?: VisibleFilter<'multiGrid'>;
     gridList?: Array<DataFormatterGridGridPartial>;
     container?: Partial<DataFormatterMultiGridContainer>;
 }

package/dist/src/types/DataFormatterMultiValue.d.ts

@@ -12,5 +12,4 @@ export interface DataFormatterMultiValuePartial extends DataFormatterBasePartial
     yAxis?: Partial<DataFormatterValueAxis>;
 }
 export interface DataFormatterMultiValueMultiValue {
-    unitLabel: string;
 }

package/dist/src/types/DataFormatterSeries.d.ts

@@ -3,12 +3,10 @@ import { DataFormatterBase, DataFormatterBasePartial, VisibleFilter } from './Da
 
 export interface DataFormatterSeries extends DataFormatterBase<'series'> {
     visibleFilter: VisibleFilter<'series'>;
-    unitLabel: string;
     seriesLabels: string[];
     sort: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null;
 }
 export interface DataFormatterSeriesPartial extends DataFormatterBasePartial<'series'> {
-    unitLabel?: string;
     seriesLabels?: string[];
     sort?: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null;
 }

package/dist/src/types/DataFormatterTree.d.ts

@@ -2,5 +2,6 @@ import { DataFormatterBase, VisibleFilter } from './DataFormatter';
 
 export interface DataFormatterTree extends DataFormatterBase<'tree'> {
     visibleFilter: VisibleFilter<'tree'>;
+    categoryLabels: string[];
 }
 export type DataFormatterTreePartial = Partial<DataFormatterTree>;

package/dist/src/types/DataMultiValue.d.ts

@@ -3,4 +3,5 @@ import { DatumBase, DatumValue } from './Data';
 export type DataMultiValue = (DataMultiValueDatum | DataMultiValueValue)[][];
 export type DataMultiValueValue = number;
 export interface DataMultiValueDatum extends DatumBase, DatumValue {
+    categoryLabel?: string;
 }

package/dist/src/types/DataRelationship.d.ts

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

package/dist/src/types/DataTree.d.ts

@@ -5,9 +5,11 @@ export interface DataTreeObj extends DatumBase {
     id: string;
     value?: number;
     children?: DataTreeObj[];
+    categoryLabel?: string;
 }
 export interface DataTreeDatum extends DatumBase {
     id: string;
     value?: number;
     parent?: string;
+    categoryLabel?: string;
 }

package/dist/src/types/Event.d.ts

@@ -4,7 +4,7 @@ import { ComputedDataSeries, ComputedDatumSeries } from './ComputedDataSeries';
 import { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid';
 import { ComputedDataMultiGrid } from './ComputedDataMultiGrid';
 import { ComputedDatumMultiValue } from './ComputedDataMultiValue';
-import { ComputedNode } from './ComputedDataRelationship';
+import { ComputedDataRelationship, ComputedNode } from './ComputedDataRelationship';
 import { ComputedDataTree } from './ComputedDataTree';
 import { HighlightTarget } from './ChartParams';
 
@@ -56,9 +56,17 @@ export interface EventMultiValue extends EventBase {
 }
 export interface EventRelationship extends EventBase {
     type: 'relationship';
+    data: ComputedDataRelationship;
+    category: ComputedNode[];
+    categoryIndex: number;
+    categoryLabel: string;
     datum: ComputedNode | null;
 }
 export interface EventTree extends EventBase {
     type: 'tree';
+    data: ComputedDataTree;
+    category: ComputedDataTree[];
+    categoryIndex: number;
+    categoryLabel: string;
     datum: ComputedDataTree | null;
 }

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

@@ -1,14 +1,17 @@
 import { Subject, Observable } from 'rxjs';
-import { ChartType, ChartParams, ComputedDatumTypeMap } from '../types';
+import { ChartParams, ComputedDatumTypeMap } from '../types';
 
 export declare const highlightObservable: ({ datumList$, fullChartParams$, event$ }: {
-    datumList$: Observable<ComputedDatumTypeMap<"series" | "grid">[]>;
+    datumList$: Observable<ComputedDatumTypeMap<"series" | "grid" | "multiValue" | "relationship" | "tree">[]>;
     fullChartParams$: Observable<ChartParams>;
     event$: Subject<any>;
 }) => Observable<string[]>;
-export declare const seriesDataMapObservable: <DatumType extends ComputedDatumTypeMap<ChartType>>({ datumList$ }: {
+export declare const seriesDataMapObservable: <DatumType extends ComputedDatumTypeMap<"series" | "grid">>({ datumList$ }: {
     datumList$: Observable<DatumType[]>;
 }) => Observable<Map<string, DatumType[]>>;
-export declare const groupDataMapObservable: <DatumType extends ComputedDatumTypeMap<ChartType>>({ datumList$ }: {
+export declare const groupDataMapObservable: <DatumType extends ComputedDatumTypeMap<"grid">>({ datumList$ }: {
+    datumList$: Observable<DatumType[]>;
+}) => Observable<Map<string, DatumType[]>>;
+export declare const categoryDataMapObservable: <DatumType extends ComputedDatumTypeMap<"multiValue" | "relationship" | "tree">>({ datumList$ }: {
     datumList$: Observable<DatumType[]>;
 }) => Observable<Map<string, DatumType[]>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.36",
+  "version": "3.0.0-alpha.37",
   "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",

package/src/defaults.ts

@@ -58,7 +58,8 @@ export const CHART_PARAMS_DEFAULT: ChartParams = {
   colors: {
     light: {
       series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
-      primary: '#454545',
+      // primary: '#454545',
+      primary: '#1b1e23',
       secondary: '#e1e1e1',
       white: '#ffffff',
       background: '#ffffff'
@@ -139,7 +140,7 @@ export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
   // ...DATA_FORMATTER_WITH_VALUE,
   type: 'series',
   visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  unitLabel: '',
+  // unitLabel: '',
   seriesLabels: [],
   // mapSeries: (datum, rowIndex, columnIndex, { data, dataFormatter }) => {
   //   const seriesIndex = rowIndex >= dataFormatter.seriesLabels.length
@@ -200,7 +201,7 @@ export const DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT: DataFormatterMultiGridGrid
 
 export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
   type: 'multiGrid',
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
+  // visibleFilter: (datum, rowIndex, columnIndex, context) => true,
   gridList: [
     {
       ...DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
@@ -226,6 +227,7 @@ export const DATA_FORMATTER_TREE_DEFAULT: DataFormatterTree = {
   type: 'tree',
   visibleFilter: (datum, rowIndex, columnIndex, context) => true,
   // labelFormat: (datum: any) => (datum && datum.label) ?? '',
+  categoryLabels: []
 }
 
 export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {

package/src/multiValue/computeMultiValueData.ts

@@ -24,6 +24,7 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
             description: '',
             // tooltipContent: '',
             data: {},
+            categoryLabel: '',
             value: _d
           }
           : {
@@ -32,6 +33,7 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
             description: _d.description ?? '',
             // tooltipContent: _d.tooltipContent ?? '',
             data: _d.data ?? {},
+            categoryLabel: _d.categoryLabel ??'',
             value: _d.value
           }
         
@@ -82,7 +84,7 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
       dataFormatter.yAxis.scaleDomain[0] === 'auto' ? yMinValue : dataFormatter.yAxis.scaleDomain[0],
       dataFormatter.yAxis.scaleDomain[1] === 'auto' ? yMaxValue : dataFormatter.yAxis.scaleDomain[1]
     ]
-    debugger
+    
     // 篩選顯示狀態
     const visibleFilter = (datum: DataMultiValueDatum, rowIndex: number, columnIndex: number, context: DataFormatterContext<"multiValue">) => {
       // 如果不在scale的範圍內則為false，不再做visibleFilter的判斷
@@ -115,9 +117,12 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
           // 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
+          visible,
+          color: '' // @Q@ 未完成
         }
         return computedDatum
       })

package/src/relationship/computeRelationshipData.ts

@@ -36,6 +36,9 @@ export const computeRelationshipData: ComputedDataFn<'relationship'> = (context)
         // 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: [], // 後面再取得資料

package/src/series/createSeriesContextObserver.ts

@@ -1,9 +1,9 @@
 import { shareReplay } from 'rxjs'
 import type { ContextObserverFn } from '../types'
 import {
-  highlightObservable,
   seriesDataMapObservable,
   groupDataMapObservable } from '../utils/observables'
+import { highlightObservable } from '../utils/observables'
 
 export const createSeriesContextObserver: ContextObserverFn<'series'> = ({ subject, observer }) => {
 

package/src/series/seriesObservables.ts

@@ -11,13 +11,14 @@ import {
   Observable } from 'rxjs'
 import type {
   ChartParams,
+  ComputedDatumSeries,
   ComputedDataTypeMap } from '../types'
 import { highlightObservable } from '../utils/observables'
 
-export const seriesHighlightObservable = ({ computedData$, fullChartParams$, event$ }: {
-  computedData$: Observable<ComputedDataTypeMap<'series'>>
-  fullChartParams$: Observable<ChartParams>
-  event$: Subject<any>
-}): Observable<string[]> => {
-  return highlightObservable ({ datumList$: computedData$, fullChartParams$, event$ })
-}
+// export const seriesHighlightObservable = ({ computedData$, fullChartParams$, event$ }: {
+//   computedData$: Observable<ComputedDataTypeMap<'series'>>
+//   fullChartParams$: Observable<ChartParams>
+//   event$: Subject<any>
+// }): Observable<string[]> => {
+//   return highlightObservable ({ datumList$: computedData$, fullChartParams$, event$ })
+// }

package/src/tree/computeTreeData.ts

@@ -2,15 +2,24 @@ import type { DataTree, DataTreeObj, DataTreeDatum } from '../types/DataTree'
 import type { ComputedDataFn } from '../types/ComputedData'
 import type { ComputedDataTree } from '../types/ComputedDataTree'
 import { isPlainObject } from '../utils/commonUtils'
+import { seriesColorPredicate } from '../utils/orbchartsUtils'
 
 export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
   const { data = [], dataFormatter, chartParams } = context
 
+  // <categoryLabel, categoryIndex>
+  const CategoryIndexMap = new Map<string, number>(
+    dataFormatter.categoryLabels.map((label, index) => [label, index])
+  )
+
   let computedBranchData: ComputedDataTree = {
     id: '',
     index: 0,
     label: '',
     description: '',
+    categoryIndex: 0,
+    categoryLabel: '',
+    color: '',
     visible: true,
     // tooltipContent: '',
     data: {},
@@ -56,6 +65,7 @@ export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
           data: root.data,
           // tooltipContent: root.tooltipContent,
           value: root.value,
+          categoryLabel: root.categoryLabel,
           children: (ChildrenMap.get(root.id) ?? []).map(d => {
             // 遞迴
             return createBranchData(d)
@@ -73,23 +83,35 @@ export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
 
     let index = 0
     
-    const formatBranchData = (branchRoot: DataTreeObj, level: number, seq: number): ComputedDataTree => {
+    const formatBranchData = (branch: DataTreeObj, level: number, seq: number): ComputedDataTree => {
       const childLayer = level + 1
-      const visible = dataFormatter.visibleFilter(branchRoot, level, seq, context)
+      const visible = dataFormatter.visibleFilter(branch, level, seq, context)
+      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 currentIndex = index
       index++
       return {
-        id: branchRoot.id,
+        id: branch.id,
         index: currentIndex,
         level,
         seq,
-        label: branchRoot.label ?? '',
-        description: branchRoot.description ?? '',
-        data: branchRoot.data ?? {},
-        // tooltipContent: branchRoot.tooltipContent ? branchRoot.tooltipContent : dataFormatter.tooltipContentFormat(branchRoot, level, seq, context),
-        value: branchRoot.value,
+        label: branch.label ?? '',
+        description: branch.description ?? '',
+        categoryIndex,
+        categoryLabel,
+        color: seriesColorPredicate(categoryIndex, chartParams),
+        data: branch.data ?? {},
+        // tooltipContent: branch.tooltipContent ? branch.tooltipContent : dataFormatter.tooltipContentFormat(branch, level, seq, context),
+        value: branch.value,
         visible,
-        children: (branchRoot.children ?? []).map((d, i) => {
+        children: (branch.children ?? []).map((d, i) => {
           // 遞迴
           return formatBranchData(d, childLayer, i)
         })

package/src/tree/createTreeContextObserver.ts

@@ -1,12 +1,56 @@
+import { map, shareReplay } from 'rxjs'
 import type { ContextObserverFn } from '../types'
+import { highlightObservable, categoryDataMapObservable } from '../utils/observables'
+import {
+  nodeListObservable,
+  existCategoryLabelsObservable,
+  treeVisibleComputedDataObservable
+} from './treeObservables'
 
 export const createTreeContextObserver: ContextObserverFn<'tree'> = ({ subject, observer }) => {
 
+  const nodeList$ = nodeListObservable({
+    computedData$: observer.computedData$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const treeHighlight$ = highlightObservable({
+    datumList$: nodeList$,
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const existCategoryLabels$ = existCategoryLabelsObservable({
+    nodeList$,
+    fullDataFormatter$: observer.fullDataFormatter$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const CategoryDataMap$ = categoryDataMapObservable({
+    datumList$: nodeList$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const visibleComputedData$ = treeVisibleComputedDataObservable({
+    computedData$: observer.computedData$
+  }).pipe(
+    shareReplay(1)
+  )
+
   return {
     fullParams$: observer.fullParams$,
     fullChartParams$: observer.fullChartParams$,
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
+    treeHighlight$,
+    existCategoryLabels$,
+    CategoryDataMap$,
+    visibleComputedData$
   }
 }

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[]