forecast/pages/components/Metrics.jsx
2021-08-06 20:57:13 +02:00

86 lines
2.2 KiB
JavaScript

import React from "react";
import {
convertTime,
degToCompass,
kmToM,
mpsToMph,
timeToAMPM,
} from "../services/converters";
import MetricCard from "./MetricCard";
const Metrics = ({ styles, data, systemUsed }) => {
return (
<div className={styles.statsBox}>
<MetricCard
title={"Humidity"}
iconSrc={"/icons/025-humidity.png"}
metric={data.main.humidity}
unit={"%"}
styles={styles}
/>
<MetricCard
title={"Wind speed"}
iconSrc={"/icons/017-wind.png"}
metric={
systemUsed == "metric" ? data.wind.speed : mpsToMph(data.wind.speed)
}
unit={systemUsed == "metric" ? "m/s" : "m/h"}
styles={styles}
/>
<MetricCard
title={"Wind direction"}
iconSrc={"/icons/014-compass.png"}
metric={degToCompass(data.wind.deg)}
styles={styles}
/>
<MetricCard
title={"Visibility"}
iconSrc={"/icons/binocular.png"}
metric={
systemUsed == "metric"
? (data.visibility / 1000).toPrecision(2)
: kmToM(data.visibility / 1000)
}
unit={systemUsed == "metric" ? "km" : "miles"}
styles={styles}
/>
<MetricCard
title={"Sunrise"}
iconSrc={"/icons/040-sunrise.png"}
metric={
systemUsed == "metric"
? `${parseInt(
convertTime(data.sys.sunrise, data.timezone)[0].split(":")[0]
)}:${
convertTime(data.sys.sunrise, data.timezone)[0].split(":")[1]
}`
: timeToAMPM(convertTime(data.sys.sunrise, data.timezone)[0])
}
styles={styles}
/>
<MetricCard
title={"Sunset"}
iconSrc={"/icons/041-sunset.png"}
metric={
systemUsed == "metric"
? convertTime(data.sys.sunset, data.timezone)[0]
: timeToAMPM(convertTime(data.sys.sunset, data.timezone)[0])
}
unit={
systemUsed == "imperial"
? isPMs(convertTime(data.sys.sunset, data.timezone)[0])
: ""
}
styles={styles}
/>
</div>
);
};
export default Metrics;