1. Components
  2. tracker

Tracker

A row of status blocks: uptime, job runs, attendance.

Demo

api.example.com

99.82% uptime

  • Sep 5 — Operational
  • Sep 6 — Operational
  • Sep 7 — Operational
  • Sep 8 — Operational
  • Sep 9 — Operational
  • Sep 10 — Operational
  • Sep 11 — Operational
  • Sep 12 — Operational
  • Sep 13 — Operational
  • Sep 14 — Operational
  • Sep 15 — Operational
  • Sep 16 — Operational
  • Sep 17 — Operational
  • Sep 18 — Operational
  • Sep 19 — Operational
  • Sep 20 — Operational
  • Sep 21 — Operational
  • Sep 22 — Operational
  • Sep 23 — Outage
  • Sep 24 — Operational
  • Sep 25 — Operational
  • Sep 26 — Operational
  • Sep 27 — Operational
  • Sep 28 — Operational
  • Sep 29 — Operational
  • Sep 30 — Operational
  • Oct 1 — Degraded
  • Oct 2 — Degraded
  • Oct 3 — Operational
  • Oct 4 — Operational
  • Oct 5 — Operational
  • Oct 6 — Operational
  • Oct 7 — Operational
  • Oct 8 — Operational
  • Oct 9 — Operational
  • Oct 10 — Operational
  • Oct 11 — Operational
  • Oct 12 — Operational
  • Oct 13 — Operational
  • Oct 14 — Operational
  • Oct 15 — Operational
  • Oct 16 — Operational
  • Oct 17 — Operational
  • Oct 18 — Operational
  • Oct 19 — Operational
  • Oct 20 — Operational
  • Oct 21 — Operational
  • Oct 22 — Outage
  • Oct 23 — Operational
  • Oct 24 — Operational
  • Oct 25 — Operational
  • Oct 26 — Operational
  • Oct 27 — Operational
  • Oct 28 — Operational
  • Oct 29 — Degraded
  • Oct 30 — Operational
  • Oct 31 — Operational
  • Nov 1 — Operational
  • Nov 2 — Operational
  • Nov 3 — Operational
60 days ago Today 
@php
    // 60 days, oldest first. In an app this comes from your incidents table.
    $days = collect(range(59, 0))->map(function (int $ago) {
        $date = now()->subDays($ago)->format('M j');
        $status = match (true) {
            in_array($ago, [41, 12], true) => 'error',
            in_array($ago, [33, 32, 5], true) => 'warning',
            default => 'ok',
        };

        return [
            'status' => $status,
            'tooltip' => $date.' — '.['ok' => 'Operational', 'warning' => 'Degraded', 'error' => 'Outage'][$status],
        ];
    })->all();
@endphp

<div class="w-full max-w-xl rounded-xl border border-border bg-background p-5">
    <div class="flex items-center justify-between">
        <p class="font-medium text-foreground">api.example.com</p>
        <p class="text-sm text-muted-foreground">99.82% uptime</p>
    </div>
    <x-ui.tracker :data="$days" label="API status, last 60 days" class="mt-4" />
    <div class="mt-2 flex justify-between text-xs text-muted-foreground">
        <span>60 days ago</span>
        <span>Today</span>
    </div>
</div>

Installation

Shell 
php artisan flexi:add tracker

Usage

One item per period, oldest first. Each item has a status and an optional tooltip . 

<x-ui.tracker :data="[
    ['status' => 'ok', 'tooltip' => 'Sep 1 — Operational'],
    ['status' => 'warning', 'tooltip' => 'Sep 2 — Degraded'],
    ['status' => 'error', 'tooltip' => 'Sep 3 — Outage'],
]" />

The four default statuses are ok , warning , error and empty , colored with your theme's --success , --warning , --destructive and --muted . Add or override statuses with colors , or give one item its own color . 

<x-ui.tracker :data="$runs" :colors="['skipped' => 'var(--chart-3)']" />

Props

Prop Description
data (array|Collection) Items with status , and optionally tooltip and color .
colors (array) Status → CSS color, merged over the defaults.
label (string) Accessible name of the list.

Each tooltip is also written as visually hidden text, so screen readers read the whole history.

Prev
Bar

Grouped, stacked and...

Next
On this page