Skip to content

Commit

Permalink
Merge pull request #54 from enflujo/correcciones-estilo
Browse files Browse the repository at this point in the history
💅🏿 Arreglos de estilo y otros pequeños
  • Loading branch information
1cgonza authored Nov 14, 2023
2 parents 8effc63 + 270c0a9 commit cb7f685
Show file tree
Hide file tree
Showing 6 changed files with 142 additions and 18 deletions.
8 changes: 5 additions & 3 deletions aplicaciones/www/src/componentes/Mapa.astro
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ const { ancho, alto } = Astro.props;
</div>

<script>
import { crearLinea, escalaColores, escalaCoordenadas, extremosLugar } from '@enflujo/alquimia';
import { escalaColores } from '@/utilidades/ayudas';

import { crearLinea, escalaCoordenadas, extremosLugar } from '@enflujo/alquimia';
import type { ExtremosCoordenadas } from '@/tipos';
import type { FeatureCollection } from 'geojson';
import {
Expand All @@ -47,9 +49,9 @@ const { ancho, alto } = Astro.props;
const proporciones = JSON.parse(mapa.dataset.proporciones);
const definirColor = (ascendente: boolean) => {
if (ascendente) {
return escalaColores(0, 100, '#DE2E56', '#94FF1A');
return escalaColores(0, 100, '#ff0000', 'ffffff', '#00ff00');
} else {
return escalaColores(0, 100, '#94FF1A', '#DE2E56');
return escalaColores(0, 100, '#00ff00', 'ffffff', '#ff0000');
}
};

Expand Down
1 change: 0 additions & 1 deletion aplicaciones/www/src/componentes/SelectorNivel.astro
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@
flex-direction: column;
width: fit-content;
margin-bottom: 1em;
margin: 1em;
}
.botonSelector {
margin-right: 1em;
Expand Down
28 changes: 18 additions & 10 deletions aplicaciones/www/src/pages/[ya]/[indicador].astro
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,22 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==

<Plantilla titulo={datosIndicador.nombre}>
<div id="visualizaciones" class="columna" data-archivo={datosIndicador.archivo}>
<div id="filtros">
<div id="indicadorSeleccionado">
<h2 id="nombreYa">{datosYa.nombre}</h2>
<h3 id="nombreIndicador">{datosIndicador.nombre}</h3>
<span id="abrirFicha">?</span>
<div id="secionSuperior">
<div id="filtros">
<div id="indicadorSeleccionado">
<h2 id="nombreYa">{datosYa.nombre}</h2>
<h3 id="nombreIndicador">{datosIndicador.nombre}</h3>

<span id="abrirFicha">?</span>
<p id="descripcionIndicador">{datosIndicador.definicion}</p>
</div>
<FichaTecnica />
<SelectorNivel />
<MenuAnios />
</div>
<FichaTecnica />
<MenuAnios />
<SelectorNivel />

<Mapa ancho={30} alto={45} />
</div>
<Mapa ancho={30} alto={45} />

<LineaTiempo alto={25} />
</div>
Expand Down Expand Up @@ -122,6 +127,10 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
</script>

<style lang="scss">
#secionSuperior {
display: flex;
}

#indicadorSeleccionado {
color: var(--moradoProfundo);
display: flex;
Expand All @@ -130,7 +139,6 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
font-size: 1em;
min-width: 250px;
width: 15vw;
margin: 1em;

#nombreYa {
flex-basis: 100%;
Expand Down
8 changes: 6 additions & 2 deletions aplicaciones/www/src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,12 @@
import Plantilla from '../plantillas/Principal.astro';
---

<Plantilla titulo="Los 10 Yas!">
<h1>Los 10 ya!</h1>
<Plantilla titulo="SIYA">
<div class="inicio">
<h1>SIYA</h1>
<h2 class="subtitulo">Sistema de Indicadores de los YA</h2>
<p>Texto general de inicio sobre el tablero</p>
</div>
</Plantilla>

<style lang="scss"></style>
25 changes: 25 additions & 0 deletions aplicaciones/www/src/scss/estilos.scss
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,30 @@ main {

.columna {
flex-basis: 41%;
padding: 1em;
}

.inicio {
padding: 1em;
text-align: center;
width: 70%;
background-color: var(--moradoProfundo);
color: var(--blancoMarfil);
font-variation-settings:
'MONO' 0,
'CASL' 0,
'wght' 800,
'slnt' 0,
'CRSV' 0.5;

h1 {
font-size: 3em;
}

h2 {
font-size: 1.5em;
width: 100%;
}
}
}

Expand All @@ -72,6 +96,7 @@ main {

#contenedorMapa {
position: relative;
margin-left: 1em;
}

#informacion {
Expand Down
90 changes: 88 additions & 2 deletions aplicaciones/www/src/utilidades/ayudas.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,97 @@
import { escalaColores } from '@enflujo/alquimia';
//import { escalaColores } from '@enflujo/alquimia';

/// PRUEBA ///

/**
* Convierte un valor de una escala a otra.
*
* @param valor Valor que se quiere convertir
* @param escalaBaseMin Valor mínimo de la escala inicial.
* @param escalaBaseMax Valor máximo de la escala inicial.
* @param escalaDestinoMin Valor mínimo de la escala final.
* @param escalaDestinoMax Valor máximo de la escala final.
* @returns Valor convertido a la nueva escala.
*/
export const convertirEscala = (
valor: number,
escalaBaseMin: number,
escalaBaseMax: number,
escalaDestinoMin: number,
escalaDestinoMax: number
): number => {
return (
((valor - escalaBaseMin) * (escalaDestinoMax - escalaDestinoMin)) / (escalaBaseMax - escalaBaseMin) +
escalaDestinoMin
);
};

export const hexARGB = (valor: string): number[] | null => {
valor = valor.includes('#') ? valor.trim().replace('#', '') : valor.trim();

if (valor.length === 3) {
valor = valor[0] + valor[0] + valor[1] + valor[1] + valor[2] + valor[2];
}

if (valor.length != 6) {
console.log(`No se puede convertir el color ${valor}`);
}

const color = valor.match(/.{1,2}/g);
if (color) {
const rgb = [parseInt(color[0], 16), parseInt(color[1], 16), parseInt(color[2], 16)];

return rgb;
}

return null;
};

/**
* Convierte una escala de valores a una escala de colores y mapea el
* valor ingresado al color correspondiente.
* @param valorMin Valor mínimo de la escala que se quiere mapear.
* @param valorMax Valor máximo de la escala que se quiere mapear.
* @param color1 Color inicial de la escala en hexadecimal.
* @param color2 Color central.
* @param color3 Color final de la escala en hexadecimal.
* @returns
*/
export const escalaColores = (valorMin: number, valorMax: number, color1: string, color2: string, color3: string) => {
const colorMin = hexARGB(color1);
const colorMed = hexARGB(color2);
const colorMax = hexARGB(color3);
const valorMed = (valorMin + valorMax) / 2;

const [rMin, gMin, bMin] = colorMin ? colorMin : [255, 255, 255];
const [rMed, gMed, bMed] = colorMed ? colorMed : [127, 127, 127];
const [rMax, gMax, bMax] = colorMax ? colorMax : [0, 0, 0];
/**
* @param {number} valor Cualquier número de la escala que se quiere mapear.
*/
return (valor: number) => {
let r: number;
let g: number;
let b: number;
if (valor <= valorMed) {
r = convertirEscala(valor, valorMin, valorMed, rMin, rMed);
g = convertirEscala(valor, valorMin, valorMed, gMin, gMed);
b = convertirEscala(valor, valorMin, valorMed, bMin, bMed);
} else {
r = convertirEscala(valor, valorMed, valorMax, rMed, rMax);
g = convertirEscala(valor, valorMed, valorMax, gMed, gMax);
b = convertirEscala(valor, valorMed, valorMax, bMed, bMax);
}

return `rgb(${r},${g},${b})`;
};
};

export const aleatorioFraccion = (min: number, max: number) => Math.random() * (max - min) + min;

export function calcularPorcentaje(valor: number, porcentaje: number) {
return valor * (porcentaje / 100);
}

export const color = escalaColores(0, 100, '#DE2E56', '#94FF1A');
export const color = escalaColores(0, 100, '#ff0000', 'ffffff', '#00ff00');

export const porcentajeAPixeles = (porcentaje: number, total: number) => (porcentaje / 100) * total;

0 comments on commit cb7f685

Please sign in to comment.