diff --git a/aplicaciones/www/src/componentes/Linea.ts b/aplicaciones/www/src/componentes/Linea.ts index 2ee0247..6bd3b52 100644 --- 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 index ae24139..7901ac6 100644 --- 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('#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 index 4bbe876..a558cd2 100644 --- 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 {