feat(graphs): add hierarchical graph

[yvonneyx]

• 接入 ChartLoading 组件，用于在数据加载时显示加载动画
• 接入 ErrorBoundary 组件，用于捕获并处理图表渲染过程中的错误
• 向外暴露图表实例，通过 ref 可以直接获取图表实例
• 支持节点展开/收起功能
• 支持分层图表 HierarchicalGraph
• 内置两种基础 React 节点：简单节点 PlainNode、组织架构卡片 OrganizationChartNode

HierarchicalGraph

const HierarchicalGraph = () => {
  const options: GraphOptions = {
    autoFit: 'view',
    data,
  };

  return <HierarchicalGraphComponent {...options} />;
};

OrganizationChart

const OrganizationChart = () => {
  const [data, setData] = useState(undefined);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch('https://assets.antv.antgroup.com/g6/organization-chart.json')
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  const options: GraphOptions = {
    data,
    padding: 20,
    autoFit: 'view',
    node: {
      style: {
        component: (d) => {
          const { name, position, status } = d.data || {};
          const isActive = d.states?.includes('active');
          return <OrganizationChartNode name={name} position={position} status={status} isActive={isActive} />;
        },
        size: [240, 80],
      },
    },
    edge: {
      style: {
        radius: 16,
        lineWidth: 2,
        endArrow: true,
      },
    },
    layout: {
      type: 'antv-dagre',
      nodesep: 24,
      ranksep: -20,
    },
  };

  return <HierarchicalGraphComponent {...options} loading={loading} />;
}

图配置项

interface GraphOptions extends ContainerConfig, G6GraphOptions {
  /**
   * 是否支持节点收起/展开
   * @default true
   */
  collapsible?: boolean | CollapsibleOptions;
}

展开/收起能力配置项

interface CollapsibleOptions {
  /**
   * 点击指定元素，触发节点收起/展开
   * - 'icon': 点击内置图标
   * - 'node': 点击节点
   * - HTMLElement: 自定义元素
   * @default 'icon'
   */
  trigger?: 'icon' | 'node' | HTMLElement;
  /**
   * 收起/展开指定方向上的邻居节点
   * - 'in': 前驱节点
   * - 'out': 后继节点
   * - 'both': 前驱和后继节点
   * @default 'out'
   */
  direction?: 'in' | 'out' | 'both';
  /**
   * 渲染函数，用于自定义收起/展开图标
   * @param isCollapsed - 当前节点是否已收起
   * @returns 自定义图标
   */
  iconRender?: (isCollapsed: boolean) => React.ReactNode;
  /**
   * 指定图标的 CSS 类名
   */
  iconClassName?: string;
  /**
   * 指定图标的内联样式
   */
  iconStyle?: React.CSSProperties;
}

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@antv/[email protected]	Transitive: environment, filesystem, unsafe	+40	44.9 MB	atool
npm/@antv/[email protected]	Transitive: environment	+28	16.8 MB	iaaron
npm/@types/[email protected]	None	0	21.5 kB	types
npm/[email protected]	environment Transitive: filesystem	+16	3.8 MB	probablyup

🚮 Removed packages: npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@changesets/[email protected], npm/@swc/[email protected], npm/@testing-library/[email protected], npm/@testing-library/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/[email protected]

View full report↗︎