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

added new colors to know that is what adscription

Browse Source
This commit is contained in:
Lino
2026-03-13 19:46:49 -05:00
parent 1a0c7917b7
commit 451915e858
4 changed files with 216 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/reporteGraficas/Graficas/Antiguedad.tsx
+54 -7
View File
@@ -14,11 +14,6 @@ import {
} from "recharts";
import Cookies from "js-cookie";
type AdscripcionOption = {
id_adscripcion: string
adscripcion: string
}
interface Props {
filtros: any
}
@@ -28,6 +23,16 @@ interface AntiguedadData {
antiguedad: string
total: number
}
const colores = [
"#095bd6",
"#e63946",
"#2a9d8f",
"#f4a261",
"#8d5cf6",
"#ff006e"
]
const api_url = process.env.NEXT_PUBLIC_API_URL;
export default function Antiguedad({ filtros }: Props) {
@@ -54,6 +59,31 @@ export default function Antiguedad({ filtros }: Props) {
}, [filtros])
const tieneAdscripciones = data.some(d => d.adscripcion)
let dataTransformada = data
let adscripciones: string[] = []
if (tieneAdscripciones) {
adscripciones = [...new Set(data.map(d => d.adscripcion))]
dataTransformada = Object.values(
data.reduce((acc: any, item: any) => {
if (!acc[item.antiguedad]) {
acc[item.antiguedad] = { antiguedad: item.antiguedad }
}
acc[item.antiguedad][item.adscripcion] = Number(item.total)
return acc
}, {})
)
}
return (
<div
style={{
@@ -71,7 +101,7 @@ export default function Antiguedad({ filtros }: Props) {
<ResponsiveContainer width="100%" aspect={2.5}>
<BarChart
data={data}
data={dataTransformada}
margin={{ top: 20 }}
>
<CartesianGrid strokeDasharray="3 3" />
@@ -81,7 +111,24 @@ export default function Antiguedad({ filtros }: Props) {
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="total" fill="#095bd6" />
{tieneAdscripciones ? (
adscripciones.map((ads, i) => (
<Bar
key={ads}
dataKey={ads}
fill={colores[i % colores.length]}
/>
))
) : (
<Bar
dataKey="total"
fill="#095bd6"
/>
)}
</BarChart>
</ResponsiveContainer>
src/components/reporteGraficas/Graficas/Procesador.tsx
+54 -13
View File
@@ -4,16 +4,6 @@ import axios from "axios";
import { useEffect, useState } from "react";
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
type AdscripcionOption = {
id_adscripcion: string
adscripcion: string
}
type ProcesadorOption = {
id_procesador: string
procesador: string
}
interface Props {
filtros: any
}
@@ -24,23 +14,58 @@ interface procesador {
total: number;
}
const colores = [
"#095bd6",
"#e63946",
"#2a9d8f",
"#f4a261",
"#8d5cf6",
"#ff006e"
]
const api_url = process.env.NEXT_PUBLIC_API_URL;
export default function Procesador({ filtros }: Props) {
const [data, setData] = useState<procesador[]>([])
useEffect(() => {
const getAntiguedad = async () => {
const response = await axios.post("http://localhost:3001/equipos/grafica/procesador",filtros)
const response = await axios.post(`${api_url}/equipos/grafica/procesador`, filtros)
setData(response.data)
}
getAntiguedad()
}, [filtros])
const tieneAdscripciones = data.some(d => d.adscripcion)
let dataTransformada = data
let adscripciones: string[] = []
if (tieneAdscripciones) {
adscripciones = [...new Set(data.map(d => d.adscripcion))]
dataTransformada = Object.values(
data.reduce((acc: any, item: any) => {
if (!acc[item.procesador]) {
acc[item.procesador] = { procesador: item.procesador }
}
acc[item.procesador][item.adscripcion] = Number(item.total)
return acc
}, {})
)
}
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.5} minHeight={270}>
<BarChart data={data}
<BarChart data={dataTransformada}
width={500}
height={300}
margin={{
@@ -53,8 +78,24 @@ export default function Procesador({ filtros }: Props) {
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="total" fill="#095bd6" />
{tieneAdscripciones ? (
adscripciones.map((ads, i) => (
<Bar
key={ads}
dataKey={ads}
fill={colores[i % colores.length]}
/>
))
) : (
<Bar
dataKey="total"
fill="#095bd6"
/>
)}
</BarChart>
</ResponsiveContainer>
</div>
src/components/reporteGraficas/Graficas/SistemaOperativo.tsx
+54 -13
View File
@@ -4,16 +4,6 @@ import axios from "axios";
import { useEffect, useState } from "react";
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
type AdscripcionOption = {
id_adscripcion: string
adscripcion: string
}
type UsoOption = {
id_sistema_operativo: string
sistema_operativo: string
}
interface Props {
filtros: any
}
@@ -24,23 +14,58 @@ interface so {
total: number;
}
const colores = [
"#095bd6",
"#e63946",
"#2a9d8f",
"#f4a261",
"#8d5cf6",
"#ff006e"
]
const api_url = process.env.NEXT_PUBLIC_API_URL;
export default function SistemaOperativo({ filtros }: Props) {
const [data, setData] = useState<so[]>([])
useEffect(() => {
const getAntiguedad = async () => {
const response = await axios.post("http://localhost:3001/equipos/grafica/so",filtros)
const response = await axios.post(`${api_url}/equipos/grafica/so`, filtros)
setData(response.data)
}
getAntiguedad()
}, [filtros])
const tieneAdscripciones = data.some(d => d.adscripcion)
let dataTransformada = data
let adscripciones: string[] = []
if (tieneAdscripciones) {
adscripciones = [...new Set(data.map(d => d.adscripcion))]
dataTransformada = Object.values(
data.reduce((acc: any, item: any) => {
if (!acc[item.so]) {
acc[item.so] = { so: item.so }
}
acc[item.so][item.adscripcion] = Number(item.total)
return acc
}, {})
)
}
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.5}>
<BarChart data={data}
<BarChart data={dataTransformada}
width={500}
height={300}
margin={{
@@ -52,8 +77,24 @@ export default function SistemaOperativo({ filtros }: Props) {
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="total" fill="#095bd6" />
{tieneAdscripciones ? (
adscripciones.map((ads, i) => (
<Bar
key={ads}
dataKey={ads}
fill={colores[i % colores.length]}
/>
))
) : (
<Bar
dataKey="total"
fill="#095bd6"
/>
)}
</BarChart>
</ResponsiveContainer>
</div>
src/components/reporteGraficas/Graficas/Uso.tsx
+54 -13
View File
@@ -4,16 +4,6 @@ import axios from "axios";
import { useEffect, useState } from "react";
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
type AdscripcionOption = {
id_adscripcion: string
adscripcion: string
}
type UsoOption = {
id_uso: string
tipo_uso: string
}
interface Props {
filtros: any
}
@@ -24,13 +14,24 @@ interface UsoData {
total: number
}
const colores = [
"#095bd6",
"#e63946",
"#2a9d8f",
"#f4a261",
"#8d5cf6",
"#ff006e"
]
const api_url = process.env.NEXT_PUBLIC_API_URL;
export default function Uso({ filtros }: Props) {
const [data, setData] = useState<UsoData[]>([])
useEffect(() => {
const getUso = async () => {
const response = await axios.post(
"http://localhost:3001/equipos/grafica/uso",filtros
`${api_url}/equipos/grafica/uso`, filtros
)
setData(response.data)
}
@@ -38,11 +39,35 @@ export default function Uso({ filtros }: Props) {
}, [filtros])
const tieneAdscripciones = data.some(d => d.adscripcion)
let dataTransformada = data
let adscripciones: string[] = []
if (tieneAdscripciones) {
adscripciones = [...new Set(data.map(d => d.adscripcion))]
dataTransformada = Object.values(
data.reduce((acc: any, item: any) => {
if (!acc[item.uso]) {
acc[item.uso] = { uso: item.uso }
}
acc[item.uso][item.adscripcion] = Number(item.total)
return acc
}, {})
)
}
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.5} minHeight={220}>
<BarChart data={data}
<BarChart data={dataTransformada}
width={500}
height={300}
margin={{
@@ -54,8 +79,24 @@ export default function Uso({ filtros }: Props) {
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="total" fill="#095bd6" />
{tieneAdscripciones ? (
adscripciones.map((ads, i) => (
<Bar
key={ads}
dataKey={ads}
fill={colores[i % colores.length]}
/>
))
) : (
<Bar
dataKey="total"
fill="#095bd6"
/>
)}
</BarChart>
</ResponsiveContainer>
</div>