Polish scalar and histogram chart UI, reorganize chart tools, add pinch zoom in support (#303)

frontend/src/App.vue

@@ -56,7 +56,7 @@ export default {
             border solid 1px $-left-border-color
             background $-left-border-color
             min-height 300px
-            padding 2%
+            padding 2% 0% 2% 2%
             box-sizing border-box
         .right
             overflow scroll

frontend/src/common/component/ExpandPanel.vue

@@ -43,6 +43,7 @@ export default {
             line-height 50px
             height 50px
             padding 0 20px
+            margin-right 2%
             cursor pointer
             position relative
             .visual-dl-expand-head-info
@@ -54,8 +55,6 @@ export default {
                     line-height 20px
                     font-size 12px
                     font-weight normal
-        .visual-dl-expand-panel-content
-            padding 0 20px
         .visual-dl-expand-panel-content:after
             content: "";
             clear: both;

frontend/src/histogram/Histogram.vue

@@ -18,7 +18,6 @@
         </div>
         <div class="visual-dl-page-right">
             <div class="visual-dl-page-config-container">
-                Config
                 <ui-config
                     :runsItems="runsItems"
                     :config="config"

frontend/src/histogram/ui/Chart.vue

@@ -2,8 +2,8 @@
     <div class="visual-dl-histogram-charts">
         <div class="visual-dl-chart-box" ref="visual_dl_chart_box">
         </div>
-        <div class="visual-dl-chart-actions">
-            <v-btn flat class="sm-button" @click="expandArea">
+        <div>
+            <v-btn flat @click="expandArea">
                 <v-icon size="20">settings_overscan</v-icon>
             </v-btn>
         </div>
@@ -94,7 +94,7 @@ export default {
                 text: tag,
                 textStyle: {
                     fontSize: '12',
-                    fontFamily: 'Merriweather Sans'
+                    fontWeight: 'normal'
                 }
             };
             if (chartType === 'overlay') {
@@ -183,7 +183,7 @@ export default {
             let minStep = Infinity;
             grid.top = '42%';
             grid.left = '4%';
-            grid.right = '15%';
+            grid.right = '10%';
             chartData.forEach(function (dataItem) {
                 let lineData = [];
                 maxStep = Math.max(dataItem.step, maxStep);
@@ -197,6 +197,9 @@ export default {
             });
 
             let option = {
+                textStyle: {
+                    fontFamily: 'Merriweather Sans'
+                },
                 title,
                 color: ['#006069'],
                 visualMap: {
@@ -216,6 +219,7 @@ export default {
                         onZero: false
                     },
                     axisLabel: {
+                        fontSize: '11',
                         formatter: function (value) {
                             return Math.round(value * 100) / 100;
                         }
@@ -232,6 +236,9 @@ export default {
                     inverse: true,
                     splitLine: {
                         show: false
+                    },
+                    axisLabel: {
+                        fontSize: '11'
                     }
                 },
                 grid,
@@ -355,6 +362,7 @@ export default {
                     zrDrawElement.tooltip = new echarts.graphic.Text({
                         position: [e.offsetX + 30, e.offsetY - 50],
                         style: {
+                            fontFamily: 'Merriweather Sans',
                             text: yValueFormat(hoveredItem.items[nearestIndex.binIndex][3]),
                             textFill: '#000',
                             fontSize: 14,
@@ -375,6 +383,7 @@ export default {
                             gridRect.y + gridRect.height
                         ],
                         style: {
+                            fontFamily: 'Merriweather Sans',
                             text: Math.round(hoveredItem.items[nearestIndex.binIndex][2] * 1000) / 1000,
                             textFill: '#fff',
                             textAlign: 'center',
@@ -394,6 +403,7 @@ export default {
                             linePoints[linePoints.length - 1][1]
                         ],
                         style: {
+                            fontFamily: 'Merriweather Sans',
                             text: hoveredItem.step,
                             textFill: '#fff',
                             textVerticalAlign: 'middle',
@@ -498,28 +508,12 @@ export default {
 <style lang="stylus">
     .visual-dl-histogram-charts
         float left
-        margin-bottom 20px
-        margin 20px 30px 10px 0
+        margin 2% 2% 0 0
         background #fff
         padding 10px
         .visual-dl-chart-box
             float left
             width 400px
             height 300px
-        .visual-dl-chart-actions
-            height 50px
-            margin-left 10%
-            .sm-form-item
-                float left
-                width 100px
-                margin-top 0px
-                display block
-            .sm-button
-                float left
-                display block
-                height 20px
-                line-height 20px
-                margin-top 10px
-                padding 0 10px
 </style>
 

frontend/src/histogram/ui/ChartPage.vue

@@ -85,4 +85,5 @@ export default {
             content: "";
             clear: both;
             display: block;
+            padding-bottom: 2%
 </style>

frontend/src/scalars/Scalars.vue

@@ -19,7 +19,8 @@
 
         <div class="visual-dl-page-right">
             <div class="visual-dl-page-config-container">
-                <ui-config :runsItems="runsItems"
+                <ui-config
+                    :runsItems="runsItems"
                     :config="config"
                 ></ui-config>
             </div>

frontend/src/scalars/ui/Chart.vue

@@ -164,9 +164,12 @@ export default {
             let legendOptions = tagList.map(item => item.run);
             let instance = this;
             let option = {
+                textStyle: {
+                    fontFamily: 'Merriweather Sans'
+                },
                 color: [
+                    '#008c99',
                     '#c23531',
-                    '#61a0a8',
                     '#d48265',
                     '#91c7ae',
                     '#749f83',
@@ -179,15 +182,21 @@ export default {
                 title: {
                     text: tag,
                     textStyle: {
-                        fontSize: '12',
-                        fontFamily: 'Merriweather Sans'
+                        fontSize: 13,
+                        fontWeight: 'normal'
                     }
                 },
+                dataZoom: [{
+                    type: 'inside'
+                }],
                 tooltip: {
                     trigger: 'axis',
                     axisPointer: {
                         animation: true
                     },
+                    textStyle: {
+                        fontSize: '13',
+                    },
                     position: ['10%', '90%'],
                     formatter(params, ticket, callback) {
                         let data = instance.getFormatterPoints(params[0].data);
@@ -201,26 +210,28 @@ export default {
                         dataZoom: {},
                         restore: {},
                         saveAsImage: {}
-                    },
-                    left: '10%',
-                    top: '90%'
+                    }
                 },
                 legend: {
                     data: legendOptions,
-                    top: '10%'
+                    top: '13%'
                 },
                 grid: {
-                    left: '10%',
-                    top: '20%',
+                    left: '12%',
+                    top: '25%',
                     right: '10%',
-                    bottom: '20%'
+                    bottom: '8%'
                 },
                 xAxis: {
-                    type: 'value'
+                    type: 'value',
+                    axisLabel: {
+                        fontSize: '11'
+                    }
                 },
                 yAxis: {
                     type: 'value',
                     axisLabel: {
+                        fontSize: '11',
                         formatter(value) {
                             return value.toString().slice(0, 5);
                         }
@@ -522,11 +533,11 @@ export default {
             };
             let widthPropMap = {
                 Run: 40,
-                Time: 90,
+                Time: 120,
                 Step: 40,
                 Value: 50,
-                Smoothed: 50,
-                Relative: 40
+                Smoothed: 60,
+                Relative: 60
             };
             let transformedData = data.map(item => {
                 let data = item.item;
@@ -567,7 +578,7 @@ export default {
 <style lang="stylus">
     .visual-dl-page-charts
         float left
-        margin 20px 30px 10px 0
+        margin 2% 2% 0 0
         background: #fff;
         padding: 10px;
         .visual-dl-chart-actions

frontend/src/scalars/ui/ChartPage.vue

@@ -78,6 +78,7 @@ export default {
             content: "";
             clear: both;
             display: block;
+            padding-bottom: 2%
 </style>