Chart
ChartStatusTracker
Uptime-style status tracker bar for service health dashboards.
ChartStatusTracker
Uptime-style bar chart that maps a statusData array to colored bar segments. Designed for service health dashboards showing historical uptime or incident history.
Components
<XAChartStatusTracker />
Uptime-style bar chart that maps a statusData array to colored bar segments. Designed for service health dashboards.
<XAChartStatusTracker
:status-data="uptimeData"
:operational-status="true"
domain="api.example.com"
uptime="99.98%"
:bar-width="4"
:bar-gap="1"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
statusData | Array<{ status: string }> | [] | Array of status entries (each with a status string). |
operationalStatus | boolean | true | Whether the service is currently operational. |
barWidth | number | 4 | Width of each bar segment in px. |
barGap | number | 1 | Gap between bar segments in px. |
domain | string | '' | Service domain/name displayed in the header. |
uptime | string | '' | Uptime percentage string displayed in the header. |
AI Context
component: XAChartStatusTracker
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Showing service health history as an uptime bar (similar to statuspage.io) — each bar segment represents a time period colored by its status
patterns:
- statusData is an array of objects with a status string field.
- operationalStatus controls the current status indicator in the header.