refactor: update legend for topology (#51)

src/views/dashboard/graphs/Bar.vue

@@ -140,6 +140,7 @@ function getOption() {
       zlevel: 1000,
       z: 60,
       backgroundColor: "rgb(50,50,50)",
+      confine: true,
       textStyle: {
         fontSize: 13,
         color: "#ccc",

src/views/dashboard/related/topology/components/Graph.vue

@@ -20,6 +20,20 @@ limitations under the License. -->
     element-loading-background="rgba(0, 0, 0, 0)"
     :style="`height: ${height}px`"
   >
+    <div class="legend">
+      <div>
+        <img :src="icons.CUBE" />
+        <span>
+          {{ settings.description ? settings.description.healthy || "" : "" }}
+        </span>
+      </div>
+      <div>
+        <img :src="icons.CUBEERROR" />
+        <span>
+          {{ settings.description ? settings.description.unhealthy || "" : "" }}
+        </span>
+      </div>
+    </div>
     <div class="setting" v-if="showSetting">
       <Settings @update="updateSettings" @updateNodes="freshNodes" />
     </div>
@@ -84,7 +98,6 @@ import zoom from "../utils/zoom";
 import { simulationInit, simulationSkip } from "../utils/simulation";
 import nodeElement from "../utils/nodeElement";
 import { linkElement, anchorElement, arrowMarker } from "../utils/linkElement";
-import topoLegend from "../utils/legend";
 import { Node, Call } from "@/types/topology";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useTopologyStore } from "@/store/modules/topology";
@@ -99,6 +112,7 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { MetricConfigOpt } from "@/types/dashboard";
 import { aggregation } from "@/hooks/useProcessor";
+import icons from "@/assets/img/icons";
 
 /*global Nullable, defineProps */
 const props = defineProps({
@@ -124,7 +138,6 @@ const node = ref<any>(null);
 const link = ref<any>(null);
 const anchor = ref<any>(null);
 const arrow = ref<any>(null);
-const legend = ref<any>(null);
 const showSetting = ref<boolean>(false);
 const settings = ref<any>(props.config);
 const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
@@ -174,14 +187,6 @@ async function init() {
   anchor.value = graph.value.append("g").selectAll(".topo-line-anchor");
   arrow.value = graph.value.append("g").selectAll(".topo-line-arrow");
   svg.value.call(zoom(d3, graph.value));
-  // legend
-  legend.value = graph.value.append("g").attr("class", "topo-legend");
-  topoLegend(
-    legend.value,
-    height.value,
-    width.value,
-    settings.value.description
-  );
   svg.value.on("click", (event: any) => {
     event.stopPropagation();
     event.preventDefault();
@@ -563,6 +568,29 @@ watch(
   overflow: auto;
   margin-top: 30px;
 
+  .legend {
+    position: absolute;
+    top: 10px;
+    left: 15px;
+    color: #ccc;
+
+    div {
+      margin-bottom: 8px;
+    }
+
+    img {
+      width: 32px;
+      float: left;
+    }
+
+    span {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      margin-left: 5px;
+    }
+  }
+
   .setting {
     position: absolute;
     top: 80px;

src/views/dashboard/related/topology/components/Sankey.vue

@@ -38,6 +38,7 @@ function getOption() {
   return {
     tooltip: {
       trigger: "item",
+      confine: true,
     },
     series: {
       type: "sankey",

src/views/dashboard/related/topology/utils/legend.ts

@@ -1,46 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import icons from "@/assets/img/icons";
-
-export default function topoLegend(
-  graph: any,
-  clientHeight: number,
-  clientWidth: number,
-  description: any
-) {
-  for (const item of ["CUBE", "CUBEERROR"]) {
-    graph
-      .append("image")
-      .attr("width", 30)
-      .attr("height", 30)
-      .attr("x", clientWidth - 140)
-      .attr("y", clientHeight + (item === "CUBEERROR" ? 50 : 0))
-      .attr("xlink:href", () =>
-        item === "CUBEERROR" ? icons.CUBEERROR : icons.CUBE
-      );
-    graph
-      .append("text")
-      .attr("x", clientWidth - 110)
-      .attr("y", clientHeight + (item === "CUBEERROR" ? 70 : 20))
-      .text(() => {
-        const desc = description || {};
-        return item === "CUBEERROR" ? desc.unhealthy || "" : desc.healthy || "";
-      })
-      .style("fill", "#efeff1")
-      .style("font-size", "11px");
-  }
-}