kimai-plugin-heatmap/.planning/phases/07-mode-switcher-week-mode/07-01-SUMMARY.md

3.2 KiB

phase plan subsystem tags requires provides affects tech-stack key-files key-decisions patterns-established requirements-completed duration completed
07-mode-switcher-week-mode 01 ui
tabler
segmented-control
heatmap
typescript
phase provides
06-renderer-architecture Strategy pattern renderer with registry, HeatmapState with mode/metric fields
createModeControl and createMetricControl UI control functions
Twig template heatmap-controls container in card header
Conditional stats row display based on mode
07-02
07-03
added patterns
Tabler nav-segmented for mode switching controls
created modified
assets/src/ui/controls.ts
assets/test/controls.test.ts
assets/src/heatmap.ts
Resources/views/widget/heatmap.html.twig
Resources/public/heatmap.css
Resources/public/heatmap.js
createMetricControl delegates to createModeControl with overridden className for nav-sm
UI controls in assets/src/ui/ directory, tested independently from renderers
VIZ-01
VIZ-05
TEST-01
2min 2026-04-09

Phase 7 Plan 1: Mode Switcher & Metric Toggle Summary

Tabler nav-segmented controls for year/week mode switching and hours/count metric toggle, wired into HeatmapState with conditional stats rendering

Performance

  • Duration: 2 min
  • Started: 2026-04-09T09:14:18Z
  • Completed: 2026-04-09T09:16:01Z
  • Tasks: 1 (TDD: RED + GREEN)
  • Files modified: 6

Accomplishments

  • Mode switcher (Year/Week) and metric toggle (Hours/Count) as Tabler nav-segmented controls with full ARIA support
  • Controls wired into heatmap orchestrator updating HeatmapState and triggering doRender
  • Stats row conditionally hidden in non-year modes
  • Auto-scroll restricted to year mode only
  • 11 new tests (73 total, all passing)

Task Commits

Each task was committed atomically:

  1. Task 1 (RED): Failing control tests - cab07ee (test)
  2. Task 1 (GREEN): Controls module + wiring - cd1ac52 (feat)

Files Created/Modified

  • assets/src/ui/controls.ts - createModeControl and createMetricControl functions
  • assets/test/controls.test.ts - 11 tests for control rendering, click handling, ARIA
  • assets/src/heatmap.ts - Import controls, wire to state, conditional stats/scroll
  • Resources/views/widget/heatmap.html.twig - heatmap-controls div in card header
  • Resources/public/heatmap.css - heatmap-week-cell cursor style
  • Resources/public/heatmap.js - Rebuilt bundle

Decisions Made

  • createMetricControl reuses createModeControl internally, overriding className for nav-sm variant

Deviations from Plan

None - plan executed exactly as written.

Issues Encountered

None.

User Setup Required

None - no external service configuration required.

Next Phase Readiness

  • Controls are in place for 07-02 (week-mode renderer) to use
  • WeekModeRenderer can be registered and will be dispatched when mode is 'week'
  • Metric toggle ready for renderers to read state.metric for color scale selection

Self-Check: PASSED

All 6 files verified present. Both commits (cab07ee, cd1ac52) found. All 11 acceptance criteria confirmed.


Phase: 07-mode-switcher-week-mode Completed: 2026-04-09