Skip to content

Commit 271fa2b

Browse files
jetfueljetfuel
authored
Add the Graph.vue and the Config.vue for Graph tab (#277)
1 parent 9a53b04 commit 271fa2b

File tree

3 files changed

+293
-9
lines changed

3 files changed

+293
-9
lines changed

‎frontend/src/graph/Graph.vue‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,56 @@
11
<template>
22
<div class="visual-dl-page-container">
3-
<div>I AM GRAPH</div>
4-
53
<div class="visual-dl-page-left">
6-
<p>
7-
Download
8-
</p>
4+
<ui-chart
5+
:fitScreen="fitScreen"
6+
:download="download"
7+
:scale="config.scale"
8+
></ui-chart>
99
</div>
1010
<div class="visual-dl-page-right">
1111
<div class="visual-dl-page-config-container">
12-
<p>
13-
Show config
14-
</p>
12+
<ui-config
13+
:config="config"
14+
@fitScreen="handleFitScreen"
15+
@download="handleDownload"
16+
></ui-config>
1517
</div>
1618
</div>
1719
</div>
1820
</template>
1921

2022
<script>
23+
import autoAdjustHeight from '../common/util/autoAdjustHeight';
24+
import Config from './ui/Config'
25+
import Chart from './ui/Chart';
26+
2127
export default {
22-
name: 'Graph ',
28+
components: {
29+
'ui-config': Config,
30+
'ui-chart': Chart
31+
},
32+
name: 'Graph',
2333
data () {
2434
return {
35+
config: {
36+
scale: 0.5
37+
},
38+
fitScreen: {fitScreen: false},
39+
download: {download: false}
2540
}
2641
},
42+
mounted() {
43+
autoAdjustHeight();
44+
},
45+
methods: {
46+
handleFitScreen() {
47+
this.fitScreen = {fitScreen: true}
48+
this.config.scale = 0.5;
49+
},
50+
handleDownload() {
51+
this.download = {fitScreen: true}
52+
}
53+
}
2754
};
2855
2956
</script>

‎frontend/src/graph/ui/Chart.vue‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<template>
2+
<div class="visual-dl-graph-charts">
3+
<div v-if="graphUrl" class="visual-dl-img-box">
4+
<div class="small-img-box">
5+
<img class="small-img" ref="small_img" width="30" :src="graphUrl" />
6+
<div class="screen-handler" ref="screen_handler"></div>
7+
</div>
8+
<img class="draggable"
9+
ref="draggable"
10+
:width="computedWidth"
11+
:src="graphUrl" />
12+
</div>
13+
</div>
14+
</template>
15+
<script>
16+
// libs
17+
import echarts from 'echarts';
18+
import {
19+
dragMovelHandler,
20+
tansformElement,
21+
relativeMove
22+
} from './dragHelper';
23+
// service
24+
import {getPluginGraphsGraph} from '../../service';
25+
26+
// https://github.com/taye/interact.js
27+
import interact from 'interactjs';
28+
29+
export default {
30+
props: ['fitScreen', 'download', 'scale'],
31+
computed: {
32+
computedWidth() {
33+
let scale = this.scale;
34+
return Math.floor(scale * 2 * 700);
35+
}
36+
},
37+
data() {
38+
return {
39+
width: 800,
40+
height: 600,
41+
data: [
42+
{
43+
name: 'train',
44+
value: []
45+
}
46+
],
47+
graphUrl: '',
48+
};
49+
},
50+
watch: {
51+
fitScreen: function(val) {
52+
this.clearDragedTransform(this.getBigImgEl());
53+
this.clearDragedTransform(this.getSmallImgDragHandler());
54+
},
55+
download: function(val) {
56+
let aEl = document.createElement('a');
57+
aEl.href = this.graphUrl;
58+
aEl.download = 'graph.png';
59+
aEl.click();
60+
}
61+
},
62+
mounted() {
63+
this.getOriginChartsData();
64+
},
65+
66+
methods: {
67+
createChart() {
68+
let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
69+
this.myChart = echarts.init(el);
70+
},
71+
72+
initChartOption(data) {
73+
this.setChartOptions(data);
74+
},
75+
setChartOptions(data) {
76+
this.myChart.setOption(data);
77+
},
78+
79+
getOriginChartsData() {
80+
getPluginGraphsGraph().then(({status, data}) => {
81+
if (+status === 0 && data.url) {
82+
this.graphUrl = data.url
83+
console.log("The url: " + this.graphUrl)
84+
this.addDragEventForImg();
85+
}
86+
});
87+
},
88+
89+
clearDragedTransform(dragImgEl) {
90+
dragImgEl.style.transform = 'none';
91+
dragImgEl.setAttribute('data-x', 0);
92+
dragImgEl.setAttribute('data-y', 0);
93+
},
94+
95+
getBigImgEl() {
96+
return this.$refs.draggable
97+
},
98+
99+
getSmallImgEl() {
100+
return this.$refs.small_img
101+
},
102+
103+
getSmallImgDragHandler() {
104+
return this.$refs.screen_handler
105+
},
106+
107+
addDragEventForImg() {
108+
let that = this;
109+
// target elements with the "draggable" class
110+
interact('.draggable').draggable({
111+
// enable inertial throwing
112+
inertia: true,
113+
autoScroll: true,
114+
// call this function on every dragmove event
115+
onmove(event) {
116+
dragMovelHandler(event, (target, x, y) => {
117+
tansformElement(target, x, y);
118+
// compute the proportional value
119+
let triggerEl = that.getBigImgEl();
120+
let relativeEl = that.getSmallImgDragHandler();
121+
122+
relativeMove({triggerEl, x, y}, relativeEl);
123+
});
124+
}
125+
});
126+
127+
interact('.screen-handler').draggable({
128+
// enable inertial throwing
129+
inertia: true,
130+
autoScroll: true,
131+
restrict: {
132+
restriction: 'parent',
133+
endOnly: false,
134+
elementRect: {
135+
top: 0,
136+
left: 0,
137+
bottom: 1,
138+
right: 1
139+
}
140+
},
141+
// call this function on every dragmove event
142+
onmove(event) {
143+
dragMovelHandler(event, (target, x, y) => {
144+
tansformElement(target, x, y);
145+
// compute the proportional value
146+
let triggerEl = that.getSmallImgEl();
147+
let relativeEl = that.getBigImgEl();
148+
149+
relativeMove({triggerEl, x, y}, relativeEl);
150+
});
151+
}
152+
});
153+
}
154+
}
155+
};
156+
</script>
157+
<style lang="stylus">
158+
.visual-dl-graph-charts
159+
width 90%
160+
margin 0 auto
161+
margin-bottom 20px
162+
163+
.visual-dl-chart-box
164+
height 600px
165+
166+
.visual-dl-img-box
167+
border solid 1px #e4e4e4
168+
position relative
169+
background #f0f0f0
170+
overflow hidden
171+
172+
img
173+
box-sizing border-box
174+
margin 0 auto
175+
display block
176+
177+
.small-img-box
178+
width 30px
179+
box-sizing border-box
180+
position absolute
181+
right 0
182+
top 0
183+
border-left solid 1px #e4e4e4
184+
border-bottom solid 1px #e4e4e4
185+
background #f0f0f0
186+
z-index 1
187+
188+
.screen-handler
189+
box-sizing border-box
190+
position absolute
191+
width 30px
192+
height 20px
193+
border solid 1px #666
194+
top 0
195+
left -1px
196+
</style>

‎frontend/src/graph/ui/Config.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="visual-dl-graph-config-com">
3+
<v-btn
4+
class="visual-dl-graph-config-button"
5+
color="primary"
6+
@click="handleFitScreen"
7+
dark>
8+
<v-icon style="margin-right: 6px" size="20">fullscreen</v-icon>
9+
Fit &nbsp; to &nbsp; screen
10+
</v-btn>
11+
12+
<v-btn
13+
class="visual-dl-graph-config-button"
14+
color="primary"
15+
@click="handleDownload"
16+
dark>
17+
<v-icon style="margin-right: 6px">file_download</v-icon>
18+
Download image
19+
</v-btn>
20+
21+
<v-slider label="Scale"
22+
max="1"
23+
min="0.1"
24+
step="0.1"
25+
v-model="config.scale"
26+
dark></v-slider>
27+
</div>
28+
</template>
29+
<script>
30+
31+
export default {
32+
props:['config'],
33+
data() {
34+
return {
35+
};
36+
},
37+
methods: {
38+
handleFitScreen() {
39+
this.$emit('fitScreen')
40+
},
41+
handleDownload() {
42+
this.$emit('download')
43+
}
44+
}
45+
};
46+
</script>
47+
<style lang="stylus">
48+
@import '../../style/variables';
49+
+prefix-classes('visual-dl-graph-')
50+
.config-com
51+
width 90%
52+
margin 20px auto
53+
color $-right-font-color
54+
.config-button
55+
width 200px
56+
margin-top 20px
57+
.visual-dl-graph-config-com
58+
.sm-icon
59+
width 36px
60+
height 26px
61+
</style>

0 commit comments

Comments
 (0)