Redesign chart toolbar icons and improve UX for download chart JSON data (#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

Redesign chart toolbar icons and improve UX for download chart JSON data (#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
502d3c78 · Nicky Chan · GitHub · 8f9339e0 · 502d3c78 · 502d3c78
15 changed file
--- a/frontend/src/App.vue
+++ b/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;

--- a/frontend/src/assets/ic_download.svg
+++ b/frontend/src/assets/ic_download.svg
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#999999" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 25,52L 51,52L 51,57L 25,57L 25,52 Z M 35,16L 41,16L 41,36.5L 49,27L 49,36.5L 38,49L 27,36.5L 27,27L 35,36.5L 35,16 Z "/>
+</svg>
--- a/frontend/src/assets/ic_fullscreen_off.svg
+++ b/frontend/src/assets/ic_fullscreen_off.svg
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#999999" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 44.5,19L 58,19L 58,32.75L 53,37.5L 53,28L 37.75,43.25L 34,39.5L 49.5,24L 39.5,24L 44.5,19 Z M 20,27L 42.5,27L 37.5,32L 25,32L 25,52L 45,52L 45,40.5L 50,35.5L 50,57L 20,57L 20,27 Z "/>
+</svg>
--- a/frontend/src/assets/ic_fullscreen_on.svg
+++ b/frontend/src/assets/ic_fullscreen_on.svg
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#008c99" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 44.5,19L 58,19L 58,32.75L 53,37.5L 53,28L 37.75,43.25L 34,39.5L 49.5,24L 39.5,24L 44.5,19 Z M 20,27L 42.5,27L 37.5,32L 25,32L 25,52L 45,52L 45,40.5L 50,35.5L 50,57L 20,57L 20,27 Z "/>
+</svg>
--- a/frontend/src/assets/ic_undo.svg
+++ b/frontend/src/assets/ic_undo.svg
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76.0106" height="76.0106" viewBox="0 0 76.01 76.01" enable-background="new 0 0 76.01 76.01" xml:space="preserve">
+	<path fill="#999999" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 25.3362,20.5864L 25.3348,29.2137C 28.5107,25.8499 33.0116,23.7507 38.0029,23.7507C 47.6232,23.7507 55.422,31.5494 55.422,41.1698C 55.422,45.9799 53.4723,50.3347 50.32,53.4869L 46.401,49.5679C 48.5503,47.4187 49.8796,44.4495 49.8796,41.1699C 49.8796,34.6106 44.5623,29.2932 38.003,29.2932C 34.4855,29.2932 31.3251,30.8224 29.1504,33.2522L 38.0029,33.2531L 33.2529,38.0031L 20.5862,38.0031L 20.5862,25.3364L 25.3362,20.5864 Z "/>
+</svg>
--- a/frontend/src/assets/ic_zoom_select_off.svg
+++ b/frontend/src/assets/ic_zoom_select_off.svg
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#999999" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 17.4167,53.8333L 17.4167,49.0833L 22.1667,49.0833L 22.1667,28.5L 17.4167,28.5L 17.4167,23.75L 22.1667,23.75L 22.1667,19L 26.9167,19L 26.9167,23.75L 48.6875,23.75L 53.4375,19L 57,22.5625L 52.25,27.3125L 52.25,49.0833L 57,49.0833L 57,53.8333L 52.25,53.8333L 52.25,58.5833L 47.5,58.5833L 47.5,53.8333L 26.9167,53.8333L 26.9167,58.5833L 22.1667,58.5833L 22.1667,53.8333L 17.4167,53.8333 Z M 30.4792,49.0833L 47.5,49.0833L 47.5,32.0625L 30.4792,49.0833 Z M 26.9167,45.5208L 43.9375,28.5L 26.9167,28.5L 26.9167,45.5208 Z "/>
+</svg>
--- a/frontend/src/assets/ic_zoom_select_on.svg
+++ b/frontend/src/assets/ic_zoom_select_on.svg
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#008c99" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 17.4167,53.8333L 17.4167,49.0833L 22.1667,49.0833L 22.1667,28.5L 17.4167,28.5L 17.4167,23.75L 22.1667,23.75L 22.1667,19L 26.9167,19L 26.9167,23.75L 48.6875,23.75L 53.4375,19L 57,22.5625L 52.25,27.3125L 52.25,49.0833L 57,49.0833L 57,53.8333L 52.25,53.8333L 52.25,58.5833L 47.5,58.5833L 47.5,53.8333L 26.9167,53.8333L 26.9167,58.5833L 22.1667,58.5833L 22.1667,53.8333L 17.4167,53.8333 Z M 30.4792,49.0833L 47.5,49.0833L 47.5,32.0625L 30.4792,49.0833 Z M 26.9167,45.5208L 43.9375,28.5L 26.9167,28.5L 26.9167,45.5208 Z "/>
+</svg>
--- a/frontend/src/histogram/ui/Chart.vue
+++ b/frontend/src/histogram/ui/Chart.vue
 <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>
+        <div class="visual-dl-chart-actions">
-            <v-btn flat @click="expandArea">
+            <v-btn color="toolbox_icon" flat icon @click="isExpand = !isExpand" class="chart-toolbox-icons" >
-                <v-icon size="20">settings_overscan</v-icon>
+                <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() {
+        expandArea(expand) {
-            let isExpand = this.isExpand;
            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>
--- a/frontend/src/images/ui/Image.vue
+++ b/frontend/src/images/ui/Image.vue
 <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';

--- a/frontend/src/index.js
+++ b/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'
    }
 })

--- a/frontend/src/scalars/Scalars.vue
+++ b/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

--- a/frontend/src/scalars/ui/Chart.vue
+++ b/frontend/src/scalars/ui/Chart.vue
 <template>
-    <div class="visual-dl-page-charts">
+    <v-card hover class="visual-dl-page-charts">
        <div ref="chartBox" class="visual-dl-chart-box" :style="computedStyle">
        </div>
        <div class="visual-dl-chart-actions">
-            <v-btn flat @click="expandArea" class="chart-expand">
+            <v-btn color="toolbox_icon" flat icon @click="isSelectZoomEnable = !isSelectZoomEnable" class="chart-toolbox-icons">
-                <v-icon size="20">settings_overscan</v-icon>
+                <img v-if="!isSelectZoomEnable" src="../../assets/ic_zoom_select_off.svg"/>
+                <img v-if="isSelectZoomEnable" src="../../assets/ic_zoom_select_on.svg"/>
            </v-btn>
-            <v-select
+            <v-btn color="toolbox_icon" flat icon @click="restoreChart" class="chart-toolbox-icons">
-                v-if="downloadLink && tagInfo.tagList.length > 0"
+                <img src="../../assets/ic_undo.svg"/>
-                class="download-selector"
-                :items="tagInfo.tagList"
-                v-model="runItemForDownload"
-                item-text="run"
-                item-value="run"
-            />
-            <v-btn flat
-                v-if="downloadLink && tagInfo.tagList.length > 0"
-                class="download-button"
-                @click="handleDownLoad">
-                <v-icon size="20">file_download</v-icon>
            </v-btn>
+            <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>
+            <v-btn color="toolbox_icon" flat icon @click="saveChartAsImage" class="chart-toolbox-icons" >
+                <img src="../../assets/ic_download.svg"/>
+            </v-btn>
+            <v-menu v-if="tagInfo.tagList.length > 0">
+                <v-btn color="toolbox_icon" slot="activator" flat icon class="chart-toolbox-icons">
+                    <v-icon >more_vert</v-icon>
+                </v-btn>
+                <v-list dense>
+                        <v-list-tile>
+                            <v-list-tile-content>
+                                <v-list-tile-title>Download data in JSON</v-list-tile-title>
+                            </v-list-tile-content>
+                            <v-list-tile-action>
+                                <v-icon>expand_more</v-icon>
+                            </v-list-tile-action>
+                        </v-list-tile>
+                        <v-list-tile v-for="subItem in tagInfo.tagList" :key="subItem.run" @click="handleDownLoad(subItem.run)">
+                            <v-list-tile-content>
+                                <v-list-tile-title>&nbsp;&nbsp;&nbsp;{{ subItem.run }}</v-list-tile-title>
+                            </v-list-tile-content>
+                        </v-list-tile>
+                </v-list>
+            </v-menu>
        </div>
-    </div>
+    </v-card>
 </template>
 <script>
@@ -45,7 +63,7 @@ const maxQuantile = 0.95;
 const intervalTime = 15;
 export default {
-    props: ['tagInfo', 'groupNameReg', 'smoothing', 'horizontal', 'sortingMethod', 'downloadLink', 'outlier', 'runs',
+    props: ['tagInfo', 'groupNameReg', 'smoothing', 'horizontal', 'sortingMethod', 'outlier', 'runs',
            'running', 'runsItems'],
    computed: {
        computedStyle() {
@@ -57,16 +75,12 @@ export default {
        return {
            width: 400,
            height: 300,
-            // choose run type for download file
-            runItemForDownload: {},
            isExpand: false,
+            isSelectZoomEnable: true,
            originData: []
        };
    },
    watch: {
-        runsItems: function(val) {
-            this.initRunItemForDownload();
-        },
        originData: function(val) {
            this.setChartData();
            this.setChartsOutlier();
@@ -86,13 +100,17 @@ export default {
            this.myChart.clear();
            this.setChartsOptions(val);
            this.getOriginChartData(val);
+        },
+        isExpand: function(val) {
+            this.expandArea(val);
+        },
+        isSelectZoomEnable: function(val) {
+            this.toggleSelectZoom(val);
        }
-        // runs: function(val) {
-        //     this.setChartsRuns();
-        // }
    },
    mounted() {
        this.initChart(this.tagInfo);
+        this.toggleSelectZoom(true);
        if (this.running) {
            this.startInterval();
@@ -107,13 +125,6 @@ export default {
        this.stopInterval();
    },
    methods: {
-        initRunItemForDownload() {
-            if (this.tagInfo.tagList.length === 0) {
-                return;
-            }
-            this.runItemForDownload = this.tagInfo.tagList[0].run;
-        },
        // Create a Scalar Chart, initialize it with default settings, then load datas
        initChart(tagInfo) {
            this.createChart();
@@ -186,9 +197,6 @@ export default {
                        fontWeight: 'normal'
                    }
                },
-                dataZoom: [{
-                    type: 'inside'
-                }],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
@@ -205,12 +213,11 @@ export default {
                },
                toolbox: {
                    show: true,
-                    showTitle: true,
+                    showTitle: false,
+                    itemSize: 0,
                    feature: {
                        dataZoom: {},
-                        restore: {},
+                    },
-                        saveAsImage: {}
-                    }
                },
                legend: {
                    data: legendOptions,
@@ -220,7 +227,7 @@ export default {
                    left: '12%',
                    top: '25%',
                    right: '10%',
-                    bottom: '8%'
+                    bottom: '12%'
                },
                xAxis: {
                    type: 'value',
@@ -303,10 +310,10 @@ export default {
        getChartOptions() {
            return this.myChart.getOption() || {};
        },
-        handleDownLoad() {
+        handleDownLoad(runItemForDownload) {
            let options = this.getChartOptions();
            let series = options.series || [];
-            let seriesItem = series.find(item => item.name === this.runItemForDownload) || {};
+            let seriesItem = series.find(item => item.name === runItemForDownload) || {};
            let fileName = this.tagInfo.tag.replace(/\//g, '-');
            generateJsonAndDownload(seriesItem.data, fileName);
        },
@@ -441,15 +448,15 @@ export default {
            this.myChart.setOption(horizontalToxAxisOptions[this.horizontal]);
        },
-        expandArea() {
+        expandArea(expand) {
            let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page-box')[0].offsetWidth;
-            if (!this.isExpand) {
+            let width = pageBoxWidth * 0.96; //4% margin
+            if (expand) {
                let el = this.$refs.chartBox;
-                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
                });
            }
@@ -457,7 +464,6 @@ export default {
                let el = this.$refs.chartBox;
                el.style.width = '400px';
                el.style.height = '300px';
-                this.isExpand = false;
                this.myChart.resize({
                    width: 400,
                    height: 300
@@ -465,6 +471,37 @@ export default {
            }
        },
+        toggleSelectZoom(enable) {
+            let instance = this;
+            setTimeout(function() {
+                instance.myChart.dispatchAction({
+                    type: 'takeGlobalCursor',
+                    key: 'dataZoomSelect',
+                    dataZoomSelectActive: enable
+                });
+            }, 0)
+        },
+        restoreChart() {
+            this.myChart.dispatchAction({
+                type: 'restore'
+            })
+        },
+        saveChartAsImage() {
+            let dataUrl = this.myChart.getDataURL({
+                pixelRatio: 1,
+                backgroundColor: '#fff'
+            });
+            let fileName = this.tagInfo.tag.replace(/\//g, '-');
+            let link = document.createElement("a");
+            link.download = fileName;
+            link.href = dataUrl;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        },
        getFormatterPoints(data) {
            let originData = this.originData;
            let tagList = this.tagInfo.tagList;
@@ -579,17 +616,30 @@ export default {
    .visual-dl-page-charts
        float left
        margin 2% 2% 0 0
-        background: #fff;
+        padding 10px
-        padding: 10px;
+        position relative
        .visual-dl-chart-actions
-            vertical-align: middle
+            opacity 0
-            .chart-expand
+            transition: opacity .3s ease-out;
-                float left
+            position absolute
-            .download-selector
+            top 4px
-                float left
+            right 10px
-                width 100px
+            img
-                margin-top -10px
+                width 30px
-            .download-button
+                height 30px
-                float left
+                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>
--- a/frontend/src/scalars/ui/ChartPage.vue
+++ b/frontend/src/scalars/ui/ChartPage.vue
@@ -10,7 +10,6 @@
                    :smoothing="config.smoothing"
                    :horizontal="config.horizontal"
                    :sortingMethod="config.sortingMethod"
-                    :downloadLink="config.downloadLink"
                    :outlier="config.outlier"
                    :runs="config.runs"
                    :running="config.running"

--- a/frontend/src/scalars/ui/Config.vue
+++ b/frontend/src/scalars/ui/Config.vue
@@ -29,10 +29,9 @@
                v-model="config.sortingMethod"
                label="Tooltip sorting method"
                class="visual-dl-page-config-selector"
-                dark
+                dark dense
        ></v-select>
-        <v-checkbox class="visual-dl-page-config-checkbox" label="Show data download links" v-model="config.downloadLink" dark></v-checkbox>
        <v-checkbox class="visual-dl-page-config-checkbox" label="Ignore outliers in chart scaling" v-model="config.outlier" dark></v-checkbox>
        <label class="visual-dl-page-checkbox-group-label">Runs</label>

--- a/frontend/tool/webpack.config.js
+++ b/frontend/tool/webpack.config.js
@@ -92,10 +92,10 @@ const config = {
                use: getLoaders(isDev, 'stylus')
            },
            {
-                test: /\.(gif|png|jpe?g)$/i,
+                test: /\.(gif|png|jpe?g|svg)$/i,
                loader: 'file-loader',
                options: {
-                    name: 'images/[name].[hash].[ext]'
+                    name: 'assets/[name].[hash].[ext]'
                }
            },
            {
@@ -108,7 +108,7 @@ const config = {
                }
            },
            {
-                test: /\.(ttf|eot|svg)$/,
+                test: /\.(ttf|eot)$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[hash].[ext]'