added new polarGrafic

2026-03-26 09:51:36 -05:00
parent 1de6761d03
commit dc75a7b1a7
10 changed files with 168 additions and 100 deletions
@@ -12,6 +12,7 @@
        "@zxing/browser": "^0.1.5",
        "@zxing/library": "^0.21.3",
        "axios": "^1.13.2",
+        "chart.js": "^4.5.1",
        "js-cookie": "^3.0.5",
        "jwt-decode": "^4.0.0",
        "leaflet": "^1.9.4",
@@ -1178,6 +1179,12 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
    "node_modules/@napi-rs/wasm-runtime": {
      "version": "0.2.12",
      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -1387,7 +1394,6 @@
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
-      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
@@ -1427,7 +1433,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1448,7 +1453,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1469,7 +1473,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1490,7 +1493,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1511,7 +1513,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1532,7 +1533,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1553,7 +1553,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1574,7 +1573,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1595,7 +1593,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1616,7 +1613,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1637,7 +1633,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1658,7 +1653,6 @@
      "cpu": [
        "ia32"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1679,7 +1673,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -2893,7 +2886,7 @@
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "fill-range": "^7.1.1"
@@ -3031,6 +3024,18 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
    "node_modules/chokidar": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -3406,7 +3411,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-      "dev": true,
      "license": "Apache-2.0",
      "optional": true,
      "bin": {
@@ -4189,7 +4193,7 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "to-regex-range": "^5.0.1"
@@ -4874,7 +4878,7 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -4920,7 +4924,7 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "is-extglob": "^2.1.1"
@@ -4959,7 +4963,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.12.0"
@@ -5399,7 +5403,7 @@
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "braces": "^3.0.3",
@@ -5557,7 +5561,6 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "dev": true,
      "license": "MIT",
      "optional": true
    },
@@ -5833,7 +5836,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=8.6"
@@ -6834,7 +6837,7 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "is-number": "^7.0.0"
@@ -13,6 +13,7 @@
    "@zxing/browser": "^0.1.5",
    "@zxing/library": "^0.21.3",
    "axios": "^1.13.2",
+    "chart.js": "^4.5.1",
    "js-cookie": "^3.0.5",
    "jwt-decode": "^4.0.0",
    "leaflet": "^1.9.4",
@@ -38,4 +39,4 @@
    "sass": "^1.94.0",
    "typescript": "^5"
  }
-}
+}
@@ -10,33 +10,31 @@ interface Props {
  count?: boolean;
 }

-export default function DownloadTable({ filtros,count }: Props) {
+export default function DownloadTable({ filtros, count }: Props) {
  const [loading, setLoading] = useState(false);

  const handleDownload = async () => {
-    if(!filtros.length){return}
+    if (!filtros) { return }
    setLoading(true);

-    const token = Cookies.get("token");
-
    try {
-      const endpoint = count
-  ? "/equipos/excel/tabla/count"
-  : "/equipos/excel/tabla";
+      const token = Cookies.get("token");
+      const headers = { Authorization: `Bearer ${token}` };

+      const endpoint = count
+        ? "/equipos/excel/tabla/count"
+        : "/equipos/excel/tabla";

      const response = await axios.post(
        `${process.env.NEXT_PUBLIC_API_URL}${endpoint}`,
        filtros,
        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
+          headers,
          responseType: "blob",
        }
      );
      const url = window.URL.createObjectURL(new Blob([response.data]));
-
+      console.log(url)
      const a = document.createElement("a");
      a.href = url;
      a.download = "reporte.xlsx";
@@ -1,57 +0,0 @@
-"use client";
-
-import styles from "./style.module.css";
-import Cookies from "js-cookie";
-import { useState } from "react";
-
-export default function DownloadTableCount() {
-  const [loading, setLoading] = useState(false);
-
-  const handleDownload = async () => {
-    setLoading(true);
-    const token = Cookies.get("token");
-    const headers = { Authorization: `Bearer ${token}` };
-
-    try {
-      const response = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/equipos/excel/tabla/count`,
-        { headers }
-      );
-
-      if (!response.ok) {
-        throw new Error("Error al descargar el archivo");
-      }
-
-      const blob = await response.blob();
-      const url = window.URL.createObjectURL(blob);
-
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = "reporte.xlsx";
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-
-      window.URL.revokeObjectURL(url);
-    } catch (error) {
-      console.error(error);
-      alert("Hubo un problema al descargar el archivo.");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <button
-      className={styles.downloadBtn}
-      onClick={handleDownload}
-      disabled={loading} 
-    >
-      {loading ? (
-        <div className={styles.loader}></div>
-      ) : (
-        <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
-      )}
-    </button>
-  );
-}
@@ -0,0 +1,93 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { Chart } from "chart.js/auto";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+interface Props {
+    tipo: "ALUMNO" | "PROFESOR" | "ADMINISTRATIVO";
+    filtros: any
+}
+
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+export default function Polar({ tipo, filtros }: Props) {
+    const canvasRef = useRef<HTMLCanvasElement | null>(null);
+    const chartRef = useRef<Chart | null>(null);
+
+    useEffect(() => {
+        if (!canvasRef.current) return;
+
+        const fetchData = async () => {
+            const token = Cookies.get("token");
+            const headers = { Authorization: `Bearer ${token}` };
+
+            try {
+                const res = await axios.post(
+                    `${api_url}/equipos/graficaPolar/${tipo}`, filtros, { headers }
+                );
+
+                const apiData = res.data;
+
+                // Orden fijo
+                const labels = [
+                    "Menor a 2 años",
+                    "Entre 2 y 3 años",
+                    "Entre 4 y 5 años",
+                    "Mayor a 6 años",
+                ];
+
+                // Mapear datos
+                const data = labels.map((label) => {
+                    const found = apiData.find(
+                        (item: any) => item.antiguedad === label
+                    );
+                    return found ? Number(found.total) : 0;
+                });
+
+                // Destruir gráfica previa (importante en React)
+                if (chartRef.current) {
+                    chartRef.current.destroy();
+                }
+
+                // Crear gráfica
+                chartRef.current = new Chart(canvasRef.current!, {
+                    type: "polarArea",
+                    data: {
+                        labels,
+                        datasets: [
+                            {
+                                data,
+                                borderWidth: 1,
+                                backgroundColor: [
+                                    "rgb(255, 99, 132)",
+                                    "rgb(54, 162, 235)",
+                                    "rgb(255, 206, 86)",
+                                    "rgb(75, 192, 192)",
+                                ],
+                            },
+                        ],
+                    },
+                });
+            } catch (error) {
+                console.error("Error al obtener datos:", error);
+            }
+        };
+
+        fetchData();
+
+        return () => {
+            if (chartRef.current) {
+                chartRef.current.destroy();
+            }
+        };
+    }, [filtros]);
+
+    return (
+        <div>
+            <h4>{tipo}</h4>
+            <canvas ref={canvasRef} height={200} width={350}></canvas>
+        </div>
+    );
+}
@@ -3,6 +3,7 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import Cookies from "js-cookie";

 interface Props {
    filtros: any
@@ -29,8 +30,12 @@ export default function Procesador({ filtros }: Props) {
    const [data, setData] = useState<procesador[]>([])

    useEffect(() => {
+        const token = Cookies.get("token");
+        const headers = { Authorization: `Bearer ${token}` };
+
        const getAntiguedad = async () => {
-            const response = await axios.post(`${api_url}/equipos/grafica/procesador`, filtros)
+            const response = await axios.post(`${api_url}/equipos/grafica/procesador`, filtros, { headers }
+            )

            setData(response.data)
        }
@@ -78,7 +83,7 @@ export default function Procesador({ filtros }: Props) {
                    <YAxis />
                    <Tooltip
                        formatter={(value) => [`${value}`]}
-                    />     
+                    />
                    <Legend />
                    {tieneAdscripciones ? (

@@ -3,6 +3,7 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import Cookies from "js-cookie";

 interface Props {
    filtros: any
@@ -29,8 +30,11 @@ export default function SistemaOperativo({ filtros }: Props) {
    const [data, setData] = useState<so[]>([])

    useEffect(() => {
+        const token = Cookies.get("token");
+        const headers = { Authorization: `Bearer ${token}` };
        const getAntiguedad = async () => {
-            const response = await axios.post(`${api_url}/equipos/grafica/so`, filtros)
+            const response = await axios.post(`${api_url}/equipos/grafica/so`, filtros, { headers }
+            )

            setData(response.data)
        }
@@ -77,7 +81,7 @@ export default function SistemaOperativo({ filtros }: Props) {
                    <YAxis />
                    <Tooltip
                        formatter={(value) => [`${value}`]}
-                    />                         
+                    />
                    <Legend />
                    {tieneAdscripciones ? (

@@ -3,6 +3,7 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import Cookies from "js-cookie";

 interface Props {
    filtros: any
@@ -29,9 +30,13 @@ export default function Uso({ filtros }: Props) {
    const [data, setData] = useState<UsoData[]>([])

    useEffect(() => {
+        const token = Cookies.get("token");
+        const headers = { Authorization: `Bearer ${token}` };
+        
        const getUso = async () => {
            const response = await axios.post(
-                `${api_url}/equipos/grafica/uso`, filtros
+                `${api_url}/equipos/grafica/uso`, filtros,
+                { headers }
            )
            setData(response.data)
        }
@@ -79,7 +84,7 @@ export default function Uso({ filtros }: Props) {
                    <YAxis />
                    <Tooltip
                        formatter={(value) => [`${value}`]}
-                    />                    
+                    />
                    <Legend />
                    {tieneAdscripciones ? (

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import styles from './TableAntiguedad.module.css'
 import axios from 'axios'
 import DownloadTable from '@/components/Dowload/tabla'
+import Cookies from "js-cookie";

 interface Props {
  filtros: any
@@ -17,12 +18,17 @@ export default function TableAntiguedad({ filtros, count }: Props) {
  const [data, setData] = useState<any[]>([])

  useEffect(() => {
+    if (!filtros) { return }
+
    const getUso = async () => {
+      const token = Cookies.get("token");
+      const headers = { Authorization: `Bearer ${token}` };
+
      const endpoint = count
        ? `${api_url}/equipos/tabla/count`
        : `${api_url}/equipos/tabla`

-      const response = await axios.post(endpoint, filtros)
+      const response = await axios.post(endpoint, filtros,{headers})
      setData(response.data)
    }

@@ -12,6 +12,7 @@ import Uso from "./Graficas/Uso"

 import Cookies from "js-cookie";
 import TableAntiguedad from "./Tablas/Antiguedad"
+import Polar from "./Graficas/Polar"
 const api_url = process.env.NEXT_PUBLIC_API_URL;

 type AdscripcionOption = {
@@ -160,6 +161,7 @@ export default function Reporte() {
                        <label className={styles.adscripcion}>Adscripción</label>

                        <Select
+                            instanceId="adscripcion"
                            options={adscripciones}
                            getOptionLabel={(o) => o.adscripcion}
                            getOptionValue={(o) => o.id_adscripcion}
@@ -197,6 +199,7 @@ export default function Reporte() {
                        <label className={styles.adscripcion}>Procesador</label>

                        <Select
+                            instanceId="procesadores"
                            options={procesadores}
                            getOptionLabel={(o) => o.procesador}
                            getOptionValue={(o) => o.id_procesador}
@@ -237,6 +240,7 @@ export default function Reporte() {
                        <label className={styles.adscripcion}>Sistema Operativo</label>

                        <Select
+                            instanceId="sistemasOperativos"
                            options={sistemasOperativos}
                            getOptionLabel={(o) => o.sistema_operativo}
                            getOptionValue={(o) => o.id_sistema_operativo}
@@ -278,6 +282,7 @@ export default function Reporte() {
                        <label className={styles.adscripcion}>Uso</label>

                        <Select
+                            instanceId="usos"
                            options={usos}
                            getOptionLabel={(o) => o.tipo_uso}
                            getOptionValue={(o) => o.id_uso}
@@ -317,6 +322,7 @@ export default function Reporte() {
                        <label className={styles.adscripcion}>Antiguedad</label>

                        <Select
+                            instanceId="antiguedad"
                            options={antiguedad}
                            getOptionLabel={(o) => o.antiguedad}
                            getOptionValue={(o) => o.antiguedad}
@@ -373,6 +379,10 @@ export default function Reporte() {
                    filtros={filtros}
                />

+                <Polar tipo="ALUMNO" filtros={filtros} />
+                <Polar tipo="PROFESOR" filtros={filtros} />
+                <Polar tipo="ADMINISTRATIVO" filtros={filtros} />
+
                <Procesador
                    filtros={filtros}
                />