Show Scalar Data and add ExpandPanel (#272)

* Watch tagInfo changes to update chart and fix tooltip issue

* Add expand panel and maintain isShow state in the panel

* Add Expand Panel in Image

Author: nickyfantasy

frontend/src/common/component/ExpandPanel.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="visual-dl-expand-panel">
+        <h3
+            class="visual-dl-expand-head"
+            @click="handleHeadClick()"
+        >
+            <span>{{title}}</span>
+            <span class="visual-dl-expand-head-info">
+                <v-icon class="visual-dl-expand-head-arrow" size="20">{{iconName}}</v-icon>
+                <span class="visual-dl-expand-head-num">({{info}})</span>
+            </span>
+        </h3>
+        <div
+            v-if="isShow"
+            class="visual-dl-expand-panel-content"
+        >
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        title: String,
+        info: Number
+    },
+    computed: {
+        iconName() {
+            return this.isShow ? 'expand_less' : 'expand_more';
+        }
+    },
+    data() {
+        return {
+            isShow: true
+        };
+    },
+    methods: {
+        handleHeadClick() {
+            this.toogleShow();
+        },
+        toogleShow() {
+            this.isShow = !this.isShow;
+        }
+    }
+};
+</script>
+<style lang="stylus">
+    .visual-dl-expand-panel
+        text-align left
+        .visual-dl-expand-head
+            border solid 1px #ccc
+            line-height 50px
+            height 50px
+            padding 0 20px
+            cursor pointer
+            position relative
+            .visual-dl-expand-head-info
+                position absolute
+                left 90%
+                .visual-dl-expand-head-arrow
+                    vertical-align middle
+                .visual-dl-expand-head-num
+                    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;
+            display: block;
+</style>
+
+

frontend/src/images/ui/ChartPage.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="visual-dl-chart-page">
-        <!--<ui-expand-panel isShow="{{expand}}" info="{{total}}" title="{{title}}">-->
+        <ui-expand-panel :info="total" :title="title">
             <ui-image
                 class="visual-dl-chart-image"
                 v-for="tagInfo in filteredPageList"
@@ -16,11 +16,11 @@
                           :length="total"
                           :total-visible="pageSize"
             ></v-pagination>
-        <!--</ui-expand-panel>-->
+        </ui-expand-panel>
     </div>
 </template>
 <script>
-//import ExpandPanel from '../../common/component/ExpandPanel';
+import ExpandPanel from '../../common/component/ExpandPanel';
 import Image from './Image';
 //import Pagination from 'san-mui/Pagination';
 
@@ -30,7 +30,7 @@ export default {
     props: ['config', 'runsItems', 'tagList', 'title'],
     components: {
         'ui-image': Image,
-        //'ui-expand-panel': ExpandPanel,
+        'ui-expand-panel': ExpandPanel,
         //'ui-pagination': Pagination
     },
     computed: {

frontend/src/scalars/Scalars.vue

@@ -2,7 +2,6 @@
     <div class="visual-dl-page-container">
         <div class="visual-dl-page-left">
             <ui-chart-page
-                    :expand="true"
                     :config="filteredConfig"
                     :runsItems="runsItems"
                     :tagList="filteredTagsList"

frontend/src/scalars/ui/Chart.vue

@@ -93,6 +93,10 @@ export default {
         horizontal: function(val) {
             this.setChartHorizon();
         },
+        tagInfo: function(val) {
+            this.setChartsOptions(val);
+            this.getOriginChartData(val);
+        }
         // runs: function(val) {
         //     this.setChartsRuns();
         // }
@@ -168,6 +172,7 @@ export default {
             );
             seriesOption = flatten(seriesOption);
             let legendOptions = tagList.map(item => item.run);
+            let instance = this;
             let option = {
                 color: [
                     '#c23531',
@@ -194,8 +199,8 @@ export default {
                     },
                     position: ['10%', '90%'],
                     formatter(params, ticket, callback) {
-                        let data = this.getFormatterPoints(params[0].data);
-                        return this.transformFormatterData(data);
+                        let data = instance.getFormatterPoints(params[0].data);
+                        return instance.transformFormatterData(data);
                     }
                 },
                 toolbox: {

frontend/src/scalars/ui/ChartPage.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="visual-dl-chart-page">
-        <!--<ui-expand-panel isShow="{{expand}}" info="{{tagList.length}}" title="{{title}}">-->
+        <ui-expand-panel :info="tagList.length" :title="title">
             <div ref="chartPageBox" class="visual-dl-chart-page-box">
                 <ui-chart
                     v-for="tag in filteredTagList"
@@ -22,11 +22,11 @@
                 :length="total"
                 :total-visible="pageSize"
             />
-        <!--</ui-expand-panel>-->
+        </ui-expand-panel>
     </div>
 </template>
 <script>
-// import ExpandPanel from '../../common/component/ExpandPanel';
+import ExpandPanel from '../../common/component/ExpandPanel';
 import Chart from './Chart';
 // import Pagination from 'san-mui/Pagination';
 
@@ -35,10 +35,10 @@ import {cloneDeep} from 'lodash';
 export default {
     components: {
         'ui-chart': Chart,
-        // 'ui-expand-panel': ExpandPanel,
+        'ui-expand-panel': ExpandPanel,
         // 'ui-pagination': Pagination
     },
-    props: ['expand', 'config', 'runsItems', 'tagList', 'title'],
+    props: ['config', 'runsItems', 'tagList', 'title'],
     computed: {
         filteredRunsList() {
             let tagList = this.tagList || [];