From dc75a7b1a7693fca95d8c4dac1c470b9a561d508 Mon Sep 17 00:00:00 2001 From: IO <320154041@pcpuma.acatlan.unam.mx> Date: Thu, 26 Mar 2026 09:51:36 -0500 Subject: [PATCH] added new polarGrafic --- package-lock.json | 51 +++++----- package.json | 3 +- src/components/Dowload/tabla.tsx | 20 ++-- src/components/Dowload/tablaCount.tsx | 57 ------------ .../reporteGraficas/Graficas/Polar.tsx | 93 +++++++++++++++++++ .../reporteGraficas/Graficas/Procesador.tsx | 9 +- .../Graficas/SistemaOperativo.tsx | 8 +- .../reporteGraficas/Graficas/Uso.tsx | 9 +- .../reporteGraficas/Tablas/Antiguedad.tsx | 8 +- src/components/reporteGraficas/reporte.tsx | 10 ++ 10 files changed, 168 insertions(+), 100 deletions(-) delete mode 100644 src/components/Dowload/tablaCount.tsx create mode 100644 src/components/reporteGraficas/Graficas/Polar.tsx diff --git a/package-lock.json b/package-lock.json index a378a00..c2a700f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" diff --git a/package.json b/package.json index fe66555..5d1db99 100644 --- a/package.json +++ b/package.json @@ -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" } -} \ No newline at end of file +} diff --git a/src/components/Dowload/tabla.tsx b/src/components/Dowload/tabla.tsx index 1fa9d35..e99c547 100644 --- a/src/components/Dowload/tabla.tsx +++ b/src/components/Dowload/tabla.tsx @@ -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"; diff --git a/src/components/Dowload/tablaCount.tsx b/src/components/Dowload/tablaCount.tsx deleted file mode 100644 index 0ef99e0..0000000 --- a/src/components/Dowload/tablaCount.tsx +++ /dev/null @@ -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 ( - - ); -} diff --git a/src/components/reporteGraficas/Graficas/Polar.tsx b/src/components/reporteGraficas/Graficas/Polar.tsx new file mode 100644 index 0000000..14fd3bb --- /dev/null +++ b/src/components/reporteGraficas/Graficas/Polar.tsx @@ -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(null); + const chartRef = useRef(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 ( +
+

{tipo}

+ +
+ ); +} \ No newline at end of file diff --git a/src/components/reporteGraficas/Graficas/Procesador.tsx b/src/components/reporteGraficas/Graficas/Procesador.tsx index b2fda99..3a819bb 100644 --- a/src/components/reporteGraficas/Graficas/Procesador.tsx +++ b/src/components/reporteGraficas/Graficas/Procesador.tsx @@ -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([]) 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) { [`${value}`]} - /> + /> {tieneAdscripciones ? ( diff --git a/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx b/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx index 9daf651..31d97d0 100644 --- a/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx +++ b/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx @@ -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([]) 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) { [`${value}`]} - /> + /> {tieneAdscripciones ? ( diff --git a/src/components/reporteGraficas/Graficas/Uso.tsx b/src/components/reporteGraficas/Graficas/Uso.tsx index 5075906..d4284ea 100644 --- a/src/components/reporteGraficas/Graficas/Uso.tsx +++ b/src/components/reporteGraficas/Graficas/Uso.tsx @@ -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([]) 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) { [`${value}`]} - /> + /> {tieneAdscripciones ? ( diff --git a/src/components/reporteGraficas/Tablas/Antiguedad.tsx b/src/components/reporteGraficas/Tablas/Antiguedad.tsx index 5e97454..8b6b750 100644 --- a/src/components/reporteGraficas/Tablas/Antiguedad.tsx +++ b/src/components/reporteGraficas/Tablas/Antiguedad.tsx @@ -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([]) 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) } diff --git a/src/components/reporteGraficas/reporte.tsx b/src/components/reporteGraficas/reporte.tsx index 3f723ff..b516ce9 100644 --- a/src/components/reporteGraficas/reporte.tsx +++ b/src/components/reporteGraficas/reporte.tsx @@ -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() { o.procesador} getOptionValue={(o) => o.id_procesador} @@ -237,6 +240,7 @@ export default function Reporte() { o.tipo_uso} getOptionValue={(o) => o.id_uso} @@ -317,6 +322,7 @@ export default function Reporte() {