Visualizations
Tracker
Component for visualizing activity logs or other data related to monitoring.
import { Tracker } from '@tremor/react';
export const TrackerHero = () => ( <div className="mx-auto max-w-md"> <Tracker data={[ { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'yellow', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'red', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'yellow', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'red', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'yellow', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, { color: 'emerald', tooltip: 'Tracker Info' }, ]} /> </div>);
Tremor exports one component to create a tracker.
import { Tracker } from '@tremor/react';
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.
example.comuptime 99.1%
import { Card, Tracker, type 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 function TrackerUsageExample() { return ( <Card className="mx-auto max-w-md"> <p className="text-tremor-default flex items-center justify-between"> <span className="text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">example.com</span> <span className="text-tremor-content dark:text-dark-tremor-content">uptime 99.1%</span> </p> <Tracker data={data} className="mt-2" /> </Card> );}
The example below shows a Tracker with custom values in the color key. Note, that for the custom HEX color to work, the tailwind.config.js has to be adjusted. Learn more about custom colors in your theming section.
// NOTE: The tailwind.config.js has to be extended with your custom HEX color// ...["[#f0652f]"].flatMap((customColor) => [// `bg-${customColor}`,// `border-${customColor}`,// `hover:bg-${customColor}`,// `hover:border-${customColor}`,// `hover:text-${customColor}`,// `fill-${customColor}`,// `ring-${customColor}`,// `stroke-${customColor}`,// `text-${customColor}`,// `ui-selected:bg-${customColor}]`,// `ui-selected:border-${customColor}]`,// `ui-selected:text-${customColor}`,// ]),
import { Card, Tracker, type CustomColor } from '@tremor/react';
interface Tracker { color: CustomColor; tooltip: string;}
const customColorData: Tracker[] = [ { color: '#f0652f', tooltip: 'Online' }, { color: '#f0652f', tooltip: 'Online' }, { color: '#f0652f', tooltip: 'Online' }, { color: '#f0652f', tooltip: 'Online' }, { color: '#f0652f', tooltip: 'Online' }, { color: '#f0652f', tooltip: 'Online' }, { color: '#f0652f', tooltip: 'Online' }, { color: '#f0652f', tooltip: 'Online' }, { color: '#f0652f', tooltip: 'Online' }, { color: '#f0652f', tooltip: 'Online' }, { color: '#f0652f', tooltip: 'Online' }, { color: '#f0652f', tooltip: 'Online' }, { color: '#ffcc33', tooltip: 'Event' }, { color: '#ffcc33', tooltip: 'Event' }, { color: 'red-800', tooltip: 'Downtime' }, { color: '#ffcc33', tooltip: 'Event' }, { color: '#ffcc33', tooltip: 'Event' }, { color: '#ffcc33', tooltip: 'Event' }, { color: '#ffcc33', tooltip: 'Event' },];
export function TrackerExample2() { return ( <Card className="mx-auto max-w-md"> <Tracker data={customColorData} /> </Card> );}
client component
- data
- Array of objects, with each object containing an optional key (string), optional color (Color | customColor) and an optional tooltip (string).
Required
array
Element | Theme Token |
---|---|
Roundness borderRadiustremor-small | borderRadiustremor-small |