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