github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-05 21:14:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: resize

Browse Source
This commit is contained in:
Fine 2023-03-20 20:36:05 +08:00
parent d0a46730c3
commit 1591a35cb3
1 changed files with 59 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,7 @@ limitations under the License. -->
:style="`height: ${height}px`"
>
<svg ref="svg" :width="width - 100" :height="height" style="background-color: #fff" @click="svgEvent">
<g :style="`transform: translate(${(width - graphWidth - 100) / 2}px, 100px)`">
<g
v-for="(n, index) in topologyLayout.nodes"
:key="index"
@ -77,6 +78,7 @@ limitations under the License. -->
</marker>
</defs>
</g>
</g>
<circle class="node" r="10" stroke-width="4" stroke="#ed374d" :cx="34" :cy="65" fill="none" />
<circle class="node" r="10" stroke-width="4" stroke="#72c59f" fill="none" :cx="35" :cy="25" />
</svg>
@ -170,6 +172,7 @@ limitations under the License. -->
const depth = ref<number>(graphConfig.value.depth || 2);
const topologyLayout = ref<any>({});
const tooltip = ref<Nullable<any>>(null);
const graphWidth = ref<number>(100);
onMounted(async () => {
await nextTick();
@ -190,6 +193,7 @@ limitations under the License. -->
return;
}
freshNodes();
window.addEventListener("resize", resize);
}
async function freshNodes() {
topologyStore.setNode(null);
@ -250,6 +254,7 @@ limitations under the License. -->
}
}
topologyLayout.value = layout(levels, topologyStore.calls);
graphWidth.value = topologyLayout.value.layout.width;
}
function findMostFrequent(arr: Call[]) {