From e99416bec72c31c715c5a22b6c08309bd02dec01 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 26 Apr 2022 13:58:28 +0800
Subject: [PATCH] fix height

---
 src/views/dashboard/related/trace/Detail.vue           |  2 +-
 src/views/dashboard/related/trace/components/List.vue  |  6 +++++-
 .../dashboard/related/trace/utils/d3-trace-list.ts     | 10 ++++++----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index e2b6f15a..d44b01a5 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -239,7 +239,7 @@ export default defineComponent({
 }
 
 .trace-chart {
-  height: 100%;
+  height: calc(100% - 100px);
   overflow: auto;
   padding-bottom: 20px;
 }
diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue
index d9a4c56c..907c2364 100644
--- a/src/views/dashboard/related/trace/components/List.vue
+++ b/src/views/dashboard/related/trace/components/List.vue
@@ -26,7 +26,7 @@ limitations under the License. -->
         {{ t("exportImage") }}
       </el-button>
     </div>
-    <div>
+    <div class="list">
       <Graph :data="data" :traceId="traceId" type="List" />
     </div>
   </div>
@@ -103,4 +103,8 @@ function downloadTrace() {
 .btn {
   float: right;
 }
+
+.list {
+  height: calc(100% - 150px);
+}
 </style>
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
index dc2c16a7..4fdcf8dc 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -40,8 +40,10 @@ export default class ListGraph {
   constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
     this.handleSelectSpan = handleSelectSpan;
     this.el = el;
-    this.width = el.clientWidth - 10;
-    this.height = el.clientHeight;
+    console.log(el.getBoundingClientRect());
+    this.width = el.getBoundingClientRect().width - 10;
+    this.height = el.getBoundingClientRect().height - 10;
+    console.log(el);
     this.svg = d3
       .select(this.el)
       .append("svg")
@@ -306,8 +308,8 @@ export default class ListGraph {
     if (!this.el) {
       return;
     }
-    this.width = this.el.clientWidth - 20;
-    this.height = this.el.clientHeight;
+    this.width = this.el.getBoundingClientRect().width - 20;
+    this.height = this.el.getBoundingClientRect().height - 10;
     this.svg.attr("width", this.width).attr("height", this.height);
     this.svg.select("g").attr("transform", () => `translate(160, 0)`);
     const transform = d3.zoomTransform(this.svg).translate(0, 0);