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 percentage

Browse Source
This commit is contained in:
Qiuxia Fan 2022-05-30 17:17:37 +08:00
parent 4f05b20f74
commit 071f5df4f1
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/dashboard/related/ebpf/components/EBPFStack.vue
View File

@ -30,6 +30,7 @@ import "d3-flame-graph/dist/d3-flamegraph.css";
/*global Nullable*/ /*global Nullable*/
const ebpfStore = useEbpfStore(); const ebpfStore = useEbpfStore();
const stackTree = ref<Nullable<StackElement>>(null); const stackTree = ref<Nullable<StackElement>>(null);
const selectStack = ref<Nullable<StackElement>>(null);
const graph = ref<Nullable<HTMLDivElement>>(null); const graph = ref<Nullable<HTMLDivElement>>(null);
const flameChart = ref<any>(null); const flameChart = ref<any>(null);
const min = ref<number>(1); const min = ref<number>(1);
@ -83,6 +84,9 @@ function drawGraph() {
.title("") .title("")
.selfValue(false) .selfValue(false)
.inverted(true) .inverted(true)
.onClick((d: { data: StackElement }) => {
selectStack.value = d.data;
})
.setColorMapper((d, originalColor) => .setColorMapper((d, originalColor) =>
d.highlight ? "#6aff8f" : originalColor d.highlight ? "#6aff8f" : originalColor
); );
@ -97,18 +101,18 @@ function drawGraph() {
: `<div class="mb-5">Duration: ${d.data.dumpCount} ns</div>`; : `<div class="mb-5">Duration: ${d.data.dumpCount} ns</div>`;
const rateOfParent = const rateOfParent =
(d.parent && (d.parent &&
`<div class="mb-5">Rate Of Parent: ${ `<div class="mb-5">Percentage Of Selected: ${
((d.data.dumpCount / d.parent.data.dumpCount) * 100).toFixed(3) + (
"%" (d.data.dumpCount /
((selectStack.value && selectStack.value.dumpCount) ||
root.dumpCount)) *
100
).toFixed(3) + "%"
}</div>`) || }</div>`) ||
""; "";
const rateOfRoot = const rateOfRoot = `<div class="mb-5">Percentage Of Root: ${
(d.parent && ((d.data.dumpCount / root.dumpCount) * 100).toFixed(3) + "%"
`<div class="mb-5">Rate Of Root: ${ }</div>`;
((d.data.dumpCount / root.dumpCount) * 100).toFixed(3) + "%"
}</div>`) ||
"";
return `<div class="mb-5 name">Symbol: ${name}</div>${valStr}${rateOfParent}${rateOfRoot}`; return `<div class="mb-5 name">Symbol: ${name}</div>${valStr}${rateOfParent}${rateOfRoot}`;
}) })
.style("max-width", "500px"); .style("max-width", "500px");