7. Timeline Chart (Gantt)
7.1 Gantt Visualization
Purpose: Visualize project phases and milestones over time.
Timeline Chart Structure Diagram
Key Features:
- Phase bars - Color-coded progress visualization (green=complete, blue=active, gray=pending)
- Milestones - Diamond markers (◆) for key deliverables
- Today indicator - Vertical line showing current date position
- Zoom controls - Switch between Day/Week/Month views
- Interactive - Click bars to see phase details, hover for tooltips
Visual Legend:
- █ Complete (green) - 100% done
- █ In Progress (blue) - Active work
- ░ Not Started (gray) - Future work
- ◆ Milestone - Key deliverable/checkpoint
- │ Today - Current date indicator
Full Specification:
┌─────────────────────────────────────────────────────────────────────────────┐
│ Timeline Chart [Today: Dec 1] │
│ Zoom: [Day] [Week ✓] [Month] | Filter: [All Projects ▼] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │Nov 15│Nov 22│Nov 29│Dec 6 │Dec 13│Dec 20│Dec 27│Jan 3│Jan 10│
│ │ │ │ ↓ │ │ │ │ │ │ │
│ │ │ │TODAY │ │ │ │ │ │ │
├──────────────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┴─────┴──────┤
│ Phase 0 █████████████ ✅ COMPLETE │
│ Foundation Nov 1 ────── Nov 16 │
│ 350 tasks • 100% complete │
├──────────────────────────────────────────────────────────────────────────────┤
│ Phase 1 ████████████████████████░░░░░░░░░░ 78% │
│ Beta Testing Nov 18 ────────────────────────── Feb 15 │
│ 530 tasks • 415 complete • 115 in progress │
│ ◆ Beta Analysis (Dec 10) │
├──────────────────────────────────────────────────────────────────────────────┤
│ Dashboard 2.0 ████████░░░░░░░░░░░░░░░░░░░░ 0% │
│ Dec 2 ───────────── Jan 31 │
│ 80 tasks • 0 complete • 0 in progress │
│ ◆ Quick Wins (Dec 6) │
│ ◆ Sprint 1 (Dec 20) │
│ ◆ Sprint 2 (Jan 17) │
├──────────────────────────────────────────────────────────────────────────────┤
│ Phase 2 ████████████░░░░░░ 0% │
│ Pilot Feb 15 ───── Mar 15 │
│ 120 tasks • 0 complete │
│ ◆ Pilot Launch (Feb 15) │
├──────────────────────────────────────────────────────────────────────────────┤
│ Phase 3 ████████░░ 0% │
│ GTM Mar 15 ─ May 15 │
│ 90 tasks │
│ ◆ Public GTM │
└──────────────────────────────────────────────────────────────────────────────┘
Legend: █ Complete ░ Remaining ◆ Milestone │ Today
7.2 Implementation Prompt - Timeline Chart
Prompt for AI/Developer:
Create a Gantt-style timeline chart showing project phases and milestones over time.
LAYOUT:
- Container: Full width, responsive
- Header: Zoom controls + date range display + filters
- Time axis: Horizontal, shows date labels based on zoom level
- Rows: 1 row per phase/project, stacked vertically
- Today indicator: Vertical line showing current date
TIME AXIS:
Zoom Levels:
- Day: Show each day as column (e.g., "Mon 1", "Tue 2")
- Week: Show each week as column (e.g., "Nov 15", "Nov 22")
- Month: Show each month as column (e.g., "Nov", "Dec", "Jan")
Default: Week zoom
Time Scale:
- Calculate: Auto-fit date range from earliest start to latest end
- Padding: Add 1 week before/after for context
- Grid lines: Vertical lines for each time unit (light gray, 1px)
HTML Structure:
<div class="timeline-chart">
<div class="timeline-header">
<div class="zoom-controls">
<button data-zoom="day">Day</button>
<button data-zoom="week" class="active">Week</button>
<button data-zoom="month">Month</button>
</div>
<div class="date-range">Nov 1, 2025 - May 15, 2026</div>
<select class="project-filter">
<option value="all">All Projects</option>
<option value="core">Core</option>
<option value="cloud">Cloud</option>
</select>
</div>
<div class="timeline-axis">
<div class="axis-label" style="left: 0%">Nov 15</div>
<div class="axis-label" style="left: 7%">Nov 22</div>
<!-- More labels -->
</div>
<div class="timeline-rows">
<div class="timeline-row" data-phase="phase-0">
<div class="row-label">
<div class="phase-name">Phase 0</div>
<div class="phase-subtitle">Foundation</div>
<div class="phase-stats">350 tasks • 100%</div>
</div>
<div class="row-bar-container">
<div class="row-bar complete" style="left: 0%; width: 10%;">
<div class="bar-fill"></div>
<div class="bar-label">✅ COMPLETE</div>
</div>
<div class="date-label start">Nov 1</div>
<div class="date-label end">Nov 16</div>
</div>
</div>
<!-- More rows -->
</div>
<div class="today-indicator" style="left: 20%">
<div class="today-line"></div>
<div class="today-label">TODAY</div>
</div>
</div>
CSS:
.timeline-chart {
position: relative;
background: var(--white);
border: 1px solid var(--gray-300);
border-radius: 8px;
padding: 24px;
overflow-x: auto;
}
.timeline-axis {
position: relative;
height: 40px;
border-bottom: 2px solid var(--gray-900);
margin-bottom: 16px;
}
.axis-label {
position: absolute;
top: 0;
transform: translateX(-50%);
font-size: 12px;
font-weight: 600;
color: var(--gray-700);
}
.timeline-rows {
position: relative;
display: flex;
flex-direction: column;
gap: 24px;
}
.timeline-row {
display: flex;
align-items: center;
gap: 16px;
min-height: 80px;
}
.row-label {
width: 150px;
flex-shrink: 0;
}
.phase-name {
font-size: 16px;
font-weight: 600;
color: var(--gray-900);
}
.phase-subtitle {
font-size: 14px;
color: var(--gray-700);
}
.phase-stats {
font-size: 12px;
color: var(--gray-500);
margin-top: 4px;
}
.row-bar-container {
position: relative;
flex: 1;
height: 60px;
}
.row-bar {
position: absolute;
height: 40px;
background: var(--gray-300);
border-radius: 4px;
display: flex;
align-items: center;
padding: 0 12px;
cursor: pointer;
transition: all 0.2s;
}
.row-bar:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.row-bar.complete {
background: linear-gradient(90deg, #00A651, #00D668);
}
.row-bar.in-progress {
background: linear-gradient(90deg, #0066CC, #3399FF);
}
.row-bar.not-started {
background: var(--gray-300);
}
.bar-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent);
border-radius: 4px 0 0 4px;
}
.bar-label {
position: relative;
font-size: 12px;
font-weight: 600;
color: var(--white);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
z-index: 1;
}
.date-label {
position: absolute;
font-size: 11px;
color: var(--gray-700);
}
.date-label.start {
top: -20px;
left: 0;
}
.date-label.end {
top: -20px;
right: 0;
}
.today-indicator {
position: absolute;
top: 80px;
bottom: 0;
width: 2px;
z-index: 10;
pointer-events: none;
}
.today-line {
width: 2px;
height: 100%;
background: var(--primary-blue);
}
.today-label {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: var(--primary-blue);
color: var(--white);
padding: 4px 8px;
border-radius: 3px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
CALCULATIONS:
Calculate Bar Position:
- Total days: end_date - start_date of entire timeline
- Phase start offset: (phase_start - timeline_start) / total_days * 100%
- Phase width: (phase_end - phase_start) / total_days * 100%
Calculate Today Position:
- today_offset: (today - timeline_start) / total_days * 100%
Calculate Completion Fill:
- fill_width: (complete_count / total_count) * bar_width
MILESTONES:
Display milestones as diamond markers (◆) below phase bars
- Position: Calculate percentage along timeline
- Label: Milestone name + date
- Click: Show milestone details in popover
HTML for Milestone:
<div class="milestone" style="left: 15%">
<span class="milestone-marker">◆</span>
<span class="milestone-label">Beta Analysis (Dec 10)</span>
</div>
CSS:
.milestone {
position: absolute;
top: 50px;
transform: translateX(-50%);
}
.milestone-marker {
font-size: 20px;
color: var(--primary-blue);
}
.milestone-label {
position: absolute;
top: 25px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
color: var(--gray-700);
white-space: nowrap;
background: var(--white);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid var(--gray-300);
}
INTERACTIONS:
Click Phase Bar:
- Show phase detail modal with:
- Phase name, dates, duration
- Task breakdown (total, complete, in progress, pending)
- Progress chart (pie or bar)
- Key deliverables
- Assigned team members
- [View Tasks] button → Navigate to task list filtered by phase
Hover Phase Bar:
- Show tooltip with quick stats
- Highlight connected milestones
Drag Phase Bar (Advanced):
- Drag to reschedule phase
- Validate: Can't move before dependencies complete
- Update: Save new dates to database, recalculate dependent phases
ZOOM BEHAVIOR:
- Click zoom button: Recalculate time scale, re-render axis and bars
- Smooth animation: 300ms ease transition for bar positions
- Persist: Save zoom level in localStorage
RESPONSIVE:
Desktop (≥1024px): Full timeline, horizontal scroll if needed
Tablet (768px-1023px): Reduce label widths, smaller fonts
Mobile (<768px): Vertical timeline (bars stack vertically, dates on left)
DATA SOURCE:
- Fetch from data/projects-with-milestones.json
- Calculate dates, durations, completion percentages
- Sort phases by start_date (ascending)
ACCESSIBILITY:
- Keyboard: Tab through phases, Enter to open detail modal
- ARIA: aria-label for bars ("Phase 0: 100% complete, Nov 1 to Nov 16")
- Focus: Visible outline on focused bars
- Screen reader: Announce phase progress on focus