Fix error message on charts (#279)

* Make sure to clear the chart before each use.

* Add key for v-for loop.

Author: jetfuel

frontend/src/graph/ui/Chart.vue

@@ -80,7 +80,6 @@ export default {
             getPluginGraphsGraph().then(({status, data}) => {
                 if (+status === 0 && data.url) {
                     this.graphUrl = data.url
-                    console.log("The url: " + this.graphUrl)
                     this.addDragEventForImg();
                 }
             });

frontend/src/histogram/Histogram.vue

@@ -9,6 +9,7 @@
             ></ui-chart-page>
             <ui-chart-page
                 v-for="item in groupedTags"
+                :key="item.group"
                 :config="config"
                 :runsItems="runsItems"
                 :tagList="item.tags"

frontend/src/histogram/ui/ChartPage.vue

@@ -4,8 +4,9 @@
         <ui-expand-panel :info="total" :title="title">
             <div class="visual-dl-chart-page-box">
                 <ui-chart
-                    v-for="tag in filteredPageList"
-                    :tagInfo="tag"
+                    v-for="tagInfo in filteredPageList"
+                    :key="tagInfo.run + tagInfo.tag.displayName"
+                    :tagInfo="tagInfo"
                     :runs="config.runs"
                     :chartType="config.chartType"
                     :running="config.running"

frontend/src/histogram/ui/Config.vue

@@ -8,7 +8,7 @@
         ></v-text-field>
 
         <v-radio-group label="Histogram mode" v-model="config.chartType" dark>
-            <v-radio v-for="mode in chartTypeItems"
+            <v-radio v-for="mode in chartTypeItems" :key="mode.name"
                      :label="mode.name" :value="mode.value"></v-radio>
         </v-radio-group>
 

frontend/src/images/ui/ChartPage.vue

@@ -4,6 +4,7 @@
             <ui-image
                 class="visual-dl-chart-image"
                 v-for="tagInfo in filteredPageList"
+                :key="tagInfo.run + tagInfo.tag.displayName"
                 :tagInfo="tagInfo"
                 :isActualImageSize="config.isActualImageSize"
                 :runs="config.runs"

frontend/src/scalars/ui/Chart.vue

@@ -94,6 +94,8 @@ export default {
             this.setChartHorizon();
         },
         tagInfo: function(val) {
+            // Should Clean up the chart before each use.
+            this.myChart.clear();
             this.setChartsOptions(val);
             this.getOriginChartData(val);
         }

frontend/src/scalars/ui/ChartPage.vue

@@ -3,8 +3,9 @@
         <ui-expand-panel :info="tagList.length" :title="title">
             <div ref="chartPageBox" class="visual-dl-chart-page-box">
                 <ui-chart
-                    v-for="tag in filteredTagList"
-                    :tagInfo="tag"
+                    v-for="tagInfo in filteredTagList"
+                    :tagInfo="tagInfo"
+                    :key="tagInfo.run + tagInfo.tag.displayName"
                     :groupNameReg="config.groupNameReg"
                     :smoothing="config.smoothing"
                     :horizontal="config.horizontal"