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

fix: update tips

Browse Source
This commit is contained in:
Qiuxia Fan 2022-02-10 15:17:28 +08:00
parent 8b54498236
commit 7697157328
3 changed files with 46 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/dashboard/related/topology/Graph.vue
View File

@ -16,7 +16,7 @@ limitations under the License. -->
<div ref="chart" class="micro-topo-chart"></div> <div ref="chart" class="micro-topo-chart"></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import * as d3 from "d3"; import * as d3 from "d3";
import d3tip from "d3-tip"; import d3tip from "d3-tip";
@ -66,7 +66,7 @@ onMounted(async () => {
.attr("height", height.value) .attr("height", height.value)
.attr("width", width.value); .attr("width", width.value);
tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]); tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]);
graph.value = svg.value.append("g").attr("class", "topo-svg_graph"); graph.value = svg.value.append("g").attr("class", "topo-svg-graph");
graph.value.call(tip.value); graph.value.call(tip.value);
simulation.value = simulationInit( simulation.value = simulationInit(
d3, d3,
@ -87,7 +87,6 @@ onMounted(async () => {
// { icon: "ENDPOINT", click: handleGoEndpointDependency }, // { icon: "ENDPOINT", click: handleGoEndpointDependency },
// { icon: "" }, // { icon: "" },
// ]); // ]);
update();
}); });
async function getTopology() { async function getTopology() {
switch (dashboardStore.entity) { switch (dashboardStore.entity) {
@ -236,6 +235,12 @@ function update() {
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener("resize", resize); window.removeEventListener("resize", resize);
}); });
watch(
() => [topologyStore.calls, topologyStore.nodes],
() => {
update();
}
);
</script> </script>
<style lang="scss"> <style lang="scss">
@keyframes topo-dash { @keyframes topo-dash {
@ -258,10 +263,10 @@ onBeforeUnmount(() => {
.topo-line { .topo-line {
stroke-linecap: round; stroke-linecap: round;
stroke-width: 3px !important; stroke-width: 3px;
stroke-dasharray: 13 7; stroke-dasharray: 13 7;
fill: none; fill: none;
animation: topo-dash 0.5s linear infinite !important; animation: topo-dash 0.5s linear infinite;
} }
.topo-line-anchor { .topo-line-anchor {
@ -296,4 +301,32 @@ onBeforeUnmount(() => {
} }
} }
} }
.d3-tip {
line-height: 1;
padding: 8px;
color: #eee;
border-radius: 4px;
font-size: 12px;
z-index: 9999;
background: #252a2f;
}
.d3-tip:after {
box-sizing: border-box;
display: block;
font-size: 10px;
width: 100%;
line-height: 0.8;
color: #252a2f;
content: "\25BC";
position: absolute;
text-align: center;
}
.d3-tip.n:after {
margin: -2px 0 0 0;
top: 100%;
left: 0;
}
</style> </style>

2
src/views/dashboard/related/topology/utils/linkElement.ts
View File

@ -32,7 +32,7 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => {
.attr("class", "topo-line-anchor") .attr("class", "topo-line-anchor")
.attr("r", 5) .attr("r", 5)
.attr("fill", (d: { cpm: number }) => (d.cpm ? "#217EF25f" : "#6a6d7777")) .attr("fill", (d: { cpm: number }) => (d.cpm ? "#217EF25f" : "#6a6d7777"))
.on("mouseover", function (d: unknown) { .on("mouseover", function (event: unknown, d: unknown) {
tip.html(funcs.$tip).show(d, this); tip.html(funcs.$tip).show(d, this);
}) })
.on("mouseout", function () { .on("mouseout", function () {

10
src/views/dashboard/related/topology/utils/nodeElement.ts
View File

@ -27,13 +27,17 @@ export default (d3: any, graph: any, tool: any, funcs: any, tip: any) => {
.on("drag", funcs.dragged) .on("drag", funcs.dragged)
.on("end", funcs.dragended) .on("end", funcs.dragended)
) )
.on("mouseover", function (d: any) { .on("mouseover", function (event: any, d: { name: string }) {
tip.html((data: any) => `<div>${data.name}</div>`).show(d, this); tip
.html(() => {
return `<div>${d.name}</div>`;
})
.show(d, this);
}) })
.on("mouseout", function () { .on("mouseout", function () {
tip.hide(this); tip.hide(this);
}) })
.on("click", (event: any, d: any) => { .on("click", (event: any, d: unknown) => {
event.stopPropagation(); event.stopPropagation();
// event.preventDefault(); // event.preventDefault();
// tool.attr("style", "display: none"); // tool.attr("style", "display: none");