Update:fix #2114 datas are too much (#217)
diff --git a/src/components/TraceTree/d3-trace.js b/src/components/TraceTree/d3-trace.js
index 9c795e7..8f0461b 100644
--- a/src/components/TraceTree/d3-trace.js
+++ b/src/components/TraceTree/d3-trace.js
@@ -19,7 +19,7 @@
import * as d3 from 'd3';
import d3tip from 'd3-tip';
export default class TraceMap {
- constructor(el, showSpanModal,smax,smin,cmax,cmin) {
+ constructor(el,row, showSpanModal,smax,smin,cmax,cmin) {
this.type = {
MQ: '#bf99f8',
Http: '#72a5fd',
@@ -37,9 +37,10 @@
this.i = 0;
this.j = 0;
this.width = el.clientWidth;
- this.height = el.clientHeight;
+ this.height = (row.length - 1) * 80;
this.body = d3
.select(this.el)
+ .style('height', this.height + 'px')
.append('svg')
.attr('width', this.width)
.attr('height', this.height);
@@ -53,7 +54,7 @@
.html(d => d.data.label);
this.body.call(this.timeTip);
this.body.call(this.tip);
- this.treemap = d3.tree().size([this.height * 0.7, this.width]);
+ this.treemap = d3.tree().size([this.height * 0.8, this.width]);
}
init(data, row) {
this.row = row;
@@ -65,7 +66,7 @@
.scaleSequential()
.domain([0, this.list.length])
.interpolator(d3.interpolateCool);
- this.svg = this.body.append('g').attr('transform', d => `translate(0, ${this.row.length * 10})`).append('g');
+ this.svg = this.body.append('g').attr('transform', d => `translate(0, ${this.row.length * 14})`).append('g');
this.timeGroup = this.body.append('g').attr('class','timeGroup').attr('transform', d => 'translate(5,30)');
this.body.call(this.getZoomBehavior(this.svg));
this.root = d3.hierarchy(this.data, d => d.children);
diff --git a/src/components/TraceTree/index.js b/src/components/TraceTree/index.js
index 6e740ea..278b1d8 100644
--- a/src/components/TraceTree/index.js
+++ b/src/components/TraceTree/index.js
@@ -118,7 +118,7 @@
this.topChildMax = this.topChild.sort((a,b) => b - a)[0];
this.topChildMin = this.topChild.sort((a,b) => b - a)[4];
- this.tree = new Tree(this.echartsElement, propsData.showSpanModal, this.topSlowMax,this.topSlowMin,this.topChildMax,this.topChildMin)
+ this.tree = new Tree(this.echartsElement,rowData, propsData.showSpanModal, this.topSlowMax,this.topSlowMin,this.topChildMax,this.topChildMin)
this.tree.init({label:`${this.traceId}`, children: this.segmentId}, rowData);
this.tree.draw();
this.resize = this.tree.resize.bind(this.tree);
@@ -158,10 +158,6 @@
}
render() {
- const newStyle = {
- height: 800,
- // ...style,
- };
return (
<div>
<ButtonGroup>
@@ -178,7 +174,6 @@
</div>
<div
ref={(e) => { this.echartsElement = e; }}
- style={newStyle}
className="trace-tree"
/>
</div>
diff --git a/src/components/TraceTree/style.less b/src/components/TraceTree/style.less
index 5924b85..1ed35c4 100644
--- a/src/components/TraceTree/style.less
+++ b/src/components/TraceTree/style.less
@@ -15,9 +15,6 @@
* limitations under the License.
*/
-:global(.trace-tree) {
- height: 1000px;
-}
:global(.trace-tree .node) {
cursor: pointer;
}
