github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 18:45:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

update circle layout

Browse Source
This commit is contained in:
Fine 2022-08-23 18:39:43 +08:00
parent 9ce01b7028
commit 1b129496f9
2 changed files with 21 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,14 +107,7 @@ function drawGraph() {
width.value = dom.width;
svg.value.attr("height", height.value).attr("width", width.value);
tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]);
const outNodes = networkProfilingStore.nodes.filter(
(d: ProcessNode) => d.serviceInstanceId !== selectorStore.currentPod.id
);
if (outNodes.length) {
diff.value[0] = (dom.width - radius * 4) / 2 + radius;
} else {
diff.value[0] = (dom.width - radius * 2) / 2 + radius;
}
graph.value = svg.value
.append("g")
.attr("class", "svg-graph")
@ -162,13 +155,17 @@ function createPolygon(radius: number, sides = 6, offset = 0) {
}
return poly;
}
function getArcPoint(angle: number, radius: number) {
function getCirclePoint(radius: number, p = 1) {
const data = [];
const origin = [0, 0];
const x1 = radius + origin[0] * Math.cos((angle * Math.PI) / 180);
const y1 = origin[1] + radius * Math.sin((angle * Math.PI) / 180);
return [x1, y1];
for (let index = 0; index < 360; index = index + p) {
if (index < 230 || index > 310) {
let x = radius * Math.cos((Math.PI * 2 * index) / 360);
let y = radius * Math.sin((Math.PI * 2 * index) / 360);
data.push([x + origin[0], y + origin[1]]);
}
}
return data;
}
function createLayout() {
if (!node.value || !link.value) {
@ -205,7 +202,7 @@ function createLayout() {
.attr("fill", "#000")
.attr("text-anchor", "middle")
.attr("x", 0)
.attr("y", p.radius)
.attr("y", p.radius - 15)
.text(() => selectorStore.currentPod.label);
const nodeArr = networkProfilingStore.nodes.filter(
(d: ProcessNode) => d.isReal || d.name === "UNKNOWN_LOCAL"
@ -270,20 +267,15 @@ function createLayout() {
const outNodes = networkProfilingStore.nodes.filter(
(d: ProcessNode) => !(d.isReal || d.name === "UNKNOWN_LOCAL")
);
let angle = 10;
let r = 230;
const interval = 30;
let r = 250;
let pointArr = getCirclePoint(r, interval);
for (let v = 0; v < outNodes.length; v++) {
const pos = getArcPoint(angle, r); // angle is [-120, 120]
outNodes[v].x = pos[0];
outNodes[v].y = pos[1];
angle = angle + 20;
if (angle * (v + 1) > 120) {
angle = -10;
r = r + 60;
}
if (angle * (v + 1) < -120) {
r = r + 60;
angle = 10;
outNodes[v].x = pointArr[v][0];
outNodes[v].y = pointArr[v][1];
if (!pointArr[v + 1]) {
r = r + 80;
pointArr = [...pointArr, ...getCirclePoint(r, interval)];
}
}
drawTopology([...nodeArr, ...outNodes]);

2
src/views/dashboard/related/network-profiling/components/Tasks.vue
View File

@ -192,7 +192,7 @@ async function enableInterval() {
return ElMessage.error(res.errors);
}
if (networkProfilingStore.aliveNetwork) {
intervalFn.value = setInterval(getTopology, 60000);
intervalFn.value = setInterval(getTopology, 30000);
}
}
async function fetchTasks() {