From 5c59953271beeaaf8d162a1e4c6f373c0747e952 Mon Sep 17 00:00:00 2001
From: Nicky <nicky@baidu.com>
Date: Tue, 6 Mar 2018 18:54:22 -0800
Subject: [PATCH] Fix error when scalar data empty -Error comes in when trying
 to access elements inside empty data -When one of the runs has empty data,
 the chart will display nothing even other run has non empty data -Fix by
 checking length of data before accessing

---
 frontend/mock/data/plugin/histograms/tags.js | 28 ++++++++++++++------
 frontend/src/graph/ui/Chart.vue              |  6 -----
 frontend/src/histogram/ui/Chart.vue          |  9 ++-----
 frontend/src/scalars/ui/Chart.vue            | 10 +++----
 4 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/frontend/mock/data/plugin/histograms/tags.js b/frontend/mock/data/plugin/histograms/tags.js
index 71c747f79..9359f8798 100644
--- a/frontend/mock/data/plugin/histograms/tags.js
+++ b/frontend/mock/data/plugin/histograms/tags.js
@@ -19,15 +19,27 @@ module.exports = function (path, queryParam, postParam) {
             data: {
                 "test": {
                     "layer1/Wx_plus_b/pre_activations":
-                    {
-                        "displayName": "layer1/Wx_plus_b/pre_activations",
-                        "description": ""
-                    },
+                        {
+                            "displayName": "layer1/Wx_plus_b/pre_activations",
+                            "description": ""
+                        },
                     "layer1/Wx_plus_b/pre_activations_1":
-                    {
-                        "displayName": "layer1/Wx_plus_b/pre_activations_1",
-                        "description": ""
-                    }
+                        {
+                            "displayName": "layer1/Wx_plus_b/pre_activations_1",
+                            "description": ""
+                        }
+                },
+                "train": {
+                    "layer1/Wx_plus_b/pre_activations":
+                        {
+                            "displayName": "layer1/Wx_plus_b/pre_activations",
+                            "description": ""
+                        },
+                    "layer1/Wx_plus_b/pre_activations_1":
+                        {
+                            "displayName": "layer1/Wx_plus_b/pre_activations_1",
+                            "description": ""
+                        }
                 }
             }
         }
diff --git a/frontend/src/graph/ui/Chart.vue b/frontend/src/graph/ui/Chart.vue
index cb09025be..b9c911e6b 100644
--- a/frontend/src/graph/ui/Chart.vue
+++ b/frontend/src/graph/ui/Chart.vue
@@ -38,12 +38,6 @@ export default {
         return {
             width: 800,
             height: 600,
-            data: [
-                {
-                    name: 'train',
-                    value: []
-                }
-            ],
             graphUrl: '',
         };
     },
diff --git a/frontend/src/histogram/ui/Chart.vue b/frontend/src/histogram/ui/Chart.vue
index 23b2f3728..1cfb92822 100644
--- a/frontend/src/histogram/ui/Chart.vue
+++ b/frontend/src/histogram/ui/Chart.vue
@@ -30,12 +30,6 @@ export default {
     props: ['tagInfo', 'runs', 'chartType', 'running', 'runsItems'],
     data() {
         return {
-            data: [
-                {
-                    name: 'train',
-                    value: []
-                }
-            ],
             originData: [],
             isExpand: false
         };
@@ -99,7 +93,8 @@ export default {
             let title = {
                 text: tag,
                 textStyle: {
-                    fontSize: '12'
+                    fontSize: '12',
+                    fontFamily: 'Merriweather Sans'
                 }
             };
             if (chartType === 'overlay') {
diff --git a/frontend/src/scalars/ui/Chart.vue b/frontend/src/scalars/ui/Chart.vue
index 85960b971..66a4c5082 100644
--- a/frontend/src/scalars/ui/Chart.vue
+++ b/frontend/src/scalars/ui/Chart.vue
@@ -64,12 +64,6 @@ export default {
         return {
             width: 400,
             height: 300,
-            data: [
-                {
-                    name: 'train',
-                    value: []
-                }
-            ],
             // choose run type for download file
             runItemForDownload: {},
             isExpand: false,
@@ -272,6 +266,7 @@ export default {
 
         setChartData() {
             let seriesData = this.originData.map(lineData => {
+                if (lineData.length == 0) return [];
                 // add the smoothed data
                 this.transformDataset(lineData);
                 return [
@@ -353,7 +348,7 @@ export default {
 
         // Chart outlier options methods and functions ---- start.
         // Compute Y domain from originData.
-        setChartsOutlier(seriesData) {
+        setChartsOutlier() {
             let domainRangeArray = this.originData.map(seriesData => this.computeDataRange(seriesData, this.outlier));
 
             // Compare, get the best Y domain.
@@ -373,6 +368,7 @@ export default {
         // Compute  max and min from array, if outlier is true, return quantile range.
         computeDataRange(arr, isQuantile) {
             // Get data range.
+            if (arr.length == 0) return [];
             let max;
             let min;
             if (!isQuantile) {