🎨 Nota del umbral

enflujo · Dec 12, 2023 · 66be073 · 66be073
1 parent 49e75c1
commit 66be073
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/aplicaciones/www/src/componentes/Linea.ts b/aplicaciones/www/src/componentes/Linea.ts
@@ -44,7 +44,7 @@ export default class Linea {
         punto.onmouseenter = (evento) => {
           const x = evento.pageX;
           const y = evento.pageY;
-          informacion.innerText = `${nombre}: ${valor} ${unidad.toLocaleLowerCase() === 'porcentaje' ? '%' : ''}`;
+          informacion.innerText = `${nombre}: ${valor}${unidad.toLocaleLowerCase() === 'porcentaje' ? '%' : ''}`;
           informacion.classList.add('visible');
 
           Object.assign(informacion.style, {

diff --git a/aplicaciones/www/src/componentes/LineaTiempo.astro b/aplicaciones/www/src/componentes/LineaTiempo.astro
@@ -79,7 +79,7 @@ const { alto, meta, umbral } = Astro.props;
     const nombreEjeY = svg.querySelector<SVGTextElement>('#nombreEjeY');
     const lineas: Linea[] = [];
     const visualizaciones = document.getElementById('visualizaciones');
-
+    const informacion = document.getElementById('informacion') as HTMLDivElement;
     const proporciones = { porcentaje: { x1: 2, x2: 95 }, pixeles: { x1: 0, x2: 0 } };
     const años = { primero: 0, ultimo: 0 };
     let cantidadDivisiones = 5;
@@ -189,6 +189,30 @@ const { alto, meta, umbral } = Astro.props;
         areaUmbral.setAttribute('width', '100%');
         areaUmbral.setAttribute('height', `${alto}`);
         contenedorEjeY.appendChild(areaUmbral);
+
+        areaUmbral.onmouseenter = (evento) => {
+          const x = evento.pageX;
+          const y = evento.pageY;
+          informacion.innerText = `La meta es: ${umbral}`;
+          informacion.classList.add(...['visible', 'esUmbral']);
+          Object.assign(informacion.style, {
+            top: `${y}px`,
+            left: `${x}px`,
+          });
+        };
+
+        areaUmbral.onmousemove = (evento) => {
+          const x = evento.pageX;
+          const y = evento.pageY;
+          Object.assign(informacion.style, {
+            top: `${y}px`,
+            left: `${x}px`,
+          });
+        };
+
+        areaUmbral.onmouseleave = () => {
+          informacion.classList.remove(...['visible', 'esUmbral']);
+        };
       }
 
       for (let i = 0; i <= cantidadDivisiones; i++) {

diff --git a/aplicaciones/www/src/scss/estilos.scss b/aplicaciones/www/src/scss/estilos.scss
@@ -68,6 +68,7 @@
   // Fondos
   --moradoProfundo: #760287;
   --moradoPandito: #faf2fc;
+  --verdeUmbral: rgba(76, 166, 88, 0.9);
 }
 
 html {
@@ -144,6 +145,11 @@ main {
   &.visible {
     opacity: 1;
   }
+
+  &.esUmbral {
+    background-color: var(--verdeUmbral);
+    color: var(--blancoMarfil);
+  }
 }
 
 #comparativo {