IO/front-Censo
2
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

modified grafigs

Browse Source
This commit is contained in:
Lino
2026-03-13 18:49:55 -05:00
parent e698a54dc2
commit 685d513838
5 changed files with 214 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/reporteGraficas/Graficas/Antiguedad.tsx
+61 -23
View File
@@ -2,39 +2,77 @@
import axios from "axios";
import { useEffect, useState } from "react";
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import {
Bar,
BarChart,
CartesianGrid,
Legend,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis
} from "recharts";
interface antiguedad {
antiguedad: string;
total: number;
type AdscripcionOption = {
id_adscripcion: string
adscripcion: string
}
export default function Antiguedad() {
const [antiguedad, setAntiguedad] = useState<antiguedad[]>([
{ antiguedad: "0", total: 0 }
])
useEffect(() => {
const getAntiguedad = async () => {
const response = await axios.get("http://localhost:3001/equipos/grafica/antiguedad")
interface Props {
filtros: any
}
interface AntiguedadData {
adscripcion: string
antiguedad: string
total: number
}
export default function Antiguedad({ filtros }: Props) {
const [data, setData] = useState<AntiguedadData[]>([])
useEffect(() => {
const getAntiguedad = async () => {
const response = await axios.post(
"http://localhost:3001/equipos/grafica/antiguedad",
filtros
)
setData(response.data)
setAntiguedad(response.data)
}
getAntiguedad()
}, [])
}, [filtros])
return (
<div style={{ minWidth: "570px", background:"white", borderRadius:"10px", margin:"5px auto", padding:"1rem", maxWidth:"100%"}}>
<h1 style={{margin:"0"}}>Antigüedad</h1>
<ResponsiveContainer width="100%" aspect={2}>
<BarChart data={antiguedad}
width={100}
height={100}
margin={{
top: 20,
}}
<div
style={{
minWidth: "570px",
background: "white",
borderRadius: "10px",
margin: "5px auto",
padding: "1rem",
maxWidth: "100%"
}}
>
<h1 style={{ margin: "0" }}>Antigüedad</h1>
<ResponsiveContainer width="100%" aspect={2.5}>
<BarChart
data={data}
margin={{ top: 20 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="antiguedad" fontSize={12}/>
<XAxis dataKey="antiguedad" fontSize={12} />
<YAxis />
<Tooltip />
<Legend />
src/components/reporteGraficas/Graficas/Procesador.tsx
+27 -12
View File
@@ -4,37 +4,52 @@ import axios from "axios";
import { useEffect, useState } from "react";
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
interface antiguedad {
type AdscripcionOption = {
id_adscripcion: string
adscripcion: string
}
type ProcesadorOption = {
id_procesador: string
procesador: string
}
interface Props {
filtros: any
}
interface procesador {
adscripcion: string
procesador: string;
total: number;
}
export default function Procesador() {
const [antiguedad, setAntiguedad] = useState<antiguedad[]>([])
export default function Procesador({ filtros }: Props) {
const [data, setData] = useState<procesador[]>([])
useEffect(() => {
const getAntiguedad = async () => {
const response = await axios.get("http://localhost:3001/equipos/grafica/procesador")
const response = await axios.post("http://localhost:3001/equipos/grafica/procesador",filtros)
setAntiguedad(response.data)
setData(response.data)
}
getAntiguedad()
}, [])
}, [filtros])
return (
<div style={{width:"100%", background:"white", borderRadius:"10px", margin:"5px auto", padding:"1rem"}}>
<h1 style={{margin:"0"}}>Procesador</h1>
<ResponsiveContainer width="100%" aspect={3} minHeight={270}>
<BarChart data={antiguedad}
<div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
<h1 style={{ margin: "0" }}>Procesador</h1>
<ResponsiveContainer width="100%" aspect={3.5} minHeight={270}>
<BarChart data={data}
width={500}
height={300}
margin={{
top: 20,
bottom:20,
bottom: 20,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="procesador" fontSize={12} angle={40} textAnchor="start" hide/>
<XAxis dataKey="procesador" fontSize={12} angle={40} textAnchor="start" hide />
<YAxis />
<Tooltip />
<Legend />
src/components/reporteGraficas/Graficas/SistemaOperativo.tsx
+26 -11
View File
@@ -4,28 +4,43 @@ import axios from "axios";
import { useEffect, useState } from "react";
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
interface antiguedad {
type AdscripcionOption = {
id_adscripcion: string
adscripcion: string
}
type UsoOption = {
id_sistema_operativo: string
sistema_operativo: string
}
interface Props {
filtros: any
}
interface so {
adscripcion: string
so: string;
total: number;
}
export default function SistemaOperativo() {
const [antiguedad, setAntiguedad] = useState<antiguedad[]>([])
export default function SistemaOperativo({ filtros }: Props) {
const [data, setData] = useState<so[]>([])
useEffect(() => {
const getAntiguedad = async () => {
const response = await axios.get("http://localhost:3001/equipos/grafica/so")
const response = await axios.post("http://localhost:3001/equipos/grafica/so",filtros)
setAntiguedad(response.data)
setData(response.data)
}
getAntiguedad()
}, [])
}, [filtros])
return (
<div style={{ width:"100%", background:"white", borderRadius:"10px", margin:"5px auto", padding:"1rem"}}>
<h1 style={{margin:"0"}}>SistemaOperativo</h1>
<ResponsiveContainer width="100%" aspect={3}>
<BarChart data={antiguedad}
<div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
<h1 style={{ margin: "0" }}>SistemaOperativo</h1>
<ResponsiveContainer width="100%" aspect={3.5}>
<BarChart data={data}
width={500}
height={300}
margin={{
@@ -33,7 +48,7 @@ export default function SistemaOperativo() {
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="so" fontSize={12} angle={30} textAnchor="start" hide/>
<XAxis dataKey="so" fontSize={12} angle={30} textAnchor="start" hide />
<YAxis />
<Tooltip />
<Legend />
src/components/reporteGraficas/Graficas/Uso.tsx
+33 -16
View File
@@ -4,28 +4,45 @@ import axios from "axios";
import { useEffect, useState } from "react";
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
interface antiguedad {
uso: string;
total: number;
type AdscripcionOption = {
id_adscripcion: string
adscripcion: string
}
export default function Uso() {
const [antiguedad, setAntiguedad] = useState<antiguedad[]>([])
type UsoOption = {
id_uso: string
tipo_uso: string
}
interface Props {
filtros: any
}
interface UsoData {
uso: string
adscripcion: string
total: number
}
export default function Uso({ filtros }: Props) {
const [data, setData] = useState<UsoData[]>([])
useEffect(() => {
const getAntiguedad = async () => {
const response = await axios.get("http://localhost:3001/equipos/grafica/uso")
setAntiguedad(response.data)
const getUso = async () => {
const response = await axios.post(
"http://localhost:3001/equipos/grafica/uso",filtros
)
setData(response.data)
}
getAntiguedad()
}, [])
getUso()
}, [filtros])
return (
<div style={{ minWidth: "570px", background:"white", borderRadius:"10px", margin:"5px auto", padding:"1rem"}}>
<h1 style={{margin:"0"}}>Uso</h1>
<ResponsiveContainer width="100%" aspect={2} minHeight={270}>
<BarChart data={antiguedad}
<div style={{ minWidth: "570px", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
<h1 style={{ margin: "0" }}>Uso</h1>
<ResponsiveContainer width="100%" aspect={2.5} minHeight={220}>
<BarChart data={data}
width={500}
height={300}
margin={{
@@ -33,7 +50,7 @@ export default function Uso() {
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="uso" fontSize={12}/>
<XAxis dataKey="uso" fontSize={12} />
<YAxis />
<Tooltip />
<Legend />
src/components/reporteGraficas/reporte.tsx
+67 -21
View File
@@ -30,6 +30,10 @@ type ProcesadorOption = {
procesador: string
}
type AntiguedadOption = {
antiguedad: string
}
export default function Reporte() {
const [adscripciones, setAdscripciones] = useState<AdscripcionOption[]>([])
@@ -44,9 +48,12 @@ export default function Reporte() {
const [usos, setUsos] = useState<UsoOption[]>([])
const [usoSeleccionado, setUsoSeleccionado] = useState<UsoOption[]>([])
const [antiguedad, setAntiguedad] = useState<AntiguedadOption[]>([{ antiguedad: "Menor a 2 años" }, { antiguedad: "Entre 2 y 3 años" }, { antiguedad: "Entre 4 y 5 años" }, { antiguedad: "Mayor a 6 años" }])
const [antiguedadSeleccionada, setAntiguedadSeleccionada] = useState<AntiguedadOption[]>([])
const [antiguedadActiva, setAntiguedadActiva] = useState(false)
const [filtros, setFiltros] = useState<any>(null)
useEffect(() => {
const cargarDatos = async () => {
@@ -55,12 +62,12 @@ export default function Reporte() {
adscripcionRes,
procesadorRes,
usoRes,
soRes
soRes,
] = await Promise.all([
axios.get("http://localhost:3001/equipos/adscripciones"),
axios.get("http://localhost:3001/equipos/procesador-tipo-equipos"),
axios.get("http://localhost:3001/equipos/usos"),
axios.get("http://localhost:3001/equipos/sistemas-operativos")
axios.get("http://localhost:3001/equipos/sistemas-operativos"),
])
setAdscripciones(adscripcionRes.data)
@@ -96,11 +103,15 @@ export default function Reporte() {
const generarReporte = () => {
console.log("Adscripciones:", adscripcionesSeleccionadas)
console.log("Procesadores:", procesadorSeleccionado)
console.log("Sistemas Operativos:", soSeleccionado)
console.log("Usos:", usoSeleccionado)
console.log("Antigüedad activa:", antiguedadActiva)
const filtros = {
adscripciones: adscripcionesSeleccionadas.map(a => String(a.id_adscripcion)),
procesadores: procesadorSeleccionado.map(p => String(p.id_procesador)),
sistemas: soSeleccionado.map(s => String(s.id_sistema_operativo)),
usos: usoSeleccionado.map(u => String(u.id_uso)),
antiguedad: antiguedadSeleccionada.map(u => String(u.antiguedad))
}
setFiltros(filtros)
}
@@ -186,8 +197,6 @@ export default function Reporte() {
</div>
{/* SISTEMA OPERATIVO */}
<div className={styles.containerSelection}>
@@ -272,14 +281,39 @@ export default function Reporte() {
<div className={styles.containerSelection}>
<label className={styles.adscripcion}>Antigüedad</label>
<label className={styles.adscripcion}>Antiguedad</label>
<button
className={styles.toggle}
onClick={() => setAntiguedadActiva(!antiguedadActiva)}
>
{antiguedadActiva ? "Desactivar" : "Activar"}
</button>
<Select
options={antiguedad}
getOptionLabel={(o) => o.antiguedad}
getOptionValue={(o) => o.antiguedad}
onChange={(o) =>
agregar(o, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
}
/>
<div className={styles.lista}>
{antiguedadSeleccionada.map((p) => (
<div key={p.antiguedad} className={styles.chip}>
<span>{p.antiguedad}</span>
<button
className={styles.remove}
onClick={() =>
eliminar(p.antiguedad, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
}
>
✕
</button>
</div>
))}
</div>
</div>
@@ -290,7 +324,7 @@ export default function Reporte() {
className={styles.button}
onClick={generarReporte}
>
Generar reporte
Buscar
</button>
</div>
@@ -298,13 +332,25 @@ export default function Reporte() {
<section className={styles.graficas}>
<Antiguedad />
<Uso />
<Procesador />
<SistemaOperativo />
<Antiguedad
filtros={filtros}
/>
<Uso
filtros={filtros}
/>
<Procesador
filtros={filtros}
/>
<SistemaOperativo
filtros={filtros}
/>
</section>
</>
)