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

externalize headers of graphs

parent 8d6064a7
Pipeline #19185 passed with stages
in 2 minutes and 11 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">
......@@ -21,7 +12,6 @@
</div>
</div>
</v-card>
</v-flex>
</template>
<script>
......
<template>
<v-flex xs12 md6 xl4>
<v-toolbar
:class="histoData.class"
dark
v-if="histoData.data"
>
<v-icon class="white--text">{{ histoData.icon }}</v-icon>
<v-toolbar-title>{{ histoData.title }}</v-toolbar-title>
</v-toolbar>
<v-card class="pa-2">
<div class="card-body">
<div v-if="histoData.data">
......@@ -21,7 +12,6 @@
</div>
</div>
</v-card>
</v-flex>
</template>
<script>
......
......@@ -24,8 +24,26 @@
<countcard :count="geneCountFull"></countcard>
</v-layout>
<v-layout row wrap>
<v-flex xs12 md6 xl4>
<v-toolbar
class="secondary"
dark
>
<v-icon class="white--text">bar_chart</v-icon>
<v-toolbar-title>Gene length distribution</v-toolbar-title>
</v-toolbar>
<histogram :histoData="geneLengthData"></histogram>
</v-flex>
<v-flex xs12 md6 xl4>
<v-toolbar
class="secondary"
dark
>
<v-icon class="white--text">account_tree</v-icon>
<v-toolbar-title>Taxonomical annotation</v-toolbar-title>
</v-toolbar>
<doughnut :doughnutData="taxoCounts"></doughnut>
</v-flex>
</v-layout>
</v-container>
</v-card>
......@@ -75,15 +93,12 @@ export default {
})
.then((response) => {
this.geneLengthData = {
chart_id: "histo1",
chart_id: "histo_gene_length",
data: response.data.results.counts,
labels: response.data.results.labels,
title: "Gene length distribution",
label: "Number of genes",
borderColor: '#edb183',
backgroundColor: '#f15152',
class: "secondary",
icon: "bar_chart",
};
})
.catch((error) => {
......@@ -183,12 +198,8 @@ export default {
})
.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',
};
})
......
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