tvision-charts-component 3.3.24

package/dist/esm/basicTopo/_example/Basic.js

@@ -0,0 +1,124 @@
+import { __assign, __read } from "tslib";
+import React, { useRef, useMemo, useState } from 'react';
+import { BasicTopo } from '@tencent/tcharts-component';
+import { Button, Alert } from '@tencent/tea-component';
+export default function Basic() {
+    var chartDom = useRef(null);
+    var _a = __read(useState(false), 2), showMsg = _a[0], setShowMsg = _a[1];
+    var options = {
+        grid: { left: 300, right: 0, bottom: 0, top: 300, containLabel: true },
+        tooltip: {
+            trigger: 'item',
+            formatter: function (items) {
+                var content = "\u8282\u70B9ID: ".concat(items.id, "<br />");
+                return content;
+            },
+        },
+        chartRef: function (chart) {
+            chartDom.current = chart;
+            chart.network.registerImages([
+                {
+                    id: 'application',
+                    path: 'M48.872727 446.836364C23.272727 446.836364 0 425.890909 0 397.963636v-349.090909C0 20.945455 20.945455 0 48.872727 0h351.418182c25.6 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H48.872727zM623.709091 446.836364c-25.6 0-48.872727-20.945455-48.872727-48.872728v-349.090909c0-25.6 20.945455-48.872727 48.872727-48.872727h351.418182c27.927273 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H623.709091zM48.872727 1024C20.945455 1024 0 1003.054545 0 975.127273V623.709091c0-25.6 20.945455-48.872727 48.872727-48.872727h351.418182c25.6 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H48.872727zM623.709091 1024c-25.6 0-48.872727-20.945455-48.872727-48.872727V623.709091c0-25.6 20.945455-48.872727 48.872727-48.872727h351.418182c25.6 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H623.709091z',
+                    color: '#AAAAAA',
+                    width: 32,
+                    height: 32,
+                },
+                {
+                    id: 'database',
+                    path: 'M170.666667 798.464V262.101333C170.666667 235.178667 192.512 213.333333 219.434667 213.333333h585.130666C831.488 213.333333 853.333333 235.178667 853.333333 262.101333v536.362667c0 26.922667-21.845333 48.768-48.768 48.768H219.434667A48.768 48.768 0 0 1 170.666667 798.464z m48.768-146.261333v146.261333h585.130666v-146.261333H219.434667z m0-48.768h585.130666v-146.304H219.434667v146.304z m0-195.072h585.130666V262.101333H219.434667V408.32z m73.130666-97.493334h97.536a24.362667 24.362667 0 1 1 0 48.768H292.565333a24.362667 24.362667 0 1 1 0-48.768z m0 195.029334h97.536a24.362667 24.362667 0 1 1 0 48.768H292.565333a24.362667 24.362667 0 0 1 0-48.768z m0 195.072h97.536a24.362667 24.362667 0 0 1 0 48.725333H292.565333a24.362667 24.362667 0 0 1 0-48.725333z',
+                    color: '#AAAAAA',
+                    width: 32,
+                    height: 32,
+                },
+            ]);
+            chart.network.add([
+                { group: 'nodes', data: { id: 'n0', name: 'skywalking-watch' }, position: { x: 100, y: 100 }, style: { width: 40, height: 40, image: 'application', color: '#D2514C', borer: 2, imageStyle: 'auto', background: {} }, property: { type: 'server' } },
+                { group: 'nodes', data: { id: 'n1', name: 'skywalking-agent' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {} }, property: { type: 'cpu' } },
+                { group: 'nodes', data: { id: 'n2', name: 'skywalking-agent2', focus: true }, position: { x: 500, y: 100 }, style: { width: 40, height: 40, image: 'application', imageStyle: 'auto', background: {} } },
+                { group: 'nodes', data: { id: 'n3', name: 'skywalking-agent3', animation: true }, position: { x: 300, y: 500 }, style: { width: 40, height: 40, image: 'database', color: '#F0A139', border: 2, imageStyle: 'auto', background: {} } },
+                { group: 'nodes', data: { id: 'n4', name: 'skywalking-agent4' }, position: { x: 200, y: 600 }, style: { width: 40, height: 40, image: 'application', color: '#F0A139', border: 2, imageStyle: 'auto', background: {} } },
+                { group: 'nodes', data: { id: 'n5', name: 'skywalking-agent5' }, position: { x: 400, y: 600 }, style: { width: 40, height: 40, image: 'database', color: '#F0A139', border: 2, imageStyle: 'auto', background: {} } },
+                { group: 'nodes', data: { id: 'n6', name: 'skywalking-agent6' }, position: { x: 400, y: 400 }, style: { width: 40, height: 40, image: 'application', color: '#F0A139', border: 2, imageStyle: 'auto', background: {} } },
+                { group: 'nodes', data: { id: 'n7', name: 'skywalking-agent-v1' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {} }, property: { type: 'cpu' } },
+                { group: 'nodes', data: { id: 'n8', name: 'skywalking-agent-v2' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {} }, property: { type: 'cpu' } },
+                { group: 'nodes', data: { id: 'n9', name: 'skywalking-agent-v3' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {} }, property: { type: 'cpu' } },
+                { group: 'nodes', data: { id: 'n10', name: 'skywalking-agent-v4' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {} }, property: { type: 'cpu' } },
+                { group: 'nodes', data: { id: 'n11', name: 'skywalking-agent-v5' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {} }, property: { type: 'cpu' } },
+                { group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1', selectable: false }, style: { color: '#AAAAAA', width: 1 } },
+                { group: 'edges', data: { id: 'e1', source: 'n1', target: 'n2' }, style: { color: '#AAAAAA', width: 1 } },
+                { group: 'edges', data: { id: 'e2', source: 'n1', target: 'n3' }, style: { color: '#AAAAAA', width: 1 } },
+                { group: 'edges', data: { id: 'e3', source: 'n3', target: 'n4' }, style: { color: '#AAAAAA', width: 1 } },
+                { group: 'edges', data: { id: 'e4', source: 'n7', target: 'n5' }, style: { color: '#AAAAAA', width: 1 } },
+                { group: 'edges', data: { id: 'e7', source: 'n2', target: 'n6' }, style: { color: '#AAAAAA', width: 1 } },
+                { group: 'edges', data: { id: 'e8', source: 'n1', target: 'n7' }, style: { color: '#AAAAAA', width: 1 } },
+                { group: 'edges', data: { id: 'e9', source: 'n1', target: 'n8' }, style: { color: '#AAAAAA', width: 1 } },
+                { group: 'edges', data: { id: 'e10', source: 'n1', target: 'n9' }, style: { color: '#AAAAAA', width: 1 } },
+                { group: 'edges', data: { id: 'e11', source: 'n9', target: 'n10' }, style: { color: '#AAAAAA', width: 1 } },
+                { group: 'edges', data: { id: 'e12', source: 'n8', target: 'n11' }, style: { color: '#AAAAAA', width: 1 } },
+            ]);
+            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: function () {
+                        setShowMsg(false);
+                    } });
+                break;
+            case 'ForceLayout':
+                chartDom.current.network.layout('ForceLayout');
+                break;
+            case 'springy':
+                chartDom.current.network.layout('springy');
+                break;
+            default:
+                break;
+        }
+    }
+    var mapRender = useMemo(function () { return React.createElement(BasicTopo, __assign({ height: 850 }, options)); }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { title: "Dagre\u5E03\u5C40-\u6C34\u5E73", onClick: function () { return bindClick('dagreH'); } }, "Dagre\u5E03\u5C40-\u6C34\u5E73"),
+        React.createElement(Button, { title: "Dagre\u5E03\u5C40-\u7AD6\u76F4", onClick: function () { return bindClick('dagreV'); } }, "Dagre\u5E03\u5C40-\u7AD6\u76F4"),
+        React.createElement(Button, { title: "FruchtermanLayout\u5E03\u5C40", onClick: function () { return bindClick('FruchtermanLayout'); } }, "FruchtermanLayout\u5E03\u5C40"),
+        React.createElement(Button, { title: "ForceLayout\u5E03\u5C40", onClick: function () { return bindClick('ForceLayout'); } }, "ForceLayout\u5E03\u5C40"),
+        React.createElement(Button, { title: "\u653E\u5927", onClick: function () { return bindClick('zoomOut'); } }, "\u653E\u5927"),
+        React.createElement(Button, { title: "\u7F29\u5C0F", onClick: function () { return bindClick('zoomIn'); } }, "\u7F29\u5C0F"),
+        React.createElement(Button, { title: "\u9AD8\u4EAE\u8DEF\u5F84", onClick: function () { return bindClick('highlight'); } }, "\u9AD8\u4EAE\u8DEF\u5F84"),
+        React.createElement(Button, { title: "\u53D6\u6D88\u9AD8\u4EAE\u8DEF\u5F84", onClick: function () { return bindClick('downplay'); } }, "\u53D6\u6D88\u9AD8\u4EAE\u8DEF\u5F84"),
+        React.createElement(Button, { title: "\u5220\u9664", onClick: function () { return bindClick('remove'); } }, "\u5220\u9664\u8282\u70B9"),
+        showMsg && React.createElement(Alert, null, "FruchtermanLayout\u5E03\u5C40\u8BA1\u7B97\u4E2D..."),
+        mapRender));
+}
+//# sourceMappingURL=Basic.js.map

package/dist/esm/basicTopo/_example/Basic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Basic.js","sourceRoot":"","sources":["../../../../src/basicTopo/_example/Basic.jsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,132 @@
+import React, { useRef, useMemo, useState } from 'react';
+import { BasicTopo } from '@tencent/tcharts-component';
+import { Button, Alert } from '@tencent/tea-component';
+
+export default function Basic() {
+  const chartDom = useRef(null);
+  const [showMsg, setShowMsg] = useState(false);
+  const options = {
+    grid: { left: 300, right: 0, bottom: 0, top: 300, containLabel: true },
+    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: 'application',
+          path: 'M48.872727 446.836364C23.272727 446.836364 0 425.890909 0 397.963636v-349.090909C0 20.945455 20.945455 0 48.872727 0h351.418182c25.6 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H48.872727zM623.709091 446.836364c-25.6 0-48.872727-20.945455-48.872727-48.872728v-349.090909c0-25.6 20.945455-48.872727 48.872727-48.872727h351.418182c27.927273 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H623.709091zM48.872727 1024C20.945455 1024 0 1003.054545 0 975.127273V623.709091c0-25.6 20.945455-48.872727 48.872727-48.872727h351.418182c25.6 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H48.872727zM623.709091 1024c-25.6 0-48.872727-20.945455-48.872727-48.872727V623.709091c0-25.6 20.945455-48.872727 48.872727-48.872727h351.418182c25.6 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H623.709091z',
+          color: '#AAAAAA',
+          width: 32,
+          height: 32,
+        },
+        {
+          id: 'database',
+          path: 'M170.666667 798.464V262.101333C170.666667 235.178667 192.512 213.333333 219.434667 213.333333h585.130666C831.488 213.333333 853.333333 235.178667 853.333333 262.101333v536.362667c0 26.922667-21.845333 48.768-48.768 48.768H219.434667A48.768 48.768 0 0 1 170.666667 798.464z m48.768-146.261333v146.261333h585.130666v-146.261333H219.434667z m0-48.768h585.130666v-146.304H219.434667v146.304z m0-195.072h585.130666V262.101333H219.434667V408.32z m73.130666-97.493334h97.536a24.362667 24.362667 0 1 1 0 48.768H292.565333a24.362667 24.362667 0 1 1 0-48.768z m0 195.029334h97.536a24.362667 24.362667 0 1 1 0 48.768H292.565333a24.362667 24.362667 0 0 1 0-48.768z m0 195.072h97.536a24.362667 24.362667 0 0 1 0 48.725333H292.565333a24.362667 24.362667 0 0 1 0-48.725333z',
+          color: '#AAAAAA',
+          width: 32,
+          height: 32,
+        },
+      ]);
+      chart.network.add([
+        { group: 'nodes', data: { id: 'n0', name: 'skywalking-watch' }, position: { x: 100, y: 100 }, style: { width: 40, height: 40, image: 'application', color: '#D2514C', borer: 2, imageStyle: 'auto', background: {} }, property: { type: 'server' } },
+        { group: 'nodes', data: { id: 'n1', name: 'skywalking-agent' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {}  }, property: { type: 'cpu' } },
+        { group: 'nodes', data: { id: 'n2', name: 'skywalking-agent2', focus: true }, position: { x: 500, y: 100 }, style: { width: 40, height: 40, image: 'application', imageStyle: 'auto', background: {}  } },
+        { group: 'nodes', data: { id: 'n3', name: 'skywalking-agent3', animation: true }, position: { x: 300, y: 500 }, style: { width: 40, height: 40, image: 'database', color: '#F0A139', border: 2, imageStyle: 'auto', background: {}  } },
+        { group: 'nodes', data: { id: 'n4', name: 'skywalking-agent4' }, position: { x: 200, y: 600 }, style: { width: 40, height: 40, image: 'application', color: '#F0A139', border: 2, imageStyle: 'auto', background: {} } },
+        { group: 'nodes', data: { id: 'n5', name: 'skywalking-agent5'}, position: { x: 400, y: 600 }, style: { width: 40, height: 40, image: 'database', color: '#F0A139', border: 2, imageStyle: 'auto', background: {}  } },
+        { group: 'nodes', data: { id: 'n6', name: 'skywalking-agent6'}, position: { x: 400, y: 400 }, style: { width: 40, height: 40, image: 'application', color: '#F0A139', border: 2, imageStyle: 'auto', background: {}  } },
+        { group: 'nodes', data: { id: 'n7', name: 'skywalking-agent-v1' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {}  }, property: { type: 'cpu' } },
+        { group: 'nodes', data: { id: 'n8', name: 'skywalking-agent-v2' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {}  }, property: { type: 'cpu' } },
+        { group: 'nodes', data: { id: 'n9', name: 'skywalking-agent-v3' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {}  }, property: { type: 'cpu' } },
+        { group: 'nodes', data: { id: 'n10', name: 'skywalking-agent-v4' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {} }, property: { type: 'cpu' } },
+        { group: 'nodes', data: { id: 'n11', name: 'skywalking-agent-v5' }, position: { x: 300, y: 300 }, style: { width: 40, height: 40, image: 'database', color: '#D2514C', border: 2, imageStyle: 'auto', background: {} }, property: { type: 'cpu' } },
+        { group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1', selectable: false }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e1', source: 'n1', target: 'n2' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e2', source: 'n1', target: 'n3' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e3', source: 'n3', target: 'n4' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e4', source: 'n7', target: 'n5' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e7', source: 'n2', target: 'n6' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e8', source: 'n1', target: 'n7' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e9', source: 'n1', target: 'n8' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e10', source: 'n1', target: 'n9' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e11', source: 'n9', target: 'n10' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e12', source: 'n8', target: 'n11' }, style: { color: '#AAAAAA', width: 1 } },
+      ]);
+      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={850} {...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}
+    </>
+  );
+}

package/dist/esm/basicTopo/_example/GroupLinkTopo.d.ts

@@ -0,0 +1 @@
+export default function GroupLinkTopo(): JSX.Element;