Skip to content

Commit

Permalink
AC-258 minor details fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
Minotriz02 authored and Minotriz02 committed Nov 15, 2024
1 parent 71a379b commit 2f908df
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 33 deletions.
12 changes: 6 additions & 6 deletions src/src/components/stationCard/StationCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,12 @@ function StationCard({ loading, msgError, station }) {
<div>
<div className="mb-4">
<h4 className="mb-0">{station.name}</h4>
<span className="text-capitalize">
<IconMapPin size={24} className="me-2" />
{station.municipality}, {station.state}
</span>
</div>
<div className="d-flex flex-column gap-1">
<span>
{lastDataStation?.climaticData
? lastDataStation.climaticData
Expand All @@ -92,8 +98,6 @@ function StationCard({ loading, msgError, station }) {
: "N/A"}{" "}
°C
</span>
</div>
<div className="d-flex flex-column gap-1">
{renderClimaticData(
"prec",
<IconDroplet size={24} className="me-2" />,
Expand All @@ -116,10 +120,6 @@ function StationCard({ loading, msgError, station }) {
<span>{lastDataStation?.date ?? "N/A"}</span>
</div>
<div>
<span className="text-capitalize">
<IconMapPin size={24} className="me-2" />
{station.municipality}, {station.state}
</span>
</div>
</div>
</div>
Expand Down
112 changes: 95 additions & 17 deletions src/src/components/weatherChart/WeatherChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,92 @@ const WeatherChart = ({
isChartLoading,
startAtZero,
}) => {
const adjustColorOpacity = (color, opacity) => {
const rgba = color.replace(
/rgba?\((\d+), ?(\d+), ?(\d+),? ?([\d.]*)\)/,
(match, r, g, b, a) => {
return `rgba(${r},${g},${b},${opacity})`;
const adjustColor = (
color,
opacity = 1,
brightnessFactor = 1.2,
hueShift = 10
) => {
// Convertir RGB a HSL
const rgbToHsl = (r, g, b) => {
r /= 255;
g /= 255;
b /= 255;

const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h,
s,
l = (max + min) / 2;

if (max === min) {
h = s = 0; // gris
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h *= 60;
}

return [h, s, l];
};

// Convertir HSL de nuevo a RGB
const hslToRgb = (h, s, l) => {
let r, g, b;

const hueToRgb = (p, q, t) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 3) return q;
if (t < 1 / 2) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};

if (s === 0) {
r = g = b = l; // gris
} else {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hueToRgb(p, q, h / 360 + 1 / 3);
g = hueToRgb(p, q, h / 360);
b = hueToRgb(p, q, h / 360 - 1 / 3);
}
);
return rgba;

return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
};

// Extraer los valores RGB del color
const rgbaMatch = color.match(/rgba?\((\d+), ?(\d+), ?(\d+),? ?([\d.]*)\)/);
if (!rgbaMatch) {
throw new Error("Formato de color no válido");
}

const [r, g, b] = rgbaMatch.slice(1, 4).map(Number);

// Convertir a HSL
let [h, s, l] = rgbToHsl(r, g, b);

// Ajustar el brillo (luminance) y el hue (matiz)
l = Math.min(1, l * brightnessFactor); // Aumentar el brillo
h = (h + hueShift) % 360; // Cambiar el hue

// Convertir de nuevo a RGB
const [newR, newG, newB] = hslToRgb(h, s, l);

// Retornar el color con la nueva opacidad
return `rgba(${newR},${newG},${newB},${opacity})`;
};

const maxItem = useMemo(
Expand Down Expand Up @@ -99,6 +177,7 @@ const WeatherChart = ({
data: data.map((item) => item.value),
fill: false,
borderColor: color,
backgroundColor: color,
tension: 0.1,
},
...(dataSpacial.length > 0
Expand All @@ -107,7 +186,8 @@ const WeatherChart = ({
label: `Datos satelitales`,
data: dataSpacial.map((item) => item.value),
fill: false,
borderColor: adjustColorOpacity(color, 0.5),
borderColor: adjustColor(color, 0.5, 1, 15),
backgroundColor: adjustColor(color, 0.5, 1, 15),
tension: 0.1,
},
]
Expand Down Expand Up @@ -189,23 +269,21 @@ const WeatherChart = ({
) : (
<>
<p>
La gráfica muestra la evolución de {title.toLowerCase()}{" "}
registrada en la estación meteorológica durante los{" "}
<b>últimos {data.length} días</b>. En ella se destaca que el
día con la {title.toLowerCase()} más alta fue el{" "}
La gráfica muestra los datos de {title.toLowerCase()}{" "}
registrada en la estación meteorológica desde{" "}
<b>{data[0].label}</b> hasta{" "}
<b>{data[data.length - 1].label}</b>. En ella se destaca que
el día con la {title.toLowerCase()} más alta fue el{" "}
<b>{formatLabel(maxItem.label)}</b>, alcanzando un máximo de{" "}
<b>
{maxItem.value.toFixed(2)} {unit}
</b>
, mientras que el día con la {title.toLowerCase()} más baja
fue el <b>{formatLabel(minItem.label)}</b>, con una{" "}
{title.toLowerCase()} de{" "}
fue el <b>{formatLabel(minItem.label)}</b>, con una mínima de{" "}
<b>
{minItem.value.toFixed(2)} {unit}
</b>
. Esta visualización permite analizar las variaciones diarias
de {title.toLowerCase()} y ofrece una referencia clara para
identificar patrones climáticos recientes en la región.
.
</p>
<Line
data={chartConfig("Datos estación", data, color, dataSpacial)}
Expand Down
4 changes: 4 additions & 0 deletions src/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,8 @@ code {

p {
text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
16 changes: 11 additions & 5 deletions src/src/pages/dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,6 +368,12 @@ const Dashboard = () => {
<div className="d-flex justify-content-between flex-column flex-lg-row">
<div>
<h1 className="mb-0">{currentStation?.name}</h1>
<p className="mb-0">
Ubicacion:{" "}
{currentStation?.latitude +
", " +
currentStation?.longitude}
</p>
<p className="text-muted ">Fuente: WeatherLink</p>
</div>
<div className="d-flex justify-content-between flex-column align-items-end mb-2">
Expand Down Expand Up @@ -425,13 +431,13 @@ const Dashboard = () => {
La estación meteorológica <b>{currentStation?.name}</b> está
ubicada en{" "}
<b>
{currentStation?.latitude + ", " + currentStation?.longitude}.{" "}
{currentStation?.municipality + ", " + currentStation?.state}.{" "}
</b>
Cuenta con datos observados desde el{" "}
<b>{startDataDate || "N/A"}</b> hasta el{" "}
Cuenta con datos observados desde{" "}
<b>{startDataDate || "N/A"}</b> hasta{" "}
<b>{endDataDate || "N/A"}</b>, se puede comparar con datos
espaciales como AgERA-5 y CHIRPS que tiene datos desde el{" "}
<b>{startDataSpacialDate || "N/A"}</b> hasta el{" "}
espaciales como <b>AgERA-5 y CHIRPS</b> que tiene datos desde{" "}
<b>{startDataSpacialDate || "N/A"}</b> hasta{" "}
<b>{endDataSpacialDate || "N/A"}</b>.
</p>
{currentStation?.latitude && currentStation?.longitude ? (
Expand Down
9 changes: 4 additions & 5 deletions src/src/pages/home/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,17 +93,16 @@ const Home = () => {
<Col className="col-12 col-md-7 col-lg-5 d-flex flex-column gap-2 mb-5 mb-md-0">
<h1 className="text-light">Bienvenido a AClimate monitoring</h1>
<p className="text-light fw-medium">
Explora y compara los datos de las estaciones en tiempo real con
otras bases de datos confiables. Simplifica la toma de
decisiones con información precisa y personalizada al alcance de
tu mano.
Explora, monitorea y compara los datos de las estaciones
climátologicas con bases de datos satelitales. Informate sobre
como ha sido el clima en las regiones.
</p>
<Link
to="/estaciones"
className="btn btn-primary text-light rounded-5 py-2 px-4 fw-semibold"
aria-label="Revisa los datos"
>
Revisa los datos
Explora el clima
</Link>
</Col>
</Row>
Expand Down

0 comments on commit 2f908df

Please sign in to comment.