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("stroke", "#97B0F8")
.attr("d", (d: Call) => { .attr("d", (d: Call) => {
const controlPos = computeControlPoint( const controlPos = computeControlPoint(
[d.source.x, d.source.y], [d.source.x, d.source.y - 5],
[d.target.x, d.target.y], [d.target.x, d.target.y - 5],
0.5 0.5
); );
if (d.lowerArc) { if (d.lowerArc) {
@ -36,7 +36,7 @@ export const linkElement = (graph: any) => {
"M" + "M" +
d.source.x + d.source.x +
" " + " " +
d.source.y + (d.source.y - 5) +
" " + " " +
"Q" + "Q" +
controlPos[0] + controlPos[0] +
@ -45,7 +45,7 @@ export const linkElement = (graph: any) => {
" " + " " +
d.target.x + d.target.x +
" " + " " +
d.target.y (d.target.y - 5)
); );
}); });
return linkEnter; return linkEnter;
@ -73,7 +73,7 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => {
}) })
.attr("y", (d: Call) => { .attr("y", (d: Call) => {
const p = getMidpoint(d); const p = getMidpoint(d);
return p[1] + 3; return p[1] - 2;
}) })
.text((d: Call) => { .text((d: Call) => {
const types = [...d.sourceComponents, ...d.targetComponents]; const types = [...d.sourceComponents, ...d.targetComponents];
@ -100,7 +100,7 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => {
}) })
.attr("y", (d: Call) => { .attr("y", (d: Call) => {
const p = getMidpoint(d); const p = getMidpoint(d);
return p[1] - 9; return p[1] - 14;
}) })
.attr("xlink:href", (d: Call) => { .attr("xlink:href", (d: Call) => {
const types = [...d.sourceComponents, ...d.targetComponents]; 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") .append("image")
.attr("width", 35) .attr("width", 35)
.attr("height", 35) .attr("height", 35)
.attr("x", (d: any) => d.x - 15) .attr("x", (d: { x: number }) => d.x - 15)
.attr("y", (d: any) => d.y - 15) .attr("y", (d: { y: number }) => d.y - 15)
.attr("style", "cursor: move;") .attr("style", "cursor: move;")
.attr("xlink:href", icons.CUBE); .attr("xlink:href", icons.CUBE);
nodeEnter nodeEnter
.append("text") .append("text")
.attr("fill", "#000") .attr("fill", "#000")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("x", (d: any) => d.x) .attr("x", (d: { x: number }) => d.x)
.attr("y", (d: any) => d.y + 28) .attr("y", (d: { y: number }) => d.y + 28)
.text((d: { name: string }) => .text((d: { name: string }) =>
d.name.length > 10 ? `${d.name.substring(0, 10)}...` : d.name 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 diff = ref<number[]>([220, 200]);
const radius = 210; const radius = 210;
const dates = ref<Nullable<{ start: number; end: number }>>(null); const dates = ref<Nullable<{ start: number; end: number }>>(null);
const nodeList = ref<any>([]);
onMounted(() => { onMounted(() => {
init(); init();
@ -278,7 +279,8 @@ function createLayout() {
outNodes[v].x = pointArr[v][0]; outNodes[v].x = pointArr[v][0];
outNodes[v].y = pointArr[v][1]; outNodes[v].y = pointArr[v][1];
} }
drawTopology([...nodeArr, ...outNodes]); nodeList.value = [...nodeArr, ...outNodes];
drawTopology(nodeList.value);
} }
function drawTopology(nodeArr: any[]) { function drawTopology(nodeArr: any[]) {