github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update

Browse Source
This commit is contained in:
Fine 2024-01-12 20:42:51 +08:00
parent a1d9d4d4b4
commit 57535ce3d9
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,11 +36,11 @@ limitations under the License. -->
/> />
<text <text
class="node-text" class="node-text"
:x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6" :x="n.x - (Math.min(n.name.length, 30) * 6) / 2 + 6"
:y="n.y + n.width + 8" :y="n.y + n.width + 8"
style="pointer-events: none" style="pointer-events: none"
> >
{{ n.name.length > 20 ? `${n.name.substring(0, 20)}...` : n.name }} {{ n.name.length > 30 ? `${n.name.substring(0, 30)}...` : n.name }}
</text> </text>
</g> </g>
<g v-for="(l, index) in topologyLayout.calls" :key="index"> <g v-for="(l, index) in topologyLayout.calls" :key="index">
@ -113,7 +113,10 @@ limitations under the License. -->
const topologyLayout = ref<any>({}); const topologyLayout = ref<any>({});
const graphWidth = ref<number>(100); const graphWidth = ref<number>(100);
const currentNode = ref<Nullable<Node>>(null); const currentNode = ref<Nullable<Node>>(null);
const diff = computed(() => [(width.value - graphWidth.value - 120) / 2, 40]); const diff = computed(() => [
(width.value - graphWidth.value - 160) / 2,
(height.value - topologyLayout.value.layout.height - 60) / 2,
]);
const radius = 10; const radius = 10;
async function init() { async function init() {

6
src/views/dashboard/related/topology/components/utils/layout.ts
View File

@ -234,8 +234,8 @@ export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []); const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []);
// layout // layout
const padding = 30; const padding = 30;
const node_height = 120; const node_height = 100;
const node_width = 100; const node_width = 180;
const bundle_width = 10; const bundle_width = 10;
const metro_d = 4; const metro_d = 4;
for (const n of nodes) { for (const n of nodes) {
@ -259,7 +259,7 @@ export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
} }
n.x = node_width + x_offset + n.width / 2; n.x = node_width + x_offset + n.width / 2;
n.y = n.level * node_height + y_offset; n.y = n.level * node_height + y_offset;
x_offset += node_height + n.width; x_offset += node_width + n.width;
} }
} }
const layout = { const layout = {