67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
<template>
|
|
<div class="p-2 border border-gray-500 mt-4">
|
|
<label class="block mb-2 font-bold">Módulos desactivados</label>
|
|
|
|
<client-only>
|
|
<BarChart :data="chartData" />
|
|
</client-only>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
data: { type: Array, required: true, default: () => [] },
|
|
labels: { type: Array, required: true, default: () => [] },
|
|
},
|
|
methods: {
|
|
randomRgba() {
|
|
let o = Math.round,
|
|
r = Math.random,
|
|
s = 255
|
|
|
|
return `rgba(${o(r() * s)}, ${o(r() * s)}, ${o(r() * s)}, 1)`
|
|
},
|
|
},
|
|
computed: {
|
|
chartData() {
|
|
const labels = [...this.labels]
|
|
const datasets = []
|
|
const dataDesactivacion = []
|
|
const dataAlumnosPrestamo = []
|
|
let sumDesactivacion = 0
|
|
let sumAlumnos = 0
|
|
|
|
for (let i = 0; i < this.labels.length; i++) {
|
|
let alumnos = 0
|
|
|
|
dataDesactivacion.push(this.data[i].motivos.length)
|
|
for (let j = 0; j < this.data[i].motivos.length; j++)
|
|
alumnos += this.data[i].motivos[j].numero_alumnos
|
|
dataAlumnosPrestamo.push(alumnos)
|
|
if (this.labels.length > 1) {
|
|
sumDesactivacion += this.data[i].motivos.length
|
|
sumAlumnos += alumnos
|
|
}
|
|
}
|
|
if (this.labels.length > 1) {
|
|
labels.push('Final')
|
|
dataDesactivacion.push(sumDesactivacion)
|
|
dataAlumnosPrestamo.push(sumAlumnos)
|
|
}
|
|
datasets.push({
|
|
label: 'Módulos desactivados',
|
|
data: dataDesactivacion,
|
|
backgroundColor: this.randomRgba(),
|
|
})
|
|
datasets.push({
|
|
label: 'Alumnos',
|
|
data: dataAlumnosPrestamo,
|
|
backgroundColor: this.randomRgba(),
|
|
})
|
|
return { labels, datasets }
|
|
},
|
|
},
|
|
}
|
|
</script>
|