docs(06-02): complete renderer wiring plan

This commit is contained in:
Christopher Mühl 2026-04-09 09:48:33 +02:00
parent 881718e3f0
commit abe3ec6f72
No known key found for this signature in database
GPG key ID: 925AC7D69955293F

View file

@ -0,0 +1,112 @@
---
phase: 06-renderer-architecture
plan: 02
subsystem: ui
tags: [typescript, d3, strategy-pattern, renderer, refactor]
requires:
- phase: 06-01
provides: ModeRenderer interface, RenderContext, registry, shared utility modules
provides:
- YearModeRenderer implementing ModeRenderer for year-view heatmap
- Slim heatmap.ts orchestrator dispatching through renderer registry
- All test imports migrated to new module locations
affects: [06-03, 07-mode-renderers]
tech-stack:
added: []
patterns: [strategy-pattern dispatch via getRenderer(state.mode), metric-aware color fill]
key-files:
created:
- assets/src/renderers/year.ts
modified:
- assets/src/renderers/types.ts
- assets/src/heatmap.ts
- assets/test/heatmap.test.ts
- assets/test/stats.test.ts
- assets/test/interaction.test.ts
key-decisions:
- "Cell fill uses metric-aware accessor (hours vs count) for forward-compatible display toggle"
- "emptyMessage added to RenderContext to preserve filtered empty state messages"
patterns-established:
- "Renderer dispatch: getRenderer(state.mode).render(ctx) in doRender()"
- "Module-level renderer registration: registerRenderer(new YearModeRenderer()) at import time"
requirements-completed: []
duration: 3min
completed: 2026-04-09
---
# Phase 6 Plan 02: Renderer Wiring Summary
**YearModeRenderer wired into strategy-pattern orchestrator, heatmap.ts reduced from 413 to 116 lines, all 62 tests passing**
## Performance
- **Duration:** 3 min
- **Started:** 2026-04-09T07:44:14Z
- **Completed:** 2026-04-09T07:47:26Z
- **Tasks:** 2 automated + 1 checkpoint (pending human verification)
- **Files modified:** 6
## Accomplishments
- Created YearModeRenderer that produces identical SVG output to v1.0 renderHeatmap()
- Rewrote heatmap.ts as slim orchestrator using registry dispatch pattern
- Migrated all test imports to new module locations -- 62/62 tests pass across 9 files
- Added metric-aware cell fill (forward-compatible for hours/count toggle)
## Task Commits
Each task was committed atomically:
1. **Task 1: Create YearModeRenderer and rewrite heatmap.ts orchestrator** - `aab3915` (feat)
2. **Task 2: Migrate test imports and verify full suite** - `881718e` (refactor)
3. **Task 3: Visual regression check** - checkpoint (pending human verification)
## Files Created/Modified
- `assets/src/renderers/year.ts` - YearModeRenderer implementing ModeRenderer with full year heatmap rendering
- `assets/src/renderers/types.ts` - Added emptyMessage to RenderContext
- `assets/src/heatmap.ts` - Slim orchestrator (116 lines, down from 413)
- `assets/test/heatmap.test.ts` - Migrated from renderHeatmap to YearModeRenderer.render()
- `assets/test/stats.test.ts` - Import path changed to shared/stats
- `assets/test/interaction.test.ts` - Migrated from renderHeatmap to YearModeRenderer.render()
## Decisions Made
- Cell fill uses `ctx.state.metric === 'hours' ? d.entry.hours : d.entry.count` for forward-compatible metric toggle (no-op for v1.0 where metric is always 'hours')
- emptyMessage added as optional field on RenderContext to preserve "No tracking data for this project" filtered empty message
## Deviations from Plan
None - plan executed exactly as written.
## Issues Encountered
None.
## User Setup Required
None - no external service configuration required.
## Checkpoint: Visual Regression Check
**Status:** Automated verification passed (build:dev succeeds). Manual visual verification pending.
Verification steps for human:
1. Start local Kimai dev environment
2. Navigate to dashboard
3. Verify heatmap renders identically: cells colored green, tooltip on hover, click navigates to timesheet, stats row present, filter dropdown works, resize re-renders
4. Check browser console -- no errors
5. Verify `typeof KimaiHeatmap.init === 'function'` in console
## Next Phase Readiness
- Renderer architecture fully wired -- adding new modes requires only implementing ModeRenderer and calling registerRenderer()
- Ready for Plan 03 (mode switcher UI and additional renderers)
## Self-Check: PASSED
- All 6 created/modified files exist on disk
- Both task commits verified (aab3915, 881718e)
- Full test suite: 62/62 passing across 9 files
- esbuild: produces valid IIFE bundle (38.9kb minified)