toph/kimai-plugin-heatmap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
kimai-plugin-heatmap/.planning/phases/04-heatmap-interaction/04-01-SUMMARY.md

3.5 KiB
Raw Blame History

phase plan subsystem tags requires provides affects tech-stack key-files key-decisions patterns-established requirements-completed duration completed
04-heatmap-interaction 01 ui
d3
heatmap
click-navigation
project-filter
typescript
esbuild
phase provides
03-heatmap-rendering d3 heatmap SVG rendering, esbuild bundle, Twig widget template
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
04-02-PLAN
polish
added patterns
onCellClick callback pattern for cell interaction
flex wrapper layout for widget + sidebar controls
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
Render project filter only when user has tracked projects (skip empty dropdown)
Use encodeURIComponent for daterange param in navigation URL (T-04-03 mitigation)
Callback injection: renderHeatmap accepts optional onCellClick for cell interaction
Flex wrapper: heatmap-wrapper div with heatmap-svg-area + heatmap-filter side by side
HEAT-07
INTR-01
2min 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