github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-04 19:55:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update

Browse Source
This commit is contained in:
Fine 2023-03-14 20:38:31 +08:00
parent 9ff46da75a
commit 9a0fe83e95
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -21,9 +21,11 @@ limitations under the License. -->
:style="`height: ${height}px`" :style="`height: ${height}px`"
> >
<svg :width="width - 100" :height="height" style="background-color: #fff"> <svg :width="width - 100" :height="height" style="background-color: #fff">
<g v-for="(n, index) in tangleLayout.nodes" :key="index"> <g v-for="(n, index) in topologyLayout.nodes" :key="index">
<circle class="node" r="18" stroke-width="6" stroke="#72c59f" fill="#fff" :cx="n.x" :cy="n.y" /> <circle class="node" r="18" stroke-width="6" stroke="#72c59f" fill="#fff" :cx="n.x" :cy="n.y" />
<text :x="n.x + 10" :y="n.y - n.height / 2 + 5" style="pointer-events: none">{{ n.name }}</text> <text :x="n.x - (n.name.length * 6) / 2" :y="n.y + n.height + 12" style="pointer-events: none">
{{ n.name.length > 20 ? `${n.name.substring(0, 20)}...` : n.name }}
</text>
</g> </g>
</svg> </svg>
<!-- <div class="legend"> <!-- <div class="legend">
@ -127,7 +129,7 @@ limitations under the License. -->
const items = ref<{ id: string; title: string; func: any; dashboard?: string }[]>([]); const items = ref<{ id: string; title: string; func: any; dashboard?: string }[]>([]);
const graphConfig = computed(() => props.config.graph || {}); const graphConfig = computed(() => props.config.graph || {});
const depth = ref<number>(graphConfig.value.depth || 2); const depth = ref<number>(graphConfig.value.depth || 2);
const tangleLayout = ref<any>({}); const topologyLayout = ref<any>({});
onMounted(async () => { onMounted(async () => {
await nextTick(); await nextTick();
@ -193,9 +195,8 @@ limitations under the License. -->
levels.push(a); levels.push(a);
} }
} }
console.log(levels);
const options = {}; const options = {};
tangleLayout.value = layout(levels, options); topologyLayout.value = layout(levels, options);
} }
async function init() { async function init() {