Graph fixes

client/src/components/ForecastStrip.vue

@@ -80,8 +80,7 @@ onMounted(async () => {
 		</div>
 		<div v-else class="strip">
 			<div v-for="d in filler" class="day">
-				<div class="day-name w-100 br-2 overflow-hidden pos-rel"><Loading /></div>
-				<div class="br-2 overflow-hidden pos-rel mb-2" style="height: 80px; width: 80px;"><Loading /></div>
+				<div class="br-2 overflow-hidden pos-rel my-2" style="height: 50px; width: 50px;"><Loading /></div>
 				<div class="day-temps mb-2">
 					<div class="br-2 overflow-hidden pos-rel" style="width: 50px; height: 1em"><Loading/></div>
 					<div class="br-2 overflow-hidden pos-rel" style="width: 50px; height: 1em"><Loading/></div>

client/src/views/Dashboard.vue

@@ -171,9 +171,9 @@ onUnmounted(() => {
 
 			<Precipitation class="mb-3" />
 			<Wind class="mb-3" />
-			<Seismic class="mb-3" />
 			<Sun class="mb-3" />
-			<Moon class="mb-2" />
+			<Moon class="mb-3" />
+			<Seismic class="mb-3" />
 
 			<div class="align-x">
 				<a :href="BASE + '/docs'" style="font-size: 0.75em;" target="_blank">OpenAPI Docs</a> | <a href="https://zakscode.com" style="font-size: 0.75em;" target="_blank">ZaksCode</a>

server/src/forecast.mjs

@@ -2,10 +2,17 @@ import {queryHourly, getCoords, queryCurrent} from './influx.mjs';
 import {getCelestialCurrent} from './celestial.mjs';
 import {getWeatherCondition} from './openweather.mjs';
 import {localDateStr} from './config.mjs';
+import {uvLabel} from './openmeteo.mjs';
 
 export let lastForecast = { ts: 0, slots: [], summary: null }
 export const forecastTTL = 5 * 60 * 60_000
 
+function estimateUV(sunElevation, cloudFraction) {
+	if (sunElevation <= 0) return 0;
+	const clearSkyUV = Math.sin((sunElevation * Math.PI) / 180) * 12;
+	return Math.round(clearSkyUV * (1 - cloudFraction * 0.75) * 10) / 10;
+}
+
 function linearTrend(values) {
 	const n = values.length;
 	if (n < 2) return 0;
@@ -117,6 +124,7 @@ export async function get24HourForecast(currentSensors) {
 		const temperature = Math.round(bgTemp * 10) / 10;
 		const humidity   = forecastHumidity(seedAbsHum, temperature);
 		const wind_speed = forecastWind(seedWind, pressureTrend);
+		const uv_index = estimateUV(celestial.sun_elevation ?? 0, clouds);
 
 		const celestial = getCelestialCurrent(coords.latitude, coords.longitude, time);
 		const snapshot = {
@@ -131,6 +139,8 @@ export async function get24HourForecast(currentSensors) {
 			wind_speed,
 			clouds,
 			precipitation_chance:   Math.round(weather.precipChance * (1 - i * 0.02) * 100),
+			uv_index,
+			uv_index_label: uvLabel(uv_index),
 			...celestial
 		};
 

server/src/openmeteo.mjs

@@ -80,7 +80,7 @@ function absoluteHumidity(tempC, humidity) {
   return Math.round((humidity / 100 * svp * 2165) / (tempC + 273.15) * 1000) / 1000
 }
 
-function uvLabel(uv) {
+export function uvLabel(uv) {
   if (uv < 3)  return 'Low'
   if (uv < 6)  return 'Moderate'
   if (uv < 8)  return 'High'

server/src/server.mjs

@@ -56,15 +56,13 @@ app.get('/api/current', async (req, res) => {
 	const space     = getCelestialCurrent(coords.latitude, coords.longitude)
 	const condition = getWeatherCondition(Object.assign(sensors, space))
 
-	console.time();
 	const forecast = await getForecast();
-	console.timeEnd();
-	console.log(forecast);
 	const merged = {
 		...(forecast?.summary ? {
 			precipitation_chance: forecast.summary.precipitation_chance,
 			temperature_max:      forecast.summary.temperature_max,
 			temperature_min:      forecast.summary.temperature_min,
+			uv_index_max:         forecast.summary.uv_index,
 		} : {}),
 		...condition,
 		...sensors,