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

update trace graph

Browse Source
This commit is contained in:
Fine 2022-11-23 14:23:01 +08:00
parent c6436e8c59
commit e66fd2362d
2 changed files with 82 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/dashboard/related/trace/utils/d3-trace-list.ts
View File

@ -186,19 +186,35 @@ export default class ListGraph {
return label;
});
nodeEnter
.append("rect")
.attr("rx", 2)
.attr("ry", 2)
.attr("height", 15)
.attr("width", 40)
.attr("fill", "#e66")
.attr("x", 270)
.attr("y", -15);
.append("circle")
.attr("r", 8)
.attr("cx", 270)
.attr("cy", -5)
.attr("fill", "none")
.attr("stroke", "#e66")
.style("opacity", (d: any) => {
// const events = d.data.attachedEvents;
const events = [
{
startTime: "",
event: "event",
endTime: "",
tags: [],
summary: [],
},
];
if (events && events.length) {
return 0.5;
} else {
return 0;
}
});
nodeEnter
.append("text")
.attr("x", 272)
.attr("y", -4)
.attr("fill", "#fff")
.attr("x", 267)
.attr("y", -1)
.attr("fill", "#e66")
.style("font-size", "10px")
.text(() => {
// const events = d.data.attachedEvents;
const events = [
@ -211,7 +227,7 @@ export default class ListGraph {
},
];
if (events && events.length) {
return `events`;
return `E`;
} else {
return "";
}

58
src/views/dashboard/related/trace/utils/d3-trace-tree.ts
View File

@ -188,7 +188,57 @@ export default class TraceMap {
.on("click", function (event: any, d: any) {
that.handleSelectSpan(d);
});
nodeEnter
.append("circle")
.attr("r", 8)
.attr("cy", "-12")
.attr("cx", function (d: any) {
return d.children || d._children ? -15 : 110;
})
.attr("fill", "none")
.attr("stroke", "#e66")
.style("opacity", (d: any) => {
// const events = d.data.attachedEvents;
const events = [
{
startTime: "",
event: "event",
endTime: "",
tags: [],
summary: [],
},
];
if (events && events.length) {
return 0.5;
} else {
return 0;
}
});
nodeEnter
.append("text")
.attr("x", function (d: any) {
return d.children || d._children ? -18 : 107;
})
.attr("dy", "-0.8em")
.attr("fill", "#e66")
.style("font-size", "10px")
.text((d: any) => {
// const events = d.data.attachedEvents;
const events = [
{
startTime: "",
event: "event",
endTime: "",
tags: [],
summary: [],
},
];
if (events && events.length) {
return `E`;
} else {
return "";
}
});
nodeEnter
.append("circle")
.attr("class", "node")
@ -208,14 +258,14 @@ export default class TraceMap {
.attr("font-size", 11)
.attr("dy", "-0.5em")
.attr("x", function (d: any) {
return d.children || d._children ? -15 : 15;
return d.children || d._children ? -45 : 15;
})
.attr("text-anchor", function (d: any) {
return d.children || d._children ? "end" : "start";
})
.text((d: any) =>
d.data.label.length > 19
? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 19) + "..."
? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 10) + "..."
: (d.data.isError ? "◉ " : "") + d.data.label
)
.style("fill", (d: any) => (!d.data.isError ? "#3d444f" : "#E54C17"));
@ -223,7 +273,7 @@ export default class TraceMap {
.append("text")
.attr("class", "node-text")
.attr("x", function (d: any) {
return d.children || d._children ? -15 : 15;
return d.children || d._children ? -45 : 15;
})
.attr("dy", "1em")
.attr("fill", "#bbb")