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

update tooltip

Browse Source
This commit is contained in:
Qiuxia Fan 2022-04-22 15:19:47 +08:00
parent e412172a22
commit 3910b4bab6
1 changed files with 10 additions and 14 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

@ -18,6 +18,7 @@ limitations under the License. -->
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import * as d3 from "d3"; import * as d3 from "d3";
import d3tip from "d3-tip";
import { flamegraph } from "d3-flame-graph"; import { flamegraph } from "d3-flame-graph";
import { useEbpfStore } from "@/store/modules/ebpf"; import { useEbpfStore } from "@/store/modules/ebpf";
import { StackElement } from "@/types/ebpf"; import { StackElement } from "@/types/ebpf";
@ -47,25 +48,21 @@ function drawGraph() {
.transitionEase(d3.easeCubic as any) .transitionEase(d3.easeCubic as any)
.sort(true) .sort(true)
.title("") .title("")
// .onClick(onClick)
.selfValue(false) .selfValue(false)
.setColorMapper((d, originalColor) => .setColorMapper((d, originalColor) =>
d.highlight ? "#6aff8f" : originalColor d.highlight ? "#6aff8f" : originalColor
); );
const tip = (d3tip as any)()
.attr("class", "d3-tip")
.direction("w")
.html(
(d: { data: StackElement }) =>
`<div class="mb-5">Symbol: ${d.data.name}</div><div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
);
flameChart.value.tooltip(tip);
d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value); d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);
} }
function onClick(d: any) {
console.info(`Clicked on ${d.data.name}, id: "${d.data.value}"`);
}
function resetZoom() {
if (!flameChart.value) {
return;
}
flameChart.value.resetZoom();
}
function processTree(arr: StackElement[]) { function processTree(arr: StackElement[]) {
const copyArr = JSON.parse(JSON.stringify(arr)); const copyArr = JSON.parse(JSON.stringify(arr));
const obj: any = {}; const obj: any = {};
@ -84,11 +81,10 @@ function processTree(arr: StackElement[]) {
min = item.dumpCount; min = item.dumpCount;
} }
} }
const scale = d3.scaleLinear().domain([min, max]).range([1, 100]); const scale = d3.scaleLinear().domain([min, max]).range([1, 150]);
for (const item of copyArr) { for (const item of copyArr) {
if (item.parentId === "0") { if (item.parentId === "0") {
res = item; res = item;
res.value = Number(scale(item.dumpCount).toFixed(4));
} }
for (const key in obj) { for (const key in obj) {
if (item.originId === obj[key].parentId) { if (item.originId === obj[key].parentId) {