105 Pro components and page blocks

Get Pro
uibrik

Heatmap Rank

Pro

Preview

Customize

By day
Color
Days14
Gap2.0px
Duration1.1s

Installation

Pro

Heatmap Rank is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/heatmap-rank

Usage

import { HeatmapRank } from "@/components/uibrik/heatmap-rank/heatmap-rank";​<HeatmapRank  defaultView="heatmap"  color="#4b8bff"  gap={2}  duration={1.1}  title="Commits"  drill  onDrillChange={(path) => {}}  // rows={[{ label: "…", values: [0] }]}  // columns={["…"]}  // formatValue={(value) => {}}  // hours={[(row, col, value) => {}]}  // items={[(row, col, hour, count) => {}]}  // view="heatmap"  // onViewChange={(view) => {}}  // label="…"/>

Props

HeatmapRank
defaultView
Type "heatmap" | "ranking"
"heatmap"
View on mount when uncontrolled.
color
Type string
"#4b8bff"
Accent for cells and bars. Cell shade follows the value; the top bar is full strength.
gap
Type number
2
Space between cells.
duration
Type number
1.1
Length of a full switch.
title
Type string
"Commits"
Heading in the top left.
drill
Type boolean
true
Click a cell to open it into hours, and an hour into its items. Back or Escape goes up a level.
rows
Type { label: string; values: number[] }[]
6 sample rows
One row per person or item, each with the same number of values.
columns
Type string[]
14 dates
A label per column, shown in the hover readout.
formatValue
Type (value: number) => string
"6 commits"
Formats a value for the hover readout.
hours
Type (row, col, value) => number[]
sample split
Splits one cell's value across 24 hours for the first drill level.
items
Type (row, col, hour, count) => { title; meta?; value? }[]
sample commits
The items behind one hour, for the second drill level.
onDrillChange
Type (path: { row; col; hour? } | null) => void
–
Fires when the drill level changes; null is back at the grid.
view / onViewChange
Type "heatmap" | "ranking" / (view) => void
–
Controlled view.
label
Type string
–
Accessible name; defaults to the title and the current view.
className
Type string
–
Classes for the card.