otra gráfica
This commit is contained in:
lemuel
parent
b8e873edb1
commit
397ef29299
@ -78,7 +78,13 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Diario :labels="labels" :data="data" />
|
||||
<Diario :labels="fechas" :data="data" />
|
||||
|
||||
<TotalBarra
|
||||
:data="data"
|
||||
:labels="instituciones"
|
||||
:tiposCarrito="tiposCarrito"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -86,24 +92,26 @@
|
||||
import axios from 'axios'
|
||||
import moment from 'moment'
|
||||
import BotonBuscar from '@/components/botones/BotonBuscar'
|
||||
import Diario from '@/components/admin/graficas/Diario'
|
||||
import TotalBarra from '@/components/admin/graficas/TotalBarra'
|
||||
import SelectCarrera from '@/components/selects/SelectCarrera'
|
||||
import SelectInstitucion from '@/components/selects/SelectInstitucion'
|
||||
import SelectModulo from '@/components/selects/SelectModulo'
|
||||
import SelectTipoCarrito from '@/components/selects/SelectTipoCarrito'
|
||||
import SelectTipoUsuario from '@/components/selects/SelectTipoUsuario'
|
||||
import Diario from '@/components/admin/graficas/Diario'
|
||||
import InputFecha from '@/components/inputs/InputFecha'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BotonBuscar,
|
||||
Diario,
|
||||
InputFecha,
|
||||
SelectCarrera,
|
||||
SelectInstitucion,
|
||||
SelectModulo,
|
||||
SelectTipoCarrito,
|
||||
SelectTipoUsuario,
|
||||
Diario,
|
||||
InputFecha,
|
||||
TotalBarra,
|
||||
},
|
||||
props: {
|
||||
updateIsLoading: { type: Function, required: false, default: () => {} },
|
||||
@ -112,7 +120,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
labels: [],
|
||||
fechas: [],
|
||||
instituciones: [],
|
||||
tiposCarrito: [],
|
||||
idInstitucion: 0,
|
||||
idInstitucionCarrera: 0,
|
||||
idModulo: 0,
|
||||
@ -129,9 +139,9 @@ export default {
|
||||
let fechaInicio = moment(this.fechaInicio)
|
||||
|
||||
this.updateIsLoading(true)
|
||||
this.labels = []
|
||||
this.fechas = []
|
||||
while (fechaInicio.dayOfYear() <= moment(this.fechaFin).dayOfYear()) {
|
||||
this.labels.push(fechaInicio.format('YYYY-MM-DD'))
|
||||
this.fechas.push(fechaInicio.format('YYYY-MM-DD'))
|
||||
fechaInicio.add(1, 'd')
|
||||
}
|
||||
if (this.admin.institucion)
|
||||
@ -155,12 +165,13 @@ export default {
|
||||
)
|
||||
.then((res) => {
|
||||
const prestamos = []
|
||||
const i = res.data.map((value) => value.institucion)
|
||||
const tc = res.data.map((value) => value.tipo_carrito)
|
||||
const tipoCarrito = tc.filter(
|
||||
|
||||
this.tiposCarrito = tc.filter(
|
||||
(value, index, self) => self.indexOf(value) === index
|
||||
)
|
||||
const i = res.data.map((value) => value.institucion)
|
||||
const instituciones = i.filter((value, index, self) => {
|
||||
this.instituciones = i.filter((value, index, self) => {
|
||||
if (self.indexOf(value) === index) {
|
||||
prestamos.push([res.data[index]])
|
||||
return true
|
||||
@ -169,15 +180,15 @@ export default {
|
||||
return false
|
||||
})
|
||||
|
||||
console.log(tipoCarrito)
|
||||
|
||||
for (let i = 0; i < instituciones.length; i++) {
|
||||
for (let i = 0; i < this.instituciones.length; i++) {
|
||||
const tc = []
|
||||
const dias = []
|
||||
let m = []
|
||||
let modulos = []
|
||||
let k = 0
|
||||
|
||||
if (instituciones.length === 1) {
|
||||
for (let j = 0; j < this.tiposCarrito.length; j++) tc.push(0)
|
||||
if (this.instituciones.length === 1) {
|
||||
m = prestamos[i].map((value) => value.modulo)
|
||||
modulos = m.filter(
|
||||
(value, index, self) => self.indexOf(value) === index
|
||||
@ -186,44 +197,49 @@ export default {
|
||||
for (let j = 0; j < modulos.length; j++)
|
||||
m.push({ modulo: modulos[j], dias: [] })
|
||||
}
|
||||
for (let j = 0; j < this.labels.length; j++) {
|
||||
const fecha = moment(this.labels[j])
|
||||
for (let j = 0; j < this.fechas.length; j++) {
|
||||
const fecha = moment(this.fechas[j])
|
||||
const p = []
|
||||
|
||||
for (; k < prestamos[i].length; k++) {
|
||||
for (; k < prestamos[i].length; k++)
|
||||
if (
|
||||
moment(prestamos[i][k].fecha_inicio).dayOfYear() ===
|
||||
fecha.dayOfYear()
|
||||
) {
|
||||
for (let l = 0; l < this.tiposCarrito.length; l++)
|
||||
if (this.tiposCarrito[l] === prestamos[i][k].tipo_carrito) {
|
||||
tc[l]++
|
||||
break
|
||||
}
|
||||
p.push(prestamos[i][k])
|
||||
} else break
|
||||
}
|
||||
if (instituciones.length === 1) {
|
||||
if (this.instituciones.length === 1)
|
||||
for (let k = 0; k < modulos.length; k++) {
|
||||
const pm = []
|
||||
|
||||
for (let l = 0; l < p.length; l++)
|
||||
if (modulos[k] === p[l].modulo) pm.push(p[l])
|
||||
m[k].dias.push({ dia: this.labels[j], prestamos: pm })
|
||||
m[k].dias.push({ dia: this.fechas[j], prestamos: pm })
|
||||
}
|
||||
}
|
||||
dias.push({ dia: this.labels[j], prestamos: p })
|
||||
dias.push({ dia: this.fechas[j], prestamos: p })
|
||||
}
|
||||
if (instituciones.length === 1)
|
||||
if (this.instituciones.length === 1)
|
||||
this.data.push({
|
||||
prestamos: prestamos[i].length,
|
||||
institucion: instituciones[i],
|
||||
institucion: this.instituciones[i],
|
||||
dias,
|
||||
tiposCarrito: tc,
|
||||
modulos: m,
|
||||
})
|
||||
else
|
||||
this.data.push({
|
||||
prestamos: prestamos[i].length,
|
||||
institucion: instituciones[i],
|
||||
institucion: this.instituciones[i],
|
||||
dias,
|
||||
tiposCarrito: tc,
|
||||
})
|
||||
}
|
||||
console.log(this.data)
|
||||
// console.log(this.data)
|
||||
this.updateIsLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="p-2 border border-gray-500 mt-4">
|
||||
<label class="block mb-2 font-bold"> Coba Chart </label>
|
||||
<label class="block mb-2 font-bold">Comportamiento diario</label>
|
||||
|
||||
<client-only>
|
||||
<LineChart :data="chartData" />
|
||||
@ -46,7 +46,7 @@ export default {
|
||||
borderWidth: 2,
|
||||
})
|
||||
}
|
||||
if (this.data.length === 1) {
|
||||
if (this.data.length === 1)
|
||||
for (let i = 0; i < this.data[0].modulos.length; i++) {
|
||||
const data = []
|
||||
|
||||
@ -60,7 +60,6 @@ export default {
|
||||
borderWidth: 2,
|
||||
})
|
||||
}
|
||||
}
|
||||
if (this.data.length > 1)
|
||||
datasets.push({
|
||||
label: 'Total',
|
||||
|
||||
57
components/admin/graficas/TotalBarra.vue
Normal file
57
components/admin/graficas/TotalBarra.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="p-2 border border-gray-500 mt-4">
|
||||
<label class="block mb-2 font-bold">Préstamos por tipo de carrito</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: () => [] },
|
||||
tiposCarrito: { 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 datasets = []
|
||||
const final = []
|
||||
|
||||
for (let i = 0; i < this.tiposCarrito.length; i++) {
|
||||
const data = []
|
||||
|
||||
for (let j = 0; j < this.data.length; j++)
|
||||
data.push(this.data[j].tiposCarrito[i])
|
||||
datasets.push({
|
||||
label: this.tiposCarrito[i],
|
||||
data,
|
||||
backgroundColor: this.randomRgba(),
|
||||
})
|
||||
}
|
||||
for (let i = 0; i < this.data.length; i++)
|
||||
final.push(this.data[i].prestamos)
|
||||
datasets.push({
|
||||
label: 'Total',
|
||||
data: final,
|
||||
backgroundColor: this.randomRgba(),
|
||||
})
|
||||
return {
|
||||
labels: this.labels,
|
||||
datasets,
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import { Line } from 'vue-chartjs'
|
||||
import { Bar, Line } from 'vue-chartjs'
|
||||
|
||||
Vue.component('LineChart', {
|
||||
extends: Line,
|
||||
@ -24,3 +24,27 @@ Vue.component('LineChart', {
|
||||
this.renderChart(this.data, this.options)
|
||||
},
|
||||
})
|
||||
|
||||
Vue.component('BarChart', {
|
||||
extends: Bar,
|
||||
props: {
|
||||
data: { type: Object, required: true },
|
||||
options: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: { display: true },
|
||||
}),
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
this.renderChart(this.data, this.options)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart(this.data, this.options)
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user