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