otra gráfica

components/admin/Graficas.vue

@@ -85,6 +85,11 @@
       :labels="instituciones"
       :tiposCarrito="tiposCarrito"
     />
+
+    <PestamosTipoEquipo
+      :data="data"
+      :labels="tiposCarrito"
+    />
   </div>
 </template>
 
@@ -93,6 +98,7 @@ import axios from 'axios'
 import moment from 'moment'
 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 SelectCarrera from '@/components/selects/SelectCarrera'
 import SelectInstitucion from '@/components/selects/SelectInstitucion'
@@ -106,6 +112,7 @@ export default {
     BotonBuscar,
     Diario,
     InputFecha,
+    PestamosTipoEquipo,
     SelectCarrera,
     SelectInstitucion,
     SelectModulo,

components/admin/graficas/PestamosTipoEquipo.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].tiposCarrito[i]
+      return {
+        labels: this.labels,
+        datasets: [
+          {
+            label: 'Préstamos',
+            data,
+            backgroundColor,
+          },
+        ],
+      }
+    },
+  },
+}
+</script>

plugins/chart.js

@@ -1,5 +1,29 @@
 import Vue from 'vue'
-import { Bar, Line } from 'vue-chartjs'
+import { Bar, Doughnut, Line } from 'vue-chartjs'
+
+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)
+  },
+})
 
 Vue.component('LineChart', {
   extends: Line,
@@ -25,8 +49,8 @@ Vue.component('LineChart', {
   },
 })
 
-Vue.component('BarChart', {
+Vue.component('DoughnutChart', {
-  extends: Bar,
+  extends: Doughnut,
   props: {
     data: { type: Object, required: true },
     options: {