add feature apache/skywaking#96 (#165)
* export picture
* change css
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index fb224ef..682991b 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -96,6 +96,7 @@
monthCutTip: 'Last 1 month',
serverZone: 'Server Zone',
percentResponse: 'Percent Response',
+ download: 'Dowanload',
};
export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index 11b15d8..71de156 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -96,6 +96,7 @@
monthCutTip: '最近1月',
serverZone: '服务器时区',
percentResponse: '百分比响应',
+ download: '导出为图片',
};
export default m;
diff --git a/src/views/components/trace/d3-trace.js b/src/views/components/trace/d3-trace.js
index 8f3a2b7..a7535b3 100644
--- a/src/views/components/trace/d3-trace.js
+++ b/src/views/components/trace/d3-trace.js
@@ -37,6 +37,7 @@
this.svg = d3
.select(this.el)
.append('svg')
+ .attr('class', 'trace-list-dowanload')
.attr('width', this.width)
.attr('height', this.height);
this.treemap = d3.tree().size([this.height * 0.7, this.width]);
@@ -76,6 +77,7 @@
this.svg
.append('g')
.attr('class','trace-xaxis')
+
.attr('transform', `translate(${this.width * 0.618 -20 },${30})`)
.call(this.xAxis);
this.sequentialScale = d3
@@ -133,7 +135,8 @@
.attr('rx',2)
.attr('y', -22)
.attr('x', 20)
- .attr('width', '100%');
+ .attr('width', '100%')
+ .attr('fill', 'rgba(0,0,0,0)');
nodeEnter
.append('text')
.attr('x', 13)
@@ -204,7 +207,7 @@
.attr('fill', d =>
d._children
? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
- : ''
+ : 'rbga(0,0,0,0)'
)
.style(
'stroke',
@@ -245,6 +248,9 @@
.enter()
.insert('path', 'g')
.attr('class', 'trace-link')
+ .attr('fill', 'rgba(0,0,0,0)')
+ .attr('stroke', 'rgba(0, 0, 0, 0.1)')
+ .attr('stroke-width', 2)
.attr('d', d => {
const o = { x: source.x0 + 35, y: source.y0 };
return this.diagonal({ source: o, target: o });
diff --git a/src/views/components/trace/trace-detail-chart-list.vue b/src/views/components/trace/trace-detail-chart-list.vue
index c0c5fa9..c005a25 100644
--- a/src/views/components/trace/trace-detail-chart-list.vue
+++ b/src/views/components/trace/trace-detail-chart-list.vue
@@ -22,7 +22,7 @@
<use xlink:href="#spinner"></use>
</svg>
</div>
- <transition-group name="fade" tag="div" class="mb-5">
+ <transition-group name="fade" tag="a" class="mb-5">
<span class="time-charts-item mr-10" v-for="(i,index) in list" :key="i" :style="`color:${computedScale(index)}`">
<svg class="icon vm mr-5 sm">
<use xlink:href="#issue-open-m"></use>
@@ -30,6 +30,7 @@
<span>{{i}}</span>
</span>
</transition-group>
+ <a class="rk-btn r vm tc" @click="downloadTrace">{{$t('download')}}</a>
<rk-sidebox :width="'50%'" :show.sync="showDetail" :title="$t('spanInfo')">
<div class="rk-trace-detail">
<h5 class="mb-15">{{$t('tags')}}.</h5>
@@ -285,6 +286,28 @@
],
})
},
+ downloadTrace() {
+ let serializer = new XMLSerializer();
+ let svgNode = d3.select('.trace-list-dowanload').node();
+ let width = d3.select('.trace-list-dowanload')._groups[0][0].clientWidth;
+ let height = d3.select('.trace-list-dowanload')._groups[0][0].clientHeight;
+ let source = serializer.serializeToString(svgNode);
+ source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
+ let url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
+ let canvas = document.createElement("canvas");
+ canvas.width = width;
+ canvas.height = height;
+ let context = canvas.getContext("2d");
+ let image = new Image;
+ image.src = url;
+ image.onload = function() {
+ context.drawImage(image, 0, 0);
+ var a = document.createElement("a");
+ a.download = "trace-list.png";
+ a.href = canvas.toDataURL("image/png");
+ a.click();
+ }
+ }
}
};
</script>
@@ -312,11 +335,6 @@
pointer-events: none;
}
.domain{display: none;}
-.trace-link {
- fill: none;
- stroke: rgba(0,0,0,0.1);
- stroke-width: 2px;
-}
.time-charts-item{
display: inline-block;
padding: 2px 8px;
