Skip to content

feat: GitHub dataviz templates with real stats injection #38

@madjin

Description

@madjin

Context

Analysis of the poster generation pipeline (Dec 25 sample) revealed that GitHub dataviz images look professional but contain no real data - they're templates that look like data rather than being data.

Current output: Generic "Weekly Progress Snapshot" with placeholder icons
Goal: Inject actual GitHub metrics from github/stats/day/stats_YYYY-MM-DD.json

Data Source

Local stats file provides everything needed:

{
  "overview": "3 new PRs (1 merged), 2 new issues, 8 active contributors",
  "codeChanges": { "additions": 159, "deletions": 60, "files": 4, "commitCount": 15 },
  "topContributors": [
    { "username": "standujar", "totalScore": 99, "avatarUrl": "..." },
    { "username": "odilitime", "totalScore": 25, "avatarUrl": "..." }
  ],
  "completedItems": [
    { "title": "fix(core): log streaming LLM calls to database", "type": "bugfix" }
  ],
  "newPRs": 3, "mergedPRs": 1, "newIssues": 2, "closedIssues": 4
}

Approved Templates

Template 1: Dashboard Overview

At-a-glance metrics panel for hero/summary shots

```
Create a clean tech dashboard showing daily GitHub activity metrics.

LAYOUT: 4 metric cards in a 2x2 grid, dark theme with accent colors

METRICS (show exact numbers prominently):
┌─────────────────┬─────────────────┐
│ 🔀 {mergedPRs} │ 📋 {newIssues} │
│ Merged │ Opened │
├─────────────────┼─────────────────┤
│ 👥 {active} │ 📝 {commits} │
│ Contributors │ Today │
└─────────────────┴─────────────────┘

CODE DELTA: +{additions} / -{deletions} lines across {files} files

Style: Minimal, modern dashboard UI. Dark background (#1a1a2e), glowing accent numbers in cyan/green. No decorations, just clean data display. Suitable for broadcast overlay.
```

Template 3: Code Pulse

Visualize code changes as an activity graph

```
Create a code activity visualization showing additions and deletions.

DATA:

  • Additions: {additions} lines (show as green bar/wave)
  • Deletions: {deletions} lines (show as red bar/wave)
  • Files changed: {files}
  • Commits: {commits}

LAYOUT: Horizontal bar comparison or waveform visualization

Visual metaphor options:

  • Dual bar chart (green up, red down)
  • Heartbeat/pulse line with green peaks and red valleys
  • Stacked area showing net positive (+{net} lines)

Style: Developer terminal aesthetic. Green (#00ff00) for additions, red (#ff4444) for deletions. Monospace font for numbers. Dark background. Clean, technical.
```

Template 4: Activity Feed

Show what actually shipped - merged PRs and resolved issues

```
Create a GitHub activity feed showing completed work.

MERGED TODAY:
✅ {title}
by {author} | +{additions} -{deletions} | {type}

ISSUES RESOLVED ({closedIssues} closed):
✓ {issue_title_1}
✓ {issue_title_2}

STILL OPEN:
⏳ {open_issue_title} (#{number})

Style: GitHub-inspired but simplified. Green checkmarks for merged/closed, amber for open. Show PR type badges (bugfix, feature, docs). Clean sans-serif font.
```

Implementation

File: `scripts/posters/illustrate.py`

  1. Add `load_github_stats(facts_date)` function
  2. Create template rendering with real data injection
  3. Update `generate_for_category()` to use stats for `github_updates` category

Related

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions