Coding Time Chart

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_155":156,"_157":158},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":49,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",52,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","fb2c8b9e-279e-11f0-9d52-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nenum Color {\n Background = \"#020617\",\n Foreground = \"#1e293b\",\n Accent = \"#ec4899\",\n Text = \"#fbcfe8\",\n Row = \"#334155\",\n RowVariant = \"#475569\",\n}\n\nfunction roundRect(\n ctx: any,\n x: any,\n y: any,\n width: any,\n height: any,\n radius: any,\n) {\n ctx.beginPath();\n ctx.moveTo(x + radius, y);\n ctx.lineTo(x + width - radius, y);\n ctx.quadraticCurveTo(x + width, y, x + width, y + radius);\n ctx.lineTo(x + width, y + height - radius);\n ctx.quadraticCurveTo(\n x + width,\n y + height,\n x + width - radius,\n y + height,\n );\n ctx.lineTo(x + radius, y + height);\n ctx.quadraticCurveTo(x, y + height, x, y + height - radius);\n ctx.lineTo(x, y + radius);\n ctx.quadraticCurveTo(x, y, x + radius, y);\n ctx.closePath();\n return ctx;\n}\n\nfunction roundRectTop(\n ctx: any,\n x: any,\n y: any,\n width: any,\n height: any,\n radius: any,\n) {\n ctx.beginPath();\n ctx.moveTo(x + radius, y);\n ctx.lineTo(x + width - radius, y);\n ctx.quadraticCurveTo(x + width, y, x + width, y + radius);\n ctx.lineTo(x + width, y + height);\n ctx.lineTo(x, y + height);\n ctx.lineTo(x, y + radius);\n ctx.quadraticCurveTo(x, y, x + radius, y);\n ctx.closePath();\n return ctx;\n}\n\ninterface DataPoint {\n date: string;\n hours: number;\n}\n\nfunction App() {\n const [chartUrl, setChartUrl] = useState(null);\n\n useEffect(() => {\n fetch(\"/chart\")\n .then(response => response.text())\n .then(setChartUrl)\n .catch(console.error);\n }, []);\n\n return (\n

\n {chartUrl ? $\"Coding$ :

Loading chart...

}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function fetchWakaTimeData(): Promise {\n const response = await fetch(\"https://wakatime.com/share/@load1n9/899abefd-d814-4e99-b603-e94af0305d4a.json\");\n const data = await response.json();\n return data.data.map((item: any) => ({\n date: item.range.date,\n hours: parseFloat(item.grand_total.decimal),\n }));\n}\n\nasync function generateChart(data: DataPoint[]): Promise {\n const width = 800;\n const height = 400;\n const padding = 40;\n const barWidth = (width - 2 * padding) / data.length;\n\n const { createCanvas } = await import(\"https://deno.land/x/canvas/mod.ts\");\n const canvas = createCanvas(width, height);\n const ctx = canvas.getContext(\"2d\");\n\n // Set background\n ctx.fillStyle = Color.Background;\n roundRect(ctx, 0, 0, width, height, 10).fill();\n\n // Find max value for scaling\n const maxHours = Math.max(...data.map(d => d.hours));\n\n // Draw bars\n data.forEach((point, index) => {\n const x = padding + index * barWidth;\n const barHeight = (point.hours / maxHours) * (height - 2 * padding);\n const y = height - padding - barHeight;\n\n ctx.fillStyle = Color.Accent;\n ctx.fillRect(x, y, barWidth - 2, barHeight);\n\n ctx.fillStyle = Color.Text;\n ctx.font = \"10px Arial\";\n ctx.textAlign = \"center\";\n ctx.fillText(point.date, (x + barWidth / 2) - 30, height - padding + 15);\n });\n\n // Draw axes\n ctx.beginPath();\n ctx.moveTo(padding, padding);\n ctx.lineTo(padding, height - padding);\n ctx.lineTo(width - padding, height - padding);\n ctx.stroke();\n\n // Y-axis labels\n ctx.textAlign = \"right\";\n ctx.textBaseline = \"middle\";\n for (let i = 0; i <= 5; i++) {\n const y = height - padding - (i / 5) * (height - 2 * padding);\n ctx.fillText((maxHours * i / 5).toFixed(1), padding - 20, y);\n }\n\n // Titles\n ctx.font = \"bold 14px Arial\";\n ctx.textAlign = \"center\";\n ctx.fillText(\"Date\", width / 2, height - 10);\n ctx.save();\n ctx.rotate(-Math.PI / 2);\n ctx.fillText(\"Hours\", -height / 2, 15);\n ctx.restore();\n\n return canvas.toDataURL();\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (url.pathname === \"/chart\") {\n try {\n const data = await fetchWakaTimeData();\n const chartDataUrl = await generateChart(data);\n return new Response(chartDataUrl, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n } catch (error) {\n console.error(\"Error generating chart:\", error);\n return new Response(\"Error generating chart\", { status: 500 });\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n Coding Time Chart\n \n \n \n

\n {chartUrl ? $\"Coding$ :

Loading chart...

}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function fetchWakaTimeData(): Promise {\n const response = await fetch(\"https://wakatime.com/share/@load1n9/899abefd-d814-4e99-b603-e94af0305d4a.json\");\n const data = await response.json();\n return data.data.map((item: any) => ({\n date: item.range.date,\n hours: parseFloat(item.grand_total.decimal),\n }));\n}\n\nasync function generateChart(data: DataPoint[]): Promise {\n const width = 800;\n const height = 400;\n const padding = 40;\n const barWidth = (width - 2 * padding) / data.length;\n\n const { createCanvas } = await import(\"https://deno.land/x/canvas/mod.ts\");\n const canvas = createCanvas(width, height);\n const ctx = canvas.getContext(\"2d\");\n\n // Set background\n ctx.fillStyle = Color.Background;\n roundRect(ctx, 0, 0, width, height, 10).fill();\n\n // Find max value for scaling\n const maxHours = Math.max(...data.map(d => d.hours));\n\n // Draw bars\n data.forEach((point, index) => {\n const x = padding + index * barWidth;\n const barHeight = (point.hours / maxHours) * (height - 2 * padding);\n const y = height - padding - barHeight;\n\n ctx.fillStyle = Color.Accent;\n roundRectTop(ctx, x, y, barWidth - 2, barHeight, 10).fill();\n\n ctx.fillStyle = Color.Text;\n ctx.font = \"10px Arial\";\n ctx.textAlign = \"center\";\n ctx.fillText(point.date, (x + barWidth / 2) - 30, height - padding + 15);\n });\n\n // Draw axes\n ctx.beginPath();\n ctx.moveTo(padding, padding);\n ctx.lineTo(padding, height - padding);\n ctx.lineTo(width - padding, height - padding);\n ctx.stroke();\n\n // Y-axis labels\n ctx.textAlign = \"right\";\n ctx.textBaseline = \"middle\";\n for (let i = 0; i <= 5; i++) {\n const y = height - padding - (i / 5) * (height - 2 * padding);\n ctx.fillText((maxHours * i / 5).toFixed(1), padding - 20, y);\n }\n\n // Titles\n ctx.font = \"bold 14px Arial\";\n ctx.textAlign = \"center\";\n ctx.fillText(\"Date\", width / 2, height - 10);\n ctx.save();\n ctx.rotate(-Math.PI / 2);\n ctx.fillText(\"Hours\", -height / 2, 15);\n ctx.restore();\n\n return canvas.toDataURL();\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (url.pathname === \"/chart\") {\n try {\n const data = await fetchWakaTimeData();\n const chartDataUrl = await generateChart(data);\n return new Response(chartDataUrl, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n } catch (error) {\n console.error(\"Error generating chart:\", error);\n return new Response(\"Error generating chart\", { status: 500 });\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n Coding Time Chart\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n}\n\n#root {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n}\n\nh1 {\n color: #333;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n`;","createdAt",["D",1729102289373],"branchVersion","branchId","fb2a0efa-279e-11f0-9d52-569c3dd06744","id","fb29c242-279e-11f0-9d52-569c3dd06744","wakatime-readme-chart",["D",1746222422059],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion",89,"likeCount",1,"orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",90,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","loading","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":151,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":152,"_80":153,"_82":154,"_84":25},"tree",[146],"files",[146],"counts",{"_135":136,"_137":62,"_138":136,"_139":140,"_141":142},"contents",[126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":25,"_38":130,"_13":131,"_33":34,"_35":37,"_24":25,"_132":133,"_27":134},"fc506248-279e-11f0-9d52-569c3dd06744","parentId","latest",["D",1729102289373],51,"label","wakatime-readme",[28],"pulls",0,"branches","forks","envVars",{"_143":136,"_145":136},"connections",{"_143":136,"_144":136},"count","unfilledCount","emptyCount",{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":25,"_38":147,"_13":131,"_33":34,"_35":37,"_24":25,"_132":133,"_148":149,"_27":150},["D",1729102289373],"children",[],[28],["D",1746222422059],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":188,"_189":190,"_191":192,"_193":25,"_194":25,"_195":25,"_196":49,"_197":-5,"_198":-7,"_199":-7,"_200":136,"_201":25,"_202":25,"_203":-5,"_204":25,"_205":25,"_206":25,"_207":-5},"ENV",{"_159":160,"_161":162,"_163":86,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v52