Add the Graph.vue and the Config.vue for Graph tab

frontend/src/graph/Graph.vue

@@ -1,29 +1,56 @@
 <template>
     <div class="visual-dl-page-container">
-        <div>I AM GRAPH</div>
-
         <div class="visual-dl-page-left">
-            <p>
-                Download
-            </p>
+            <ui-chart
+                :fitScreen="fitScreen"
+                :download="download"
+                :scale="config.scale"
+            ></ui-chart>
         </div>
         <div class="visual-dl-page-right">
             <div class="visual-dl-page-config-container">
-                <p>
-                    Show config
-                </p>
+                <ui-config
+                    :config="config"
+                    @fitScreen="handleFitScreen"
+                    @download="handleDownload"
+                ></ui-config>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
+import Config from './ui/Config'
+import Chart from './ui/Chart';
+
 export default {
-    name: 'Graph ',
+    components: {
+        'ui-config': Config,
+        'ui-chart': Chart
+    },
+    name: 'Graph',
     data () {
         return {
+            config: {
+                scale: 0.5
+            },
+            fitScreen: {fitScreen: false},
+            download: {download: false}
         }
     },
+    mounted() {
+        autoAdjustHeight();
+    },
+    methods: {
+        handleFitScreen() {
+            this.fitScreen = {fitScreen: true}
+            this.config.scale = 0.5;
+        },
+        handleDownload() {
+            this.download = {fitScreen: true}
+        }
+    }
 };
 
 </script>

frontend/src/graph/ui/Chart.vue

@@ -0,0 +1,196 @@
+<template>
+    <div class="visual-dl-graph-charts">
+        <div v-if="graphUrl" class="visual-dl-img-box">
+            <div class="small-img-box">
+                <img class="small-img" ref="small_img" width="30" :src="graphUrl" />
+                <div class="screen-handler" ref="screen_handler"></div>
+            </div>
+            <img class="draggable"
+                 ref="draggable"
+                 :width="computedWidth"
+                 :src="graphUrl" />
+        </div>
+    </div>
+</template>
+<script>
+// libs
+import echarts from 'echarts';
+import {
+    dragMovelHandler,
+    tansformElement,
+    relativeMove
+} from './dragHelper';
+// service
+import {getPluginGraphsGraph} from '../../service';
+
+// https://github.com/taye/interact.js
+import interact from 'interactjs';
+
+export default {
+    props: ['fitScreen', 'download', 'scale'],
+    computed: {
+        computedWidth() {
+            let scale = this.scale;
+            return Math.floor(scale * 2 * 700);
+        }
+    },
+    data() {
+        return {
+            width: 800,
+            height: 600,
+            data: [
+                {
+                    name: 'train',
+                    value: []
+                }
+            ],
+            graphUrl: '',
+        };
+    },
+    watch: {
+        fitScreen: function(val) {
+            this.clearDragedTransform(this.getBigImgEl());
+            this.clearDragedTransform(this.getSmallImgDragHandler());
+        },
+        download: function(val) {
+            let aEl = document.createElement('a');
+            aEl.href = this.graphUrl;
+            aEl.download = 'graph.png';
+            aEl.click();
+        }
+    },
+    mounted() {
+        this.getOriginChartsData();
+    },
+
+    methods: {
+        createChart() {
+            let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
+            this.myChart = echarts.init(el);
+        },
+
+        initChartOption(data) {
+            this.setChartOptions(data);
+        },
+        setChartOptions(data) {
+            this.myChart.setOption(data);
+        },
+
+        getOriginChartsData() {
+            getPluginGraphsGraph().then(({status, data}) => {
+                if (+status === 0 && data.url) {
+                    this.graphUrl = data.url
+                    console.log("The url: " + this.graphUrl)
+                    this.addDragEventForImg();
+                }
+            });
+        },
+
+        clearDragedTransform(dragImgEl) {
+            dragImgEl.style.transform = 'none';
+            dragImgEl.setAttribute('data-x', 0);
+            dragImgEl.setAttribute('data-y', 0);
+        },
+
+        getBigImgEl() {
+            return this.$refs.draggable
+        },
+
+        getSmallImgEl() {
+            return this.$refs.small_img
+        },
+
+        getSmallImgDragHandler() {
+            return this.$refs.screen_handler
+        },
+
+        addDragEventForImg() {
+            let that = this;
+            // target elements with the "draggable" class
+            interact('.draggable').draggable({
+                // enable inertial throwing
+                inertia: true,
+                autoScroll: true,
+                // call this function on every dragmove event
+                onmove(event) {
+                    dragMovelHandler(event, (target, x, y) => {
+                        tansformElement(target, x, y);
+                        // compute the proportional value
+                        let triggerEl = that.getBigImgEl();
+                        let relativeEl = that.getSmallImgDragHandler();
+
+                        relativeMove({triggerEl, x, y}, relativeEl);
+                    });
+                }
+            });
+
+            interact('.screen-handler').draggable({
+                // enable inertial throwing
+                inertia: true,
+                autoScroll: true,
+                restrict: {
+                    restriction: 'parent',
+                    endOnly: false,
+                    elementRect: {
+                        top: 0,
+                        left: 0,
+                        bottom: 1,
+                        right: 1
+                    }
+                },
+                // call this function on every dragmove event
+                onmove(event) {
+                    dragMovelHandler(event, (target, x, y) => {
+                        tansformElement(target, x, y);
+                        // compute the proportional value
+                        let triggerEl = that.getSmallImgEl();
+                        let relativeEl = that.getBigImgEl();
+
+                        relativeMove({triggerEl, x, y}, relativeEl);
+                    });
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="stylus">
+    .visual-dl-graph-charts
+        width 90%
+        margin 0 auto
+        margin-bottom 20px
+
+        .visual-dl-chart-box
+            height 600px
+
+        .visual-dl-img-box
+            border solid 1px #e4e4e4
+            position relative
+            background #f0f0f0
+            overflow hidden
+
+            img
+                box-sizing border-box
+                margin 0 auto
+                display block
+
+            .small-img-box
+                width 30px
+                box-sizing border-box
+                position absolute
+                right 0
+                top 0
+                border-left solid 1px #e4e4e4
+                border-bottom solid 1px #e4e4e4
+                background #f0f0f0
+                z-index 1
+
+                .screen-handler
+                    box-sizing border-box
+                    position absolute
+                    width 30px
+                    height 20px
+                    border solid 1px #666
+                    top 0
+                    left -1px
+</style>

frontend/src/graph/ui/Config.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="visual-dl-graph-config-com">
+        <v-btn
+            class="visual-dl-graph-config-button"
+            color="primary"
+            @click="handleFitScreen"
+            dark>
+            <v-icon style="margin-right: 6px" size="20">fullscreen</v-icon>
+            Fit &nbsp; to &nbsp; screen
+        </v-btn>
+
+        <v-btn
+            class="visual-dl-graph-config-button"
+            color="primary"
+            @click="handleDownload"
+            dark>
+            <v-icon style="margin-right: 6px">file_download</v-icon>
+            Download image
+        </v-btn>
+
+        <v-slider label="Scale"
+          max="1"
+          min="0.1"
+          step="0.1"
+          v-model="config.scale"
+          dark></v-slider>
+    </div>
+</template>
+<script>
+
+export default {
+    props:['config'],
+    data() {
+        return {
+        };
+    },
+    methods: {
+        handleFitScreen() {
+            this.$emit('fitScreen')
+        },
+        handleDownload() {
+            this.$emit('download')
+        }
+    }
+};
+</script>
+<style lang="stylus">
+@import '../../style/variables';
++prefix-classes('visual-dl-graph-')
+    .config-com
+        width 90%
+        margin 20px auto
+        color $-right-font-color
+        .config-button
+            width 200px
+            margin-top 20px
+.visual-dl-graph-config-com
+    .sm-icon
+        width 36px
+        height 26px
+</style>