import { cors } from "https://deno.land/x/hono@v3.5.6/middleware.ts" import { Hono } from "https://deno.land/x/hono@v3.5.6/mod.ts" import { sqlite } from "https://esm.town/v/std/sqlite" import * as d3 from "npm:d3" const KEY = new URL(import.meta.url).pathname.split("/").at(-1) const TABLE_NAME = `${KEY}_devstats` const app = new Hono() app.use("*", cors()) app.get("/", async (c) => { const numFormat = new Intl.NumberFormat("en") const rows = await getRows() const max = d3.max(rows, r => r.date) const html = ` DevStats Dashboard

Developer Statistics ${max ? `Updated ${max}` : ""}

This page receives data from our GitHub Actions runs and other developer-adjacent data, and then shows us statistics of those values over time. We're using it to track how our dependencies sizes and other stats affect our application.

View source: Val Town

` return c.html(html) }) const script = (async () => { const Plot = await import("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm") const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm") const data = ((window as any).DATA as Rows).map(d => ({ ...d, date: new Date(d.date + "+5"), })) const extent = d3.extent(data, d => d.date) const groups: Record = {} for (let x of data) { groups[x.name] = groups[x.name] || [] groups[x.name].push(x) } const container = document.querySelector("#plot")! Object.entries(groups).map(([name, data], i, { length }) => { const wrap = container.appendChild(document.createElement("div")) const c = d3.schemeTableau10[i] wrap.className = `relative bg-[${c}] border-t border-[${c}] bg-opacity-10 ${i === length - 1 ? "border-b" : ""}` const title = wrap.appendChild(document.createElement("h2")) title.className = `text-xs bg-[${c}] text-[${c}] block p-1 rounded bg-opacity-10 font-semibold font-mono absolute top-1 left-1` title.innerText = name const div = wrap.appendChild(document.createElement("div")) const width = div.getBoundingClientRect().width const plot = Plot.lineY(data, { x: "date", y: "value", curve: "step-after", stroke: () => c, tip: true, }).plot({ width, x: { extent, grid: true }, y: { grid: true, label: null, paddingOuter: 100 }, marginLeft: 80, marginBottom: 40, marginTop: 40, height: 300, }) div.append(plot) }) }).toString().split("\n").slice(1).slice(0, -1).join("\n") async function getRows() { const result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME}`) const rows = result.rows.map(r => ({ id: String(r[0]), name: String(r[1]), value: +r[2], date: String(r[3]), })) return rows } type Rows = Awaited> app.get("/api", async function apiRoute(c) { try { return c.json(await getRows()) } catch (error) { console.error("Error fetching data:", error) return c.text("Error fetching data", 500) } }) app.post("/", async (c) => { try { const authHeader = c.req.header("Authorization") if (authHeader !== `Bearer ${Deno.env.get("DEVSTATS_KEY")}`) { return c.text("Unauthorized", 401) } const { name, value } = await c.req.json() if (!name || !value) { return c.text("Missing name or value in the request body", 400) } await sqlite.execute({ sql: `INSERT INTO ${TABLE_NAME} (name, value) VALUES (?, ?)`, args: [name, value], }) return c.text("Data inserted successfully", 201) } catch (error) { console.error("Error inserting data:", error) return c.text("Error inserting data", 500) } }) export default async function(req: Request): Promise { await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${TABLE_NAME} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, value REAL NOT NULL, date DATETIME DEFAULT CURRENT_TIMESTAMP ) `) return app.fetch(req) }