Redesign chart toolbar icons and improve UX for download chart JSON d…

…ata (#309)

-Add new toolbar icons and reimplement functions instead of using Echart built in icons
-Remove show data link option, instead add a collapse menu to select data download from each chart
-Only show toolbar icons when hover over card

frontend/src/App.vue

@@ -39,7 +39,7 @@ export default {
 
 #app {
  font-family: 'Merriweather Sans', Helvetica, Arial, sans-serif;
- font-weight: bold;
+ font-weight: regular;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: $-content-text-color;

frontend/src/histogram/ui/Chart.vue

@@ -1,13 +1,14 @@
 <template>
- <div class="visual-dl-histogram-charts">
+ <v-card hover class="visual-dl-page-charts">
  <div class="visual-dl-chart-box" ref="visual_dl_chart_box">
  </div>
- <div>
- <v-btn flat @click="expandArea">
- <v-icon size="20">settings_overscan</v-icon>
+ <div class="visual-dl-chart-actions">
+ <v-btn color="toolbox_icon" flat icon @click="isExpand = !isExpand" class="chart-toolbox-icons" >
+ <img v-if="!isExpand" src="../../assets/ic_fullscreen_off.svg"/>
+ <img v-if="isExpand" src="../../assets/ic_fullscreen_on.svg"/>
  </v-btn>
  </div>
- </div>
+ </v-card>
 </template>
 <script>
 // libs
@@ -43,6 +44,9 @@ export default {
  },
  running: function(val) {
  val ? this.startInterval() : this.stopInterval();
+ },
+ isExpand: function(val) {
+ this.expandArea(val);
  }
  },
  mounted() {
@@ -478,16 +482,16 @@ export default {
  });
  },
 
- expandArea() {
- let isExpand = this.isExpand;
+ expandArea(expand) {
  let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page')[0].offsetWidth;
- if (!isExpand) {
+ let width = pageBoxWidth * 0.96; //4% margin
+ if (expand) {
  let el = this.$refs.visual_dl_chart_box;
- el.style.width = pageBoxWidth + 'px';
+ el.style.width = width + 'px';
  el.style.height = '600px';
  this.isExpand = true;
  this.myChart.resize({
- width: pageBoxWidth,
+ width: width,
  height: 600
  });
  }
@@ -506,14 +510,36 @@ export default {
 };
 </script>
 <style lang="stylus">
- .visual-dl-histogram-charts
+ .visual-dl-page-charts
  float left
  margin 2% 2% 0 0
  background #fff
  padding 10px
+ position relative
  .visual-dl-chart-box
- float left
  width 400px
  height 300px
+ .visual-dl-chart-actions
+ opacity 0
+ transition: opacity .3s ease-out;
+ position absolute
+ top 4px
+ right 10px
+ img
+ width 30px
+ height 30px
+ position absolute
+ top 0
+ bottom 0
+ margin auto
+ .chart-toolbox-icons
+ width 25px
+ height 25px
+ margin-left -4px
+ margin-right -4px
+
+ .visual-dl-page-charts:hover
+ .visual-dl-chart-actions
+ opacity 1
 </style>
 

frontend/src/images/ui/Image.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="visual-dl-image">
+ <v-card hover class="visual-dl-image">
  <h3 class="visual-dl-image-title">{{tagInfo.tag.displayName}}
  <span class="visual-dl-image-run-icon">{{tagInfo.run}}</span>
  </h3>
@@ -16,7 +16,7 @@
  dark></v-slider>
 
  <img :width="imageWidth" :height="imageHeight" :src="imgData.imgSrc" />
- </div>
+ </v-card>
 </template>
 <script>
 import {getPluginImagesImages} from '../../service';

frontend/src/index.js

@@ -9,7 +9,8 @@ Vue.config.productionTip = false
 Vue.use(Vuetify, {
  theme: {
  primary: '#008c99',
- accent: '#008c99'
+ accent: '#008c99',
+ toolbox_icon: '#999999'
  }
 })
 

frontend/src/scalars/Scalars.vue

@@ -50,7 +50,6 @@ export default {
  smoothing: 0.6,
  horizontal: 'step',
  sortingMethod: 'default',
- downloadLink: false,
  outlier: false,
  runs: [],
  running: true