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

fix height

Browse Source
This commit is contained in:
Qiuxia Fan 2022-04-26 13:58:28 +08:00
parent 9d0af3ee94
commit e99416bec7
3 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dashboard/related/trace/Detail.vue
View File

@ -239,7 +239,7 @@ export default defineComponent({
}
.trace-chart {
height: 100%;
height: calc(100% - 100px);
overflow: auto;
padding-bottom: 20px;
}

6
src/views/dashboard/related/trace/components/List.vue
View File

@ -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>

10
src/views/dashboard/related/trace/utils/d3-trace-list.ts
View File

@ -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);