1. Components
  2. Tracker

Components

Tracker

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

   

Import Tracker

Tremor exports one component to create a tracker.

import { Tracker } from "@tremor/react";

Usage example

The example below shows a composition of an uptime monitor by combining a Card with a Tracker component. The tooltip property acts as pop-up information and displays the provided status.

Status

Lena's Webshop • May 2022

Uptime 92%

import { Card, Title, Tracker, Flex, Text, Color } from "@tremor/react";

interface Tracker {
  color: Color;
  tooltip: string;
}

const data: Tracker[] = [
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "rose", tooltip: "Downtime" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "gray", tooltip: "Maintenance" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "yellow", tooltip: "Degraded" },
  { color: "emerald", tooltip: "Operational" },
];

export const TrackerExample = () => (
  <Card className="max-w-sm mx-auto">
    <Title>Status</Title>
    <Text>Lena&apos;s Webshop &bull; May 2022</Text>
    <Flex justifyContent="end" className="mt-4">
      <Text>Uptime 92%</Text>
    </Flex>
    <Tracker data={data} className="mt-2" />
  </Card>
);

API Reference: Tracker

client component

data
Description
Array of objects, with each object containing an optional key (string), optional color (Color) and an optional tooltip (string).
Type
array
Default
Values
E.g. [{ key: 'string', color: 'emerald', tooltip: 'Hey!' }]
TogglesGrid