From 451915e858877a3f7c8ee0fc265558614dcffe92 Mon Sep 17 00:00:00 2001
From: IO <320154041@pcpuma.acatlan.unam.mx>
Date: Fri, 13 Mar 2026 19:46:49 -0500
Subject: [PATCH] added new colors to know that is what adscription

---
 .../reporteGraficas/Graficas/Antiguedad.tsx   | 61 +++++++++++++++--
 .../reporteGraficas/Graficas/Procesador.tsx   | 67 +++++++++++++++----
 .../Graficas/SistemaOperativo.tsx             | 67 +++++++++++++++----
 .../reporteGraficas/Graficas/Uso.tsx          | 67 +++++++++++++++----
 4 files changed, 216 insertions(+), 46 deletions(-)

diff --git a/src/components/reporteGraficas/Graficas/Antiguedad.tsx b/src/components/reporteGraficas/Graficas/Antiguedad.tsx
index 4658e83..b1e9c68 100644
--- a/src/components/reporteGraficas/Graficas/Antiguedad.tsx
+++ b/src/components/reporteGraficas/Graficas/Antiguedad.tsx
@@ -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>
diff --git a/src/components/reporteGraficas/Graficas/Procesador.tsx b/src/components/reporteGraficas/Graficas/Procesador.tsx
index f169590..9f405ef 100644
--- a/src/components/reporteGraficas/Graficas/Procesador.tsx
+++ b/src/components/reporteGraficas/Graficas/Procesador.tsx
@@ -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>
diff --git a/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx b/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx
index 89ea000..d1c9f66 100644
--- a/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx
+++ b/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx
@@ -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>
diff --git a/src/components/reporteGraficas/Graficas/Uso.tsx b/src/components/reporteGraficas/Graficas/Uso.tsx
index 181e1c0..29d6d6b 100644
--- a/src/components/reporteGraficas/Graficas/Uso.tsx
+++ b/src/components/reporteGraficas/Graficas/Uso.tsx
@@ -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>