From 071f5df4f1000cd76c77de9af350061dbf93cef6 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 30 May 2022 17:17:37 +0800
Subject: [PATCH] update percentage

---
 .../related/ebpf/components/EBPFStack.vue     | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

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