work
This commit is contained in:
@@ -32,61 +32,74 @@ interface RawOsEntry {
|
||||
total: string;
|
||||
}
|
||||
|
||||
function transformPlatform(raw: RawOsEntry[]): OsEntry[] {
|
||||
const order: Record<string, number> = {
|
||||
"Windows 11": 1,
|
||||
"Windows 10": 2,
|
||||
"Windows 7/8": 3,
|
||||
"Windows XP/Vista": 4,
|
||||
Linux: 5,
|
||||
const PLATFORM_OS_LIST: Record<PlatformKey, string[]> = {
|
||||
"pc-desktop": [
|
||||
"Windows 11",
|
||||
"Windows 10",
|
||||
"Windows 7/8",
|
||||
"Windows XP/Vista",
|
||||
"Linux",
|
||||
],
|
||||
|
||||
"MAC OS (SEQUOIA)": 6,
|
||||
"Mac OS (13 - Ventura, 14 - Sonoma)": 7,
|
||||
"Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)": 8,
|
||||
"Mac OS X (Snow Leopard, Lion, Mountain Lion, Mavericks)": 9,
|
||||
"Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)": 10,
|
||||
"apple-desktop": [
|
||||
"MAC OS (SEQUOIA)",
|
||||
"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)",
|
||||
],
|
||||
|
||||
"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,
|
||||
"UNIX (AIX, MAC OS SERVER, SOLARIS, ENTRE OTROS)": 13,
|
||||
"apple-laptop": [
|
||||
"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,
|
||||
"Windows Server 2016/2019": 15,
|
||||
"Windows Server 2008/2012": 16,
|
||||
"Windows Server 2000/2003": 17,
|
||||
};
|
||||
servers: [
|
||||
"Linux (CentOS, Fedora, Ubuntu, Red Hat Enterprise, entre otros)",
|
||||
"UNIX (AIX, MAC OS SERVER, SOLARIS, ENTRE OTROS)",
|
||||
"Windows Server 2022/2023",
|
||||
"Windows Server 2016/2019",
|
||||
"Windows Server 2008/2012",
|
||||
"Windows Server 2000/2003",
|
||||
],
|
||||
};
|
||||
|
||||
function cleanName(rawName: string): string {
|
||||
return rawName
|
||||
function transformPlatform(
|
||||
raw: RawOsEntry[],
|
||||
platform: PlatformKey
|
||||
): OsEntry[] {
|
||||
const fixedList = PLATFORM_OS_LIST[platform];
|
||||
|
||||
const clean = (str: string) =>
|
||||
str
|
||||
.normalize("NFKD")
|
||||
.replace(/\u00A0/g, " ")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim();
|
||||
}
|
||||
|
||||
// mapeamos y limpiamos antes del sort
|
||||
const rows: OsEntry[] = raw.map((item) => {
|
||||
const cleaned = cleanName(item.sistema_operativo);
|
||||
return {
|
||||
os: cleaned,
|
||||
count: Number(item.total),
|
||||
};
|
||||
const mapRaw: Record<string, number> = {};
|
||||
raw.forEach((item) => {
|
||||
const name = clean(item.sistema_operativo);
|
||||
mapRaw[name] = Number(item.total);
|
||||
});
|
||||
|
||||
rows.sort((a, b) => {
|
||||
const orderA = (order as Record<string, number>)[a.os] ?? 999;
|
||||
const orderB = (order as Record<string, number>)[b.os] ?? 999;
|
||||
return orderA - orderB;
|
||||
});
|
||||
const rows: OsEntry[] = fixedList.map((os) => ({
|
||||
os,
|
||||
count: mapRaw[clean(os)] ?? 0,
|
||||
}));
|
||||
|
||||
const total = rows.reduce((acc, r) => acc + r.count, 0);
|
||||
const total = rows.reduce((a, r) => a + r.count, 0);
|
||||
|
||||
rows.push({
|
||||
os: "Total",
|
||||
count: total,
|
||||
isTotal: true,
|
||||
});
|
||||
rows.push({ os: "Total", count: total, isTotal: true });
|
||||
|
||||
return rows;
|
||||
}
|
||||
@@ -94,7 +107,6 @@ function transformPlatform(raw: RawOsEntry[]): OsEntry[] {
|
||||
export default function Pregunta2() {
|
||||
const [activeTab, setActiveTab] = useState<PlatformKey>("pc-desktop");
|
||||
const [data, setData] = useState<PlatformData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const cargarDatos = async (baja: boolean) => {
|
||||
const token = Cookies.get("token");
|
||||
@@ -111,65 +123,22 @@ export default function Pregunta2() {
|
||||
const json = res.data;
|
||||
|
||||
const formatted: PlatformData = {
|
||||
"pc-desktop": transformPlatform(json[0]),
|
||||
"apple-desktop": transformPlatform(json[1]),
|
||||
"pc-laptop": transformPlatform(json[2]),
|
||||
"apple-laptop": transformPlatform(json[3]),
|
||||
servers: transformPlatform(json[4]),
|
||||
"pc-desktop": transformPlatform(json[0], "pc-desktop"),
|
||||
"apple-desktop": transformPlatform(json[1], "apple-desktop"),
|
||||
"pc-laptop": transformPlatform(json[2], "pc-laptop"),
|
||||
"apple-laptop": transformPlatform(json[3], "apple-laptop"),
|
||||
servers: transformPlatform(json[4], "servers"),
|
||||
};
|
||||
|
||||
setData(formatted);
|
||||
})
|
||||
.catch((err) => console.error("Error cargando datos", err))
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
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 (
|
||||
<div className={styles.container_P1}>
|
||||
<div className={styles["contenedor-censo_p1"]}>
|
||||
@@ -203,7 +172,7 @@ export default function Pregunta2() {
|
||||
|
||||
{/* Tabla */}
|
||||
<div className={styles["data-table_P1"]}>
|
||||
{currentData.map((item, index) => (
|
||||
{data && data[activeTab].map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`${styles["data-row_P1"]} ${
|
||||
|
||||
@@ -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) {
|
||||
.scanView_P1 .tabs_P1 {
|
||||
width: 160px;
|
||||
|
||||
Reference in New Issue
Block a user