Prototype: heat map component #4

New issue

Open

opened 2026-03-28 02:09:01 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-03-28 02:09:01 +00:00

Type

Feature

Lineage

Standalone — scoped from Daily 100 design spec.

Repo

forgejo_admin/daily-100

User Story

As a user
I want to see a GitHub-style heat map of my history
So that I can visualize my consistency over time

Context

GitHub contribution graph style showing last 12 weeks. Color scale: dark green = 8/8 perfect day, medium green = partial completion, dark/empty = missed day. Legend at bottom explaining the color scale. Uses mock data in prototype phase.

File Targets

Files the agent should modify or create:

prototype/index.html -- heat map section markup
prototype/style.css -- heat map grid styles and color scale
prototype/app.js -- heat map rendering with mock data

Files the agent should NOT touch:

(none — greenfield)

Acceptance Criteria

12-week grid rendered (7 rows x ~12 columns)
Color scale: dark green (8/8), medium green (partial), dark/empty (missed)
Legend at bottom showing color meanings
Responsive on mobile viewports

Test Expectations

Visual inspection with mock data showing variety of completion levels
Run command: open prototype/index.html in browser

Constraints

CSS Grid for layout
No external charting libraries
Each cell should be small enough to fit 12 weeks on mobile

Checklist

PR opened
Tests pass
No unrelated changes

daily-100 -- project

### Type Feature ### Lineage Standalone — scoped from Daily 100 design spec. ### Repo `forgejo_admin/daily-100` ### User Story As a user I want to see a GitHub-style heat map of my history So that I can visualize my consistency over time ### Context GitHub contribution graph style showing last 12 weeks. Color scale: dark green = 8/8 perfect day, medium green = partial completion, dark/empty = missed day. Legend at bottom explaining the color scale. Uses mock data in prototype phase. ### File Targets Files the agent should modify or create: - `prototype/index.html` -- heat map section markup - `prototype/style.css` -- heat map grid styles and color scale - `prototype/app.js` -- heat map rendering with mock data Files the agent should NOT touch: - (none — greenfield) ### Acceptance Criteria - [ ] 12-week grid rendered (7 rows x ~12 columns) - [ ] Color scale: dark green (8/8), medium green (partial), dark/empty (missed) - [ ] Legend at bottom showing color meanings - [ ] Responsive on mobile viewports ### Test Expectations - [ ] Visual inspection with mock data showing variety of completion levels - Run command: open `prototype/index.html` in browser ### Constraints - CSS Grid for layout - No external charting libraries - Each cell should be small enough to fit 12 weeks on mobile ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `daily-100` -- project