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

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

@@ -21,7 +21,7 @@ export type ChartParamsPartial = Partial<ChartParams | {
     }>;
     styles: Partial<Styles>;
 }>;
-export type HighlightTarget = 'series' | 'group' | 'datum' | 'none';
+export type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none';
 export interface Styles {
     textSize: number;
     unhighlightedOpacity: number;

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/ContextObserverGrid.d.ts

@@ -16,7 +16,7 @@ export interface ContextObserverGridDetail {
         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/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

@@ -1,64 +1,56 @@
 import { ChartType } from './Chart';
-import { ComputedDatumBase } from './ComputedData';
 import { ComputedDataSeries, ComputedDatumSeries } from './ComputedDataSeries';
 import { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid';
 import { ComputedDataMultiGrid } from './ComputedDataMultiGrid';
-import { ComputedDatumMultiValue } from './ComputedDataMultiValue';
-import { ComputedNode } from './ComputedDataRelationship';
+import { ComputedDataMultiValue, ComputedDatumMultiValue } from './ComputedDataMultiValue';
+import { ComputedDataRelationship, ComputedNode } from './ComputedDataRelationship';
 import { ComputedDataTree } from './ComputedDataTree';
 import { HighlightTarget } from './ChartParams';
 
 export type EventName = 'click' | 'mouseover' | 'mousemove' | 'mouseout' | 'dragstart' | 'drag' | 'dragend' | 'resize' | 'transitionMove' | 'transitionEnd';
-export type EventTypeMap<T extends ChartType> = T extends 'series' ? EventSeries : T extends 'grid' ? EventGrid : T extends 'multiGrid' ? EventMultiGrid : T extends 'multiValue' ? EventMultiValue : T extends 'relationship' ? EventRelationship : T extends 'tree' ? EventTree : EventBase;
-export interface EventBase {
+export type EventTypeMap<T extends ChartType> = T extends 'series' ? EventSeries : T extends 'grid' ? EventGrid : T extends 'multiGrid' ? EventMultiGrid : T extends 'multiValue' ? EventMultiValue : T extends 'relationship' ? EventRelationship : T extends 'tree' ? EventTree : EventBase<any>;
+export interface EventBase<T extends ChartType> {
+    type: T;
     eventName: EventName;
     pluginName: string;
-    type: ChartType;
     event: MouseEvent | undefined;
     highlightTarget: HighlightTarget;
-    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;
+    datum: DatumType | null;
 }
-export interface EventGrid extends EventBase {
-    type: 'grid';
-    data: ComputedDataGrid;
-    series: ComputedDatumGrid[];
-    seriesIndex: number;
-    seriesLabel: string;
-    groups: ComputedDatumGrid[];
-    groupIndex: number;
-    groupLabel: string;
-    datum: ComputedDatumGrid | null;
-}
-export interface EventMultiGrid extends EventBase {
-    type: 'multiGrid';
-    data: ComputedDataMultiGrid;
+export interface EventBaseGridValue<DatumType, DataType> {
+    data: DataType;
     gridIndex: number;
-    series: ComputedDatumGrid[];
+    series: DatumType[];
     seriesIndex: number;
     seriesLabel: string;
-    group: ComputedDatumGrid[];
+    groups: DatumType[];
     groupIndex: number;
     groupLabel: string;
-    datum: ComputedDatumGrid | null;
+    datum: DatumType | 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> {
+}
+export interface EventGrid extends EventBase<'grid'>, EventBaseGridValue<ComputedDatumGrid, ComputedDataGrid> {
+}
+export interface EventMultiGrid extends EventBase<'multiGrid'>, EventBaseGridValue<ComputedDatumGrid, ComputedDataMultiGrid> {
 }
-export interface EventMultiValue extends EventBase {
-    type: 'multiValue';
-    datum: ComputedDatumMultiValue | null;
+export interface EventMultiValue extends EventBase<'multiValue'>, EventBaseCategoryValue<ComputedDatumMultiValue, ComputedDataMultiValue> {
 }
-export interface EventRelationship extends EventBase {
-    type: 'relationship';
-    datum: ComputedNode | null;
+export interface EventRelationship extends EventBase<'relationship'>, EventBaseCategoryValue<ComputedNode, ComputedDataRelationship> {
 }
-export interface EventTree extends EventBase {
-    type: 'tree';
-    datum: ComputedDataTree | null;
+export interface EventTree extends EventBase<'tree'>, EventBaseCategoryValue<ComputedDataTree, ComputedDataTree> {
 }

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.38",
   "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/grid/createGridContextObserver.ts

@@ -10,7 +10,7 @@ import {
   gridGraphicTransformObservable,
   gridGraphicReverseScaleObservable,
   gridAxesSizeObservable,
-  existedSeriesLabelsObservable,
+  existSeriesLabelsObservable,
   gridVisibleComputedDataObservable,
   isSeriesPositionSeprateObservable,
   gridContainerObservable } from './gridObservables'
@@ -79,7 +79,7 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     shareReplay(1)
   )
 
-  const existedSeriesLabels$ = existedSeriesLabelsObservable({
+  const existSeriesLabels$ = existSeriesLabelsObservable({
     computedData$: observer.computedData$,
   })
 
@@ -116,7 +116,7 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     gridGraphicReverseScale$,
     gridAxesSize$,
     gridHighlight$,
-    existedSeriesLabels$,
+    existSeriesLabels$,
     SeriesDataMap$,
     GroupDataMap$,
     visibleComputedData$,

package/src/grid/gridObservables.ts

@@ -380,7 +380,7 @@ export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
 //   return highlightObservable ({ datumList$, fullChartParams$, event$ })
 // }
 
-export const existedSeriesLabelsObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'grid'>> }) => {
+export const existSeriesLabelsObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'grid'>> }) => {
   return computedData$.pipe(
     map(data => {
       return data

package/src/multiGrid/multiGridObservables.ts

@@ -36,7 +36,7 @@ import {
   gridGraphicReverseScaleObservable,
   gridAxesReverseTransformObservable,
   gridAxesSizeObservable,
-  existedSeriesLabelsObservable,
+  existSeriesLabelsObservable,
   gridVisibleComputedDataObservable,
   isSeriesPositionSeprateObservable,
   gridContainerObservable } from '../grid/gridObservables'
@@ -128,7 +128,7 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
       shareReplay(1)
     )
 
-    const existedSeriesLabels$ = existedSeriesLabelsObservable({
+    const existSeriesLabels$ = existSeriesLabelsObservable({
       computedData$: gridComputedData$,
     })
 
@@ -160,7 +160,7 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
       gridGraphicReverseScale$,
       gridAxesSize$,
       gridHighlight$,
-      existedSeriesLabels$,
+      existSeriesLabels$,
       SeriesDataMap$,
       GroupDataMap$,
       visibleComputedData$,

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$
   }
 }