# `PhiaUi.Components.UptimeBar`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/uptime_bar.ex#L1)

Uptime status bar — a row of colored segments indicating service health over time.

Inspired by Instastatus and Statuspage.io. Each segment represents a time period
(hour, day, or week) with a color conveying its health status:

| Status      | Color  | Tailwind class  |
|-------------|--------|-----------------|
| `:up`       | Green  | `bg-green-500`  |
| `:down`     | Red    | `bg-red-500`    |
| `:degraded` | Yellow | `bg-yellow-500` |

The overall uptime percentage is computed server-side from the segment list.
Native browser tooltips (`title` attribute) reveal date/status details on hover —
no JavaScript required.

## Examples

    <%!-- Static 90-day bar --%>
    <.uptime_bar segments={@daily_statuses} />

    <%!-- Custom period --%>
    <.uptime_bar segments={@hourly_statuses} days={7} />

    <%!-- With labels (shown as native tooltip) --%>
    <.uptime_bar segments={
      Enum.map(@log, fn entry ->
        %{status: entry.status, label: Date.to_iso8601(entry.date)}
      end)
    } />

# `uptime_bar`

Renders a horizontal uptime bar with colored segments and an uptime percentage.

## Example

    <.uptime_bar segments={@statuses} days={90} />

## Attributes

* `segments` (`:list`) - List of segment maps. Each map must have `:status` (`:up | :down | :degraded`). Optional `:label` string is shown as a native browser tooltip on hover. Defaults to `[]`.
* `days` (`:integer`) - Number of days represented (used for the '90 days ago' label). Default: `90`. Defaults to `90`.
* `class` (`:string`) - Additional CSS classes for the root element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>` element.

---

*Consult [api-reference.md](api-reference.md) for complete listing*