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

Improve reusability of bar plots

parent c0fccc05
Pipeline #18993 passed with stages
in 2 minutes and 18 seconds
<template>
<div v-if="geneLengthData.counts">
<canvas id="histogram"></canvas>
</div>
<div class="text-xs-center" v-else>
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
<v-flex xs12 md6>
<v-toolbar
class="secondary"
dark
>
<v-toolbar-title>{{ geneLengthData.title }}</v-toolbar-title>
</v-toolbar>
<v-card class="pa-2">
<div class="card-body">
<div v-if="geneLengthData.data">
<canvas :id="geneLengthData.chart_id"></canvas>
</div>
<div class="text-xs-center" v-else>
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
</div>
</v-card>
</v-flex>
</template>
<script>
......@@ -21,7 +33,7 @@ export default {
},
},
updated() {
this.createChart('histogram');
this.createChart(this.geneLengthData.chart_id);
},
methods: {
createChart(chartId) {
......@@ -30,10 +42,10 @@ export default {
labels: this.geneLengthData.labels,
datasets: [
{
label: 'Number of genes',
data: this.geneLengthData.counts,
borderColor: '#edb183',
backgroundColor: '#f15152',
label: this.geneLengthData.label,
data: this.geneLengthData.data,
borderColor: this.geneLengthData.bordelColor,
backgroundColor: this.geneLengthData.backgroundColor,
},
],
};
......
......@@ -3,24 +3,8 @@
<h1 class="subheading primary--text">Statistics</h1>
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 md6>
<v-toolbar
class="secondary"
dark
>
<v-toolbar-title>Gene length distribution</v-toolbar-title>
</v-toolbar>
<v-card class="pa-2">
<div class="card-body">
<histogram v-bind:geneLengthData="geneLengthData"></histogram>
<!-- <label for="geneLengthWindowSize">Gene size window</label>
<input type="range" class="custom-range" min="200" max="10000" step="200"
v-model="geneLengthWindowSize" v-on:input="getGeneLength(geneLengthWindowSize)"
debounce="500">
{{geneLengthWindowSize}} -->
</div>
</v-card>
</v-flex>
<histogram :geneLengthData="geneLengthData"></histogram>
<histogram :geneLengthData="geneLengthDataOther"></histogram>
</v-layout>
</v-container>
</div>
......@@ -35,6 +19,7 @@ export default {
data() {
return {
geneLengthData: {},
geneLengthDataOther: {},
geneLengthWindowSize: 1000,
};
},
......@@ -52,7 +37,24 @@ export default {
},
})
.then((response) => {
this.geneLengthData = response.data.results;
this.geneLengthData = {
chart_id: "histo1",
data: response.data.results.counts,
labels: response.data.results.labels,
title: "Gene length distribution",
label: "Number of genes",
borderColor: '#edb183',
backgroundColor: '#f15152',
};
this.geneLengthDataOther = {
chart_id: "histo2",
data: response.data.results.counts,
labels: response.data.results.labels,
title: "Gene length distribution 2",
label: "Number of gnes",
borderColor: '#aab183',
backgroundColor: '#faa152',
};
})
.catch((error) => {
console.log(error);
......
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