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

add visualization for phylum annotation on db

parent 2fe3bd45
Pipeline #19183 passed with stages
in 2 minutes and 8 seconds
<template>
<v-flex xs12 md6 xl4>
<v-toolbar
:class="doughnutData.class"
dark
v-if="doughnutData.data"
>
<v-icon class="white--text">{{ doughnutData.icon }}</v-icon>
<v-toolbar-title>{{ doughnutData.title }} ({{ doughnutData.level }})</v-toolbar-title>
</v-toolbar>
<v-card class="pa-2">
<div class="card-body">
<div v-if="doughnutData.data">
<canvas :id="this.doughnutData.chartId"></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>
import Chart from 'chart.js';
export default {
props: {
doughnutData: {
type: Object,
required: true,
},
},
updated() {
this.createChart(this.doughnutData.chartId);
},
methods: {
createChart(chartId) {
const ctx = document.getElementById(chartId);
const colors = [];
for (var i = 0; i<Object.keys(this.doughnutData.data).length; i++) {
colors.push(this.generateColor())
}
const data = {
labels: Object.keys(this.doughnutData.data),
datasets: [
{
data: Object.values(this.doughnutData.data),
backgroundColor: colors,
},
],
};
const options = {
legend: {
display: true,
}
};
// eslint-disable-next-line
const myChart = new Chart(ctx, {
data: data,
type: 'doughnut',
options: options,
});
},
generateColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
},
},
};
</script>
......@@ -40,7 +40,7 @@ export default {
methods: {
createChart(chartId) {
const ctx = document.getElementById(chartId);
const histoData = {
const data = {
labels: this.histoData.labels,
datasets: [
{
......@@ -54,7 +54,7 @@ export default {
// eslint-disable-next-line
const myChart = new Chart(ctx, {
type: 'bar',
data: histoData,
data: data,
});
},
},
......
......@@ -25,6 +25,7 @@
</v-layout>
<v-layout row wrap>
<histogram :histoData="geneLengthData"></histogram>
<doughnut :doughnutData="taxoCounts"></doughnut>
</v-layout>
</v-container>
</v-card>
......@@ -37,6 +38,7 @@
import axios from 'axios';
import Histogram from '@/components/Histogram.vue';
import CountCard from '@/components/CountCard.vue';
import Doughnut from '@/components/Doughnut.vue';
export default {
name: 'home',
......@@ -49,6 +51,7 @@ export default {
geneCountFull: {},
geneLengthWindowSize: 400,
stopAt: 5000,
taxoCounts: {},
};
},
mounted() {
......@@ -57,6 +60,7 @@ export default {
this.getGeneCountsFunctions();
this.getGeneCountsTaxo();
this.getGeneCountsFull();
this.getTaxoCounts('phylum');
},
methods: {
getGeneLength(geneLengthWindowSize, stopAt) {
......@@ -168,10 +172,35 @@ export default {
console.log(error);
});
},
getTaxoCounts(level) {
axios.get('/api/catalog/v1/genes/taxonomy_counts', {
params: {
level: level,
},
headers: {
Accept: 'application/json',
},
})
.then((response) => {
this.taxoCounts = {
class: "secondary",
icon: "account_tree",
title: "Taxonomical annotation",
data: response.data.results.counts,
level: response.data.results.level,
backgroundColor: '#f15152',
chartId: 'taxo_distri',
};
})
.catch((error) => {
console.log(error);
});
},
},
components: {
histogram: Histogram,
countcard: CountCard,
doughnut: Doughnut,
},
};
</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