Commit 15d85517 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion
Browse files

start component for histogram

parent 2f25484f
Pipeline #12776 passed with stage
in 1 minute and 26 seconds
......@@ -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
}
......
......@@ -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)
......@@ -28,4 +28,5 @@
}
}
}
</style>
</style>
\ No newline at end of file
<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
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
......@@ -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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment