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

update graph

Browse Source
This commit is contained in:
Fine 2022-08-25 15:54:57 +08:00
parent cb3aa940b3
commit 0250ff0e33
3 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts
View File

@ -25,8 +25,8 @@ export const linkElement = (graph: any) => {
.attr("stroke", "#97B0F8")
.attr("d", (d: Call) => {
const controlPos = computeControlPoint(
[d.source.x, d.source.y],
[d.target.x, d.target.y],
[d.source.x, d.source.y - 5],
[d.target.x, d.target.y - 5],
0.5
);
if (d.lowerArc) {
@ -36,7 +36,7 @@ export const linkElement = (graph: any) => {
"M" +
d.source.x +
" " +
d.source.y +
(d.source.y - 5) +
" " +
"Q" +
controlPos[0] +
@ -45,7 +45,7 @@ export const linkElement = (graph: any) => {
" " +
d.target.x +
" " +
d.target.y
(d.target.y - 5)
);
});
return linkEnter;
@ -73,7 +73,7 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => {
})
.attr("y", (d: Call) => {
const p = getMidpoint(d);
return p[1] + 3;
return p[1] - 2;
})
.text((d: Call) => {
const types = [...d.sourceComponents, ...d.targetComponents];
@ -100,7 +100,7 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => {
})
.attr("y", (d: Call) => {
const p = getMidpoint(d);
return p[1] - 9;
return p[1] - 14;
})
.attr("xlink:href", (d: Call) => {
const types = [...d.sourceComponents, ...d.targetComponents];

8
src/views/dashboard/related/network-profiling/components/Graph/nodeProcess.ts
View File

@ -37,16 +37,16 @@ export default (d3: any, graph: any, funcs: any, tip: any) => {
.append("image")
.attr("width", 35)
.attr("height", 35)
.attr("x", (d: any) => d.x - 15)
.attr("y", (d: any) => d.y - 15)
.attr("x", (d: { x: number }) => d.x - 15)
.attr("y", (d: { y: number }) => d.y - 15)
.attr("style", "cursor: move;")
.attr("xlink:href", icons.CUBE);
nodeEnter
.append("text")
.attr("fill", "#000")
.attr("text-anchor", "middle")
.attr("x", (d: any) => d.x)
.attr("y", (d: any) => d.y + 28)
.attr("x", (d: { x: number }) => d.x)
.attr("y", (d: { y: number }) => d.y + 28)
.text((d: { name: string }) =>
d.name.length > 10 ? `${d.name.substring(0, 10)}...` : d.name
);

4
src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
View File

@ -80,6 +80,7 @@ const config = ref<any>({});
const diff = ref<number[]>([220, 200]);
const radius = 210;
const dates = ref<Nullable<{ start: number; end: number }>>(null);
const nodeList = ref<any>([]);
onMounted(() => {
init();
@ -278,7 +279,8 @@ function createLayout() {
outNodes[v].x = pointArr[v][0];
outNodes[v].y = pointArr[v][1];
}
drawTopology([...nodeArr, ...outNodes]);
nodeList.value = [...nodeArr, ...outNodes];
drawTopology(nodeList.value);
}
function drawTopology(nodeArr: any[]) {