Tracking

A row of status blocks, one per period: the history of an uptime monitor, a job or a health check. Hover a block to see its tooltip.

<twig:Tabler:Tracking>
    {% for day in 1..30 %}
        {% if day == 9 %}
            <twig:Tabler:Tracking:Block variant="danger" tooltip="Oct {{ day }}: downtime (42 min)" />
        {% elseif day == 21 %}
            <twig:Tabler:Tracking:Block variant="warning" tooltip="Oct {{ day }}: degraded performance" />
        {% else %}
            <twig:Tabler:Tracking:Block variant="success" tooltip="Oct {{ day }}: operational" />
        {% endif %}
    {% endfor %}
</twig:Tabler:Tracking>

<div class="tracking">
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 1: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 2: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 3: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 4: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 5: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 6: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 7: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 8: operational"></div>
    <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-title="Oct 9: downtime (42 min)"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 10: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 11: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 12: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 13: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 14: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 15: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 16: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 17: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 18: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 19: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 20: operational"></div>
    <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-title="Oct 21: degraded performance"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 22: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 23: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 24: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 25: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 26: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 27: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 28: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 29: operational"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 30: operational"></div>
</div>

Place one Tracking:Block per period. The blocks share the width of the row.

Variants

variant colors a block. Without one, the block is gray, for a period with no data. tooltip adds a Bootstrap tooltip, which tabler.js initializes on page load: see Tooltip for content added later.

<twig:Tabler:Tracking>
    {% for variant in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'] %}
        <twig:Tabler:Tracking:Block variant="{{ variant }}" tooltip="{{ variant }}" />
    {% endfor %}
    <twig:Tabler:Tracking:Block tooltip="No variant: no data" />
</twig:Tabler:Tracking>

<div class="tracking">
    <div class="tracking-block bg-primary" data-bs-toggle="tooltip" data-bs-title="primary"></div>
    <div class="tracking-block bg-secondary" data-bs-toggle="tooltip" data-bs-title="secondary"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="success"></div>
    <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-title="danger"></div>
    <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-title="warning"></div>
    <div class="tracking-block bg-info" data-bs-toggle="tooltip" data-bs-title="info"></div>
    <div class="tracking-block bg-dark" data-bs-toggle="tooltip" data-bs-title="dark"></div>
    <div class="tracking-block bg-light" data-bs-toggle="tooltip" data-bs-title="light"></div>
    <div class="tracking-block" data-bs-toggle="tooltip" data-bs-title="No variant: no data"></div>
</div>

Squares

squares draws square blocks instead of thin bars: each block is as tall as it is wide.

<twig:Tabler:Tracking squares>
    {% for day in 1..30 %}
        {% if day == 12 %}
            <twig:Tabler:Tracking:Block variant="danger" tooltip="Oct {{ day }}: 3 failed backups" />
        {% elseif day in [5, 26] %}
            <twig:Tabler:Tracking:Block variant="warning" tooltip="Oct {{ day }}: backup took over 2 hours" />
        {% else %}
            <twig:Tabler:Tracking:Block variant="success" tooltip="Oct {{ day }}: all backups succeeded" />
        {% endif %}
    {% endfor %}
</twig:Tabler:Tracking>

<div class="tracking tracking-squares">
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 1: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 2: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 3: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 4: all backups succeeded"></div>
    <div
        class="tracking-block bg-warning"
        data-bs-toggle="tooltip"
        data-bs-title="Oct 5: backup took over 2 hours"
    ></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 6: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 7: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 8: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 9: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 10: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 11: all backups succeeded"></div>
    <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-title="Oct 12: 3 failed backups"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 13: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 14: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 15: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 16: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 17: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 18: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 19: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 20: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 21: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 22: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 23: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 24: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 25: all backups succeeded"></div>
    <div
        class="tracking-block bg-warning"
        data-bs-toggle="tooltip"
        data-bs-title="Oct 26: backup took over 2 hours"
    ></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 27: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 28: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 29: all backups succeeded"></div>
    <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-title="Oct 30: all backups succeeded"></div>
</div>

In a card

<div class="card">
    <div class="card-body">
        <div class="d-flex align-items-center mb-2">
            <div class="subheader">api.example.com</div>
            <div class="ms-auto text-success">99.86% uptime</div>
        </div>
        <twig:Tabler:Tracking>
            {% for status in ['success', 'success', 'success', 'danger', 'success', 'success', 'success', 'success', 'warning', 'success', 'success', 'success'] %}
                <twig:Tabler:Tracking:Block variant="{{ status }}" />
            {% endfor %}
            <twig:Tabler:Tracking:Block tooltip="No data yet" />
            <twig:Tabler:Tracking:Block tooltip="No data yet" />
        </twig:Tabler:Tracking>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="d-flex align-items-center mb-2">
            <div class="subheader">api.example.com</div>
            <div class="ms-auto text-success">99.86% uptime</div>
        </div>
        <div class="tracking">
            <div class="tracking-block bg-success"></div>
            <div class="tracking-block bg-success"></div>
            <div class="tracking-block bg-success"></div>
            <div class="tracking-block bg-danger"></div>
            <div class="tracking-block bg-success"></div>
            <div class="tracking-block bg-success"></div>
            <div class="tracking-block bg-success"></div>
            <div class="tracking-block bg-success"></div>
            <div class="tracking-block bg-warning"></div>
            <div class="tracking-block bg-success"></div>
            <div class="tracking-block bg-success"></div>
            <div class="tracking-block bg-success"></div>
            <div class="tracking-block" data-bs-toggle="tooltip" data-bs-title="No data yet"></div>
            <div class="tracking-block" data-bs-toggle="tooltip" data-bs-title="No data yet"></div>
        </div>
    </div>
</div>

Props

Tracking:

Prop	Type	Default	Description
`squares`	bool	`false`	Square blocks instead of thin bars (`tracking-squares`)

Other attributes go to the root <div class="tracking">.

Tracking:Block

Prop	Type	Default	Description
`variant`	string?	`null`	`primary` `secondary` `success` `danger` `warning` `info` `dark` `light` (`bg-*`)
`tooltip`	string?	`null`	Tooltip text (`data-bs-toggle="tooltip"` and `data-bs-title`)

Other attributes go to the block <div>.

Sub-components

Component	Renders
`Tracking:Block`	`<div class="tracking-block">`, one status block

Blocks

Block	Default
`content`	Empty: the `Tracking:Block` items