docs/pages/ui/components/tracking.mdx - dev - githubmirror/tabler

docs/pages/ui/components/tracking.mdx
32 строки9 KB
Paweł Kuna
Improve docs SEO, performance and content quality (#2841)
11 авг 2026, 15:45
11 авг 2026, 15:4539634cb
---
title: Tracking
summary: Component for visualizing activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
description: Visualize activity logs and uptime data with the tracking component - a compact row of colored blocks that show status over time.
related: [/ui/components/tooltip, /ui/components/chart]
layout: '@layouts/DocsMdxLayout.astro'
---
import Subheader from '@ui/Subheader.astro';
import Example from '@components/Example.astro';
import CodeDocs from '@components/CodeDocs.astro';

## Basic example

Build a tracking view from a `.tracking` wrapper with one `.tracking-block` element per time period. Use background classes such as `bg-success` or `bg-danger` to show each status, and add [tooltips](/ui/components/tooltip) for details.

<Example>
<div class="tracking"> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> </div>
</Example>

## Tracking inside a card

You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/ui/components/card).

<Example>
<div class="card"> <div class="card-body"> <div class="d-flex align-items-center"> <Subheader>Status monitoring</Subheader> <div class="ms-auto lh-1"> <div class="dropdown"> <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Current month</a > <div class="dropdown-menu dropdown-menu-end"> <a class="dropdown-item active" href="#">Current month</a> <a class="dropdown-item" href="#">Last month</a> <a class="dropdown-item" href="#">Last 3 months</a> </div> </div> </div> </div> <div class="d-flex align-items-baseline"> <div class="h1 mb-3 me-2">99.5%</div> <div class="me-auto"> <span class="text-green d-inline-flex align-items-center lh-1"> 2% <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="3 17 9 11 13 15 21 7" /> <polyline points="14 7 21 7 21 14" /> </svg> </span> </div> </div> <div class="mt-2"> <div class="tracking"> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> </div> </div> </div> </div>
</Example>

## SCSS variables

Use these SCSS variables to customize the tracking component. The default values are:

<CodeDocs name="tracking-variables" file="core/scss/_variables.scss" />