Status Tracker
A component to visualize the status of a service over a period of time.
Use StatusTracker to display status history, ordered oldest to newest. It requires Vue and Tailwind CSS and inherits Nuxt UI colors when available. Pass the history and optional header labels; the component does not fetch data or calculate uptime.
Example
Here's an example of the StatusTracker in action, monitoring a fictional service.
<script lang="ts" setup>
const statusData = computed(() => {
const statusHistory = Array.from({ length: 300 }, () => ({
status: 'online',
}))
statusHistory[250]!.status = 'offline'
return statusHistory
})
</script>
<template>
<StatusTracker
:status-data="statusData"
:operational-status="true"
:bar-width="4"
:bar-gap="1"
domain="example.com"
uptime="99.9%"
/>
</template>
nuxt-charts add StatusTracker
Props
| Prop | Type | Default | Description |
|---|---|---|---|
bar-width | number | 4 | Width of each status bar |
bar-gap | number | 1 | Gap between status bars |
operational-status | boolean | undefined | Current operational status |
domain | string | undefined | Domain being monitored |
uptime | string | undefined | Uptime percentage display |
status-data | StatusItem[] | Required | Array of status objects with status property |
barHeight | number | 28 | Bar height in pixels. |
startLabel / endLabel | string | undefined | Optional history boundary labels. |
statusColors | Record<string, string> | Built-in semantic colors | Override colors for built-in or custom statuses. |
showTooltip | boolean | true | Show native bar tooltips. |
tooltipFormatter | (bar: StatusItem) => string | Item label, then status | Custom tooltip text. |
label | string | 'Status history' | Accessible name for the history. |
uptimeLabel | string | 'uptime' | Text following the uptime value. |
emptyLabel | string | 'No data' | Text for empty history bars. |
Each StatusItem has a status: string and optional label: string. Built-in colors cover online, offline, maintenance, and empty. Unknown statuses use the empty color unless configured in statusColors. The component keeps the newest records when space is limited and pads missing history on the left.
The header slot receives domain, uptime, and operationalStatus. Use the footer slot for custom boundary labels and the bar slot for custom bar content; it receives bar and index.