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 { .trace-chart {
height: 100%; height: calc(100% - 100px);
overflow: auto; overflow: auto;
padding-bottom: 20px; padding-bottom: 20px;
} }

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

@ -26,7 +26,7 @@ limitations under the License. -->
{{ t("exportImage") }} {{ t("exportImage") }}
</el-button> </el-button>
</div> </div>
<div> <div class="list">
<Graph :data="data" :traceId="traceId" type="List" /> <Graph :data="data" :traceId="traceId" type="List" />
</div> </div>
</div> </div>
@ -103,4 +103,8 @@ function downloadTrace() {
.btn { .btn {
float: right; float: right;
} }
.list {
height: calc(100% - 150px);
}
</style> </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) { constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
this.handleSelectSpan = handleSelectSpan; this.handleSelectSpan = handleSelectSpan;
this.el = el; this.el = el;
this.width = el.clientWidth - 10; console.log(el.getBoundingClientRect());
this.height = el.clientHeight; this.width = el.getBoundingClientRect().width - 10;
this.height = el.getBoundingClientRect().height - 10;
console.log(el);
this.svg = d3 this.svg = d3
.select(this.el) .select(this.el)
.append("svg") .append("svg")
@ -306,8 +308,8 @@ export default class ListGraph {
if (!this.el) { if (!this.el) {
return; return;
} }
this.width = this.el.clientWidth - 20; this.width = this.el.getBoundingClientRect().width - 20;
this.height = this.el.clientHeight; this.height = this.el.getBoundingClientRect().height - 10;
this.svg.attr("width", this.width).attr("height", this.height); this.svg.attr("width", this.width).attr("height", this.height);
this.svg.select("g").attr("transform", () => `translate(160, 0)`); this.svg.select("g").attr("transform", () => `translate(160, 0)`);
const transform = d3.zoomTransform(this.svg).translate(0, 0); const transform = d3.zoomTransform(this.svg).translate(0, 0);