# ASCII Uptime

> Status bars for uptime over time, one block per day.

Category: Charts. Docs: https://asciicn.sumak.dev/docs/ascii-uptime

## Installation

```bash
npx shadcn@latest add @asciicn/ascii-uptime
```

Needs the `@asciicn` registry in components.json: `"registries": { "@asciicn": "https://asciicn.sumak.dev/r/{name}.json" }`.

## Usage

```tsx
import { AsciiUptime } from "@/components/ascii/ascii-uptime"

<AsciiUptime
  label="API"
  data={[
    { label: "Oct 24", status: "up" },
    { label: "Oct 25", status: "degraded", note: "Slow responses in eu-west" },
    { label: "Oct 26", status: "up" },
  ]}
/>
```

## Examples

### Compact rows

`rows={1}`, `legend={false}` and `summary={false}` leave only the bars. Put them in a column that has a width, such as `1fr` in a grid. `uptimePercent()` is exported for your own columns.

```tsx
<div className="grid grid-cols-[auto_1fr_auto] gap-x-6">
  {services.map((s) => (
    <Fragment key={s.name}>
      <span>{s.name}</span>
      <AsciiUptime label={s.name} data={s.days} rows={1} legend={false} summary={false} />
      <span>{uptimePercent(s.days).toFixed(1)}%</span>
    </Fragment>
  ))}
</div>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | `{ label, status, note? }[]` |  | One entry per interval, oldest first. `status` is `"up"`, `"degraded"`, `"down"` or `"none"`. The oldest are dropped when the container is too narrow. |
| `label` | `string` |  | Service name, shown above the bars and announced with the uptime. |
| `uptime` | `number` | `computed` | Overall percentage. Defaults to `uptimePercent()` of the intervals shown. |
| `rows` | `number` | `2` | Bar height in cells. |
| `glyphs` | `string` | `"shade"` | How the cells look: `shade`, `hash`, `dollar`, `diamond` or `circle`, or any five glyphs: no data, unused, operational, degraded, outage. Same presets as the column chart. |
| `legend` | `boolean` | `true` | Show the status key. Turn it off for all but the last service on a status page. |
| `summary` | `boolean` | `true` | Show the name and current status above the bars, and the date range and uptime below. Without it, each bar gets a native tooltip. |

## Notes

- **Accessibility.** A focusable group named with the service and its uptime, plus a hidden summary of outages. Arrow keys step through intervals, and the readout is a live region.
- **Status.** Every bar is full height, so even one-row bars show plenty of colour. Worse days use denser glyphs (`▒` up, `▓` degraded, `█` outage, `·` no data with `shade`), so incidents stand out and read without colour vision. Each cell is exactly 1em tall with no gap, so the rows of a bar merge into one solid column. Edit `uptimeStatuses` to change labels, colours or which glyph each status uses.
- **Sizing.** Fills its container's width and shows as many of the latest intervals as fit, so 90 days narrow to the last few weeks on a phone.
- **Uptime.** Counts up and degraded intervals as available and leaves out intervals with no data. Pass `uptime` for a figure from your monitoring.
- **Motion.** Hovering dims the other bars with a short fade, which is off under `prefers-reduced-motion`.
- **Dependencies.** None. Plain text and React state.