The StatusTracker component is a clean component to displaying the operational status of services over time. It's designed to be highly reusable and customizable.
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
| 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 |