feat: support both tree data and graph data in tree graph scenarios (#…

…2802)

* feat: support both tree data and graph data in tree graph scenarios

* fix: ci

* fix: typo

packages/graphs/src/components/dendrogram/index.tsx

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import { BaseGraph } from '../../core/base-graph';
 import { COMMON_OPTIONS } from '../../core/constants';
+import { formatTreeData } from '../../core/utils/data';
 import { mergeOptions } from '../../core/utils/options';
 import { DEFAULT_OPTIONS, getDendrogramOptions } from './options';
 import type { DendrogramOptions } from './types';
@@ -17,8 +18,15 @@ export const Dendrogram: ForwardRefExoticComponent<
   PropsWithoutRef<PropsWithChildren<DendrogramOptions>> & RefAttributes<Graph>
 > = forwardRef<Graph, PropsWithChildren<DendrogramOptions>>(({ children, ...props }, ref) => {
   const options = useMemo(() => {
-    const { direction = 'horizontal', compact = false, ...restProps } = props;
-    return mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, getDendrogramOptions({ direction, compact }), restProps);
+    const { data, defaultExpandLevel, direction = 'horizontal', compact = false, ...restProps } = props;
+
+    return mergeOptions(
+      COMMON_OPTIONS,
+      DEFAULT_OPTIONS,
+      { data: formatTreeData(data, defaultExpandLevel) },
+      getDendrogramOptions({ direction, compact }),
+      restProps,
+    );
   }, [props]);
 
   return (

packages/graphs/src/components/dendrogram/options.tsx

@@ -1,7 +1,8 @@
 import { isEmpty } from 'lodash';
+import type { GraphOptions } from '../../types';
 import type { DendrogramOptions } from './types';
 
-export const DEFAULT_OPTIONS: DendrogramOptions = {
+export const DEFAULT_OPTIONS: GraphOptions = {
   node: {
     type: 'circle',
     style: {
@@ -13,7 +14,7 @@ export const DEFAULT_OPTIONS: DendrogramOptions = {
 export const getDendrogramOptions = ({
   direction,
   compact,
-}: Pick<DendrogramOptions, 'direction' | 'compact'>): DendrogramOptions => {
+}: Pick<DendrogramOptions, 'direction' | 'compact'>): GraphOptions => {
   const isLeafNode = (d) => isEmpty(d.children);
 
   const layoutType = compact ? 'compact-box' : 'dendrogram';

packages/graphs/src/components/dendrogram/types.ts

@@ -1,6 +1,15 @@
+import type { GraphData, TreeData } from '@antv/g6';
 import type { GraphOptions } from '../../types';
 
-export interface DendrogramOptions extends GraphOptions {
+export interface DendrogramOptions extends Omit<GraphOptions, 'data'> {
+  /**
+   * The data.
+   */
+  data?: GraphData | TreeData;
+  /**
+   * The default expand level. If not set, all nodes will be expanded.
+   */
+  defaultExpandLevel?: number;
   /**
    * The direction of the dendrogram.
    * - `'vertical'`: vertical direction (top to bottom).

packages/graphs/src/components/fishbone/index.tsx

@@ -9,17 +9,25 @@ import React, {
 } from 'react';
 import { BaseGraph } from '../../core/base-graph';
 import { COMMON_OPTIONS } from '../../core/constants';
+import { formatTreeData } from '../../core/utils/data';
 import { mergeOptions } from '../../core/utils/options';
 import { DEFAULT_OPTIONS, getFishboneOptions } from './options';
 import type { FishboneOptions } from './types';
 
 export const Fishbone: ForwardRefExoticComponent<
   PropsWithoutRef<PropsWithChildren<FishboneOptions>> & RefAttributes<Graph>
 > = forwardRef<Graph, PropsWithChildren<FishboneOptions>>(({ children, ...props }, ref) => {
-  const { type = 'cause', labelField, ...restProps } = props;
+  const { data, defaultExpandLevel, type = 'cause', labelField, ...restProps } = props;
 
   const options = useMemo(
-    () => mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, getFishboneOptions({ type, labelField }), restProps),
+    () =>
+      mergeOptions(
+        COMMON_OPTIONS,
+        DEFAULT_OPTIONS,
+        { data: formatTreeData(data) },
+        getFishboneOptions({ type, labelField }),
+        restProps,
+      ),
     [props],
   );
 

packages/graphs/src/components/fishbone/options.tsx

@@ -2,9 +2,10 @@ import type { ID, NodeData, SingleLayoutOptions, Size } from '@antv/g6';
 import { get } from 'lodash';
 import { formatLabel } from '../../core/utils/label';
 import { measureTextSize } from '../../core/utils/measure-text';
+import type { GraphOptions } from '../../types';
 import type { FishboneOptions } from './types';
 
-export const DEFAULT_OPTIONS: FishboneOptions = {
+export const DEFAULT_OPTIONS: GraphOptions = {
   node: {
     style: {
       size: 10,
@@ -37,11 +38,8 @@ const getNodeFill = (node: NodeData): string => {
   return 'transparent';
 };
 
-export function getFishboneOptions({
-  type,
-  labelField,
-}: Pick<FishboneOptions, 'type' | 'labelField'>): FishboneOptions {
-  const options: FishboneOptions = {
+export function getFishboneOptions({ type, labelField }: Pick<FishboneOptions, 'type' | 'labelField'>): GraphOptions {
+  const options: GraphOptions = {
     node: {
       type: 'rect',
       style: {

packages/graphs/src/components/fishbone/types.ts

@@ -1,7 +1,15 @@
-import type { NodeData } from '@antv/g6';
+import type { GraphData, NodeData, TreeData } from '@antv/g6';
 import type { GraphOptions } from '../../types';
 
-export interface FishboneOptions extends GraphOptions {
+export interface FishboneOptions extends Omit<GraphOptions, 'data'> {
+  /**
+   * The data.
+   */
+  data?: GraphData | TreeData;
+  /**
+   * The default expand level. If not set, all nodes will be expanded.
+   */
+  defaultExpandLevel?: number;
   /**
    * The type of the fishbone diagram.
    * - `'decision'`: direction from left to right.

packages/graphs/src/components/indented-tree/index.tsx

@@ -9,20 +9,31 @@ import React, {
 } from 'react';
 import { BaseGraph } from '../../core/base-graph';
 import { COMMON_OPTIONS } from '../../core/constants';
+import { formatTreeData } from '../../core/utils/data';
 import { mergeOptions } from '../../core/utils/options';
 import { DEFAULT_OPTIONS, getIndentedTreeOptions } from './options';
 import type { IndentedTreeOptions } from './types';
 
 export const IndentedTree: ForwardRefExoticComponent<
   PropsWithoutRef<PropsWithChildren<IndentedTreeOptions>> & RefAttributes<Graph>
 > = forwardRef<Graph, PropsWithChildren<IndentedTreeOptions>>(({ children, ...props }, ref) => {
-  const { type = 'default', nodeMinWidth, nodeMaxWidth, direction = 'right', labelField, ...restProps } = props;
+  const {
+    data,
+    defaultExpandLevel,
+    type = 'default',
+    nodeMinWidth,
+    nodeMaxWidth,
+    direction = 'right',
+    labelField,
+    ...restProps
+  } = props;
 
   const options = useMemo(
     () =>
       mergeOptions(
         COMMON_OPTIONS,
         DEFAULT_OPTIONS,
+        { data: formatTreeData(data, defaultExpandLevel) },
         getIndentedTreeOptions({ type, nodeMinWidth, nodeMaxWidth, direction, labelField }),
         restProps,
       ),

packages/graphs/src/components/indented-tree/options.tsx

@@ -6,12 +6,13 @@ import { formatLabel } from '../../core/utils/label';
 import { measureTextSize } from '../../core/utils/measure-text';
 import { getNodeSide } from '../../core/utils/node';
 import { getBoxedTextNodeStyle, getLinearTextNodeStyle } from '../../core/utils/tree';
+import type { GraphOptions } from '../../types';
 import type { IndentedTreeOptions } from './types';
 
 const { ArrowCountIcon } = CollapseExpandIcon;
 const { TextNode } = RCNode;
 
-export const DEFAULT_OPTIONS: IndentedTreeOptions = {
+export const DEFAULT_OPTIONS: GraphOptions = {
   node: {
     type: 'react',
     state: {
@@ -77,11 +78,8 @@ export const getIndentedTreeOptions = ({
   nodeMaxWidth,
   direction,
   labelField,
-}: Pick<
-  IndentedTreeOptions,
-  'type' | 'nodeMinWidth' | 'nodeMaxWidth' | 'direction' | 'labelField'
->): IndentedTreeOptions => {
-  let options: IndentedTreeOptions = {};
+}: Pick<IndentedTreeOptions, 'type' | 'nodeMinWidth' | 'nodeMaxWidth' | 'direction' | 'labelField'>): GraphOptions => {
+  let options: GraphOptions = {};
   const minWidth = nodeMinWidth || 0;
   const maxWidth = nodeMaxWidth || 300;
 

packages/graphs/src/components/indented-tree/types.ts

@@ -1,7 +1,15 @@
-import type { NodeData } from '@antv/g6';
+import type { GraphData, NodeData, TreeData } from '@antv/g6';
 import type { GraphOptions } from '../../types';
 
-export interface IndentedTreeOptions extends GraphOptions {
+export interface IndentedTreeOptions extends Omit<GraphOptions, 'data'> {
+  /**
+   * The data.
+   */
+  data?: GraphData | TreeData;
+  /**
+   * The default expand level. If not set, all nodes will be expanded.
+   */
+  defaultExpandLevel?: number;
   /**
    * The type of the mind map
    * @default 'default'

packages/graphs/src/components/index.ts

@@ -1,8 +1,8 @@
 export { Dendrogram, type DendrogramOptions } from './dendrogram';
+export { Fishbone, type FishboneOptions } from './fishbone';
 export { FlowDirectionGraph, type FlowDirectionGraphOptions } from './flow-direction-graph';
 export { FlowGraph, type FlowGraphOptions } from './flow-graph';
 export { IndentedTree, type IndentedTreeOptions } from './indented-tree';
 export { MindMap, type MindMapOptions } from './mind-map';
 export { NetworkGraph, type NetworkGraphOptions } from './network-graph';
 export { OrganizationChart, type OrganizationChartOptions } from './organization-chart';
-export { Fishbone, type FishboneOptions } from './fishbone';

packages/graphs/src/components/mind-map/index.tsx

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import { BaseGraph } from '../../core/base-graph';
 import { COMMON_OPTIONS } from '../../core/constants';
+import { formatTreeData } from '../../core/utils/data';
 import { mergeOptions } from '../../core/utils/options';
 import { DEFAULT_OPTIONS, getMindMapOptions } from './options';
 import type { MindMapOptions } from './types';
@@ -17,10 +18,20 @@ export const MindMap: ForwardRefExoticComponent<
   PropsWithoutRef<PropsWithChildren<MindMapOptions>> & RefAttributes<Graph>
 > = forwardRef<Graph, PropsWithChildren<MindMapOptions>>(({ children, ...props }, ref) => {
   const options = useMemo(() => {
-    const { type = 'default', nodeMinWidth, nodeMaxWidth, direction = 'alternate', labelField, ...restProps } = props;
+    const {
+      data,
+      type = 'default',
+      nodeMinWidth,
+      nodeMaxWidth,
+      direction = 'alternate',
+      labelField,
+      defaultExpandLevel,
+      ...restProps
+    } = props;
     const options = mergeOptions(
       COMMON_OPTIONS,
       DEFAULT_OPTIONS,
+      { data: formatTreeData(data, defaultExpandLevel) },
       getMindMapOptions({ type, nodeMinWidth, nodeMaxWidth, direction, labelField }),
       restProps,
     );

packages/graphs/src/components/mind-map/options.tsx

@@ -7,12 +7,13 @@ import { formatLabel } from '../../core/utils/label';
 import { measureTextSize } from '../../core/utils/measure-text';
 import { getNodeSide } from '../../core/utils/node';
 import { getBoxedTextNodeStyle, getLinearTextNodeStyle } from '../../core/utils/tree';
+import type { GraphOptions } from '../../types';
 import type { MindMapOptions } from './types';
 
 const { ArrowCountIcon } = CollapseExpandIcon;
 const { TextNode } = RCNode;
 
-export const DEFAULT_OPTIONS: MindMapOptions = {
+export const DEFAULT_OPTIONS: GraphOptions = {
   node: {
     type: 'react',
     state: {
@@ -71,8 +72,8 @@ export function getMindMapOptions({
   nodeMinWidth,
   nodeMaxWidth,
   labelField,
-}: Pick<MindMapOptions, 'type' | 'nodeMaxWidth' | 'nodeMinWidth' | 'direction' | 'labelField'>): MindMapOptions {
-  let options: MindMapOptions = {};
+}: Pick<MindMapOptions, 'type' | 'nodeMaxWidth' | 'nodeMinWidth' | 'direction' | 'labelField'>): GraphOptions {
+  let options: GraphOptions = {};
 
   if (type === 'boxed') {
     const minWidth = nodeMinWidth || 120;

packages/graphs/src/components/mind-map/types.ts

@@ -1,7 +1,15 @@
-import type { NodeData } from '@antv/g6';
+import type { GraphData, NodeData, TreeData } from '@antv/g6';
 import type { GraphOptions } from '../../types';
 
-export interface MindMapOptions extends GraphOptions {
+export interface MindMapOptions extends Omit<GraphOptions, 'data'> {
+  /**
+   * The data of the mind map.
+   */
+  data?: GraphData | TreeData;
+  /**
+   * The default expand level of the mind map. If not set, all nodes will be expanded.
+   */
+  defaultExpandLevel?: number;
   /**
    * The type of the mind map
    * @default 'default'