Improve components with props ID and loading icon

frontend/src/components/Doughnut.vue

 <template>
   <v-card class="pa-2">
     <div class="card-body">
-      <div>
-        <canvas :id="chartId"></canvas>
-      </div>
-      <!-- <div class="text-xs-center" v-else>
+      <div class="text-xs-center" v-if="noGraph">
         <v-progress-circular
           indeterminate
           color="secondary"
         ></v-progress-circular>
-      </div> -->
+      </div>
+      <div>
+        <canvas :id="chartId"></canvas>
+      </div>
       <v-layout
-        align-center
-        wrap
+        justify-space-around
+        row
       >
-        <v-switch
-          v-model="displayLegend"
-          label="Display legend">
-        </v-switch>
-        <v-flex xs12 sm6>
+        <v-flex sm3>
+          <v-switch
+            v-model="hideLegend"
+            label="Hide legend">
+          </v-switch>
+        </v-flex>
+        <v-flex sm8>
           <v-select
             v-model="hideLabels"
             :items="this.labels"
@@ -26,6 +28,7 @@
             chips
             :label="hideLabelsLabel"
             multiple
+            clearable
           ></v-select>
         </v-flex>
       </v-layout>
@@ -42,23 +45,28 @@ export default {
       type: Object,
       required: true,
     },
+    chartId: String,
   },
   data() {
     return {
       myChart: {},
       options: {},
       colors: [],
-      chartId: "myChart",
-      displayLegend: true,
+      hideLegend: false,
       labels: [],
       hideLabels: [],
+      noGraph: true,
     }
   },
   watch: {
     doughnutData(val) {
+      if (this.noGraph) {
+        this.noGraph = false;
+        this.createChart();
+      }
       this.updateChart();
     },
-    displayLegend(val) {
+    hideLegend(val) {
       this.updateChartOptions();
     },
     hideLabels() {
@@ -73,21 +81,18 @@ export default {
         return "Hide " + this.doughnutData.level;
       }
     },
-  },
-  mounted() {
-    this.createChart(this.chartId);
+    displayLegend() {
+      return !this.hideLegend;
+    }
   },
   methods: {
-    createChart(chartId) {
-      const ctx = document.getElementById(chartId);
+    createChart() {
+      const ctx = document.getElementById(this.chartId);
       this.myChart = new Chart(ctx, {
-        data: this.data,
         type: 'doughnut',
-        options: this.options,
       });
     },
     updateChart() {
-      this.dataDict = this.doughnutData.data;
       this.labels = Object.keys(this.doughnutData.data);
       this.generateColorList();
       this.updateChartOptions();
@@ -117,7 +122,7 @@ export default {
       this.myChart.update();
     },
     updateChartData() {
-      const dataDict = Object.assign({}, this.dataDict);
+      const dataDict = Object.assign({}, this.doughnutData.data);
       for (let i=0; i < this.hideLabels.length; i++) {
         delete dataDict[this.hideLabels[i]];
       };
@@ -131,7 +136,7 @@ export default {
         ],
       };
       this.myChart.update();
-    }
+    },
   },
 };
 </script>

frontend/src/components/Histogram.vue

 <template>
   <v-card class="pa-2">
     <div class="card-body">
-      <div v-if="histoData.data">
-        <canvas :id="histoData.chart_id"></canvas>
-      </div>
-      <div class="text-xs-center" v-else>
+      <div class="text-xs-center" v-if="noGraph">
         <v-progress-circular
           indeterminate
           color="secondary"
         ></v-progress-circular>
       </div>
+      <div>
+        <canvas :id="chartId"></canvas>
+      </div>
     </div>
   </v-card>
 </template>
@@ -23,14 +23,36 @@ export default {
       type: Object,
       required: true,
     },
+    chartId: String,
   },
-  updated() {
-    this.createChart(this.histoData.chart_id);
+  data() {
+    return {
+      myChart: {},
+      options: {},
+      noGraph: true,
+    }
+  },
+  watch: {
+    histoData(val) {
+      if (this.noGraph) {
+        this.noGraph = false;
+        this.createChart();
+      }
+      this.updateChart();
+    },
   },
   methods: {
-    createChart(chartId) {
-      const ctx = document.getElementById(chartId);
-      const data = {
+    createChart() {
+      const ctx = document.getElementById(this.chartId);
+      this.myChart = new Chart(ctx, {
+        type: 'bar',
+      });
+    },
+    updateChart() {
+      this.updateChartData();
+    },
+    updateChartData() {
+      this.myChart.data = {
         labels: this.histoData.labels,
         datasets: [
           {
@@ -41,11 +63,7 @@ export default {
           },
         ],
       };
-      // eslint-disable-next-line
-      const myChart = new Chart(ctx, {
-        type: 'bar',
-        data: data,
-      });
+      this.myChart.update();
     },
   },
 };

frontend/src/views/Stats.vue

@@ -51,8 +51,9 @@
                   ></v-select>
                 </v-flex>
               </v-toolbar>
-              <histogram :histoData="geneLengthData"></histogram>
+              <histogram :histoData="geneLengthData" chartId="histo_gene_length"></histogram>
             </v-flex>
+            <!-- Doughnut -->
             <v-flex xs12 md6 xl4>
               <v-toolbar
                 class="secondary"
@@ -71,7 +72,7 @@
                   ></v-select>
                 </v-flex>
               </v-toolbar>
-              <doughnut :doughnutData="taxoCounts"></doughnut>
+              <doughnut :doughnutData="taxoCounts" chartId="taxo_annotation"></doughnut>
             </v-flex>
           </v-layout>
         </v-container>
@@ -135,7 +136,6 @@ export default {
       })
       .then((response) => {
         this.geneLengthData = {
-          chart_id: "histo_gene_length",
           data: response.data.results.counts,
           labels: response.data.results.labels,
           label: "Number of genes",