Skip to content
Snippets Groups Projects
Commit 61af92b5 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion :recycle:
Browse files

Improve components with props ID and loading icon

parent da2a9bc0
No related branches found
No related tags found
2 merge requests!59Prod,!23Add more statistical graph about gene catalog
Pipeline #19264 passed
<template>
<v-card class="pa-2">
<div class="card-body">
<div>
<canvas :id="chartId"></canvas>
</div>
<!-- <div class="text-xs-center" v-else>
<div class="text-xs-center" v-if="noGraph">
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div> -->
</div>
<div>
<canvas :id="chartId"></canvas>
</div>
<v-layout
align-center
wrap
justify-space-around
row
>
<v-switch
v-model="displayLegend"
label="Display legend">
</v-switch>
<v-flex xs12 sm6>
<v-flex sm3>
<v-switch
v-model="hideLegend"
label="Hide legend">
</v-switch>
</v-flex>
<v-flex sm8>
<v-select
v-model="hideLabels"
:items="this.labels"
......@@ -26,6 +28,7 @@
chips
:label="hideLabelsLabel"
multiple
clearable
></v-select>
</v-flex>
</v-layout>
......@@ -42,23 +45,28 @@ export default {
type: Object,
required: true,
},
chartId: String,
},
data() {
return {
myChart: {},
options: {},
colors: [],
chartId: "myChart",
displayLegend: true,
hideLegend: false,
labels: [],
hideLabels: [],
noGraph: true,
}
},
watch: {
doughnutData(val) {
if (this.noGraph) {
this.noGraph = false;
this.createChart();
}
this.updateChart();
},
displayLegend(val) {
hideLegend(val) {
this.updateChartOptions();
},
hideLabels() {
......@@ -73,21 +81,18 @@ export default {
return "Hide " + this.doughnutData.level;
}
},
},
mounted() {
this.createChart(this.chartId);
displayLegend() {
return !this.hideLegend;
}
},
methods: {
createChart(chartId) {
const ctx = document.getElementById(chartId);
createChart() {
const ctx = document.getElementById(this.chartId);
this.myChart = new Chart(ctx, {
data: this.data,
type: 'doughnut',
options: this.options,
});
},
updateChart() {
this.dataDict = this.doughnutData.data;
this.labels = Object.keys(this.doughnutData.data);
this.generateColorList();
this.updateChartOptions();
......@@ -117,7 +122,7 @@ export default {
this.myChart.update();
},
updateChartData() {
const dataDict = Object.assign({}, this.dataDict);
const dataDict = Object.assign({}, this.doughnutData.data);
for (let i=0; i < this.hideLabels.length; i++) {
delete dataDict[this.hideLabels[i]];
};
......@@ -131,7 +136,7 @@ export default {
],
};
this.myChart.update();
}
},
},
};
</script>
<template>
<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>
<div class="text-xs-center" v-if="noGraph">
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
<div>
<canvas :id="chartId"></canvas>
</div>
</div>
</v-card>
</template>
......@@ -23,14 +23,36 @@ export default {
type: Object,
required: true,
},
chartId: String,
},
updated() {
this.createChart(this.histoData.chart_id);
data() {
return {
myChart: {},
options: {},
noGraph: true,
}
},
watch: {
histoData(val) {
if (this.noGraph) {
this.noGraph = false;
this.createChart();
}
this.updateChart();
},
},
methods: {
createChart(chartId) {
const ctx = document.getElementById(chartId);
const data = {
createChart() {
const ctx = document.getElementById(this.chartId);
this.myChart = new Chart(ctx, {
type: 'bar',
});
},
updateChart() {
this.updateChartData();
},
updateChartData() {
this.myChart.data = {
labels: this.histoData.labels,
datasets: [
{
......@@ -41,11 +63,7 @@ export default {
},
],
};
// eslint-disable-next-line
const myChart = new Chart(ctx, {
type: 'bar',
data: data,
});
this.myChart.update();
},
},
};
......
......@@ -51,8 +51,9 @@
></v-select>
</v-flex>
</v-toolbar>
<histogram :histoData="geneLengthData"></histogram>
<histogram :histoData="geneLengthData" chartId="histo_gene_length"></histogram>
</v-flex>
<!-- Doughnut -->
<v-flex xs12 md6 xl4>
<v-toolbar
class="secondary"
......@@ -71,7 +72,7 @@
></v-select>
</v-flex>
</v-toolbar>
<doughnut :doughnutData="taxoCounts"></doughnut>
<doughnut :doughnutData="taxoCounts" chartId="taxo_annotation"></doughnut>
</v-flex>
</v-layout>
</v-container>
......@@ -135,7 +136,6 @@ export default {
})
.then((response) => {
this.geneLengthData = {
chart_id: "histo_gene_length",
data: response.data.results.counts,
labels: response.data.results.labels,
label: "Number of genes",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment