weather-station/client/src/components/Sun.vue

<script setup lang="ts">
import Loading from '@/components/Loading.vue';
import {getUVLabel} from '@/services/units.ts';
import {inject, computed } from 'vue';
import {useWeather} from '../services/api';

const openGraph = inject<(key: string) => void>('openGraph');
const {current: data} = useWeather();

const W = 320, H = 120, HORIZON = 45;

const arc = computed(() => {
	if (!data.value) return { filledPath: '', remainPath: '', cx: 0, cy: 0, pct: 0 };

	const rise = new Date(data.value.sunrise).getTime();
	const set  = new Date(data.value.sunset).getTime();
	const now  = Date.now();

	const dayLen = set - rise;
	const noon   = rise + dayLen / 2;
	const start  = noon - 12 * 3600 * 1000;
	const end    = noon + 12 * 3600 * 1000;

	const riseT   = (rise - start) / (end - start);
	const setT    = (set  - start) / (end - start);
	const dayPct  = Math.max(0, Math.min(1, (now - rise) / dayLen));
	const sunT    = riseT + dayPct * (setT - riseT);

	// After sunset, continue tracking sun below horizon
	const totalPct = Math.max(0, Math.min(1, (now - start) / (end - start)));

	const x1 = 0, x2 = W;
	const totalW = x2 - x1;
	const amplitude = H * 0.45;
	const midY = H / 2;

	const sineY = (t: number) => midY - Math.sin(t * Math.PI * 2 - Math.PI / 2) * amplitude;
	const horizonY = sineY(riseT);

	const pts = Array.from({ length: 201 }, (_, i) => {
		const t = i / 200;
		return { x: x1 + totalW * t, y: sineY(t) };
	});

	const splitIdx = Math.round(totalPct * 200);
	const { x: cx, y: cy } = <any>pts[Math.min(splitIdx, 200)];

	const traveledPts: any = pts.slice(0, splitIdx + 1);
	const filledPath = traveledPts.map((p: any, i: any) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ')
		+ ` L${traveledPts[traveledPts.length - 1].x.toFixed(1)},${horizonY}`
		+ ` L${x1},${horizonY} Z`;

	const remainPts = pts.slice(splitIdx);
	const remainPath = remainPts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');

	const riseX = x1 + totalW * riseT;
	const setX  = x1 + totalW * setT;

	return { filledPath, remainPath, cx, cy, pct: dayPct, riseX, setX, horizonY };
});
</script>

<template>
	<div class="sun-card">
		<div class="card-title">🌅 Sun</div>

		<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden mx-auto" style="width: 100%; aspect-ratio: 3"><Loading /></div>

		<template v-else>
			<!-- Top labels -->
			<div class="sun-top-labels" v-if="data">
				<div>
					<div class="stat-label">Sunrise</div>
					<div class="stat-value">{{ new Date(data.sunrise).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}</div>
				</div>
				<div style="text-align:right">
					<div class="stat-label">Sunset</div>
					<div class="stat-value">{{ new Date(data.sunset).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}</div>
				</div>
			</div>

			<svg :viewBox="`0 0 ${W} ${H}`" preserveAspectRatio="none">
				<!-- Filled traveled area -->
				<path v-if="arc.filledPath" :d="arc.filledPath" fill="#3b82f6" opacity="0.35" />
				<!-- Remaining curve stroke -->
				<path v-if="arc.remainPath" :d="arc.remainPath" fill="none" stroke="#94a3b8" stroke-width="1.5" opacity="0.5" />
				<!-- Horizon line -->
				<line :x1="0" :y1="arc.horizonY" :x2="W" :y2="arc.horizonY" stroke="var(--border)" stroke-width="1" />
				<!-- Sun dot -->
				<circle v-if="data" :cx="arc.cx" :cy="arc.cy" r="8" fill="#f59e0b" class="sun-dot" />
			</svg>
		</template>

		<div class="divider" />

		<div class="stat-grid">
			<div class="stat">
				<span class="stat-label">Daylight</span>
				<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ data.daylight?.toFixed(2) ?? '—' }} <span v-if="data.daylight" class="fg-muted">hrs</span></span>
			</div>
			<div class="stat" @click="openGraph?.('lux')">
				<span class="stat-label">Brightness</span>
				<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ data.lux ?? '—' }} <span v-if="data.lux != null" class="fg-muted">lm/m²</span></span>
			</div>
			<div class="stat" @click="openGraph?.('solar_wm2')">
				<span class="stat-label">Irradiance</span>
				<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ data.solar_wm2 ?? '—' }} <span v-if="data.lux != null" class="fg-muted">W/m²</span></span>
			</div>
		</div>

		<div class="divider" />

		<div class="stat-grid">
			<div class="stat" @click="openGraph?.('uv_index')">
				<span class="stat-label">UV Index</span>
				<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ data.uv_index?.toFixed(1) ?? '—' }} <span v-if="data.uv_index != null" class="fg-muted">({{ getUVLabel(data.uv_index) }})</span></span>
			</div>
			<div class="stat" @click="openGraph?.('uv_dose')">
				<span class="stat-label">UV Dose</span>
				<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ data.uv_dose?.toFixed(0) ?? '—' }} <span v-if="data.uv_dose != null" class="fg-muted">J/m²</span></span>
			</div>
			<div class="stat" @click="openGraph?.('uv_index_max')">
				<span class="stat-label">UV Max</span>
				<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ data.uv_index_max ?? '—' }} <span v-if="data.uv_index_max != null" class="fg-muted">({{getUVLabel(data.uv_index_max)}})</span></span>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.sun-card {
	position: relative;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sun-top-labels {
	display: flex;
	justify-content: space-between;
	padding: 0 4px;
}
.card-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
}
.divider {
	height: 1px;
	background: var(--border);
}
.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
}
.stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	cursor: pointer;
	border-radius: 8px;
	padding: 4px 6px;
	margin: -4px -6px;
	transition: background 0.15s;
	&:hover { background: var(--hover); }
}
.stat-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}
.stat-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}
svg {
	width: 100%;
	height: 120px;
	overflow: visible;
}
.sun-dot {
	filter: drop-shadow(0 0 5px #f59e0b88);
}
</style>