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

feat: Add support collapse span (#431)

Browse Source
This commit is contained in:
Zixin Zhou 2024-11-23 19:55:54 +08:00 committed by GitHub
parent 7338cec6b4
commit aff69c057f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -302,37 +302,36 @@ export default class ListGraph {
) )
.attr("y", -2) .attr("y", -2)
.style("fill", (d: Recordable) => `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`); .style("fill", (d: Recordable) => `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`);
nodeEnter const nodeUpdate = nodeEnter.merge(node);
nodeUpdate
.transition() .transition()
.duration(400) .duration(400)
.attr("transform", (d: Recordable) => `translate(${d.y + 5},${d.x})`) .attr("transform", (d: Recordable) => `translate(${d.y + 5},${d.x})`)
.style("opacity", 1); .style("opacity", 1);
nodeEnter nodeUpdate
.append("circle") .append("circle")
.attr("r", appStore.theme === Themes.Dark ? 4 : 3) .attr("r", appStore.theme === Themes.Dark ? 4 : 3)
.style("cursor", "pointer") .style("cursor", "pointer")
.attr("stroke-width", appStore.theme === Themes.Dark ? 3 : 2.5) .attr("stroke-width", appStore.theme === Themes.Dark ? 3 : 2.5)
.attr("fill", (d: Recordable) => .style("fill", (d: Recordable) =>
d._children d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "#eee",
? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
: appStore.theme === Themes.Dark
? "#eee"
: "rbga(0,0,0,0)",
) )
.style("stroke", (d: Recordable) => .style("stroke", (d: Recordable) =>
d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`, d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
) )
.on("click", (d: Recordable) => { .on("click", (event: any, d: Recordable) => {
event.stopPropagation();
if (d.data.children.length == 0) return;
this.click(d, this); this.click(d, this);
}); });
node nodeUpdate
.transition() .transition()
.duration(400) .duration(400)
.attr("transform", (d: Recordable) => `translate(${d.y + 3},${d.x})`) .attr("transform", (d: Recordable) => `translate(${d.y + 3},${d.x})`)
.style("opacity", 1) .style("opacity", 1)
.select("circle") .select("circle")
.attr("fill", (d: Recordable) => .style("fill", (d: Recordable) =>
d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "", d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "#eee",
); );
// Transition exiting nodes to the parent's new position. // Transition exiting nodes to the parent's new position.

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

@ -294,7 +294,9 @@ export default class TraceMap {
d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff", d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff",
) )
.attr("cursor", "pointer") .attr("cursor", "pointer")
.on("click", (d: Recordable) => { .on("click", (event: any, d: Recordable) => {
event.stopPropagation();
if (d.data.children.length == 0) return;
click(d); click(d);
}); });
const nodeExit = node const nodeExit = node