start component for histogram

backend/metagenedb/apps/catalog/views/statistics.py

@@ -30,7 +30,7 @@ def _count_windows(df, window_col, window_size=10000):
         labels.append(f"{rg[0]}-{rg[1]-1}")
         data.append(df[_get_mask(df, rg, window_col)].count()['gene_length'])
     return {
-        'data': data,
+        'counts': data,
         'labels': labels
     }
 

backend/metagenedb/apps/catalog/views/test_statistics.py

@@ -16,7 +16,7 @@ class TestCountWindows(TestCase):
     def test_simple_count_window10(self):
         expected_dict = {
             'labels': ['0-9', '10-19', '20-29', '30-39'],
-            'data': [0, 0, 2, 1]
+            'counts': [0, 0, 2, 1]
         }
         test_dict = _count_windows(self.df, self.window_col, 10)
         self.assertDictEqual(test_dict, expected_dict)

frontend/src/App.vue

@@ -28,4 +28,5 @@
     }
   }
 }
-</style>
+
+</style>
\ No newline at end of file

frontend/src/components/Histo.vue

+<template>
+  <div id="app">
+  	<h1>Gene Length Distribution</h1>
+    <canvas id="histogram"></canvas>
+  </div>
+</template>
+
+<script>
+import Chart from 'chart.js';
+
+export default {
+	props: ['geneLengthData'],
+	data() {
+    return {
+      data: this.geneLengthData,
+    }
+  },
+	mounted() {
+		this.createChart('histogram');
+	},
+	methods: {
+    createChart(chartId) {
+      const ctx = document.getElementById(chartId);
+      const histoData = {
+      	labels: this.data.labels,
+      	datasets:[
+      		{
+      			label: 'Number of genes',
+      			data: this.data.counts
+      		}
+      	]
+      }
+      const myChart = new Chart(ctx, {
+        type: 'bar',
+        data: histoData,
+      });
+    }
+  }
+}
+</script>
\ No newline at end of file

frontend/src/components/chart-data.js

+export const planetChartData = {
+  type: 'bar',
+  data: {
+    labels: [
+      '0-10000',
+      '10000-20000',
+      '20000-30000',
+      '30000-40000',
+      '40000-50000',
+      '50000-60000',
+      '60000-70000',
+      '70000-80000',
+      '80000-90000'
+    ],
+    datasets: [
+      { // one line graph
+        label: 'Number of Genes',
+        data: [0, 887, 97, 10, 3, 0, 1, 0, 2],
+        backgroundColor: [
+          'rgba(54,73,93,.5)', // Blue
+        ],
+        borderColor: [
+          '#36495d',
+        ],
+        borderWidth: 3
+      },
+    ]
+  },
+  options: {
+    responsive: true,
+    lineTension: 1,
+    scales: {
+      yAxes: [{
+        ticks: {
+          beginAtZero: true,
+          padding: 25,
+        }
+      }]
+    }
+  }
+}
+
+export default planetChartData;
\ No newline at end of file

frontend/src/views/Home.vue

@@ -7,19 +7,25 @@
       <h4>{{ gene.gene_id }}</h4>
       <p>Gene length: {{ gene.gene_length }} {{ gene.functions }}</p>
     </div>
+    <histo v-if=geneLengthData v-bind:geneLengthData="geneLengthData"></histo>
   </div>
 </template>
 
 <script>
+import Histo from '../components/Histo.vue';
+
 export default {
   name: 'home',
   data() {
     return {
       genes: [],
+      count: 0,
+      // geneLengthData: {},
     };
   },
   mounted() {
     this.fetchGenes();
+    this.fetchGeneLength();
   },
   methods: {
     fetchGenes() {
@@ -38,6 +44,22 @@ export default {
           }
         });
     },
+    fetchGeneLength() {
+      fetch('/catalog/api/gene_length', {
+        method: 'GET',
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+        .then((response) => {
+          if (response.ok) {
+            response.json().then((json) => {
+              this.geneLengthData = json.data;
+            });
+          }
+        });
+    },
   },
+  components: {histo: Histo}
 };
 </script>