externalize headers of graphs

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>
+  <v-card class="pa-2">
+    <div class="card-body">
+      <div v-if="doughnutData.data">
+        <canvas :id="this.doughnutData.chartId"></canvas>
       </div>
-    </v-card>
-  </v-flex>
+      <div class="text-xs-center" v-else>
+        <v-progress-circular
+          indeterminate
+          color="secondary"
+        ></v-progress-circular>
+      </div>
+    </div>
+  </v-card>
 </template>
 
 <script>

frontend/src/components/Histogram.vue

 <template>
-  <v-flex xs12 md6 xl4>
-    <v-toolbar
-      :class="histoData.class"
-      dark
-      v-if="histoData.data"
-    >
-      <v-icon class="white--text">{{ histoData.icon }}</v-icon>
-      <v-toolbar-title>{{ histoData.title }}</v-toolbar-title>
-    </v-toolbar>
-    <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>
-          <v-progress-circular
-            indeterminate
-            color="secondary"
-          ></v-progress-circular>
-        </div>
+  <v-card class="pa-2">
+    <div class="card-body">
+      <div v-if="histoData.data">
+        <canvas :id="histoData.chart_id"></canvas>
       </div>
-    </v-card>
-  </v-flex>
+      <div class="text-xs-center" v-else>
+        <v-progress-circular
+          indeterminate
+          color="secondary"
+        ></v-progress-circular>
+      </div>
+    </div>
+  </v-card>
 </template>
 
 <script>

frontend/src/views/Stats.vue

@@ -24,8 +24,26 @@
             <countcard :count="geneCountFull"></countcard>
           </v-layout>
           <v-layout row wrap>
-            <histogram :histoData="geneLengthData"></histogram>
-            <doughnut :doughnutData="taxoCounts"></doughnut>
+            <v-flex xs12 md6 xl4>
+              <v-toolbar
+                class="secondary"
+                dark
+              >
+                <v-icon class="white--text">bar_chart</v-icon>
+                <v-toolbar-title>Gene length distribution</v-toolbar-title>
+              </v-toolbar>
+              <histogram :histoData="geneLengthData"></histogram>
+            </v-flex>
+            <v-flex xs12 md6 xl4>
+              <v-toolbar
+                class="secondary"
+                dark
+              >
+                <v-icon class="white--text">account_tree</v-icon>
+                <v-toolbar-title>Taxonomical annotation</v-toolbar-title>
+              </v-toolbar>
+              <doughnut :doughnutData="taxoCounts"></doughnut>
+            </v-flex>
           </v-layout>
         </v-container>
       </v-card>
@@ -75,15 +93,12 @@ export default {
       })
       .then((response) => {
         this.geneLengthData = {
-          chart_id: "histo1",
+          chart_id: "histo_gene_length",
           data: response.data.results.counts,
           labels: response.data.results.labels,
-          title: "Gene length distribution",
           label: "Number of genes",
           borderColor: '#edb183',
           backgroundColor: '#f15152',
-          class: "secondary",
-          icon: "bar_chart",
         };
       })
       .catch((error) => {
@@ -183,12 +198,8 @@ export default {
       })
       .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',
         };
       })