DayBarChart

Molecule

One bar per day, the 90-day uptime strip of a status page. Coloured by availability, with height, an incident marker and the day's accessible name carrying the same meaning, a tooltip on hover and focus, a pinned details dialog on click, and a legend. Reusable per component and per region: pass a label.

API, 90 days

Preview

API

99.83% uptime over 90 days
  • Operational (99.9% or more)
  • Degraded (99% to 99.9%)
  • Outage (below 99%)
  • No data (no data)
  • Incident
Code
<DayBarChart label="API" days={days} />

Per region, with a gap and custom thresholds

Preview

EU region

99.85% uptime over 90 days

US region

99.86% uptime over 90 days
Code
<DayBarChart label="EU region" days={days} thresholds={{ operational: 99.95, degraded: 99.5 }} />
Sourcemodules/ui/DayBarChart/index.tsx