CIDWA/front-Censo
13
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

added new polarGrafic

Browse Source
This commit is contained in:
Lino
2026-03-26 09:51:36 -05:00
parent 1de6761d03
commit dc75a7b1a7
10 changed files with 168 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dowload/tabla.tsx
+9 -11
View File
@@ -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";
src/components/Dowload/tablaCount.tsx
-57
View File
@@ -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>
);
}
src/components/reporteGraficas/Graficas/Polar.tsx
+93
View File
@@ -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>
);
}
src/components/reporteGraficas/Graficas/Procesador.tsx
+7 -2
View File
@@ -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 ? (
src/components/reporteGraficas/Graficas/SistemaOperativo.tsx
+6 -2
View File
@@ -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 ? (
src/components/reporteGraficas/Graficas/Uso.tsx
+7 -2
View File
@@ -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 ? (
src/components/reporteGraficas/Tablas/Antiguedad.tsx
+7 -1
View File
@@ -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)
}
src/components/reporteGraficas/reporte.tsx
+10
View File
@@ -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}
/>