Coding Time Chart

/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; enum Color { Background = "#0f172a", Foreground = "#1e293b", Accent = "#ec4899", Text = "#fbcfe8", Row = "#334155", RowVariant = "#475569", } function roundRect( ctx: any, x: any, y: any, width: any, height: any, radius: any, ) { ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.lineTo(x + width - radius, y); ctx.quadraticCurveTo(x + width, y, x + width, y + radius); ctx.lineTo(x + width, y + height - radius); ctx.quadraticCurveTo( x + width, y + height, x + width - radius, y + height, ); ctx.lineTo(x + radius, y + height); ctx.quadraticCurveTo(x, y + height, x, y + height - radius); ctx.lineTo(x, y + radius); ctx.quadraticCurveTo(x, y, x + radius, y); ctx.closePath(); return ctx; } function roundRectTop( ctx: any, x: any, y: any, width: any, height: any, radius: any, ) { ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.lineTo(x + width - radius, y); ctx.quadraticCurveTo(x + width, y, x + width, y + radius); ctx.lineTo(x + width, y + height); ctx.lineTo(x, y + height); ctx.lineTo(x, y + radius); ctx.quadraticCurveTo(x, y, x + radius, y); ctx.closePath(); return ctx; } interface DataPoint { date: string; hours: number; } function App() { const [chartUrl, setChartUrl] = useState(null); useEffect(() => { fetch("/chart") .then(response => response.text()) .then(setChartUrl) .catch(console.error); }, []); return (

); } function client() { createRoot(document.getElementById("root")!).render(); } if (typeof document !== "undefined") { client(); } async function fetchWakaTimeData(): Promise { const response = await fetch("https://wakatime.com/share/@load1n9/899abefd-d814-4e99-b603-e94af0305d4a.json"); const data = await response.json(); return data.data.map((item: any) => ({ date: item.range.date, hours: parseFloat(item.grand_total.decimal), })); } async function generateChart(data: DataPoint[]): Promise { const width = 1000; const height = 600; const padding = 40; const barWidth = (width - 2 * padding) / data.length; const { createCanvas } = await import("https://deno.land/x/canvas/mod.ts"); const canvas = createCanvas(width, height); const ctx = canvas.getContext("2d"); // Set background ctx.fillStyle = Color.Background; roundRect(ctx, 0, 0, width, height, 10).fill(); // Find max value for scaling const maxHours = Math.max(...data.map(d => d.hours)); // Draw bars data.forEach((point, index) => { const x = padding + index * barWidth; const barHeight = (point.hours / maxHours) * (height - 2 * padding); const y = height - padding - barHeight; ctx.fillStyle = Color.Accent; roundRectTop(ctx, x, y, barWidth - 2, barHeight, 10).fill(); ctx.fillStyle = Color.Text; ctx.font = "12px Arial"; ctx.textAlign = "center"; ctx.fillText(point.date, (x + barWidth / 2) - 35, height - padding + 15); }); // Draw axes ctx.beginPath(); ctx.moveTo(padding, padding); ctx.lineTo(padding, height - padding); ctx.lineTo(width - padding, height - padding); ctx.stroke(); // Y-axis labels ctx.textAlign = "right"; ctx.textBaseline = "middle"; ctx.font = "bold 15px Arial"; for (let i = 0; i <= 5; i++) { const y = height - padding - (i / 5) * (height - 2 * padding); ctx.fillText((maxHours * i / 5).toFixed(0) + "h", padding - 30, y); } return canvas.toBuffer(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/chart") { try { const data = await fetchWakaTimeData(); const chartBuffer = await generateChart(data); return new Response(chartBuffer, { headers: { "content-type": "image/png", "Cache-Control": "max-age=60", }, }); } catch (error) { console.error("Error generating chart:", error); return new Response("Error generating chart", { status: 500 }); } } return new Response( ` Coding Time Chart

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } #root { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #333; } img { max-width: 100%; height: auto; } `;