todas las gráficas

components/admin/Graficas.vue

@@ -80,26 +80,33 @@
 
     <Diario :labels="fechas" :data="data" />
 
-    <TotalBarra
+    <BarraTipoCarrito
       :data="data"
       :labels="instituciones"
       :tiposCarrito="tiposCarrito"
     />
 
-    <PestamosTipoEquipo
+    <PieTipoCarrito :data="data" :labels="tiposCarrito" />
+
+    <BarraTipoUsuario
       :data="data"
-      :labels="tiposCarrito"
+      :labels="instituciones"
+      :tiposUsuario="tiposUsuario"
     />
+
+    <PieTipoUsuario :data="data" :labels="tiposUsuario" />
   </div>
 </template>
 
 <script>
 import axios from 'axios'
 import moment from 'moment'
+import BarraTipoCarrito from '@/components/admin/graficas/BarraTipoCarrito'
+import BarraTipoUsuario from '@/components/admin/graficas/BarraTipoUsuario'
 import BotonBuscar from '@/components/botones/BotonBuscar'
 import Diario from '@/components/admin/graficas/Diario'
-import PestamosTipoEquipo from '@/components/admin/graficas/PestamosTipoEquipo'
-import TotalBarra from '@/components/admin/graficas/TotalBarra'
+import PieTipoCarrito from '@/components/admin/graficas/PieTipoCarrito'
+import PieTipoUsuario from '@/components/admin/graficas/PieTipoUsuario'
 import SelectCarrera from '@/components/selects/SelectCarrera'
 import SelectInstitucion from '@/components/selects/SelectInstitucion'
 import SelectModulo from '@/components/selects/SelectModulo'
@@ -109,16 +116,18 @@ import InputFecha from '@/components/inputs/InputFecha'
 
 export default {
   components: {
+    BarraTipoCarrito,
+    BarraTipoUsuario,
     BotonBuscar,
     Diario,
     InputFecha,
-    PestamosTipoEquipo,
+    PieTipoCarrito,
+    PieTipoUsuario,
     SelectCarrera,
     SelectInstitucion,
     SelectModulo,
     SelectTipoCarrito,
     SelectTipoUsuario,
-    TotalBarra,
   },
   props: {
     updateIsLoading: { type: Function, required: false, default: () => {} },
@@ -130,6 +139,7 @@ export default {
       fechas: [],
       instituciones: [],
       tiposCarrito: [],
+      tiposUsuario: [],
       idInstitucion: 0,
       idInstitucionCarrera: 0,
       idModulo: 0,
@@ -173,8 +183,12 @@ export default {
         .then((res) => {
           const prestamos = []
           const i = res.data.map((value) => value.institucion)
-          const tc = res.data.map((value) => value.tipo_carrito)
+          let tc = res.data.map((value) => value.tipo_carrito)
+          let tu = res.data.map((value) => value.tipo_usuario)
 
+          this.tiposUsuario = tu.filter(
+            (value, index, self) => self.indexOf(value) === index
+          )
           this.tiposCarrito = tc.filter(
             (value, index, self) => self.indexOf(value) === index
           )
@@ -188,13 +202,15 @@ export default {
           })
 
           for (let i = 0; i < this.instituciones.length; i++) {
-            const tc = []
             const dias = []
             let m = []
             let modulos = []
             let k = 0
 
+            tc = []
+            tu = []
             for (let j = 0; j < this.tiposCarrito.length; j++) tc.push(0)
+            for (let j = 0; j < this.tiposUsuario.length; j++) tu.push(0)
             if (this.instituciones.length === 1) {
               m = prestamos[i].map((value) => value.modulo)
               modulos = m.filter(
@@ -218,6 +234,11 @@ export default {
                       tc[l]++
                       break
                     }
+                  for (let l = 0; l < this.tiposUsuario.length; l++)
+                    if (this.tiposUsuario[l] === prestamos[i][k].tipo_usuario) {
+                      tu[l]++
+                      break
+                    }
                   p.push(prestamos[i][k])
                 } else break
               if (this.instituciones.length === 1)
@@ -236,6 +257,7 @@ export default {
                 institucion: this.instituciones[i],
                 dias,
                 tiposCarrito: tc,
+                tiposUsuario: tu,
                 modulos: m,
               })
             else
@@ -244,9 +266,10 @@ export default {
                 institucion: this.instituciones[i],
                 dias,
                 tiposCarrito: tc,
+                tiposUsuario: tu,
               })
           }
-          // console.log(this.data)
+          console.log(this.data)
           this.updateIsLoading(false)
         })
         .catch((err) => {

components/admin/graficas/BarraTipoUsuario.vue

@@ -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: () => [] },
+    tiposUsuario: { 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.tiposUsuario.length; i++) {
+        const data = []
+
+        for (let j = 0; j < this.data.length; j++)
+          data.push(this.data[j].tiposUsuario[i])
+        datasets.push({
+          label: this.tiposUsuario[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>

components/admin/graficas/PieTipoUsuario.vue

@@ -0,0 +1,51 @@
+<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>
+      <DoughnutChart :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 backgroundColor = []
+      const data = []
+
+      for (let i = 0; i < this.labels.length; i++) {
+        backgroundColor.push(this.randomRgba())
+        data.push(0)
+      }
+      for (let i = 0; i < this.labels.length; i++)
+        for (let j = 0; j < this.data.length; j++)
+          data[i] += this.data[j].tiposUsuario[i]
+      return {
+        labels: this.labels,
+        datasets: [
+          {
+            label: 'Préstamos',
+            data,
+            backgroundColor,
+          },
+        ],
+      }
+    },
+  },
+}
+</script>

components/layouts/Footer.vue

@@ -10,8 +10,12 @@
         institución.
       </p>
 
-      <div class="columns is-centered">
-        <a href="https://www.sdi.unam.mx/" class="column is-2" target="_blank">
+      <div class="columns is-mobile is-centered">
+        <a
+          href="https://www.sdi.unam.mx/"
+          class="column is-8-mobile is-4-touch is-4-tablet is-2-desktop"
+          target="_blank"
+        >
           <b-image :src="require('@/assets/logo_sdi.png')" alt="logo_sdi" />
         </a>
       </div>