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

Improve components with props ID and loading icon

parent da2a9bc0
Pipeline #19264 passed with stages
in 2 minutes and 11 seconds
<template> <template>
<v-card class="pa-2"> <v-card class="pa-2">
<div class="card-body"> <div class="card-body">
<div> <div class="text-xs-center" v-if="noGraph">
<canvas :id="chartId"></canvas>
</div>
<!-- <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>
<div>
<canvas :id="chartId"></canvas>
</div>
<v-layout <v-layout
align-center justify-space-around
wrap row
> >
<v-switch <v-flex sm3>
v-model="displayLegend" <v-switch
label="Display legend"> v-model="hideLegend"
</v-switch> label="Hide legend">
<v-flex xs12 sm6> </v-switch>
</v-flex>
<v-flex sm8>
<v-select <v-select
v-model="hideLabels" v-model="hideLabels"
:items="this.labels" :items="this.labels"
...@@ -26,6 +28,7 @@ ...@@ -26,6 +28,7 @@
chips chips
:label="hideLabelsLabel" :label="hideLabelsLabel"
multiple multiple
clearable
></v-select> ></v-select>
</v-flex> </v-flex>
</v-layout> </v-layout>
...@@ -42,23 +45,28 @@ export default { ...@@ -42,23 +45,28 @@ export default {
type: Object, type: Object,
required: true, required: true,
}, },
chartId: String,
}, },
data() { data() {
return { return {
myChart: {}, myChart: {},
options: {}, options: {},
colors: [], colors: [],
chartId: "myChart", hideLegend: false,
displayLegend: true,
labels: [], labels: [],
hideLabels: [], hideLabels: [],
noGraph: true,
} }
}, },
watch: { watch: {
doughnutData(val) { doughnutData(val) {
if (this.noGraph) {
this.noGraph = false;
this.createChart();
}
this.updateChart(); this.updateChart();
}, },
displayLegend(val) { hideLegend(val) {
this.updateChartOptions(); this.updateChartOptions();
}, },
hideLabels() { hideLabels() {
...@@ -73,21 +81,18 @@ export default { ...@@ -73,21 +81,18 @@ export default {
return "Hide " + this.doughnutData.level; return "Hide " + this.doughnutData.level;
} }
}, },
}, displayLegend() {
mounted() { return !this.hideLegend;
this.createChart(this.chartId); }
}, },
methods: { methods: {
createChart(chartId) { createChart() {
const ctx = document.getElementById(chartId); const ctx = document.getElementById(this.chartId);
this.myChart = new Chart(ctx, { this.myChart = new Chart(ctx, {
data: this.data,
type: 'doughnut', type: 'doughnut',
options: this.options,
}); });
}, },
updateChart() { updateChart() {
this.dataDict = this.doughnutData.data;
this.labels = Object.keys(this.doughnutData.data); this.labels = Object.keys(this.doughnutData.data);
this.generateColorList(); this.generateColorList();
this.updateChartOptions(); this.updateChartOptions();
...@@ -117,7 +122,7 @@ export default { ...@@ -117,7 +122,7 @@ export default {
this.myChart.update(); this.myChart.update();
}, },
updateChartData() { updateChartData() {
const dataDict = Object.assign({}, this.dataDict); const dataDict = Object.assign({}, this.doughnutData.data);
for (let i=0; i < this.hideLabels.length; i++) { for (let i=0; i < this.hideLabels.length; i++) {
delete dataDict[this.hideLabels[i]]; delete dataDict[this.hideLabels[i]];
}; };
...@@ -131,7 +136,7 @@ export default { ...@@ -131,7 +136,7 @@ export default {
], ],
}; };
this.myChart.update(); this.myChart.update();
} },
}, },
}; };
</script> </script>
<template> <template>
<v-card class="pa-2"> <v-card class="pa-2">
<div class="card-body"> <div class="card-body">
<div v-if="histoData.data"> <div class="text-xs-center" v-if="noGraph">
<canvas :id="histoData.chart_id"></canvas>
</div>
<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>
<div>
<canvas :id="chartId"></canvas>
</div>
</div> </div>
</v-card> </v-card>
</template> </template>
...@@ -23,14 +23,36 @@ export default { ...@@ -23,14 +23,36 @@ export default {
type: Object, type: Object,
required: true, required: true,
}, },
chartId: String,
}, },
updated() { data() {
this.createChart(this.histoData.chart_id); return {
myChart: {},
options: {},
noGraph: true,
}
},
watch: {
histoData(val) {
if (this.noGraph) {
this.noGraph = false;
this.createChart();
}
this.updateChart();
},
}, },
methods: { methods: {
createChart(chartId) { createChart() {
const ctx = document.getElementById(chartId); const ctx = document.getElementById(this.chartId);
const data = { this.myChart = new Chart(ctx, {
type: 'bar',
});
},
updateChart() {
this.updateChartData();
},
updateChartData() {
this.myChart.data = {
labels: this.histoData.labels, labels: this.histoData.labels,
datasets: [ datasets: [
{ {
...@@ -41,11 +63,7 @@ export default { ...@@ -41,11 +63,7 @@ export default {
}, },
], ],
}; };
// eslint-disable-next-line this.myChart.update();
const myChart = new Chart(ctx, {
type: 'bar',
data: data,
});
}, },
}, },
}; };
......
...@@ -51,8 +51,9 @@ ...@@ -51,8 +51,9 @@
></v-select> ></v-select>
</v-flex> </v-flex>
</v-toolbar> </v-toolbar>
<histogram :histoData="geneLengthData"></histogram> <histogram :histoData="geneLengthData" chartId="histo_gene_length"></histogram>
</v-flex> </v-flex>
<!-- Doughnut -->
<v-flex xs12 md6 xl4> <v-flex xs12 md6 xl4>
<v-toolbar <v-toolbar
class="secondary" class="secondary"
...@@ -71,7 +72,7 @@ ...@@ -71,7 +72,7 @@
></v-select> ></v-select>
</v-flex> </v-flex>
</v-toolbar> </v-toolbar>
<doughnut :doughnutData="taxoCounts"></doughnut> <doughnut :doughnutData="taxoCounts" chartId="taxo_annotation"></doughnut>
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
...@@ -135,7 +136,6 @@ export default { ...@@ -135,7 +136,6 @@ export default {
}) })
.then((response) => { .then((response) => {
this.geneLengthData = { this.geneLengthData = {
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,
label: "Number of genes", label: "Number of genes",
......
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