tvision-charts-component 3.3.24

package/dist/esm/basicTopo/_example/GroupLinkTopo.jsx

@@ -0,0 +1,902 @@
+import React, { useRef, useMemo, useState } from 'react';
+import { BasicTopo } from '@tencent/tcharts-component';
+import { Button, Alert } from '@tencent/tea-component';
+
+export default function GroupLinkTopo() {
+  const chartDom = useRef(null);
+  const [showMsg, setShowMsg] = useState(false);
+  const options = {
+    grid: { left: 300, right: 0, bottom: 0, top: 300, containLabel: true },
+    hooks: {
+      locationChanged: (pipelines) => {
+        console.log(pipelines);
+      },
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: (items) => {
+        const content = `节点ID: ${items.id}<br />`;
+        // console.log('tooltip', items)
+        return content;
+      },
+    },
+    chartRef: (chart) => {
+      chartDom.current = chart;
+      chart.network.registerImages([
+        {
+          id: 'cdn',
+          path: 'M851.6 661.5l-3.1-306.7c-0.1-6-0.9-11.8-2.3-17.4l-0.1-8.7c-0.1-8.9-4.9-17.1-12.7-21.5l-7.6-4.3c-4.2-4-9-7.5-14.1-10.4L544.5 141.8c-5.2-2.9-10.6-5.2-16.3-6.7l-8.4-4.7c-7.8-4.4-17.3-4.3-25 0.3l-10 5.9c-4.4 1.6-8.7 3.5-12.9 6L208 298.5c-4.1 2.4-7.9 5.2-11.4 8.4l-11.5 6.8c-7.7 4.5-12.4 12.8-12.3 21.8l0.2 16.5c-0.4 3.2-0.6 6.4-0.6 9.6l3.1 306.7c0 3.2 0.3 6.5 0.7 9.6l0.2 17.4c0.1 8.9 4.9 17.1 12.7 21.5l15.1 8.5c2.6 1.9 5.3 3.7 8.1 5.3l267.1 150.7c2.8 1.6 5.8 3 8.7 4.2l14.4 8.1c3.8 2.2 8 3.2 12.3 3.2 4.4 0 8.8-1.2 12.7-3.5l11.5-6.8c4.4-1.6 8.8-3.5 12.9-6l264.1-156c4.1-2.4 8-5.3 11.5-8.4l9.9-5.9c7.7-4.5 12.4-12.8 12.3-21.8l-0.1-9.6c1.4-5.5 2.1-11.3 2-17.3z m-55 14.9L519.1 840.3c-3.3 0.6-6.8 0.4-10.1-0.5L232.6 684c-3.1-2.9-5.4-6.7-6.4-10.9L223 355.8c0.8-3.3 2.3-6.5 4.5-9.1l277.4-163.9c1.3-0.2 2.7-0.4 4-0.4 0.5 0 1.1 0 1.6 0.1l283.8 160.1c0.7 1 1.4 2.1 1.9 3.2l3.3 325.8c-0.7 1.7-1.8 3.3-2.9 4.8zM681.7 426.2c-0.1-8.9-4.9-17.1-12.7-21.5L472.4 293.8c-12-6.8-27.3-2.5-34.1 9.5s-2.5 27.3 9.5 34.1l184 103.8 2.1 211.2c0.1 13.7 11.3 24.7 25 24.7h0.3c13.8-0.1 24.9-11.4 24.7-25.2l-2.2-225.7zM565.9 493.6c-0.1-8.9-4.9-17.1-12.7-21.5L360.8 363.6c-4.4-3.7-10.1-5.9-16.3-5.8-13.8 0.1-24.9 11.4-24.7 25.2l2.3 225.7c0.1 8.9 4.9 17.1 12.7 21.5L531.2 741c0.1 0 0.1 0.1 0.2 0.1 3.9 2.2 8.1 3.2 12.3 3.2 8.7 0 17.2-4.6 21.8-12.7 3.1-5.5 3.9-11.7 2.7-17.4l-2.3-220.6z m-195.7-67.3L516 508.5l1.7 167.5-145.8-82.2-1.7-167.5z',
+          color: '#8a8a8a',
+          width: 24,
+          height: 24,
+        },
+        {
+          id: 'subnet',
+          path: 'M659.2 67.648a64 64 0 0 1 64 64V302.08h167.936a64 64 0 0 1 64 64v526.272a64 64 0 0 1-64 64H364.8a64 64 0 0 1-64-64V721.92H132.8a64 64 0 0 1-64-64V131.648a64 64 0 0 1 64-64H659.2z m104.384 361.92h-40.448l0.064 228.352a64 64 0 0 1-64 64H428.288v42.88a64 64 0 0 0 56.576 63.616l7.488 0.448h271.232a64 64 0 0 0 63.552-56.576l0.448-7.424V493.568a64 64 0 0 0-56.512-63.552l-7.488-0.448z',
+          color: '#1296db',
+          width: 24,
+          height: 24,
+        },
+        {
+          id: 'attachment',
+          path: 'M939.52 331.38A465.39 465.39 0 1 0 976 512a462.4 462.4 0 0 0-36.48-180.62zM512 896c-211.74 0-384-172.26-384-384a382.29 382.29 0 0 1 90.31-247.12l540.81 540.81A382.29 382.29 0 0 1 512 896z m302.65-147.92L275.92 209.35A382.1 382.1 0 0 1 512 128c211.74 0 384 172.26 384 384a382.1 382.1 0 0 1-81.35 236.08z',
+          color: '#d81e06',
+          width: 12,
+          height: 12,
+        },
+      ]);
+      chart.network.add([
+        {
+          group: 'groups',
+          data: {
+            id: 'oc_union',
+            name: 'OC层',
+            collapsed: false,
+          },
+          style: {
+            image: 'subnet',
+            width: 1000,
+            height: 100,
+            border: 3,
+            color: '#BBBBBB',
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'groups',
+          data: {
+            id: 'soc_union',
+            name: '中间源层',
+            collapsed: false,
+          },
+          style: {
+            image: 'subnet',
+            width: 1000,
+            height: 100,
+            border: 3,
+            color: '#BBBBBB',
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'groups',
+          data: {
+            id: 'final_union',
+            name: '最终回源层',
+            collapsed: false,
+          },
+          style: {
+            image: 'subnet',
+            width: 1000,
+            height: 100,
+            border: 3,
+            color: '#BBBBBB',
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'groups',
+          data: {
+            id: 'domain',
+            name: '客户源站',
+            collapsed: false,
+          },
+          style: {
+            image: 'subnet',
+            width: 1000,
+            height: 100,
+            border: 3,
+            color: '#BBBBBB',
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'groups',
+          data: {
+            id: 'no_path',
+            name: 'no_path',
+            collapsed: false,
+          },
+          style: {
+            image: 'subnet',
+            width: 1000,
+            height: 100,
+            border: 3,
+            color: '#BBBBBB',
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: '81',
+            parentId: 'soc_union',
+            name: '[xx云][点播DC中间源VMid1]',
+          },
+          position: {
+            y: 520,
+            x: 350,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#2fad53',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: '87',
+            parentId: 'oc_union',
+            name: '[xx云][点播快手平台]',
+          },
+          position: {
+            y: 100,
+            x: 350,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#006eff',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: '98',
+            parentId: 'final_union',
+            name: '[xx云][点播DC三级源L3V1]',
+          },
+          position: {
+            y: 840,
+            x: 550,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#D2514C',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: '117',
+            parentId: 'final_union',
+            name: '[xx云][点播DC三级源L3V2]',
+          },
+          position: {
+            y: 840,
+            x: 350,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#D2514C',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: '95',
+            parentId: 'oc_union',
+            name: '[xx云][长视频存储]',
+          },
+          position: {
+            y: 250,
+            x: 150,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#006eff',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: '40',
+            parentId: 'oc_union',
+            name: '[xx云][短视频存储]',
+          },
+          position: {
+            y: 250,
+            x: 350,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#006eff',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: '17',
+            parentId: 'soc_union',
+            name: '[xx云][点播三通接入3]',
+          },
+          position: {
+            y: 520,
+            x: 150,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#2fad53',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: '18',
+            parentId: 'soc_union',
+            name: '[xx云][点播三通存储3]',
+          },
+          position: {
+            y: 670,
+            x: 150,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#2fad53',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: '19',
+            parentId: 'final_union',
+            name: '[xx云][点播三通回源3]',
+          },
+          position: {
+            y: 840,
+            x: 150,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#D2514C',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: '42',
+            parentId: 'oc_union',
+            name: '[xx云][点播快手乐高]',
+          },
+          position: {
+            y: 100,
+            x: 150,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#006eff',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: 'domain--test1.kwai-ap-beijing.myqcloud.com',
+            parentId: 'domain',
+            name: 'test1.kwai-ap-beijing.myqcloud.com',
+          },
+          position: {
+            y: 1110,
+            x: 150,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#F0A139',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: 'domain--test2-cdn.ap-beijing.myqcloud.com',
+            parentId: 'domain',
+            name: 'domain--test-cdn.ap-beijing.myqcloud.com',
+          },
+          position: {
+            y: 1110,
+            x: 350,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#F0A139',
+          },
+        },
+        {
+          group: 'nodes',
+          data: {
+            id: 'domain--gifshowbak-test108.cos.kuaishou-ap-beijing.myqcloud.com',
+            parentId: 'domain',
+            name: 'gifshowbak-test.cos.kuaishou-ap-beijing.myqcloud.com',
+          },
+          position: {
+            y: 1110,
+            x: 550,
+          },
+          style: {
+            width: 60,
+            height: 60,
+            image: 'cdn',
+            imageStyle: 'auto',
+            color: '#F0A139',
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '81--117--target',
+            source: '81',
+            target: '117',
+            name: '回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '95--81--target',
+            source: '95',
+            target: '81',
+            name: '回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '95--17--target',
+            source: '95',
+            target: '17',
+            name: '回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '40--81--target',
+            source: '40',
+            target: '81',
+            name: '回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '40--17--target',
+            source: '40',
+            target: '17',
+            name: '回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '19--gifshowbak-test108.cos.kuaishou-ap-beijing.myqcloud.com--target',
+            source: '19',
+            target: 'domain--gifshowbak-test108.cos.kuaishou-ap-beijing.myqcloud.com',
+            name: '回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '117--test.kwai-ap-beijing.myqcloud.com--target',
+            source: '117',
+            target: 'domain--test1.kwai-ap-beijing.myqcloud.com',
+            name: '回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '98--test1.kwai-ap-beijing.myqcloud.com--target',
+            source: '98',
+            target: 'domain--test1.kwai-ap-beijing.myqcloud.com',
+            name: '回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '87--95--group_target',
+            source: '87',
+            target: '95',
+            name: '分组回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '87--40--group_target',
+            source: '87',
+            target: '40',
+            name: '分组回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '17--18--group_target',
+            source: '17',
+            target: '18',
+            name: '分组回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '18--19--group_target',
+            source: '18',
+            target: '19',
+            name: '分组回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '42--95--group_target',
+            source: '42',
+            target: '95',
+            name: '分组回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '42--40--group_target',
+            source: '42',
+            target: '40',
+            name: '分组回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '81--98--back_target',
+            source: '81',
+            target: '98',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '87--81--back_target',
+            source: '87',
+            target: '81',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '87--17--back_target',
+            source: '87',
+            target: '17',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '95--81--back_target',
+            source: '95',
+            target: '81',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '95--17--back_target',
+            source: '95',
+            target: '17',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '40--81--back_target',
+            source: '40',
+            target: '81',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '40--17--back_target',
+            source: '40',
+            target: '17',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '42--81--back_target',
+            source: '42',
+            target: '81',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '42--17--back_target',
+            source: '42',
+            target: '17',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '19--test1.kwai-ap-beijing.myqcloud.com--back_target',
+            source: '19',
+            target: 'domain--test1.kwai-ap-beijing.myqcloud.com',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '117--gifshowbak-test108.cos-cdn.ap-beijing.myqcloud.com--back_target',
+            source: '117',
+            target: 'domain--test2-cdn.ap-beijing.myqcloud.com',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '98--gifshowbak-test108.cos-cdn.ap-beijing.myqcloud.com--back_target',
+            source: '98',
+            target: 'domain--test2-cdn.ap-beijing.myqcloud.com',
+            name: '备份回源',
+          },
+          style: {
+            color: '#AAAAAA',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '87--81--target',
+            source: '87',
+            target: '81',
+            name: '回源',
+          },
+          style: {
+            color: '#49a9ee',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '87--17--target',
+            source: '87',
+            target: '17',
+            name: '回源',
+          },
+          style: {
+            color: '#49a9ee',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '17--81--target',
+            source: '17',
+            target: '81',
+            name: '回源',
+          },
+          style: {
+            color: '#49a9ee',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '18--81--target',
+            source: '18',
+            target: '81',
+            name: '回源',
+          },
+          style: {
+            color: '#49a9ee',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '42--81--target',
+            source: '42',
+            target: '81',
+            name: '回源',
+          },
+          style: {
+            color: '#49a9ee',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+        {
+          group: 'edges',
+          data: {
+            id: '42--17--target',
+            source: '42',
+            target: '17',
+            name: '回源',
+          },
+          style: {
+            color: '#49a9ee',
+            width: 1,
+            lineDash: [2, 2],
+          },
+        },
+      ]);
+      // chart.network.layout('dagre', { rankDir: 'LR' });
+    },
+  };
+
+  function bindClick(e) {
+    switch (e) {
+      case 'zoomOut':
+        chartDom.current.network.zoomOut();
+        break;
+      case 'zoomIn':
+        chartDom.current.network.zoomIn();
+        break;
+      case 'zoomReset':
+        chartDom.current.network.zoomReset();
+        break;
+      case 'remove':
+        chartDom.current.network.remove('n0');
+        break;
+      case 'highlight':
+        chartDom.current.dispatchAction({
+          type: 'highlight',
+          seriesName: ['n0', 'n1', 'e0'],
+        });
+        break;
+      case 'downplay':
+        chartDom.current.dispatchAction({
+          type: 'downplay',
+        });
+        break;
+      case 'dagreH':
+        chartDom.current.network.layout('dagre', { rankDir: 'LR' });
+        break;
+      case 'dagreV':
+        chartDom.current.network.layout('dagre', { rankDir: 'TB' });
+        break;
+      case 'FruchtermanLayout':
+        setShowMsg(true);
+        chartDom.current.network.layout('FruchtermanLayout', null, {
+          onLayoutEnd: () => {
+            setShowMsg(false);
+          },
+        });
+        break;
+      case 'ForceLayout':
+        chartDom.current.network.layout('ForceLayout');
+        break;
+      case 'springy':
+        chartDom.current.network.layout('springy');
+        break;
+      default:
+        break;
+    }
+  }
+
+  // 防止无关属性变更引起图表重新初始化
+  const mapRender = useMemo(() => <BasicTopo height={1200} {...options} />, []);
+
+  return (
+    <>
+      <Button title="Dagre布局-水平" onClick={() => bindClick('dagreH')}>
+        Dagre布局-水平
+      </Button>
+      <Button title="Dagre布局-竖直" onClick={() => bindClick('dagreV')}>
+        Dagre布局-竖直
+      </Button>
+      <Button title="FruchtermanLayout布局" onClick={() => bindClick('FruchtermanLayout')}>
+        FruchtermanLayout布局
+      </Button>
+      <Button title="ForceLayout布局" onClick={() => bindClick('ForceLayout')}>
+        ForceLayout布局
+      </Button>
+      <Button title="放大" onClick={() => bindClick('zoomOut')}>
+        放大
+      </Button>
+      <Button title="缩小" onClick={() => bindClick('zoomIn')}>
+        缩小
+      </Button>
+      <Button title="高亮路径" onClick={() => bindClick('highlight')}>
+        高亮路径
+      </Button>
+      <Button title="取消高亮路径" onClick={() => bindClick('downplay')}>
+        取消高亮路径
+      </Button>
+      {/* <Button title="恢复" onClick={() => bindClick('zoomReset')}>恢复缩放</Button> */}
+      <Button title="删除" onClick={() => bindClick('remove')}>
+        删除节点
+      </Button>
+      {showMsg && <Alert>FruchtermanLayout布局计算中...</Alert>}
+      {mapRender}
+    </>
+  );
+}