hotmap

2026-03-13 21:32:26 -04:00
parent d02fd04edf
commit deae0cde7c
7 changed files with 179 additions and 19 deletions
@@ -14,16 +14,20 @@
        "axios": "^1.13.2",
        "js-cookie": "^3.0.5",
        "jwt-decode": "^4.0.0",
+        "leaflet": "^1.9.4",
+        "leaflet.heat": "^0.2.0",
        "next": "^16.0.7",
        "react": "19.2.0",
        "react-dom": "19.2.0",
        "react-hot-toast": "^2.6.0",
+        "react-leaflet": "^5.0.0",
        "react-select": "^5.10.2",
        "recharts": "^3.8.0"
      },
      "devDependencies": {
        "@eslint/eslintrc": "^3",
        "@types/js-cookie": "^3.0.6",
+        "@types/leaflet": "^1.9.21",
        "@types/node": "^24",
        "@types/react": "^19",
        "@types/react-dom": "^19",
@@ -1383,6 +1387,7 @@
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
@@ -1422,6 +1427,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1442,6 +1448,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1462,6 +1469,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1482,6 +1490,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1502,6 +1511,7 @@
      "cpu": [
        "arm"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1522,6 +1532,7 @@
      "cpu": [
        "arm"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1542,6 +1553,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1562,6 +1574,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1582,6 +1595,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1602,6 +1616,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1622,6 +1637,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1642,6 +1658,7 @@
      "cpu": [
        "ia32"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1662,6 +1679,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1675,6 +1693,17 @@
        "url": "https://opencollective.com/parcel"
      }
    },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
    "node_modules/@reduxjs/toolkit": {
      "version": "2.11.2",
      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
@@ -1820,6 +1849,13 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@types/js-cookie": {
      "version": "3.0.6",
      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
@@ -1841,6 +1877,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
+      "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
    "node_modules/@types/node": {
      "version": "24.10.1",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
@@ -2844,7 +2890,7 @@
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "fill-range": "^7.1.1"
@@ -3357,6 +3403,7 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
      "license": "Apache-2.0",
      "optional": true,
      "bin": {
@@ -4139,7 +4186,7 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "to-regex-range": "^5.0.1"
@@ -4824,7 +4871,7 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -4870,7 +4917,7 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-extglob": "^2.1.1"
@@ -4909,7 +4956,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.12.0"
@@ -5244,6 +5291,17 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/leaflet.heat": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz",
+      "integrity": "sha512-Cd5PbAA/rX3X3XKxfDoUGi9qp78FyhWYurFg3nsfhntcM/MCNK08pRkf4iEenO1KNqwVPKCmkyktjW3UD+h9bQ=="
+    },
    "node_modules/levn": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5338,7 +5396,7 @@
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "braces": "^3.0.3",
@@ -5496,6 +5554,7 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
      "license": "MIT",
      "optional": true
    },
@@ -5771,7 +5830,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8.6"
@@ -5920,6 +5979,20 @@
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
      "license": "MIT"
    },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
    "node_modules/react-redux": {
      "version": "9.2.0",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
@@ -6758,7 +6831,7 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-number": "^7.0.0"
@@ -15,16 +15,20 @@
    "axios": "^1.13.2",
    "js-cookie": "^3.0.5",
    "jwt-decode": "^4.0.0",
+    "leaflet": "^1.9.4",
+    "leaflet.heat": "^0.2.0",
    "next": "^16.0.7",
    "react": "19.2.0",
    "react-dom": "19.2.0",
    "react-hot-toast": "^2.6.0",
+    "react-leaflet": "^5.0.0",
    "react-select": "^5.10.2",
    "recharts": "^3.8.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/js-cookie": "^3.0.6",
+    "@types/leaflet": "^1.9.21",
    "@types/node": "^24",
    "@types/react": "^19",
    "@types/react-dom": "^19",
@@ -1,13 +1,15 @@
 "use client";

 import { useState } from "react";
-import Pregunta7 from "@/components/Equipo_Computo/Pregunta7";
+
 import Pregunta1EP from "@/components/Perifericos/Pregunta1EP";
 import Pregunta2EP from "@/components/Perifericos/Pregunta2EP";
 import Pregunta4EP from "@/components/Perifericos/Pregunta4EP";
 import Pregunta5EP from "@/components/Perifericos/Pregunta5EP";
 import "../../styles/layout/reporte.scss";
 import DownloadReporteXLSX from "@/components/Dowload/Reporte";
+import Pregunta7 from "@/components/Equipo_Computo/Pregunta7";
+

 type PreguntaKey = "pregunta1" | "pregunta4" | "pregunta7";

@@ -0,0 +1,86 @@
+"use client";
+
+import { MapContainer, ImageOverlay, useMap } from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet.heat";
+import { useEffect } from "react";
+
+function HeatLayer() {
+  const map = useMap();
+
+  useEffect(() => {
+    const puntos = [
+      [20,30,3.5],[21,31,4.0],[22,32,5.2],[23,33,6.5],
+      [24,34,7.0],[25,35,8.0],[26,36,6.8],[27,37,7.5],
+
+      [40,50,4.5],[41,51,6.0],[42,52,8.0],[43,53,7.2],
+      [44,54,6.5],[45,55,5.8],[46,56,7.1],
+
+      [60,30,4.2],[61,31,5.4],[620,320,6.6],[630,330,7.8],
+      [64,34,8.5],[65,35,7.2],[660,360,6.1],[670,370,5.3],
+
+      [700,200,6.5],[720,220,7.8],[740,240,8.9],[760,260,9.5],
+      [780,280,8.7],[800,300,7.6],[820,320,6.4]
+    ];
+
+    const heat = L.heatLayer(puntos, {
+      radius: 50,
+      blur: 30,
+      maxZoom: 2,
+      gradient:{
+      
+        0.4:"cyan",
+        0.6:"yellow",
+        0.8:"orange",
+        1:"red"
+      }
+    });
+
+    heat.addTo(map);
+
+    return () => {
+      map.removeLayer(heat);
+    };
+  }, [map]);
+
+  return null;
+}
+
+export default function MapaCalor(){
+
+  const bounds = [
+    [0,0],
+    [1000,1000]
+  ];
+
+  return(
+
+    <div style={{
+      width:"100%",
+      height:"600px",
+      marginTop:"40px",
+      borderRadius:"10px",
+      overflow:"hidden",
+      boxShadow:"0 4px 20px rgba(0,0,0,0.2)"
+    }}>
+
+      <MapContainer
+        crs={L.CRS.Simple}
+        bounds={bounds}
+        style={{height:"100%",width:"100%"}}
+      >
+
+        <ImageOverlay
+          url="/plano_fes_acatlan.png"
+          bounds={bounds}
+        />
+
+        <HeatLayer/>
+
+      </MapContainer>
+
+    </div>
+
+  );
+}
@@ -5,6 +5,7 @@ import Cookies from "js-cookie";
 import axios from "axios";
 import "./pregunta7.css";
 import ToggleButton from "../Toggle/ToggleButton";
+import MapaCalor from "./MapaCalor";

 type AntiguedadItem = {
  antiguedad: string | null;
@@ -166,6 +167,8 @@ export default function Pregunta7() {
          </tbody>
        </table>
      </div>
+      <MapaCalor />
    </div>
+    
  );
 }
@@ -3,7 +3,7 @@ import type { NextRequest } from "next/server";
 import { jwtDecode } from "jwt-decode";

 const permisos: Record<number, string[]> = {
-  1: ["/crearCuenta", "/equipoComputo", "/perifericos","/escaner", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass","/reportesGraficas"],
+  1: ["/crearCuenta", "/equipoComputo", "/perifericos","/escaner", "/hotmap", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass","/reportesGraficas"],
  2: ["/escaner", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass"],
 };

@@ -35,15 +35,7 @@ export function proxy(request: NextRequest) {

 export const config = {
  matcher: [
-    "/escaner",
-    "/agregarEquipo",
-    "/editar",
-    "/crearCuenta",
-    "/equipoComputo",
-    "/perifericos",
-    "/ranking",
-    "/historial",
-    "/cambiarPass"
+
  ],
 };
 //IO