add interactive options for doughnut graph

frontend/src/components/Doughnut.vue

 <template>
   <v-card class="pa-2">
     <div class="card-body">
-      <div v-if="doughnutData.data">
-        <canvas :id="this.doughnutData.chartId"></canvas>
+      <div>
+        <canvas :id="chartId"></canvas>
       </div>
-      <div class="text-xs-center" v-else>
+      <!-- <div class="text-xs-center" v-else>
         <v-progress-circular
           indeterminate
           color="secondary"
         ></v-progress-circular>
-      </div>
+      </div> -->
+      <v-layout
+        align-center
+        wrap
+      >
+        <v-switch
+          v-model="displayLegend"
+          label="Display legend">
+        </v-switch>
+        <v-flex xs12 sm6>
+          <v-select
+            v-model="hideLabels"
+            :items="this.labels"
+            attach
+            chips
+            label="Hide fields"
+            multiple
+          ></v-select>
+        </v-flex>
+      </v-layout>
     </div>
   </v-card>
 </template>
@@ -24,37 +43,53 @@ export default {
       required: true,
     },
   },
-  updated() {
-    this.createChart(this.doughnutData.chartId);
+  watch: {
+    doughnutData(val) {
+      this.updateChart();
+    },
+    displayLegend(val) {
+      this.updateChartOptions();
+    },
+    hideLabels() {
+      this.updateChartData();
+    }
+  },
+  data() {
+    return {
+      myChart: {},
+      options: {},
+      colors: [],
+      chartId: "myChart",
+      displayLegend: true,
+      labels: [],
+      hideLabels: [],
+    }
+  },
+  mounted() {
+    this.createChart(this.chartId);
   },
   methods: {
     createChart(chartId) {
       const ctx = document.getElementById(chartId);
-      const colors = [];
-      for (var i = 0; i<Object.keys(this.doughnutData.data).length; i++) {
-        colors.push(this.generateColor())
-      }
-      const data = {
-        labels: Object.keys(this.doughnutData.data),
-        datasets: [
-          {
-            data: Object.values(this.doughnutData.data),
-            backgroundColor: colors,
-          },
-        ],
-      };
-      const options = {
-        legend: {
-          display: true,
-        }
-      };
-      // eslint-disable-next-line
-      const myChart = new Chart(ctx, {
-        data: data,
+      this.myChart = new Chart(ctx, {
+        data: this.data,
         type: 'doughnut',
-        options: options,
+        options: this.options,
       });
     },
+    updateChart() {
+      this.dataDict = this.doughnutData.data;
+      this.labels = Object.keys(this.doughnutData.data);
+      this.generateColorList();
+      this.updateChartOptions();
+      this.updateChartData();
+    },
+    generateColorList() {
+      this.color = [];
+      for (var i = 0; i<Object.keys(this.doughnutData.data).length; i++) {
+        this.colors.push(this.generateColor())
+      }
+    },
     generateColor() {
       var letters = '0123456789ABCDEF';
       var color = '#';
@@ -63,6 +98,31 @@ export default {
       }
       return color;
     },
+    updateChartOptions() {
+      this.options = {
+        legend: {
+          display: this.displayLegend,
+        }
+      };
+      this.myChart.options = this.options;
+      this.myChart.update();
+    },
+    updateChartData() {
+      const dataDict = Object.assign({}, this.dataDict);
+      for (let i=0; i < this.hideLabels.length; i++) {
+        delete dataDict[this.hideLabels[i]];
+      };
+      this.myChart.data = {
+        labels: Object.keys(dataDict),
+        datasets: [
+          {
+            data: Object.values(dataDict),
+            backgroundColor: this.colors,
+          },
+        ],
+      };
+      this.myChart.update();
+    }
   },
 };
 </script>

frontend/src/views/Stats.vue

@@ -37,8 +37,8 @@
                     background-color="primary"
                     :items="this.geneLengthChoice"
                     label="Window Length"
-                    value=400
                     color="secondary"
+                    v-model="geneLengthWindowSize"
                   ></v-select>
                 </v-flex>
                 <v-flex xs4 md2>
@@ -46,8 +46,8 @@
                     background-color="primary"
                     :items="this.stopAtChoice"
                     label="Stop at"
-                    value=5000
                     color="secondary"
+                    v-model="stopAt"
                   ></v-select>
                 </v-flex>
               </v-toolbar>
@@ -64,9 +64,10 @@
                 <v-flex xs4 md2>
                   <v-select
                     background-color="primary"
-                    :items="this.selectLevel"
-                    value="phylum"
+                    :items="selectLevel"
                     color="secondary"
+                    label="Level"
+                    v-model="taxLevel"
                   ></v-select>
                 </v-flex>
               </v-toolbar>
@@ -86,6 +87,7 @@ import Histogram from '@/components/Histogram.vue';
 import CountCard from '@/components/CountCard.vue';
 import Doughnut from '@/components/Doughnut.vue';
 
+
 export default {
   name: 'home',
   data() {
@@ -96,27 +98,36 @@ export default {
       geneCountTaxo: {},
       geneCountFull: {},
       geneLengthWindowSize: 400,
-      stopAtChoice: [5000, 10000],
-      geneLengthChoice: [200, 400, 500, 1000],
       stopAt: 5000,
       taxoCounts: {},
-      selectLevel: ['kingdom', 'phylum', 'genus']
+      taxLevel: 'phylum',
     };
   },
+  computed: {
+    stopAtChoice() {
+      return [5000, 10000];
+    },
+    geneLengthChoice() {
+      return [200, 400, 500, 1000];
+    },
+    selectLevel() {
+      return ['kingdom', 'superkingdom', 'phylum', 'class', 'order', 'family', 'genus'];
+    }
+  },
   mounted() {
-    this.getGeneLength(this.geneLengthWindowSize, this.stopAt);
+    this.getGeneLength();
     this.getGeneCountsAll();
     this.getGeneCountsFunctions();
     this.getGeneCountsTaxo();
     this.getGeneCountsFull();
-    this.getTaxoCounts('phylum');
+    this.getTaxoCounts();
   },
   methods: {
-    getGeneLength(geneLengthWindowSize, stopAt) {
+    getGeneLength() {
       axios.get('/api/catalog/v1/genes/gene_length', {
         params: {
-          'window_size': geneLengthWindowSize,
-          'stop_at': stopAt,
+          'window_size': this.geneLengthWindowSize,
+          'stop_at': this.stopAt,
         },
         headers: {
           Accept: 'application/json',
@@ -218,20 +229,21 @@ export default {
         console.log(error);
       });
     },
-    getTaxoCounts(level) {
+    getTaxoCounts() {
       axios.get('/api/catalog/v1/genes/taxonomy_counts', {
         params: {
-          level: level,
+          level: this.taxLevel,
         },
         headers: {
           Accept: 'application/json',
         },
       })
       .then((response) => {
+        const chartId = 'taxo_distri_' + this.taxLevel
         this.taxoCounts = {
           data: response.data.results.counts,
           level: response.data.results.level,
-          chartId: 'taxo_distri',
+          chartId: chartId,
         };
       })
       .catch((error) => {
@@ -244,5 +256,16 @@ export default {
     countcard: CountCard,
     doughnut: Doughnut,
   },
+  watch: {
+  	taxLevel(val) {
+      this.getTaxoCounts();
+    },
+    stopAt(val) {
+      this.getGeneLength();
+    },
+    geneLengthWindowSize(val) {
+      this.getGeneLength();
+    },
+  }
 };
 </script>