From a8c9a322574500ab99fedd40c9ec0895dd34cc41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Camilo=20Gonz=C3=A1lez?=
 <j.gonzalezj@uniandes.edu.co>
Date: Tue, 5 Dec 2023 12:44:27 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Bocetos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 ...\303\261os dpto antropolog\303\255a .xlsx" | Bin 62438 -> 62439 bytes
 src/componentes/LineaTiempo.astro             |  80 ++++++++++++++++++
 src/componentes/ListaNodos.astro              |   2 +-
 src/pages/index.astro                         |  37 ++++++--
 src/scss/estilos.scss                         |  10 ++-
 yarn.lock                                     |   5 ++
 7 files changed, 124 insertions(+), 11 deletions(-)
 create mode 100644 src/componentes/LineaTiempo.astro

diff --git a/package.json b/package.json
index 6ed110b..16c13d6 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.3.1",
+    "@enflujo/alquimia": "^2.0.0",
     "astro": "^3.6.0",
     "mapbox-gl": "^2.15.0",
     "nanostores": "^0.9.5",
diff --git "a/procesador/Listado de proyectos - 60 a\303\261os dpto antropolog\303\255a .xlsx" "b/procesador/Listado de proyectos - 60 a\303\261os dpto antropolog\303\255a .xlsx"
index 3eebc9bbc0730c966aa7eb55b3c7b02779f67620..e7498ac76a1c3ce104bf97ff5aa275f5cc02a53a 100644
GIT binary patch
delta 2023
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

delta 2035
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

diff --git a/src/componentes/LineaTiempo.astro b/src/componentes/LineaTiempo.astro
new file mode 100644
index 0000000..466f504
--- /dev/null
+++ b/src/componentes/LineaTiempo.astro
@@ -0,0 +1,80 @@
+---
+import type { ElementoLista } from '@/tipos';
+import { convertirEscala } from '@enflujo/alquimia';
+import { text } from 'stream/consumers';
+interface Props {
+  tiempo: ElementoLista[];
+  decadas: ElementoLista[];
+}
+
+const { decadas, tiempo } = Astro.props;
+let datosLinea = '';
+const numeroDecadas = decadas.length;
+const anchoDecada = 100 / numeroDecadas;
+const altoDecada = (valor: number) => convertirEscala(valor, 0, 58, 0, 30);
+const posY = (valor: number) => convertirEscala(valor, 0, 20, 100, 0);
+const posX = (valor: number) => convertirEscala(valor, 1966, 2026, 0, 100);
+
+tiempo.forEach((marca, i) => {
+  const x = posX(+marca.nombre);
+  const y = posY(marca.conteo);
+
+  if (i === 0) {
+    datosLinea += `M ${0}, ${100} L`;
+  } else {
+  }
+
+  datosLinea += ` ${x}, ${y}`;
+
+  if (i === tiempo.length - 1) {
+    datosLinea += 'L 100, 100 Z';
+  }
+});
+---
+
+<div id="contenedorGrafica">
+  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
+    <g id="decadas">
+      {
+        decadas.map((decada, i) => (
+          <rect x={`${i * anchoDecada}%`} y="0" width={`${anchoDecada}%`} height={`${altoDecada(decada.conteo)}px`} />
+        ))
+      }
+
+      <path d={datosLinea}></path>
+    </g>
+  </svg>
+
+  <svg id="marcas" width="100%" height="100%">
+    {
+      tiempo.map((marca) => (
+        <text style={`transform:translate(${posX(+marca.nombre)}%, ${posY(marca.conteo)}%)`} x="0" y="0">
+          {marca.nombre}
+        </text>
+      ))
+    }
+  </svg>
+</div>
+
+<style lang="scss">
+  #contenedorGrafica {
+    height: 150px;
+    position: relative;
+    background-color: var(--rosaPigmento);
+    z-index: 3;
+  }
+  svg {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    path {
+      fill: rgba(210, 76, 76, 0.679);
+    }
+
+    text {
+      font-size: 8px;
+      fill: white;
+    }
+  }
+</style>
diff --git a/src/componentes/ListaNodos.astro b/src/componentes/ListaNodos.astro
index b3e5f93..009fa38 100644
--- a/src/componentes/ListaNodos.astro
+++ b/src/componentes/ListaNodos.astro
@@ -12,7 +12,7 @@ const { lista, titulo, id } = Astro.props;
 
 <section id={id} class="lista">
   <h2>{titulo}</h2>
-  <ul>
+  <ul class={id}>
     {
       lista.map((elemento, i) => (
         <li
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a8e1e36..7a1a601 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -23,7 +23,7 @@ import LineaTiempo from '@/componentes/LineaTiempo.astro';
 
     <Mapa />
 
-    <!-- <LineaTiempo tiempo={listas.años} decadas={listas.decadas} /> -->
+    <LineaTiempo tiempo={listas.años} decadas={listas.decadas} />
   </main>
 </Plantilla>
 
@@ -34,6 +34,8 @@ import LineaTiempo from '@/componentes/LineaTiempo.astro';
   nodos.forEach((nodo) => {
     const nodosConectados: HTMLLIElement[] = [];
     const conexiones = nodo.dataset.con?.split(',');
+    const contenedor = nodo.parentElement;
+    console.log(contenedor);
 
     if (conexiones) {
       conexiones.forEach((id) => {
@@ -42,18 +44,21 @@ import LineaTiempo from '@/componentes/LineaTiempo.astro';
         if (elemento) nodosConectados.push(elemento);
       });
     }
+
     nodo.onmouseenter = () => {
       nodosConectados.forEach((nodo) => {
-        nodo.classList.add('visible');
+        nodo.classList.add('visible', 'explotado');
       });
+      contenedor?.classList.add('mantener');
       nodo.classList.add('visible');
       contenedorListas.classList.remove('todoVisible');
     };
 
     nodo.onmouseleave = () => {
       nodosConectados.forEach((nodo) => {
-        nodo.classList.remove('visible');
+        nodo.classList.remove('visible', 'explotado');
       });
+      contenedor?.classList.remove('mantener');
       nodo.classList.remove('visible');
       contenedorListas.classList.add('todoVisible');
     };
@@ -68,27 +73,43 @@ import LineaTiempo from '@/componentes/LineaTiempo.astro';
     position: relative;
     width: 50vw;
 
-    li {
-      opacity: 0.3;
+    ul {
+      li {
+        display: none;
 
-      &.visible {
-        opacity: 1;
+        &.visible {
+          display: block;
+          // font-size: 0.75em;
+        }
+      }
+
+      &.mantener {
+        li {
+          opacity: 0.3;
+          display: block;
+
+          &.visible {
+            opacity: 1;
+          }
+        }
       }
     }
 
     &.todoVisible {
       li {
         opacity: 1;
+        display: block;
       }
     }
 
     .lista {
-      height: 50vh;
+      height: calc((100vh - 150px) / 2);
       overflow-y: auto;
       overflow-x: hidden;
       position: relative;
       background-color: rgba(255, 255, 255, 0.6);
       flex-basis: 20%;
+      padding-bottom: 3em;
 
       h2 {
         position: sticky;
diff --git a/src/scss/estilos.scss b/src/scss/estilos.scss
index dbeabcc..7cd2ea5 100644
--- a/src/scss/estilos.scss
+++ b/src/scss/estilos.scss
@@ -3,7 +3,7 @@
 
 :root {
   /// Fuentes tipográficas hemochas
-  ---fuenteTitulo: font-family: 'Tourney', 'Garamond', 'Georgia', 'Times', serif;
+  --fuenteTitulo: font-family: 'Tourney', 'Garamond', 'Georgia', 'Times', serif;
   --fuenteParrafo: 'Inter', 'Helvetica', 'Roboto', 'Arial', 'Tahoma', 'Verdana', sans-serif;
 
   //Colores * CSS HEX *
@@ -30,12 +30,18 @@ body {
     'calt' 1; /* fix for Chrome */
 }
 
+@supports (font-variation-settings: normal) {
+  :root {
+    --fuenteParrafo: InterVariable, 'Helvetica', 'Roboto', 'Arial', 'Tahoma', 'Verdana', sans-serif;
+  }
+}
+
 h1,
 h2,
 h3,
 h4,
 h5 {
-  font-family: var(---fuenteTitulo);
+  font-family: var(--fuenteTitulo);
 }
 
 ul {
diff --git a/yarn.lock b/yarn.lock
index 3297726..6d515a1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -330,6 +330,11 @@
   resolved "https://registry.yarnpkg.com/@emmetio/scanner/-/scanner-1.0.4.tgz#e9cdc67194fd91f8b7eb141014be4f2d086c15f1"
   integrity sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA==
 
+"@enflujo/alquimia@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@enflujo/alquimia/-/alquimia-2.0.0.tgz#d0cda3e14c6c0dcdee971e55f1cd515197d66dc8"
+  integrity sha512-4+j3jL9Kb929z6+nLIlDW+BBxXs81tgNxTiEYONNIEkA4QJDtjEZoyJss7E2QWLM3xpV0YA6j0kKV6tGahqARw==
+
 "@esbuild/android-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"