mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-06 11:55:24 +00:00
feat: resize
This commit is contained in:
parent
d0a46730c3
commit
1591a35cb3
@ -21,6 +21,7 @@ limitations under the License. -->
|
|||||||
:style="`height: ${height}px`"
|
:style="`height: ${height}px`"
|
||||||
>
|
>
|
||||||
<svg ref="svg" :width="width - 100" :height="height" style="background-color: #fff" @click="svgEvent">
|
<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
|
<g
|
||||||
v-for="(n, index) in topologyLayout.nodes"
|
v-for="(n, index) in topologyLayout.nodes"
|
||||||
:key="index"
|
:key="index"
|
||||||
@ -77,6 +78,7 @@ limitations under the License. -->
|
|||||||
</marker>
|
</marker>
|
||||||
</defs>
|
</defs>
|
||||||
</g>
|
</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="#ed374d" :cx="34" :cy="65" fill="none" />
|
||||||
<circle class="node" r="10" stroke-width="4" stroke="#72c59f" fill="none" :cx="35" :cy="25" />
|
<circle class="node" r="10" stroke-width="4" stroke="#72c59f" fill="none" :cx="35" :cy="25" />
|
||||||
</svg>
|
</svg>
|
||||||
@ -170,6 +172,7 @@ limitations under the License. -->
|
|||||||
const depth = ref<number>(graphConfig.value.depth || 2);
|
const depth = ref<number>(graphConfig.value.depth || 2);
|
||||||
const topologyLayout = ref<any>({});
|
const topologyLayout = ref<any>({});
|
||||||
const tooltip = ref<Nullable<any>>(null);
|
const tooltip = ref<Nullable<any>>(null);
|
||||||
|
const graphWidth = ref<number>(100);
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await nextTick();
|
await nextTick();
|
||||||
@ -190,6 +193,7 @@ limitations under the License. -->
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
freshNodes();
|
freshNodes();
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
}
|
}
|
||||||
async function freshNodes() {
|
async function freshNodes() {
|
||||||
topologyStore.setNode(null);
|
topologyStore.setNode(null);
|
||||||
@ -250,6 +254,7 @@ limitations under the License. -->
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
topologyLayout.value = layout(levels, topologyStore.calls);
|
topologyLayout.value = layout(levels, topologyStore.calls);
|
||||||
|
graphWidth.value = topologyLayout.value.layout.width;
|
||||||
}
|
}
|
||||||
|
|
||||||
function findMostFrequent(arr: Call[]) {
|
function findMostFrequent(arr: Call[]) {
|
||||||
|
Loading…
Reference in New Issue
Block a user