JenniferSoft Design Docs

Appearance

TopologyChart Large Scale ​

노드가 500개이고 클러스터가 여러 개인 큰 토폴로지를 TopologyChart로 그려 보는 데모입니다. 미니맵(showMinimap)과 표시 상한(maxTotalNodes, maxNodesPerCluster, maxTotalEdges)이 어떻게 동작하는지 확인할 수 있습니다.

개요 ​

  • 합성 데이터: 고정 시드로 만든 데이터라서 새로고침해도 같은 그래프가 나옵니다.
  • 여러 클러스터: 하나로 연결, 같은 크기, 큰 것과 작은 것 섞기 중에서 고를 수 있습니다.
  • 미니맵: 전체 노드 위치와 현재 카메라 영역을 오른쪽 아래에 작게 보여 줍니다. 미니맵을 클릭하거나 드래그하면 그 위치로 이동합니다.
  • 표시 상한: 입력이 상한보다 많으면 상한까지만 그리고, 그리지 않은 엣지 수는 edge-render-limited 이벤트로 알려 줍니다.

관련 Props ​

typescript
interface TopologyChartProps {
    /** 현재 관점의 노드 위치와 카메라를 표시하는 미니맵 */
    showMinimap?: boolean;
    /** 전체 차트에서 표시할 최대 노드 수 (기본값: 100, 범위: 100-500) */
    maxTotalNodes?: number;
    /** 클러스터당 최대 노드 수 (기본값: 100, 범위: 100-500, maxTotalNodes 이하) */
    maxNodesPerCluster?: number;
    /** 전체 차트에서 렌더링할 최대 엣지 수 (기본값: 500, 범위: 100-1250) */
    maxTotalEdges?: number;
}
typescript
interface TopologyEdgeRenderLimitInfo {
    /** 화면에 렌더링하지 않은 엣지 수 */
    omittedEdgeCount: number;
    /** 적용된 최대 렌더링 엣지 수 */
    maxTotalEdges: number;
}

인터랙티브 데모 ​

토폴로지 통계

입력 노드:500개
입력 엣지:1000개
실패 엣지:44개
상한 제외 엣지:0개
데이터 생성:0.0ms
클러스터 10개 · 가장 큰 161노드 · 가장 작은 19노드
💡 사용법: 조건을 고른 뒤 그래프 적용을 누르면 차트를 새로 그립니다. 마우스 휠로 확대하고, 미니맵을 클릭하거나 드래그해서 원하는 곳으로 이동해 보세요. 관계가 상한(1250)을 넘으면 넘는 만큼은 그리지 않고 "상한 제외 엣지"에 표시합니다.

사용 예시 ​

vue
<template>
    <TopologyChart
        :data="topologyData"
        :width="1200"
        :height="720"
        :max-total-nodes="500"
        :max-nodes-per-cluster="500"
        :max-total-edges="1250"
        :show-minimap="true"
        @edge-render-limited="onEdgeRenderLimited"
    />
</template>

<script setup lang="ts">
import { TopologyChart } from '@jennifersoft/apm-components';
import type { TopologyEdgeRenderLimitInfo } from '@jennifersoft/apm-components';

const onEdgeRenderLimited = (info: TopologyEdgeRenderLimitInfo) => {
    console.log(`${info.omittedEdgeCount}개 엣지를 그리지 않음 (상한 ${info.maxTotalEdges})`);
};
</script>

참고 ​

  • 노드가 많을 때는 hideNodeLabels를 켜면 화면이 덜 복잡하고 더 빨리 그려집니다.
  • Force 시뮬레이션은 웹 워커에서 돌기 때문에 노드가 많아도 화면이 멈추지 않지만, 배치가 끝날 때까지 시간이 더 걸립니다.
  • 데이터 생성 규칙은 docs/j5-components/data/large-topology-data.ts에 있습니다.