Fixed up sensor cards

client/src/components/Seismic.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import {ref, onMounted, onUnmounted} from 'vue';
+import {api} from '../services/api';
+import MetricRow from './MetricRow.vue';
+
+const d = ref<any>(null);
+const history = ref<number[]>([]);
+const W = 320, H = 60, MAX_PTS = 120;
+let interval: ReturnType<typeof setInterval>;
+
+function toPath(pts: number[]) {
+	if(!pts.length) return '';
+	const mid = H / 2, amp = H / 2 - 4;
+	const max = Math.max(...pts) || 1;
+	return pts.map((v, i) => {
+		const x = (i / (MAX_PTS - 1)) * W;
+		const normalized = v / max;
+		const flipped = i % 2 === 0 ? normalized : -normalized;
+		const y = mid - flipped * amp;
+		return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
+	}).join(' ');
+}
+
+async function poll() {
+	d.value = await api.current('magnitude');
+	history.value.push(d.value.magnitude ?? 0);
+	if(history.value.length > MAX_PTS) history.value.shift();
+}
+
+onMounted(async () => { await poll(); interval = setInterval(poll, 5000); });
+onUnmounted(() => clearInterval(interval));
+</script>
+
+<style scoped lang="scss">
+svg { width: 100%; height: 60px; overflow: visible; }
+</style>
+
+<template>
+	<div class="card" v-if="d">
+		<div class="card-title">🫨 Seismic</div>
+
+		<MetricRow label="Magnitude" :value="d.magnitude?.toFixed(4)" metric-key="magnitude" :data="d" />
+
+		<svg :viewBox="`0 0 ${W} ${H}`" preserveAspectRatio="none">
+			<line :x1="0" :y1="H/2" :x2="W" :y2="H/2" stroke="var(--border)" stroke-width="1" />
+			<path :d="toPath(history)" fill="none" stroke="var(--accent)" stroke-width="1.5" />
+		</svg>
+
+	</div>
+</template>