build: install packages

dist/LICENSE

@@ -28,4 +28,6 @@ element-resize-detector 1.2.4: https://github.com/wnr/element-resize-detector MI
 batch-processor 1.0.0: https://github.com/wnr/batch-processor MIT
 echarts 5.2.2: https://github.com/apache/echarts Apache-2.0 License
 zrender 5.2.1: https://github.com/ecomfe/zrender BSD-3-Clause License
-tslib 2.3.0: https://github.com/Microsoft/tslib 0BSD License
+tslib 2.3.0: https://github.com/Microsoft/tslib 0BSD License
+d3-tip 0.9.1: https: //github.com/Caged/d3-tip MIT Licensee
+d3 7.3.0: https://github.com/d3/d3  ISC License

package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "axios": "^0.24.0",
+    "d3": "^7.3.0",
+    "d3-tip": "^0.9.1",
     "echarts": "^5.2.2",
     "element-plus": "^1.2.0-beta.3",
     "pinia": "^2.0.5",
@@ -24,6 +26,8 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/d3": "^7.1.0",
+    "@types/d3-tip": "^3.5.5",
     "@types/echarts": "^4.9.12",
     "@types/jest": "^24.0.19",
     "@types/three": "^0.131.0",

src/graph/fragments/topology.ts

@@ -29,6 +29,8 @@ export const ServiceTopology = {
       source
       detectPoints
       target
+      sourceComponents
+      targetComponents
     }
   }`,
 };
@@ -47,6 +49,8 @@ export const GlobalTopology = {
       source
       detectPoints
       target
+      sourceComponents
+      targetComponents
     }
   }`,
 };
@@ -65,6 +69,8 @@ export const ServicesTopology = {
       source
       detectPoints
       target
+      sourceComponents
+      targetComponents
     }
   }`,
 };

src/types/global.d.ts

@@ -26,6 +26,8 @@ import type {
 declare module "three";
 declare module "three-orbit-controls";
 declare module "element-plus";
+declare module "d3-tip";
+declare module "d3";
 declare global {
   const __APP_INFO__: {
     pkg: {

src/views/dashboard/related/Topology.vue

@@ -13,5 +13,9 @@ 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. -->
 <template>
-  <div class="topology">topology</div>
+  <div class="micro-topo-chart"></div>
 </template>
+<script lang="ts" setup>
+import * as d3 from "d3";
+import d3tip from "d3-tip";
+</script>