🚧 Bocetos

enflujo · Dec 5, 2023 · a8c9a32 · a8c9a32
1 parent 6d97038
commit a8c9a32
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 11 deletions.
diff --git 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ños dpto antropología .xlsx b/procesador/Listado de proyectos - 60 años dpto antropología .xlsx
diff --git a/src/componentes/LineaTiempo.astro 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
@@ -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
@@ -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
@@ -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
@@ -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/[email protected]":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"