1. Components
  2. Tracker

Components

Tracker

Component for visualizing activity logs or other data related to monitoring.

   

Import Tracker

Tremor exports two components to create a tracker.

  • Tracking: Wrapper component to display activity bars in a flexible and responsive way
  • TrackingBlock: Component to represent a data point, respectively a status of an activity
import { Tracking, TrackingBlock } from "@tremor/react";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

import { Tracking, TrackingBlock } from "@tremor/react";

export default () => (
  <Tracking 
    marginTop="mt-0">
      <TrackingBlock
        color=""
        height="h-10"
        tooltip="" />
  </Tracking>
);

Usage example

The example below shows a composition of an uptime monitor by combining a Card with a Tracking and TrackingBlock components. We suggest using a Mapping function as every data point needs to be declared separately with a TrackingBlock component. The tooltip property acts as pop-up information and displays the provided status.

Status monitoring

Lena's Webshop • May 2022

Uptime 99.4%

import {
  Card,
  Title,
  Tracking,
  TrackingBlock,
  Flex,
  Text,
} from "@tremor/react";

const statusStyles = {
  Operational: "emerald",
  Downtime: "rose",
  Maintenance: "gray",
  Degraded: "amber",
};

const data = [
  { id: 1, status: "Operational" },
  { id: 2, status: "Operational" },
  { id: 3, status: "Operational" },
  { id: 4, status: "Operational" },
  { id: 5, status: "Operational" },
  { id: 6, status: "Operational" },
  { id: 7, status: "Operational" },
  { id: 8, status: "Operational" },
  { id: 9, status: "Operational" },
  { id: 10, status: "Operational" },
  { id: 11, status: "Operational" },
  { id: 12, status: "Operational" },
  { id: 13, status: "Operational" },
  { id: 14, status: "Operational" },
  { id: 15, status: "Downtime" },
  { id: 16, status: "Operational" },
  { id: 17, status: "Operational" },
  { id: 18, status: "Operational" },
  { id: 19, status: "Operational" },
  { id: 20, status: "Maintenance" },
  { id: 21, status: "Operational" },
  { id: 22, status: "Operational" },
  { id: 23, status: "Operational" },
  { id: 24, status: "Degraded" },
  { id: 25, status: "Operational" },
];

export default () => (
  <div className="grid grid-cols-1 gap-12 mx-auto">
    <div className="space-y-3">
      <Card maxWidth="max-w-sm">
          <Title>Status monitoring</Title>
          <Text>Lena&apos;s Webshop &bull; May 2022</Text>
          <Flex justifyContent="justify-end" marginTop="mt-4">
              <Text>Uptime 99.4%</Text>
          </Flex>
          <Tracking marginTop="mt-2">
              { data.map((item) => (
                  <TrackingBlock
                      color={ statusStyles[item.status] }
                      tooltip={ item.status }
                      key={ item.id }
                  />
              )) }
          </Tracking>
      </Card>
    </div>
  </div>
);

API Reference: Tracking

marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

API Reference: TrackingBlock

color
Description
Set the color of the data points.
Type
sting
Default
blue
Values
See color section
heightoptional
Description
Height of the bar.
Type
string
Default
h-10
tooltipoptional
Description
Set a tooltip on hover.
Type
string
Default
-
Values