\n {children}\n

\n \n \n );\n}\n\nfunction StatusBadge({ code, error }: { code: number | null; error: string | null }) {\n if (error) {\n return ERROR;\n }\n if (code && code >= 200 && code < 300) {\n return {code};\n }\n if (code && code >= 400) {\n return {code};\n }\n return {code ?? \"?\"};\n}\n\nfunction DurationBar({ ms, maxMs }: { ms: number; maxMs: number }) {\n const pct = Math.min(100, Math.round((ms / maxMs) * 100));\n const color = ms < 300 ? \"bg-green-500\" : ms < 500 ? \"bg-yellow-500\" : \"bg-red-500\";\n return (\n

\n {ms}ms\n

\n );\n}\n\nfunction StatCard({ label, value, sub }: { label: string; value: string; sub?: string }) {\n return (\n

{label}

{value}

\n {sub &&

{sub}

}\n

\n );\n}\n\nfunction ResponseChart({ data, width, height }: { data: { time: string; ms: number; error: boolean }[]; width: number; height: number }) {\n if (data.length < 2) {\n return (\n

\n Not enough data for chart yet\n

\n );\n }\n\n const padTop = 30;\n const padBottom = 40;\n const padLeft = 50;\n const padRight = 20;\n const chartW = width - padLeft - padRight;\n const chartH = height - padTop - padBottom;\n\n const maxMs = Math.max(...data.map((d) => d.ms));\n const minMs = Math.min(...data.map((d) => d.ms));\n const yMax = Math.ceil(maxMs / 100) * 100;\n const yMin = 0;\n\n const points = data.map((d, i) => {\n const x = padLeft + (i / (data.length - 1)) * chartW;\n const y = padTop + chartH - ((d.ms - yMin) / (yMax - yMin)) * chartH;\n return { x, y, ...d };\n });\n\n const linePath = points.map((p, i) => `${i === 0 ? \"M\" : \"L\"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(\" \");\n const areaPath = linePath + ` L${points[points.length - 1].x.toFixed(1)},${padTop + chartH} L${points[0].x.toFixed(1)},${padTop + chartH} Z`;\n\n // Y-axis gridlines\n const yTicks = 5;\n const yLines = Array.from({ length: yTicks + 1 }, (_, i) => {\n const val = yMin + ((yMax - yMin) / yTicks) * i;\n const y = padTop + chartH - (i / yTicks) * chartH;\n return { val: Math.round(val), y };\n });\n\n // X-axis labels (show ~6)\n const xLabelCount = Math.min(6, data.length);\n const xLabels = Array.from({ length: xLabelCount }, (_, i) => {\n const idx = Math.round((i / (xLabelCount - 1)) * (data.length - 1));\n const d = new Date(data[idx].time);\n const label = `${d.getUTCHours().toString().padStart(2, \"0\")}:${d.getUTCMinutes().toString().padStart(2, \"0\")}`;\n const x = padLeft + (idx / (data.length - 1)) * chartW;\n return { label, x };\n });\n\n // Avg line\n const avgMs = data.reduce((s, d) => s + d.ms, 0) / data.length;\n const avgY = padTop + chartH - ((avgMs - yMin) / (yMax - yMin)) * chartH;\n\n return (\n

Response Time

\n Last {data.length} polls\n

\n \n

\n );\n}\n\napp.get(\"/\", async (c) => {\n const page = parseInt(c.req.query(\"page\") || \"1\");\n const perPage = 50;\n const offset = (page - 1) * perPage;\n\n // Chart data (all polls, oldest first)\n const chartResult = await sqlite.execute(\n `SELECT started_at, duration_ms, error FROM poll_log ORDER BY id ASC`\n );\n const chartData = (chartResult.rows as any[]).map((r: any) => ({\n time: r.started_at,\n ms: r.duration_ms,\n error: r.error !== null,\n }));\n\n // Aggregate stats\n const statsResult = await sqlite.execute(\n `SELECT\n COUNT(*) as total,\n ROUND(AVG(duration_ms), 1) as avg_ms,\n MIN(duration_ms) as min_ms,\n MAX(duration_ms) as max_ms,\n SUM(CASE WHEN error IS NOT NULL THEN 1 ELSE 0 END) as errors,\n SUM(CASE WHEN status_code != 200 THEN 1 ELSE 0 END) as non_200,\n MIN(started_at) as first_poll,\n MAX(started_at) as last_poll\n FROM poll_log`\n );\n const stats = statsResult.rows[0] as any;\n\n // Last hour stats\n const hourResult = await sqlite.execute(\n `SELECT\n COUNT(*) as total,\n ROUND(AVG(duration_ms), 1) as avg_ms,\n SUM(CASE WHEN error IS NOT NULL THEN 1 ELSE 0 END) as errors\n FROM poll_log\n WHERE started_at > datetime('now', '-1 hour')`\n );\n const hourStats = hourResult.rows[0] as any;\n\n // Uptime percentage\n const uptimePct = stats.total > 0\n ? ((stats.total - stats.errors - stats.non_200) / stats.total * 100).toFixed(2)\n : \"N/A\";\n\n // Recent poll entries\n const logsResult = await sqlite.execute({\n sql: `SELECT * FROM poll_log ORDER BY id DESC LIMIT ? OFFSET ?`,\n args: [perPage, offset],\n });\n const logs = logsResult.rows as any[];\n\n // Count for pagination\n const totalCount = stats.total as number;\n const totalPages = Math.ceil(totalCount / perPage);\n\n return c.html(\n \n

📡 Dan Polling Dashboard

Monitoring: {ENDPOINT}

\n \n ↻ Refresh\n \n

\n\n {/* Stats Grid */}\n

\n \n \n \n \n

\n\n {/* Response Time Chart */}\n \n\n {/* Log Table */}\n

Recent Polls

\n \n \n \n \n \n \n \n \n \n \n \n {logs.map((log: any) => (\n \n \n \n \n \n \n \n ))}\n \n

#	Time	Status	Duration	Error
{log.id}	\n {new Date(log.started_at).toLocaleString(\"en-US\", {\n month: \"short\", day: \"numeric\",\n hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\",\n hour12: false,\n })}\n	\n \n	\n \n	\n {log.error \|\| \"—\"}\n

\n\n {/* Pagination */}\n {totalPages > 1 && (\n

\n \n Page {page} of {totalPages} ({totalCount} total)\n \n

\n {page > 1 && (\n \n ← Prev\n \n )}\n {page < totalPages && (\n \n Next →\n \n )}\n

\n )}\n

\n\n

\n Polling every 1 minute · Powered by Val Town\n

\n \n );\n});\n\nexport default app.fetch;\n","deleted","label",[100],"permalink","https://www.val.town/x/stevekrouse/dan-polling/code/dashboard.tsx","extension","actionData","errors"]