From 52b00f9a97de5fd01ec05a763b5efc822f71755a Mon Sep 17 00:00:00 2001
From: BingBlog <abingblog@gmail.com>
Date: Sat, 6 Jan 2018 18:18:44 +0800
Subject: [PATCH] frontend add graph (#63)

* fix the tooltip index error

* frontend add graph
---
 frontend/mock/data/plugin/graphs/graphs.js | 115 +++++++++++++++++++++
 frontend/src/common/component/AppMenu.san  |   5 +
 frontend/src/graph/Graph.san               |  92 +++++++++++++++++
 frontend/src/graph/index.js                |   9 ++
 frontend/src/graph/ui/chart.san            |  73 +++++++++++++
 frontend/src/graph/ui/config.san           |  68 ++++++++++++
 frontend/src/histogram/ui/config.san       |   6 +-
 frontend/src/images/ui/config.san          |   6 +-
 frontend/src/index.js                      |   1 +
 frontend/src/scalars/ui/config.san         |   2 +-
 frontend/src/service.js                    |   2 +
 11 files changed, 372 insertions(+), 7 deletions(-)
 create mode 100644 frontend/mock/data/plugin/graphs/graphs.js
 create mode 100644 frontend/src/graph/Graph.san
 create mode 100644 frontend/src/graph/index.js
 create mode 100644 frontend/src/graph/ui/chart.san
 create mode 100644 frontend/src/graph/ui/config.san

diff --git a/frontend/mock/data/plugin/graphs/graphs.js b/frontend/mock/data/plugin/graphs/graphs.js
new file mode 100644
index 00000000..6097e8be
--- /dev/null
+++ b/frontend/mock/data/plugin/graphs/graphs.js
@@ -0,0 +1,115 @@
+/**
+ * get mock data
+ *
+ * @param {string} path request path
+ * @param {Object} queryParam query params
+ * @param {Object} postParam post params
+ * @return {Object}
+ */
+module.exports = function (path, queryParam, postParam) {
+    return {
+        // moock delay
+        _timeout: 0,
+        // mock http status
+        _status: 200,
+        // mock response data
+        _data: {
+            status: 0,
+            msg: 'SUCCESS',
+            data: {
+                title: {
+                    text: 'Graph 简单示例'
+                },
+                tooltip: {},
+                animationDurationUpdate: 1500,
+                animationEasingUpdate: 'quinticInOut',
+                series : [
+                    {
+                        type: 'graph',
+                        layout: 'none',
+                        symbolSize: 50,
+                        roam: true,
+                        label: {
+                            normal: {
+                                show: true
+                            }
+                        },
+                        edgeSymbol: ['circle', 'arrow'],
+                        edgeSymbolSize: [4, 10],
+                        edgeLabel: {
+                            normal: {
+                                textStyle: {
+                                    fontSize: 20
+                                }
+                            }
+                        },
+                        data: [{
+                            name: '节点1',
+                            x: 300,
+                            y: 300
+                        }, {
+                            name: '节点2',
+                            x: 800,
+                            y: 300
+                        }, {
+                            name: '节点3',
+                            x: 550,
+                            y: 100
+                        }, {
+                            name: '节点4',
+                            x: 550,
+                            y: 500
+                        }],
+                        // links: [],
+                        links: [{
+                            source: 0,
+                            target: 1,
+                            symbolSize: [5, 20],
+                            label: {
+                                normal: {
+                                    show: true
+                                }
+                            },
+                            lineStyle: {
+                                normal: {
+                                    width: 5,
+                                    curveness: 0.2
+                                }
+                            }
+                        }, {
+                            source: '节点2',
+                            target: '节点1',
+                            label: {
+                                normal: {
+                                    show: true
+                                }
+                            },
+                            lineStyle: {
+                                normal: { curveness: 0.2 }
+                            }
+                        }, {
+                            source: '节点1',
+                            target: '节点3'
+                        }, {
+                            source: '节点2',
+                            target: '节点3'
+                        }, {
+                            source: '节点2',
+                            target: '节点4'
+                        }, {
+                            source: '节点1',
+                            target: '节点4'
+                        }],
+                        lineStyle: {
+                            normal: {
+                                opacity: 0.9,
+                                width: 2,
+                                curveness: 0
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    };
+};
diff --git a/frontend/src/common/component/AppMenu.san b/frontend/src/common/component/AppMenu.san
index 8a31cce8..2538a327 100644
--- a/frontend/src/common/component/AppMenu.san
+++ b/frontend/src/common/component/AppMenu.san
@@ -39,6 +39,11 @@ export default {
                     url: '/histograms',
                     title: 'HISTOGRAMS',
                     name: 'histograms'
+                },
+                {
+                    url: '/graphs',
+                    title: 'GRAPHS',
+                    name: 'graphs'
                 }
             ]
         };
diff --git a/frontend/src/graph/Graph.san b/frontend/src/graph/Graph.san
new file mode 100644
index 00000000..5b7cb235
--- /dev/null
+++ b/frontend/src/graph/Graph.san
@@ -0,0 +1,92 @@
+<template>
+    <div class="visual-dl-scalar-container">
+        <div class="visual-dl-scalar-left">
+            <div class="visual-dl-scalar-config-container">
+                <ui-config
+                    runsItems="{{runsItems}}"
+                    config="{=config=}"
+                    on-fitScreen="handleFitScreen"
+                ></ui-config>
+            </div>
+        </div>
+        <div class="visual-dl-scalar-right">
+            <ui-chart
+                filtScreen="{{filtScreen}}"
+            ></ui-chart>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getPluginHistogramsTags, getRuns} from '../service';
+import config from './ui/config';
+import chart from './ui/chart';
+export default {
+    components: {
+        'ui-config': config,
+        'ui-chart': chart
+    },
+    initData() {
+        return {
+            runsArray: [],
+            tags: [],
+            config: {
+                groupNameReg: '.*',
+                horizontal: 'step',
+                chartType: 'offset',
+                runs: [],
+                running: true
+            }
+        };
+    },
+    inited() {
+        getPluginHistogramsTags().then(({errno, data}) => {
+            this.data.set('tags', data);
+
+            // filter when inited
+            let groupNameReg = this.data.get('config.groupNameReg');
+            this.filterTagsList(groupNameReg);
+        });
+        getRuns().then(({errno, data}) => {
+            this.data.set('runsArray', data);
+            this.data.set('config.runs', data);
+        });
+    },
+
+    filterTagsList(groupNameReg) {
+        let tagsList = this.data.get('tagsList') || [];
+        let regExp = new RegExp(groupNameReg);
+        let filtedTagsList = tagsList.filter(item => regExp.test(item.tag));
+        this.data.set('filteredTagsList', filtedTagsList);
+    },
+
+    handleFitScreen() {
+        this.data.set('filtScreen', {
+            filtScreen: true
+        });
+    }
+};
+
+</script>
+
+<style lang="stylus">
+
+@import '../style/variables';
+
++prefix-classes('visual-dl-scalar-')
+    .container
+        padding-left 300px
+        position relative
+        .left
+            width 280px
+            min-height 300px
+            border solid 1px #e4e4e4
+            position absolute
+            left 0
+        .right
+            width 100%
+            overflow hidden
+            border solid 1px #e4e4e4
+            min-height 300px
+            padding 20px
+</style>
diff --git a/frontend/src/graph/index.js b/frontend/src/graph/index.js
new file mode 100644
index 00000000..4f76411c
--- /dev/null
+++ b/frontend/src/graph/index.js
@@ -0,0 +1,9 @@
+import {router} from 'san-router';
+
+import Graph from './Graph';
+
+router.add({
+    target: '#content',
+    rule: '/graphs',
+    Component: Graph
+});
diff --git a/frontend/src/graph/ui/chart.san b/frontend/src/graph/ui/chart.san
new file mode 100644
index 00000000..593186f0
--- /dev/null
+++ b/frontend/src/graph/ui/chart.san
@@ -0,0 +1,73 @@
+<template>
+    <div class="visual-dl-charts">
+        <div class="visual-dl-chart-box">
+        </div>
+    </div>
+</template>
+<script>
+// libs
+import echarts from 'echarts';
+// service
+import {getPluginGraphsGraphs} from '../../service';
+
+export default {
+    initData() {
+        return {
+            width: 800,
+            height: 600,
+            data: [
+                {
+                    name: 'train',
+                    value: []
+                }
+            ]
+        };
+    },
+    inited() {
+        this.watch('originData', data => {
+            this.initChartChartOption(data);
+        });
+
+        this.watch('filtScreen', filtScreen => {
+            this.myChart.clear();
+            let data = this.data.get('originData');
+            this.initChartChartOption(data);
+        });
+    },
+
+    attached() {
+        this.initCharts();
+    },
+
+    initCharts(tagInfo) {
+        this.createChart();
+        this.getOriginChartsData();
+    },
+
+    createChart() {
+        let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
+        this.myChart = echarts.init(el);
+    },
+
+    initChartChartOption(data) {
+        this.setChartOptions(data);
+    },
+    setChartOptions(data) {
+        this.myChart.setOption(data);
+    },
+
+    getOriginChartsData() {
+        getPluginGraphsGraphs().then(({data}) => {
+            this.data.set('originData', data);
+        });
+    }
+};
+</script>
+<style lang="stylus">
+    .visual-dl-charts
+        float left
+        margin-bottom 20px
+        .visual-dl-chart-box
+            width 800px
+            height 600px
+</style>
diff --git a/frontend/src/graph/ui/config.san b/frontend/src/graph/ui/config.san
new file mode 100644
index 00000000..89f218d4
--- /dev/null
+++ b/frontend/src/graph/ui/config.san
@@ -0,0 +1,68 @@
+<template>
+    <div class="visual-dl-graph-config-com">
+        <ui-button
+            on-click="handleFitScreen"
+            variants="raised info">
+            <ui-icon style="margin-right: 6px">fullscreen</ui-icon>
+            Fit to screen
+        </ui-button>
+        <!--
+        <ui-dropdown-menu
+            label="Session runs"
+            items="{{sessionItems}}"
+            value="{=config.session=}"
+        />
+        -->
+    </div>
+</template>
+<script>
+import Button from 'san-mui/Button';
+import Icon from 'san-mui/Icon';
+import DropDownMenu from '../../common/component/DropDownMenu';
+export default {
+    components: {
+        'ui-dropdown-menu': DropDownMenu,
+        'ui-button': Button,
+        'ui-icon': Icon
+    },
+    initData() {
+        return {
+            config: {
+                groupName: 'aa',
+                isActualImageSize: [],
+                runs: []
+            },
+            sessionItems: [
+                {
+                    name: 'step1',
+                    value: 'step1'
+                },
+                {
+                    name: 'step2',
+                    value: 'step2'
+                },
+                {
+                    name: 'step3',
+                    value: 'step3'
+                }
+            ]
+        };
+    },
+    handleFitScreen() {
+        this.fire('fitScreen');
+    }
+};
+</script>
+<style lang="stylus">
+@import '../../style/variables';
++prefix-classes('visual-dl-graph-')
+    .config-com
+        width 90%
+        margin 20px auto
+.visual-dl-graph-config-com
+    .sm-button
+        width 100%
+    .sm-icon
+        width 36px
+        height 26px
+</style>
diff --git a/frontend/src/histogram/ui/config.san b/frontend/src/histogram/ui/config.san
index 6b4986e0..b48f245f 100644
--- a/frontend/src/histogram/ui/config.san
+++ b/frontend/src/histogram/ui/config.san
@@ -1,5 +1,5 @@
 <template>
-    <div class="visual-dl-scalar-config-com">
+    <div class="visual-dl-histogram-config-com">
         <san-text-field
             hintText="input a tag group name to search"
             label="Group name RegExp"
@@ -92,10 +92,10 @@ export default {
 </script>
 <style lang="stylus">
 @import '../../style/variables';
-+prefix-classes('visual-dl-scalar-')
++prefix-classes('visual-dl-histogram-')
     .config-com
         width 90%
-        margin 0 auto
+        margin 20px auto
         .run-toggle
             width 100%
             margin-top 20px
diff --git a/frontend/src/images/ui/config.san b/frontend/src/images/ui/config.san
index c31b247c..5530e5d5 100644
--- a/frontend/src/images/ui/config.san
+++ b/frontend/src/images/ui/config.san
@@ -1,5 +1,5 @@
 <template>
-    <div class="visual-dl-scalar-config-com">
+    <div class="visual-dl-image-config-com">
         <san-text-field
             hintText="input a tag group name to search"
             label="Group name RegExp"
@@ -44,10 +44,10 @@ export default {
 </script>
 <style lang="stylus">
 @import '../../style/variables';
-+prefix-classes('visual-dl-scalar-')
++prefix-classes('visual-dl-image-')
     .config-com
         width 90%
-        margin 0 auto
+        margin 20px auto
         .run-toggle
             width 100%
             margin-top 20px
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 931a758f..8506d669 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -6,6 +6,7 @@ import './home/index';
 import './scalars/index';
 import './images/index';
 import './histogram/index';
+import './graph/index';
 
 import App from './App';
 new App({
diff --git a/frontend/src/scalars/ui/config.san b/frontend/src/scalars/ui/config.san
index 19af47ee..21891664 100644
--- a/frontend/src/scalars/ui/config.san
+++ b/frontend/src/scalars/ui/config.san
@@ -130,7 +130,7 @@ export default {
 +prefix-classes('visual-dl-scalar-')
     .config-com
         width 90%
-        margin 0 auto
+        margin 20px auto
         .run-toggle
             width 100%
             margin-top 20px
diff --git a/frontend/src/service.js b/frontend/src/service.js
index 4a2b5e7b..1f6a484b 100644
--- a/frontend/src/service.js
+++ b/frontend/src/service.js
@@ -14,3 +14,5 @@ export const getPluginHistogramsTags = makeService('/data/plugin/histograms/tags
 
 export const getPluginHistogramsHistograms = makeService('/data/plugin/histograms/histograms');
 
+export const getPluginGraphsGraphs = makeService('/data/plugin/graphs/graphs');
+
-- 
GitLab