// This approach will fetch data from the specified endpoint, process it to create a GitHub-style contribution chart, // and render it using React. We'll use the fetch API to get the data, process it to create a heatmap-like structure, // and then use CSS Grid to render the chart with varying shades of green based on the number of vals created each day. /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [contributionData, setContributionData] = useState({}); const [loading, setLoading] = useState(true); useEffect(() => { fetch('https://ejfox-allvals.web.val.run') .then(response => response.json()) .then(data => { const processedData = processContributionData(data.vals); setContributionData(processedData); setLoading(false); }) .catch(error => { console.error('Error fetching data:', error); setLoading(false); }); }, []); const processContributionData = (vals) => { const today = new Date(); const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()); const data = {}; // Initialize all days in the past year with 0 contributions for (let d = new Date(oneYearAgo); d <= today; d.setDate(d.getDate() + 1)) { data[d.toISOString().split('T')[0]] = 0; } // Count contributions for each day vals.forEach(val => { const date = new Date(val.createdAt).toISOString().split('T')[0]; if (date in data) { data[date]++; } }); return data; }; const getColorIntensity = (count) => { if (count === 0) return '#ebedf0'; if (count < 5) return '#9be9a8'; if (count < 10) return '#40c463'; if (count < 15) return '#30a14e'; return '#216e39'; }; const renderContributionGrid = () => { const weeks = []; const days = Object.keys(contributionData).sort(); for (let i = 0; i < days.length; i += 7) { const week = days.slice(i, i + 7); weeks.push(

{week.map(day => (

))}

); } return

{weeks}

; }; return (

Val Contribution Chart

{loading ? (

) : ( <> {renderContributionGrid()}

View Source

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response(` Val Contribution Chart

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f6f8fa; } .container { max-width: 1000px; margin: 2rem auto; padding: 1rem; background-color: white; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } h1 { color: #24292e; } .contribution-grid { display: flex; flex-direction: row; gap: 2px; overflow-x: auto; } .contribution-week { display: flex; flex-direction: column; gap: 2px; } .contribution-day { width: 10px; height: 10px; border-radius: 2px; } .source-link { margin-top: 1rem; text-align: right; } .source-link a { color: #0366d6; text-decoration: none; } .source-link a:hover { text-decoration: underline; } `; export default server;

valcontributionchart

Versions

v0