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> <template>
<v-flex xs12 md6 xl4> <v-card class="pa-2">
<v-toolbar <div class="card-body">
:class="doughnutData.class" <div v-if="doughnutData.data">
dark <canvas :id="this.doughnutData.chartId"></canvas>
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> </div>
</v-card> <div class="text-xs-center" v-else>
</v-flex> <v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
</div>
</v-card>
</template> </template>
<script> <script>
......
<template> <template>
<v-flex xs12 md6 xl4> <v-card class="pa-2">
<v-toolbar <div class="card-body">
:class="histoData.class" <div v-if="histoData.data">
dark <canvas :id="histoData.chart_id"></canvas>
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">
<canvas :id="histoData.chart_id"></canvas>
</div>
<div class="text-xs-center" v-else>
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
</div> </div>
</v-card> <div class="text-xs-center" v-else>
</v-flex> <v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
</div>
</v-card>
</template> </template>
<script> <script>
......
...@@ -24,8 +24,26 @@ ...@@ -24,8 +24,26 @@
<countcard :count="geneCountFull"></countcard> <countcard :count="geneCountFull"></countcard>
</v-layout> </v-layout>
<v-layout row wrap> <v-layout row wrap>
<histogram :histoData="geneLengthData"></histogram> <v-flex xs12 md6 xl4>
<doughnut :doughnutData="taxoCounts"></doughnut> <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-layout>
</v-container> </v-container>
</v-card> </v-card>
...@@ -75,15 +93,12 @@ export default { ...@@ -75,15 +93,12 @@ export default {
}) })
.then((response) => { .then((response) => {
this.geneLengthData = { this.geneLengthData = {
chart_id: "histo1", chart_id: "histo_gene_length",
data: response.data.results.counts, data: response.data.results.counts,
labels: response.data.results.labels, labels: response.data.results.labels,
title: "Gene length distribution",
label: "Number of genes", label: "Number of genes",
borderColor: '#edb183', borderColor: '#edb183',
backgroundColor: '#f15152', backgroundColor: '#f15152',
class: "secondary",
icon: "bar_chart",
}; };
}) })
.catch((error) => { .catch((error) => {
...@@ -183,12 +198,8 @@ export default { ...@@ -183,12 +198,8 @@ export default {
}) })
.then((response) => { .then((response) => {
this.taxoCounts = { this.taxoCounts = {
class: "secondary",
icon: "account_tree",
title: "Taxonomical annotation",
data: response.data.results.counts, data: response.data.results.counts,
level: response.data.results.level, level: response.data.results.level,
backgroundColor: '#f15152',
chartId: 'taxo_distri', 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