ds
Operations
Uptime bar

Uptime bar

Ninety days of health, one bar a day.

API99.96%

90 days ago99.96% uptimeToday

Code

<div class="uptime">
  <div class="up-head"><span>API</span><span class="pct">99.96%</span></div>
  <div class="up-bars" role="img" aria-label="API: 99.96% uptime over 90 days">
    <i class="ok" aria-label="14 Jul 2026: No downtime"></i>
    …
    <i class="down" aria-label="13 Sep 2026: Outage, 17 min down"></i>
    <i class="warn" aria-label="14 Sep 2026: Degraded performance, 46 min degraded"></i>
    …
  </div>
  <div class="up-foot"><span>90 days ago</span><i></i><span class="pct">99.96% uptime</span><i></i><span>Today</span></div>
</div>

One bar per day, oldest on the left, today on the right. Green is a day with no downtime, amber had degraded performance, red had an outage. Hover a bar for the date and the minutes lost. The healthy green is mixed 28% toward the surface so ninety of them read as calm and the one red day stands out.

States

Webhooks100.00%

30 days ago100.00% uptimeToday

Code

<div class="uptime sm">
  …
  <div class="up-bars" role="img" aria-label="…">
    <i class="none" aria-label="12 Sep 2026: No data"></i>
    <i class="maint" aria-label="3 Oct 2026: Maintenance, 30 min planned"></i>
    …
  </div>
  …
</div>

.sm is the compact row for long lists and dashboards. Days before the component existed are .none; planned work is .maint in the cool series blue, so it is not mistaken for a problem.

Class	On	What it does
`.uptime`	div	Head, bars and foot in a column. `.sm` for a 20px row.
`.up-head`	div	Name on the left, `.pct` on the right.
`.up-bars`	div	The row of bars. Hovering dims the others.
`.up-bars > i`	i	One day. `.ok` (default), `.warn`, `.down`, `.maint`, `.none`. `.on` keeps one lit.
`.up-foot`	div	Start, figure and end, with an `<i>` hairline between each.
`.up-tip`	div	Hover card inside `.up-bars`: `.label` date, then `<b>` the state.

Round down to two decimals and show the minutes in the hover card: 99.95% over 90 days is 65 minutes.
Count partial outages as partial: a quarter of the degraded minutes, if that is your SLA.
Keep the same 90 days for every component so the columns line up.

Don't

Rounding 99.95% up to 100%.
Hiding a red day because it was short. People check the status page when something felt wrong.
A different colour per component.

Accessibility

The row is one image with the takeaway in its label: name, percentage and window.
Each bar has its own aria-label, so the hover card text exists without a mouse. For a full history, link to a table of incidents.