link histograms to backend

frontend/src/components/Histo.vue → frontend/src/components/Histogram.vue

 <template>
-  <div id="app">
+  <div v-if="geneLengthData.counts" id="app">
   	<h1>Gene Length Distribution</h1>
     <canvas id="histogram"></canvas>
   </div>
@@ -9,24 +9,24 @@
 import Chart from 'chart.js';
 
 export default {
-	props: ['geneLengthData'],
-	data() {
-    return {
-      data: this.geneLengthData,
-    }
-  },
-	mounted() {
+	props: {
+		geneLengthData: {
+			type: Object,
+			required: true
+		}
+	},
+	updated() {
 		this.createChart('histogram');
 	},
 	methods: {
     createChart(chartId) {
       const ctx = document.getElementById(chartId);
       const histoData = {
-      	labels: this.data.labels,
+      	labels: this.geneLengthData.labels,
       	datasets:[
       		{
       			label: 'Number of genes',
-      			data: this.data.counts
+      			data: this.geneLengthData.counts
       		}
       	]
       }

frontend/src/views/Home.vue

@@ -7,12 +7,12 @@
       <h4>{{ gene.gene_id }}</h4>
       <p>Gene length: {{ gene.gene_length }} {{ gene.functions }}</p>
     </div>
-    <histo v-if=geneLengthData v-bind:geneLengthData="geneLengthData"></histo>
+    <histogram v-bind:geneLengthData="geneLengthData"></histogram>
   </div>
 </template>
 
 <script>
-import Histo from '../components/Histo.vue';
+import Histogram from '../components/Histogram.vue';
 
 export default {
   name: 'home',
@@ -20,12 +20,13 @@ export default {
     return {
       genes: [],
       count: 0,
-      // geneLengthData: {},
+      geneLengthData: {},
+      geneLengthWindowSize: 10000,
     };
   },
   mounted() {
     this.fetchGenes();
-    this.fetchGeneLength();
+    this.fetchGeneLength(this.geneLengthWindowSize);
   },
   methods: {
     fetchGenes() {
@@ -44,8 +45,8 @@ export default {
           }
         });
     },
-    fetchGeneLength() {
-      fetch('/catalog/api/gene_length', {
+    fetchGeneLength(geneLengthWindowSize) {
+      fetch('/catalog/api/gene_length?window_size='.concat(geneLengthWindowSize), {
         method: 'GET',
         headers: {
           Accept: 'application/json',
@@ -60,6 +61,6 @@ export default {
         });
     },
   },
-  components: {histo: Histo}
+  components: {histogram: Histogram}
 };
 </script>