tabler/docs/content/ui/components/tracking.md

title, summary, description

title	summary	description
Tracking	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.	Monitor data activity visually.

Basic example

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html %}

<div class="tracking">
  ...
  <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 bg-failed"
    data-bs-toggle="tooltip"
    data-bs-placement="top"
    title="Operational"
  ></div>
  ...
</div>

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.

{% capture html -%}

Status monitoring

Current month

Current month Last month Last 3 months

99.5%

2%

{%- endcapture %} {% include "docs/example.html" html=html %}

<div class="card">
  <div class="card-body">
    <div class="d-flex align-items-center">
      <div class="subheader">Status monitoring</div>
      <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-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-warning"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="Big load"
        ></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>
    </div>
  </div>
</div>