99 lines
3.5 KiB
Markdown
99 lines
3.5 KiB
Markdown
---
|
|
phase: 04-heatmap-interaction
|
|
plan: 01
|
|
subsystem: ui
|
|
tags: [d3, heatmap, click-navigation, project-filter, typescript, esbuild]
|
|
|
|
requires:
|
|
- phase: 03-heatmap-rendering
|
|
provides: d3 heatmap SVG rendering, esbuild bundle, Twig widget template
|
|
provides:
|
|
- Click-through navigation from heatmap cells to Kimai timesheet filtered by date
|
|
- Project filter dropdown that re-fetches and re-renders heatmap
|
|
- getUserProjects service method for querying user project list
|
|
affects: [04-02-PLAN, polish]
|
|
|
|
tech-stack:
|
|
added: []
|
|
patterns: [onCellClick callback pattern for cell interaction, flex wrapper layout for widget + sidebar controls]
|
|
|
|
key-files:
|
|
created: []
|
|
modified:
|
|
- Service/HeatmapService.php
|
|
- Widget/HeatmapWidget.php
|
|
- Resources/views/widget/heatmap.html.twig
|
|
- assets/src/heatmap.ts
|
|
- assets/src/types.ts
|
|
- Resources/public/heatmap.css
|
|
- Resources/public/heatmap.js
|
|
|
|
key-decisions:
|
|
- "Render project filter only when user has tracked projects (skip empty dropdown)"
|
|
- "Use encodeURIComponent for daterange param in navigation URL (T-04-03 mitigation)"
|
|
|
|
patterns-established:
|
|
- "Callback injection: renderHeatmap accepts optional onCellClick for cell interaction"
|
|
- "Flex wrapper: heatmap-wrapper div with heatmap-svg-area + heatmap-filter side by side"
|
|
|
|
requirements-completed: [HEAT-07, INTR-01]
|
|
|
|
duration: 2min
|
|
completed: 2026-04-08
|
|
---
|
|
|
|
# Phase 4 Plan 1: Click Navigation & Project Filter Summary
|
|
|
|
**Click-through day cell navigation to Kimai timesheet with daterange filter, plus project filter dropdown that re-fetches and re-renders the heatmap in place**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** 2 min
|
|
- **Started:** 2026-04-08T13:29:12Z
|
|
- **Completed:** 2026-04-08T13:31:15Z
|
|
- **Tasks:** 2
|
|
- **Files modified:** 7
|
|
|
|
## Accomplishments
|
|
- Heatmap cells navigate to Kimai timesheet filtered by clicked date via window.location.href
|
|
- Project filter dropdown renders with Tabler form-select classes, re-fetches data on change
|
|
- CSS provides cursor:pointer hover affordance and flex layout for heatmap + filter
|
|
- All 20 existing Vitest tests still pass
|
|
|
|
## Task Commits
|
|
|
|
Each task was committed atomically:
|
|
|
|
1. **Task 1: Backend -- getUserProjects, widget getData, Twig data attributes** - `3df754e` (feat)
|
|
2. **Task 2: Frontend -- click navigation, filter dropdown, CSS, esbuild rebuild** - `b57eb93` (feat)
|
|
|
|
## Files Created/Modified
|
|
- `Service/HeatmapService.php` - Added getUserProjects() returning distinct projects user has tracked time for
|
|
- `Widget/HeatmapWidget.php` - Removed final, injected HeatmapService, getData() returns project list
|
|
- `Resources/views/widget/heatmap.html.twig` - Added data-projects and data-timesheet-url attributes
|
|
- `assets/src/types.ts` - Added ProjectOption interface
|
|
- `assets/src/heatmap.ts` - Refactored init() with click handler, project filter dropdown, re-fetch logic
|
|
- `Resources/public/heatmap.css` - Added click affordance styles and flex wrapper layout
|
|
- `Resources/public/heatmap.js` - Rebuilt bundle with all frontend changes
|
|
|
|
## Decisions Made
|
|
- Render project filter only when user has tracked projects (avoids empty dropdown)
|
|
- Use encodeURIComponent for daterange param per T-04-03 threat mitigation
|
|
|
|
## Deviations from Plan
|
|
|
|
None - plan executed exactly as written.
|
|
|
|
## Issues Encountered
|
|
None
|
|
|
|
## User Setup Required
|
|
None - no external service configuration required.
|
|
|
|
## Next Phase Readiness
|
|
- Click navigation and project filter are functional
|
|
- Ready for 04-02 (tests for interaction features)
|
|
|
|
---
|
|
*Phase: 04-heatmap-interaction*
|
|
*Completed: 2026-04-08*
|