add visualization for phylum annotation on db

frontend/src/components/Doughnut.vue

+<template>
+  <v-flex xs12 md6 xl4>
+    <v-toolbar
+      :class="doughnutData.class"
+      dark
+      v-if="doughnutData.data"
+    >
+      <v-icon class="white--text">{{ doughnutData.icon }}</v-icon>
+      <v-toolbar-title>{{ doughnutData.title }} ({{ doughnutData.level }})</v-toolbar-title>
+    </v-toolbar>
+    <v-card class="pa-2">
+      <div class="card-body">
+        <div v-if="doughnutData.data">
+          <canvas :id="this.doughnutData.chartId"></canvas>
+        </div>
+        <div class="text-xs-center" v-else>
+          <v-progress-circular
+            indeterminate
+            color="secondary"
+          ></v-progress-circular>
+        </div>
+      </div>
+    </v-card>
+  </v-flex>
+</template>
+
+<script>
+import Chart from 'chart.js';
+
+export default {
+  props: {
+    doughnutData: {
+      type: Object,
+      required: true,
+    },
+  },
+  updated() {
+    this.createChart(this.doughnutData.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,
+        type: 'doughnut',
+        options: options,
+      });
+    },
+    generateColor() {
+      var letters = '0123456789ABCDEF';
+      var color = '#';
+      for (var i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+      }
+      return color;
+    },
+  },
+};
+</script>

frontend/src/components/Histogram.vue

@@ -40,7 +40,7 @@ export default {
   methods: {
     createChart(chartId) {
       const ctx = document.getElementById(chartId);
-      const histoData = {
+      const data = {
         labels: this.histoData.labels,
         datasets: [
           {
@@ -54,7 +54,7 @@ export default {
       // eslint-disable-next-line
       const myChart = new Chart(ctx, {
         type: 'bar',
-        data: histoData,
+        data: data,
       });
     },
   },

frontend/src/views/Stats.vue

@@ -25,6 +25,7 @@
           </v-layout>
           <v-layout row wrap>
             <histogram :histoData="geneLengthData"></histogram>
+            <doughnut :doughnutData="taxoCounts"></doughnut>
           </v-layout>
         </v-container>
       </v-card>
@@ -37,6 +38,7 @@
 import axios from 'axios';
 import Histogram from '@/components/Histogram.vue';
 import CountCard from '@/components/CountCard.vue';
+import Doughnut from '@/components/Doughnut.vue';
 
 export default {
   name: 'home',
@@ -49,6 +51,7 @@ export default {
       geneCountFull: {},
       geneLengthWindowSize: 400,
       stopAt: 5000,
+      taxoCounts: {},
     };
   },
   mounted() {
@@ -57,6 +60,7 @@ export default {
     this.getGeneCountsFunctions();
     this.getGeneCountsTaxo();
     this.getGeneCountsFull();
+    this.getTaxoCounts('phylum');
   },
   methods: {
     getGeneLength(geneLengthWindowSize, stopAt) {
@@ -168,10 +172,35 @@ export default {
         console.log(error);
       });
     },
+    getTaxoCounts(level) {
+      axios.get('/api/catalog/v1/genes/taxonomy_counts', {
+        params: {
+          level: level,
+        },
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+      .then((response) => {
+        this.taxoCounts = {
+          class: "secondary",
+          icon: "account_tree",
+          title: "Taxonomical annotation",
+          data: response.data.results.counts,
+          level: response.data.results.level,
+          backgroundColor: '#f15152',
+          chartId: 'taxo_distri',
+        };
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+    },
   },
   components: {
     histogram: Histogram,
     countcard: CountCard,
+    doughnut: Doughnut,
   },
 };
 </script>