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.

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

API Reference: TrackingBlock