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

feat: sort data

Browse Source
This commit is contained in:
Fine 2023-03-14 14:49:19 +08:00
parent 4b3fabcc26
commit aecd5043c5
2 changed files with 17 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -151,19 +151,28 @@ limitations under the License. -->
if (resp && resp.errors) { if (resp && resp.errors) {
ElMessage.error(resp.errors); ElMessage.error(resp.errors);
} }
console.log(topologyStore.nodes); topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
console.log(topologyStore.calls); topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
// topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []); topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
// topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
// topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
// 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();
// await init(); // await init();
// update(); // update();
// setNodeTools(settings.value.nodeDashboard); // setNodeTools(settings.value.nodeDashboard);
draw(); draw();
}); });
function initData() {
const levels = [];
console.log(topologyStore.nodes);
// for (const n of topologyStore.nodes) {
// if (n.type === "USER") {
// levels[0] = n;
// }
// }
const nodes = topologyStore.nodes.sort((a: any, b: any) => b.service_cpm - a.service_cpm);
}
function draw() { function draw() {
const options = {}; const options = {};

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

@ -23,69 +23,6 @@ export function constructTangleLayout(levels: any, options: any = {}) {
const nodes_index: any = {}; const nodes_index: any = {};
nodes.forEach((d: any) => (nodes_index[d.id] = d)); nodes.forEach((d: any) => (nodes_index[d.id] = d));
// objectification
nodes.forEach((d: any) => {
d.parents = (d.parents === undefined ? [] : d.parents).map((p: any) => nodes_index[p]);
});
// precompute bundles
levels.forEach((l: any, i: any) => {
const index: any = {};
l.forEach((n: any) => {
if (n.parents.length == 0) {
return;
}
const id = n.parents
.map((d: any) => d.id)
.sort()
.join("-X-");
if (id in index) {
index[id].parents = index[id].parents.concat(n.parents);
} else {
index[id] = {
id: id,
parents: n.parents.slice(),
level: i,
span: i - n.parents && d3.min(n.parents, (p: any) => p.level),
};
}
n.bundle = index[id];
});
l.bundles = Object.keys(index).map((k) => index[k]);
l.bundles.forEach((b: any, i: any) => (b.i = i));
});
const bundles = levels.reduce((a: any, x: any) => a.concat(x.bundles), []);
// reverse pointer from parent to bundles
bundles.forEach((b: any) =>
b.parents.forEach((p: any) => {
if (p.bundles_index === undefined) {
p.bundles_index = {};
}
if (!(b.id in p.bundles_index)) {
p.bundles_index[b.id] = [];
}
p.bundles_index[b.id].push(b);
}),
);
nodes.forEach((n: any) => {
if (n.bundles_index !== undefined) {
n.bundles = Object.keys(n.bundles_index).map((k) => n.bundles_index[k]);
} else {
n.bundles_index = {};
n.bundles = [];
}
n.bundles.sort((a: any, b: any) =>
d3.descending(
d3.max(a, (d: any) => d.span),
d3.max(b, (d: any) => d.span),
),
);
n.bundles.forEach((b: any, i: any) => (b.i = i));
});
// layout // layout
const padding = 30; const padding = 30;
const node_height = 120; const node_height = 120;
@ -97,7 +34,7 @@ export function constructTangleLayout(levels: any, options: any = {}) {
const c = options.c; const c = options.c;
options.bigc ||= node_width + c; options.bigc ||= node_width + c;
nodes.forEach((n: any) => (n.height = (Math.max(1, n.bundles.length) - 1) * metro_d)); nodes.forEach((n: any) => (n.height = 5 * metro_d));
let x_offset = padding; let x_offset = padding;
let y_offset = 0; let y_offset = 0;
@ -116,5 +53,5 @@ export function constructTangleLayout(levels: any, options: any = {}) {
height: d3.max(nodes, (n: any) => n.y) || 0 + node_height / 2 + 2 * padding, height: d3.max(nodes, (n: any) => n.y) || 0 + node_height / 2 + 2 * padding,
}; };
return { nodes, bundles, layout }; return { nodes, layout };
} }