Commit 69a2ca55 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion
Browse files

link histograms to backend

parent 15d85517
Pipeline #12799 passed with stage
in 1 minute and 13 seconds
<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
}
]
}
......
......@@ -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>
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