Beta

Visualization

Tracker

Component for visualizing data related to monitoring.

GitHubStorybook

Installation

  1. 1

    Install dependencies:

    npm i @radix-ui/react-hover-card
  2. 2

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor Raw Tracker [v0.0.1]
import React from "react"import * as HoverCardPrimitives from "@radix-ui/react-hover-card"
import { cx } from "@/lib/utils"
interface TrackerBlockProps {  key?: string | number  color?: string  tooltip?: string}
const Block = ({  color,  tooltip,  defaultBackgroundColor,}: TrackerBlockProps & {  defaultBackgroundColor?: string}) => {  const [open, setOpen] = React.useState(false)  return (    <HoverCardPrimitives.Root      open={open}      onOpenChange={setOpen}      openDelay={0}      closeDelay={0}    >      <HoverCardPrimitives.Trigger onClick={() => setOpen(true)} asChild>        <div          className={cx(            "h-full w-full rounded-[1px] first:rounded-l-[4px] last:rounded-r-[4px]",            color || defaultBackgroundColor,          )}        />      </HoverCardPrimitives.Trigger>      <HoverCardPrimitives.Portal>        <HoverCardPrimitives.Content          sideOffset={10}          side="top"          align="center"          avoidCollisions          className={cx(            // base            "w-auto rounded-md px-2 py-1 text-sm shadow-md",            // text color            "text-white dark:text-gray-900",            // background color            "bg-gray-900 dark:bg-gray-50",          )}        >          {tooltip}        </HoverCardPrimitives.Content>      </HoverCardPrimitives.Portal>    </HoverCardPrimitives.Root>  )}
interface TrackerProps extends React.HTMLAttributes<HTMLDivElement> {  data: TrackerBlockProps[]  defaultBackgroundColor?: string}
const Tracker = React.forwardRef<HTMLDivElement, TrackerProps>(  (    {      data = [],      defaultBackgroundColor = "bg-gray-400 dark:bg-gray-400",      className,      ...props    },    forwardedRef,  ) => {    return (      <div        ref={forwardedRef}        className={cx(          "flex h-10 w-full items-center gap-px sm:gap-0.5",          className,        )}        {...props}      >        {data.map((props, index) => (          <Block            key={props.key ?? index}            defaultBackgroundColor={defaultBackgroundColor}            {...props}          />        ))}      </div>    )  },)
Block.displayName = "Tracker"
export { Tracker, type TrackerBlockProps }

Example

To render a Tracker you need to pass an array to the data prop. We use CSS to display different lengths, given different breakpoints.

API Reference: Tracker

data
Required
TrackerBlockProps[]
Array of objects, with each object containing a key, color and a tooltip.
  • key?: string | number
  • color?: string
  • tooltip?: string
defaultBackgroundColor
string
Background color of a bar, when no color is provided in the data array.

Default: "bg-gray-400 dark:bg-gray-400"