The Tracker component monitors status from any source and displays uptime and operational status for services.
<template>
<ExamplesTracker
:bar-width="6"
:bar-gap="1"
:operational-status="true"
domain="example.com"
uptime="99.9%"
:status-data="statusData"
/>
</template>
<script setup>
const statusData = computed(() => {
const statusHistory = Array.from({ length: 100 }, () => ({
status: 'online',
}))
statusHistory[74].status = 'offline'
return statusHistory
})
</script>
| Prop | Type | Default | Description |
|---|---|---|---|
bar-width | number | 4 | Width of each status bar |
bar-gap | number | 1 | Gap between status bars |
operational-status | boolean | true | Current operational status |
domain | string | '' | Domain being monitored |
uptime | string | '' | Uptime percentage display |
status-data | Array | [] | Array of status objects with status property |
Each item in the status-data array should have the following structure:
interface StatusItem {
status: 'online' | 'offline' | 'maintenance'
}