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

add interactive options for doughnut graph

parent 2d989b93
Pipeline #19235 passed with stages
in 2 minutes and 9 seconds
<template> <template>
<v-card class="pa-2"> <v-card class="pa-2">
<div class="card-body"> <div class="card-body">
<div v-if="doughnutData.data"> <div>
<canvas :id="this.doughnutData.chartId"></canvas> <canvas :id="chartId"></canvas>
</div> </div>
<div class="text-xs-center" v-else> <!-- <div class="text-xs-center" v-else>
<v-progress-circular <v-progress-circular
indeterminate indeterminate
color="secondary" color="secondary"
></v-progress-circular> ></v-progress-circular>
</div> </div> -->
<v-layout
align-center
wrap
>
<v-switch
v-model="displayLegend"
label="Display legend">
</v-switch>
<v-flex xs12 sm6>
<v-select
v-model="hideLabels"
:items="this.labels"
attach
chips
label="Hide fields"
multiple
></v-select>
</v-flex>
</v-layout>
</div> </div>
</v-card> </v-card>
</template> </template>
...@@ -24,37 +43,53 @@ export default { ...@@ -24,37 +43,53 @@ export default {
required: true, required: true,
}, },
}, },
updated() { watch: {
this.createChart(this.doughnutData.chartId); doughnutData(val) {
this.updateChart();
},
displayLegend(val) {
this.updateChartOptions();
},
hideLabels() {
this.updateChartData();
}
},
data() {
return {
myChart: {},
options: {},
colors: [],
chartId: "myChart",
displayLegend: true,
labels: [],
hideLabels: [],
}
},
mounted() {
this.createChart(this.chartId);
}, },
methods: { methods: {
createChart(chartId) { createChart(chartId) {
const ctx = document.getElementById(chartId); const ctx = document.getElementById(chartId);
const colors = []; this.myChart = new Chart(ctx, {
for (var i = 0; i<Object.keys(this.doughnutData.data).length; i++) { data: this.data,
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', type: 'doughnut',
options: options, options: this.options,
}); });
}, },
updateChart() {
this.dataDict = this.doughnutData.data;
this.labels = Object.keys(this.doughnutData.data);
this.generateColorList();
this.updateChartOptions();
this.updateChartData();
},
generateColorList() {
this.color = [];
for (var i = 0; i<Object.keys(this.doughnutData.data).length; i++) {
this.colors.push(this.generateColor())
}
},
generateColor() { generateColor() {
var letters = '0123456789ABCDEF'; var letters = '0123456789ABCDEF';
var color = '#'; var color = '#';
...@@ -63,6 +98,31 @@ export default { ...@@ -63,6 +98,31 @@ export default {
} }
return color; return color;
}, },
updateChartOptions() {
this.options = {
legend: {
display: this.displayLegend,
}
};
this.myChart.options = this.options;
this.myChart.update();
},
updateChartData() {
const dataDict = Object.assign({}, this.dataDict);
for (let i=0; i < this.hideLabels.length; i++) {
delete dataDict[this.hideLabels[i]];
};
this.myChart.data = {
labels: Object.keys(dataDict),
datasets: [
{
data: Object.values(dataDict),
backgroundColor: this.colors,
},
],
};
this.myChart.update();
}
}, },
}; };
</script> </script>
...@@ -37,8 +37,8 @@ ...@@ -37,8 +37,8 @@
background-color="primary" background-color="primary"
:items="this.geneLengthChoice" :items="this.geneLengthChoice"
label="Window Length" label="Window Length"
value=400
color="secondary" color="secondary"
v-model="geneLengthWindowSize"
></v-select> ></v-select>
</v-flex> </v-flex>
<v-flex xs4 md2> <v-flex xs4 md2>
...@@ -46,8 +46,8 @@ ...@@ -46,8 +46,8 @@
background-color="primary" background-color="primary"
:items="this.stopAtChoice" :items="this.stopAtChoice"
label="Stop at" label="Stop at"
value=5000
color="secondary" color="secondary"
v-model="stopAt"
></v-select> ></v-select>
</v-flex> </v-flex>
</v-toolbar> </v-toolbar>
...@@ -64,9 +64,10 @@ ...@@ -64,9 +64,10 @@
<v-flex xs4 md2> <v-flex xs4 md2>
<v-select <v-select
background-color="primary" background-color="primary"
:items="this.selectLevel" :items="selectLevel"
value="phylum"
color="secondary" color="secondary"
label="Level"
v-model="taxLevel"
></v-select> ></v-select>
</v-flex> </v-flex>
</v-toolbar> </v-toolbar>
...@@ -86,6 +87,7 @@ import Histogram from '@/components/Histogram.vue'; ...@@ -86,6 +87,7 @@ import Histogram from '@/components/Histogram.vue';
import CountCard from '@/components/CountCard.vue'; import CountCard from '@/components/CountCard.vue';
import Doughnut from '@/components/Doughnut.vue'; import Doughnut from '@/components/Doughnut.vue';
export default { export default {
name: 'home', name: 'home',
data() { data() {
...@@ -96,27 +98,36 @@ export default { ...@@ -96,27 +98,36 @@ export default {
geneCountTaxo: {}, geneCountTaxo: {},
geneCountFull: {}, geneCountFull: {},
geneLengthWindowSize: 400, geneLengthWindowSize: 400,
stopAtChoice: [5000, 10000],
geneLengthChoice: [200, 400, 500, 1000],
stopAt: 5000, stopAt: 5000,
taxoCounts: {}, taxoCounts: {},
selectLevel: ['kingdom', 'phylum', 'genus'] taxLevel: 'phylum',
}; };
}, },
computed: {
stopAtChoice() {
return [5000, 10000];
},
geneLengthChoice() {
return [200, 400, 500, 1000];
},
selectLevel() {
return ['kingdom', 'superkingdom', 'phylum', 'class', 'order', 'family', 'genus'];
}
},
mounted() { mounted() {
this.getGeneLength(this.geneLengthWindowSize, this.stopAt); this.getGeneLength();
this.getGeneCountsAll(); this.getGeneCountsAll();
this.getGeneCountsFunctions(); this.getGeneCountsFunctions();
this.getGeneCountsTaxo(); this.getGeneCountsTaxo();
this.getGeneCountsFull(); this.getGeneCountsFull();
this.getTaxoCounts('phylum'); this.getTaxoCounts();
}, },
methods: { methods: {
getGeneLength(geneLengthWindowSize, stopAt) { getGeneLength() {
axios.get('/api/catalog/v1/genes/gene_length', { axios.get('/api/catalog/v1/genes/gene_length', {
params: { params: {
'window_size': geneLengthWindowSize, 'window_size': this.geneLengthWindowSize,
'stop_at': stopAt, 'stop_at': this.stopAt,
}, },
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
...@@ -218,20 +229,21 @@ export default { ...@@ -218,20 +229,21 @@ export default {
console.log(error); console.log(error);
}); });
}, },
getTaxoCounts(level) { getTaxoCounts() {
axios.get('/api/catalog/v1/genes/taxonomy_counts', { axios.get('/api/catalog/v1/genes/taxonomy_counts', {
params: { params: {
level: level, level: this.taxLevel,
}, },
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
}, },
}) })
.then((response) => { .then((response) => {
const chartId = 'taxo_distri_' + this.taxLevel
this.taxoCounts = { this.taxoCounts = {
data: response.data.results.counts, data: response.data.results.counts,
level: response.data.results.level, level: response.data.results.level,
chartId: 'taxo_distri', chartId: chartId,
}; };
}) })
.catch((error) => { .catch((error) => {
...@@ -244,5 +256,16 @@ export default { ...@@ -244,5 +256,16 @@ export default {
countcard: CountCard, countcard: CountCard,
doughnut: Doughnut, doughnut: Doughnut,
}, },
watch: {
taxLevel(val) {
this.getTaxoCounts();
},
stopAt(val) {
this.getGeneLength();
},
geneLengthWindowSize(val) {
this.getGeneLength();
},
}
}; };
</script> </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