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

work

Browse Source
This commit is contained in:
Lino
2025-12-09 15:41:50 -06:00
parent b764c5f36e
commit e84a8e4d93
2 changed files with 70 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Equipo_Computo/Pregunta2.tsx
+61 -92
View File
@@ -32,61 +32,74 @@ interface RawOsEntry {
total: string; total: string;
} }
function transformPlatform(raw: RawOsEntry[]): OsEntry[] { const PLATFORM_OS_LIST: Record<PlatformKey, string[]> = {
const order: Record<string, number> = { "pc-desktop": [
"Windows 11": 1, "Windows 11",
"Windows 10": 2, "Windows 10",
"Windows 7/8": 3, "Windows 7/8",
"Windows XP/Vista": 4, "Windows XP/Vista",
Linux: 5, "Linux",
],
"MAC OS (SEQUOIA)": 6, "apple-desktop": [
"Mac OS (13 - Ventura, 14 - Sonoma)": 7, "MAC OS (SEQUOIA)",
"Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)": 8, "Mac OS (13 - Ventura, 14 - Sonoma)",
"Mac OS X (Snow Leopard, Lion, Mountain Lion, Mavericks)": 9, "Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)",
"Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)": 10, "Mac OS X (Snow Leopard, Lion, Mountain Lion, Mavericks)",
"Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)",
],
"Chrome OS": 11, "pc-laptop": [
"Windows 11",
"Windows 10",
"Windows 7/8",
"Windows XP/Vista",
"Chrome OS",
],
"Linux (CentOS, Fedora, Ubuntu, Red Hat Enterprise, entre otros)": 12, "apple-laptop": [
"UNIX (AIX, MAC OS SERVER, SOLARIS, ENTRE OTROS)": 13, "Mac OS (13 - Ventura, 14 - Sonoma)",
"Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)",
"Mac OS X (Snow Leopard, Lion, Mountain Lion, Mavericks)",
"Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)",
],
"Windows Server 2022/2023": 14, servers: [
"Windows Server 2016/2019": 15, "Linux (CentOS, Fedora, Ubuntu, Red Hat Enterprise, entre otros)",
"Windows Server 2008/2012": 16, "UNIX (AIX, MAC OS SERVER, SOLARIS, ENTRE OTROS)",
"Windows Server 2000/2003": 17, "Windows Server 2022/2023",
}; "Windows Server 2016/2019",
"Windows Server 2008/2012",
"Windows Server 2000/2003",
],
};
function cleanName(rawName: string): string { function transformPlatform(
return rawName raw: RawOsEntry[],
platform: PlatformKey
): OsEntry[] {
const fixedList = PLATFORM_OS_LIST[platform];
const clean = (str: string) =>
str
.normalize("NFKD") .normalize("NFKD")
.replace(/\u00A0/g, " ") .replace(/\u00A0/g, " ")
.replace(/\s+/g, " ")
.trim(); .trim();
}
// mapeamos y limpiamos antes del sort const mapRaw: Record<string, number> = {};
const rows: OsEntry[] = raw.map((item) => { raw.forEach((item) => {
const cleaned = cleanName(item.sistema_operativo); const name = clean(item.sistema_operativo);
return { mapRaw[name] = Number(item.total);
os: cleaned,
count: Number(item.total),
};
}); });
rows.sort((a, b) => { const rows: OsEntry[] = fixedList.map((os) => ({
const orderA = (order as Record<string, number>)[a.os] ?? 999; os,
const orderB = (order as Record<string, number>)[b.os] ?? 999; count: mapRaw[clean(os)] ?? 0,
return orderA - orderB; }));
});
const total = rows.reduce((acc, r) => acc + r.count, 0); const total = rows.reduce((a, r) => a + r.count, 0);
rows.push({ rows.push({ os: "Total", count: total, isTotal: true });
os: "Total",
count: total,
isTotal: true,
});
return rows; return rows;
} }
@@ -94,7 +107,6 @@ function transformPlatform(raw: RawOsEntry[]): OsEntry[] {
export default function Pregunta2() { export default function Pregunta2() {
const [activeTab, setActiveTab] = useState<PlatformKey>("pc-desktop"); const [activeTab, setActiveTab] = useState<PlatformKey>("pc-desktop");
const [data, setData] = useState<PlatformData | null>(null); const [data, setData] = useState<PlatformData | null>(null);
const [loading, setLoading] = useState(true);
const cargarDatos = async (baja: boolean) => { const cargarDatos = async (baja: boolean) => {
const token = Cookies.get("token"); const token = Cookies.get("token");
@@ -111,65 +123,22 @@ export default function Pregunta2() {
const json = res.data; const json = res.data;
const formatted: PlatformData = { const formatted: PlatformData = {
"pc-desktop": transformPlatform(json[0]), "pc-desktop": transformPlatform(json[0], "pc-desktop"),
"apple-desktop": transformPlatform(json[1]), "apple-desktop": transformPlatform(json[1], "apple-desktop"),
"pc-laptop": transformPlatform(json[2]), "pc-laptop": transformPlatform(json[2], "pc-laptop"),
"apple-laptop": transformPlatform(json[3]), "apple-laptop": transformPlatform(json[3], "apple-laptop"),
servers: transformPlatform(json[4]), servers: transformPlatform(json[4], "servers"),
}; };
setData(formatted); setData(formatted);
}) })
.catch((err) => console.error("Error cargando datos", err)) .catch((err) => console.error("Error cargando datos", err))
.finally(() => {
setLoading(false);
});
}; };
useEffect(() => { useEffect(() => {
cargarDatos(false); cargarDatos(false);
}, []); }, []);
if (loading)
return (
<div className={styles.container_P1}>
<div className={styles["contenedor-censo_p1"]}>
Censo de equipos de cómputo - Sitema Operativo
</div>
<div className={styles["pregunta-cuadro_p1"]}>
Número de sistemas Operativos por cada categoría y perfil de usuario.
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div>Cargando datos...</div>
</div>
);
if (!data)
return (
<div className={styles.container_P1}>
<div className={styles["contenedor-censo_p1"]}>
Censo de equipos de cómputo - Sitema Operativo
</div>
<div className={styles["pregunta-cuadro_p1"]}>
Número de sistemas Operativos por cada categoría y perfil de usuario.
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div className={styles.scanView_P3}>Error al cargar los datos.</div>
</div>
);
const currentData = data[activeTab];
return ( return (
<div className={styles.container_P1}> <div className={styles.container_P1}>
<div className={styles["contenedor-censo_p1"]}> <div className={styles["contenedor-censo_p1"]}>
@@ -203,7 +172,7 @@ export default function Pregunta2() {
{/* Tabla */} {/* Tabla */}
<div className={styles["data-table_P1"]}> <div className={styles["data-table_P1"]}>
{currentData.map((item, index) => ( {data && data[activeTab].map((item, index) => (
<div <div
key={index} key={index}
className={`${styles["data-row_P1"]} ${ className={`${styles["data-row_P1"]} ${
src/components/Equipo_Computo/pregunta2.module.scss
+9
View File
@@ -151,6 +151,15 @@
} }
} }
.loadingBlur {
filter: blur(4px);
opacity: 0.5;
pointer-events: none;
transition: 0.3s ease;
height: 100%;
width: 100%;
}
@media (max-width: 700px) { @media (max-width: 700px) {
.scanView_P1 .tabs_P1 { .scanView_P1 .tabs_P1 {
width: 160px; width: 160px;