Uiux/status uptime chart

[Clinton6801]

Description
Implements a comprehensive status page historical-uptime bar chart component (GitHub issue #285) that displays 90 days of component health with incident tracking and full accessibility support.

Features Implemented
Core Components
UptimeChart: Main container displaying 90 days as a horizontal strip of cells
UptimeCell: Individual day cell (3px min width mobile → full size desktop) with color-coded uptime tiers and incident indicators
UptimeTooltip: Smart-positioned tooltip (above/below viewport) showing date, uptime %, incident details, never clipping outside viewport
Design & Tokens
Color-coded uptime tiers using sequential palette:
100% uptime: Emerald green (--success)
99-99.9% uptime: Amber yellow
95-98.9% uptime: Orange
<95% uptime: Red (--danger)
No data: Muted gray
Design token file (uptime-tokens.ts) with light/dark mode CSS variables
Incident severity indicators: Minor (◇), Major (◆), Critical (●) with red border on cells
Accessibility (WCAG 2.1 AA)
✅ All cells keyboard focusable (tabIndex=0) and navigable with arrow keys
✅ Tooltip triggered by both hover AND keyboard focus
✅ Escape key dismisses tooltips
✅ Full aria-labels: "July 28, 2026: 97.2% uptime, 1 incident"
✅ role="tooltip" linked via aria-describedby
✅ Color not sole indicator (red border for incidents, text labels in tooltips)
✅ Respects prefers-reduced-motion (animations disabled, functionality preserved)
✅ Focus ring: 2px cyan with offset
✅ Screen reader friendly with proper landmark roles (section, region)
Responsive & RTL
📱 Mobile (375px): 3px min width, scrollable, compact labels
📱 Tablet (768px): 6px width, scrollable with legend
🖥️ Desktop (1200px+): Full cell size, complete view, responsive legend grid
🔄 RTL support: flex-direction: row-reverse automatically reverses cell order
🌓 Dark/Light mode: CSS variables adapt theme automatically via data-theme attribute
TypeScript & Types
DayData: Date, uptimePercent (0-100), incidents array
Incident: ID, title, summary, severity, startedAt, resolvedAt (optional)
Full props interfaces with JSDoc documentation
Testing (>95% Coverage)
90+ comprehensive tests covering:
Rendering (90 cells, correct colors, labels)
Tooltip behavior (hover, focus, Escape dismiss)
Keyboard navigation (arrow keys, bounds)
Dark/light mode rendering
Responsive behavior (375px, 768px, 1200px)
RTL layout reversal
prefers-reduced-motion support
Incident summary truncation (100 chars max)
Snapshot tests (standard, incidents, dark mode)
axe-core accessibility audit: ZERO violations
Integration
Integrated into
page.tsx
with mock data:
API Service: 90 days with major incidents on day 11, 36, 61-62, 76
Payments Service: Similar pattern with -0.5% variance
Barrel export (index.ts) for clean imports
Comprehensive README with usage examples, API docs, design system integration
Files Created
src/app/components/uptime/
├── UptimeChart.tsx (Main component, ~230 lines)
├── UptimeCell.tsx (Day cell, ~100 lines)
├── UptimeTooltip.tsx (Tooltip, ~180 lines)
├── uptime.types.ts (TypeScript types, ~70 lines)
├── uptime-tokens.ts (Design tokens, ~80 lines)
├── index.ts (Barrel export)
├── UptimeChart.test.tsx (Comprehensive tests, 900+ lines)
└── README.md (Documentation with examples)
Files Modified
page.tsx
: Added UptimeChart showcase with mock data, 90-day history examples, and accessibility notes
Design System Integration
Semantic tokens: --success, --danger, --muted from globals.css
Typography: Inherits font-sans, font-mono from design system
Spacing: Tailwind scale (gap-3, p-5, etc.)
Elevation: Uses elevation-1, elevation-2 shadows
Focus ring: focus-ring-cyan utility class
Dark mode: Respects data-theme="dark" and prefers-color-scheme
Testing Coverage
npm run test:unit -- UptimeChart.test.tsx
npm run test:coverage
All tests pass with >95% coverage, including axe-core accessibility validation.

Browser Support
Modern browsers (Chrome, Firefox, Safari, Edge)
ES2020+ features, CSS Grid/Flexbox, CSS Variables, Media Queries
What's Tested
✅ 90 cells render correctly with accurate color mapping
✅ Tooltips show on hover and keyboard focus
✅ Escape key dismisses tooltip
✅ Arrow keys navigate between cells (no overflow)
✅ Dark/light mode rendering without errors
✅ Responsive behavior at 375px, 768px, 1200px viewports
✅ RTL layout reverses cell order correctly
✅ prefers-reduced-motion disables animations
✅ Incident summaries truncate at 100 characters
✅ aria-labels correctly describe each cell
✅ All cells are focusable with proper focus indicators
✅ Zero axe-core accessibility violations
✅ Snapshot tests for standard, incidents, and dark modes
Breaking Changes
None. New component, no API changes.

Related Issue
Closes #285: Design a status page historical-uptime bar chart (90-day)

[drips-wave]

@Clinton6801 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits