Standardize UI typography, charts and empty states

src/lib/ui/metrics.ts

@@ -1,5 +1,19 @@
 const numberFormat = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
 
+/** Label the actual bucket start in the chosen timezone; never imply local calendar-day buckets. */
+export function metricPeriodLabels(points: readonly { startAt: number }[], days: 1 | 7 | 30, timeZone: string) {
+    const stride = days === 7 ? 1 : Math.max(1, Math.ceil(points.length / 6));
+    const weekday = new Intl.DateTimeFormat('en-US', { timeZone, weekday: 'short' });
+    const date = new Intl.DateTimeFormat('en-US', { timeZone, day: 'numeric' });
+    const clock = new Intl.DateTimeFormat('en-US', { timeZone, hour: 'numeric' });
+    return points.flatMap((point, index) => index % stride ? [] : [{
+        index,
+        position: (index + 0.5) / points.length * 100,
+        label: days === 1 ? clock.format(point.startAt) : weekday.format(point.startAt),
+        date: days === 30 ? date.format(point.startAt) : ''
+    }]);
+}
+
 export function metricNumber(value: number): string {
     if (!Number.isFinite(value)) return '—';
     if (value > 0 && value < 0.1) return '<0.1';