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

fix: draw line

Browse Source
This commit is contained in:
Fine 2023-03-15 15:39:42 +08:00
parent 17b4e9c053
commit d2de2dab66
2 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -35,6 +35,15 @@ limitations under the License. -->
{{ n.name.length > 20 ? `${n.name.substring(0, 20)}...` : n.name }} {{ n.name.length > 20 ? `${n.name.substring(0, 20)}...` : n.name }}
</text> </text>
</g> </g>
<path
v-for="(l, index) in topologyLayout.calls"
:key="index"
class="link"
:d="`M${l.sourceObj.x} ${l.sourceObj.y}
L${l.targetObj.x} ${l.targetObj.y}`"
stroke="#999"
stroke-width="1"
/>
</svg> </svg>
<!-- <div class="legend"> <!-- <div class="legend">
<div> <div>
@ -166,19 +175,18 @@ limitations under the License. -->
// window.addEventListener("resize", resize); // window.addEventListener("resize", resize);
// svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg"); // svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
await initLegendMetrics(); await initLegendMetrics();
initData(); draw();
// await init(); // await init();
// update(); // update();
// setNodeTools(settings.value.nodeDashboard); // setNodeTools(settings.value.nodeDashboard);
}); });
function initData() { function draw() {
const levels = []; const levels = [];
const nodes = topologyStore.nodes.sort( const nodes = topologyStore.nodes.sort((a: any, b: any) => b.service_cpm - a.service_cpm);
(a: { service_cpm: number }, b: { service_cpm: number }) => b.service_cpm - a.service_cpm, const index = nodes.findIndex((n: Node) => n.type === "USER");
); const key = index < 0 ? 0 : index;
const index = nodes.findIndex((n: Node) => n.type === "USER") || 0; levels.push([nodes[key]]);
levels.push([nodes[index]]); nodes.splice(key, 1);
nodes.splice(index, 1);
for (const level of levels) { for (const level of levels) {
const a = []; const a = [];
for (const l of level) { for (const l of level) {
@ -203,7 +211,8 @@ limitations under the License. -->
levels.push(a); levels.push(a);
} }
} }
topologyLayout.value = layout(levels); topologyLayout.value = layout(levels, topologyStore.calls);
console.log(topologyLayout.value);
} }
async function init() { async function init() {

23
src/views/dashboard/related/topology/components/utils/layout.ts
View File

@ -15,14 +15,13 @@
* limitations under the License. * limitations under the License.
*/ */
import * as d3 from "d3"; import * as d3 from "d3";
export function layout(levels: any) { import type { Node, Call } from "@/types/topology";
export function layout(levels: Node[][], calls: Call[]) {
// precompute level depth // precompute level depth
levels.forEach((l: any, i: any) => l.forEach((n: any) => (n.level = i))); levels.forEach((l: any, i: any) => l.forEach((n: any) => (n.level = i)));
const nodes = levels.reduce((a: any, x: any) => a.concat(x), []); const nodes = levels.reduce((a: any, x: any) => a.concat(x), []);
const nodes_index: any = {};
nodes.forEach((d: any) => (nodes_index[d.id] = d));
// layout // layout
const padding = 30; const padding = 30;
const node_height = 120; const node_height = 120;
@ -30,7 +29,7 @@ export function layout(levels: any) {
const bundle_width = 14; const bundle_width = 14;
const metro_d = 4; const metro_d = 4;
nodes.forEach((n: any) => (n.height = 5 * metro_d)); nodes.forEach((n: { height: number }) => (n.height = 5 * metro_d));
let x_offset = padding; let x_offset = padding;
let y_offset = 0; let y_offset = 0;
@ -38,6 +37,14 @@ export function layout(levels: any) {
y_offset = 0; y_offset = 0;
x_offset += 5 * bundle_width; x_offset += 5 * bundle_width;
l.forEach((n: any) => { l.forEach((n: any) => {
for (const call of calls) {
if (call.source === n.id) {
call.sourceObj = n;
}
if (call.target === n.id) {
call.targetObj = n;
}
}
n.x = n.level * node_width + x_offset; n.x = n.level * node_width + x_offset;
n.y = node_height + y_offset + n.height / 2; n.y = node_height + y_offset + n.height / 2;
y_offset += node_height + n.height; y_offset += node_height + n.height;
@ -45,9 +52,9 @@ export function layout(levels: any) {
}); });
const layout = { const layout = {
width: d3.max(nodes, (n: any) => n.x) || 0 + node_width + 2 * padding, width: d3.max(nodes, (n: { x: number }) => n.x) || 0 + node_width + 2 * padding,
height: d3.max(nodes, (n: any) => n.y) || 0 + node_height / 2 + 2 * padding, height: d3.max(nodes, (n: { y: number }) => n.y) || 0 + node_height / 2 + 2 * padding,
}; };
return { nodes, layout }; return { nodes, layout, calls };
} }