Coding Time Chart

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_172":173,"_174":175},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_130":-5,"_20":131,"_22":132,"_133":134,"_135":136,"_25":137,"_24":-5,"_138":-5,"_139":-5,"_140":54,"_141":142,"_143":45,"_144":-5,"_145":-5,"_146":147},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","loading","name","wakatime-readme-chart","branchName","main","version","path","","project",{"_34":75,"_13":14,"_46":76,"_77":-5,"_78":45,"_79":80,"_81":80,"_82":-5,"_83":-5,"_84":85,"_86":38,"_87":45,"_88":-5,"_89":43,"_90":91,"_92":93,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":108,"_109":110,"_111":112,"_113":54},"tree",[66,67],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":58,"_13":59,"_37":60,"_39":-5,"_40":41,"_42":61,"_44":45,"_46":62,"_17":63,"_49":24,"_51":64,"_53":54,"_55":-5,"_18":65},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":56,"_18":57},"id","41b361f6-435a-11f0-a165-76b3cceeab13","main.tsx","fileId","fb2c8b9e-279e-11f0-9d52-569c3dd06744","parentId","branchId","fb2a0efa-279e-11f0-9d52-569c3dd06744","branchVersion",89,"latest",true,"createdAt",["D",1749271537676],80,"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\ninterface DataPoint {\n date: string;\n hours: number;\n details?: {\n language: string;\n percentage: number;\n }[];\n}\n\ninterface DataPoint {\n date: string;\n hours: number;\n}\n\nenum Color {\n Background = \"#0f172a\",\n Foreground = \"#1e293b\",\n Accent = \"#ec4899\",\n AccentHover = \"#f472b6\",\n Text = \"#fbcfe8\",\n TextSecondary = \"#94a3b8\",\n Row = \"#334155\",\n RowVariant = \"#475569\",\n Border = \"#1e293b\",\n Shadow = \"rgba(0, 0, 0, 0.25)\",\n Gradient1 = \"#ec4899\",\n Gradient2 = \"#8b5cf6\",\n}\n\ninterface Theme {\n borderRadius: string;\n fontPrimary: string;\n fontSecondary: string;\n transition: string;\n boxShadow: string;\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 $\"Coding$ \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}\nconst theme: Theme = {\n borderRadius: \"12px\",\n fontPrimary: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n fontSecondary: \"'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace\",\n transition: \"all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\",\n boxShadow:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1)\",\n};\n\nasync function generateChart(data: DataPoint[]): Promise {\n const width = 1000;\n const height = 600;\n const padding = 40;\n const barWidth = (width - 2 * padding) / data.length;\n const barSpacing = 2;\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 with gradient\n const bgGradient = ctx.createLinearGradient(0, 0, 0, height);\n bgGradient.addColorStop(0, Color.Background);\n bgGradient.addColorStop(1, Color.Foreground);\n ctx.fillStyle = bgGradient;\n roundRect(ctx, 0, 0, width, height, 15).fill();\n\n // Find max value for scaling\n const maxHours = Math.max(...data.map(d => d.hours));\n const scaledMax = Math.ceil(maxHours / 5) * 5; // Round up to nearest 5\n\n // Draw grid lines\n ctx.strokeStyle = Color.Border;\n ctx.lineWidth = 0.5;\n for (let i = 0; i <= 5; i++) {\n const y = height - padding - (i / 5) * (height - 2 * padding);\n ctx.beginPath();\n ctx.moveTo(padding, y);\n ctx.lineTo(width - padding, y);\n ctx.stroke();\n }\n\n // Draw bars\n data.forEach((point, index) => {\n const x = padding + index * barWidth;\n const barHeight = (point.hours / scaledMax) * (height - 2 * padding);\n const y = height - padding - barHeight;\n\n // Bar gradient\n const barGradient = ctx.createLinearGradient(x, y, x, y + barHeight);\n barGradient.addColorStop(0, Color.Gradient1);\n barGradient.addColorStop(1, Color.Gradient2);\n ctx.fillStyle = barGradient;\n\n roundRectTop(ctx, x + barSpacing, y, barWidth - 2 * barSpacing, barHeight, 8).fill();\n\n // Draw hour value above bar\n ctx.fillStyle = Color.Text;\n ctx.font = `bold 12px ${theme.fontSecondary}`;\n ctx.textAlign = \"center\";\n ctx.fillText(point.hours.toFixed(1) + \"h\", x + barWidth / 2, y - 10);\n\n // Draw date below bar\n ctx.fillStyle = Color.TextSecondary;\n ctx.font = `12px ${theme.fontPrimary}`;\n ctx.fillText(point.date, x + barWidth / 2, height - padding + 20);\n });\n\n // Draw axes\n ctx.strokeStyle = Color.Border;\n ctx.lineWidth = 2;\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.fillStyle = Color.TextSecondary;\n ctx.textAlign = \"right\";\n ctx.textBaseline = \"middle\";\n ctx.font = `bold 14px ${theme.fontPrimary}`;\n\n for (let i = 0; i <= 5; i++) {\n const y = height - padding - (i / 5) * (height - 2 * padding);\n ctx.fillText((scaledMax * i / 5).toFixed(0) + \"h\", padding - 10, y);\n }\n\n return canvas.toBuffer();\n}\n\nfunction roundRect(\n ctx: CanvasRenderingContext2D,\n x: number,\n y: number,\n width: number,\n height: number,\n radius: number,\n stroke = false,\n): CanvasRenderingContext2D {\n if (width < 2 * radius) radius = width / 2;\n if (height < 2 * radius) radius = height / 2;\n\n ctx.beginPath();\n ctx.moveTo(x + radius, y);\n ctx.arcTo(x + width, y, x + width, y + height, radius);\n ctx.arcTo(x + width, y + height, x, y + height, radius);\n ctx.arcTo(x, y + height, x, y, radius);\n ctx.arcTo(x, y, x + width, y, radius);\n ctx.closePath();\n\n if (stroke) {\n ctx.stroke();\n }\n return ctx;\n}\n\nfunction roundRectTop(\n ctx: CanvasRenderingContext2D,\n x: number,\n y: number,\n width: number,\n height: number,\n radius: number,\n gradient = false,\n): CanvasRenderingContext2D {\n if (width < 2 * radius) radius = width / 2;\n\n ctx.beginPath();\n ctx.moveTo(x + radius, y);\n ctx.arcTo(x + width, y, x + width, y + radius, radius);\n ctx.lineTo(x + width, y + height);\n ctx.lineTo(x, y + height);\n ctx.lineTo(x, y + radius);\n ctx.arcTo(x, y, x + radius, y, radius);\n ctx.closePath();\n\n if (gradient) {\n const grd = ctx.createLinearGradient(x, y, x, y + height);\n grd.addColorStop(0, Color.Gradient1);\n grd.addColorStop(1, Color.Gradient2);\n ctx.fillStyle = grd;\n }\n return ctx;\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 chartBuffer = await generateChart(data);\n return new Response(chartBuffer, {\n headers: {\n \"content-type\": \"image/png\",\n \"Cache-Control\": \"max-age=60\",\n },\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`;","deleted",false,"label","wakatime-readme",[36],"f60f4f46-2b1f-11f0-ba39-569c3dd06744","README.md","c377b0e6-2b1f-11f0-9f35-569c3dd06744",76,["D",1746607672054],3,"# wakatime readme chart\n\n![Wakatime Stats](https://wakatime-readme.val.run/chart)",[59],{"_34":58,"_13":59,"_37":60,"_39":-5,"_40":41,"_42":61,"_44":45,"_46":72,"_17":63,"_49":24,"_51":64,"_53":54,"_55":-5,"_69":73,"_18":74},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":68,"_17":48,"_49":50,"_51":52,"_53":54,"_55":56,"_69":70,"_18":71},["D",1749271537676],"children",[],[36],["D",1746607672054],[],[59],"fb29c242-279e-11f0-9d52-569c3dd06744",["D",1746222422059],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_129":125},"org",{"_11":12,"_123":-5,"_124":125,"_84":85,"_126":127,"_128":54},"branch",{"_17":114,"_13":16,"_34":41,"_115":75,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":14,"_122":12},"isOwned",90,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":75,"_13":14,"_46":168,"_77":-5,"_78":45,"_79":80,"_81":80,"_82":-5,"_83":-5,"_84":85,"_86":38,"_87":45,"_88":-5,"_89":43,"_90":91,"_92":93,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":169,"_109":170,"_111":171,"_113":54},[162,163],"files",[162,163],"counts",{"_152":153,"_154":91,"_155":153,"_31":156,"_157":158},[148,149],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":58,"_13":59,"_37":60,"_39":-5,"_40":41,"_42":61,"_44":45,"_46":62,"_17":63,"_49":24,"_51":64,"_53":54,"_55":-5,"_18":151},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":56,"_18":150},[36],[59],"pulls",0,"branches","forks",{"_159":153,"_161":153},"connections",{"_159":153,"_160":153},"count","unfilledCount","emptyCount",{"_34":58,"_13":59,"_37":60,"_39":-5,"_40":41,"_42":61,"_44":45,"_46":72,"_17":63,"_49":24,"_51":64,"_53":54,"_55":-5,"_69":166,"_18":167},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":68,"_17":48,"_49":50,"_51":52,"_53":54,"_55":56,"_69":164,"_18":165},[],[36],[],[59],["D",1746222422059],{"_11":12,"_129":125},{"_11":12,"_123":-5,"_124":125,"_84":85,"_126":127,"_128":54},{"_17":114,"_13":16,"_34":41,"_115":75,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":14,"_122":12},"ctx",{"_107":-5,"_145":205,"_206":207,"_208":209,"_210":54,"_211":54,"_212":54,"_213":45,"_214":-5,"_215":-7,"_216":-7,"_217":153,"_218":54,"_219":54,"_220":-5,"_221":54,"_222":54,"_223":54,"_224":-5},"ENV",{"_176":177,"_178":179,"_180":16,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]