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 wayTrackingBlock
: 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's Webshop • 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
API Reference: TrackingBlock
- color
- Description
- Set the color of the data points.
- Type
- sting
- Default
- blue
- Values
- See color section
- heightoptional
- tooltipoptional
- Description
- Set a tooltip on hover.
- Type
- string
- Default
- -
- Values
TogglesBlock