initial commit

web/src/hooks/useTimeRange.ts

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+
+export type TimeRange = '15m' | '1h' | '6h' | '24h'
+
+const RANGE_MS: Record<TimeRange, number> = {
+  '15m': 15 * 60_000,
+  '1h': 60 * 60_000,
+  '6h': 6 * 60 * 60_000,
+  '24h': 24 * 60 * 60_000,
+}
+
+/** Roughly 40-60 bars per chart, which is where recharts stays readable. */
+const RANGE_BUCKETS: Record<TimeRange, number> = {
+  '15m': 30,
+  '1h': 60,
+  '6h': 72,
+  '24h': 96,
+}
+
+export const TIME_RANGES: TimeRange[] = ['15m', '1h', '6h', '24h']
+
+export interface TimeRangeState {
+  range: TimeRange
+  setRange: (range: TimeRange) => void
+  rangeMs: number
+  buckets: number
+  /** ISO timestamp for the `since` query parameter. */
+  since: () => string
+}
+
+export function useTimeRange(defaultRange: TimeRange = '1h'): TimeRangeState {
+  const [range, setRange] = useState<TimeRange>(defaultRange)
+
+  const rangeMs = RANGE_MS[range]
+  const buckets = RANGE_BUCKETS[range]
+
+  return {
+    range,
+    setRange,
+    rangeMs,
+    buckets,
+    since: () => new Date(Date.now() - rangeMs).toISOString(),
+  }
+}