Factory Machine Status

	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	1	2	3	4	5	6	7	8	9
M-01
M-02
M-03
M-04
M-05
M-06
M-07
M-08
M-09
M-10

Operational(171)

Warning(63)

Fault(37)

No data(29)

	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	1	2	3	4	5	6	7	8	9
M-01
M-02
M-03
M-04
M-05
M-06
M-07
M-08
M-09
M-10

StatusMap

A grid-based heatmap that maps status values to colored cells across rows and dates.

Usage

import { StatusMap } from "@/components/ui/status-map"

<StatusMap
  data={data}
  labelConfig={{
    green:  { color: "bg-emerald-500", label: "Operational" },
    orange: { color: "bg-orange-400",  label: "Warning", enableAction: true },
    red:    { color: "bg-orange-700",  label: "Fault",   enableAction: true },
    grey:   { color: "bg-muted",       label: "No data" },
  }}
  onAction={(row, date, status) => console.log(row, date, status)}
  label
  labelAlign="right"
  labelTop={false}
  style="rounded"
/>

Props

Prop	Type	Default	Description
data*	StatusMapEntry[]	—	Array of entries, each with a row label, ISO date, and status key.
labelConfig*	Record<string, StatusItemConfig>	—	Maps status keys to a Tailwind color class, human-readable label, and optional enableAction flag.
style	"rounded" \| "squared" \| "tight"	"rounded"	Cell shape style.
bordered	boolean	true	Adds a border around the grid.
label	boolean	false	Shows the color legend below (or above) the grid.
labelAlign	"left" \| "center" \| "right"	"left"	Horizontal alignment of the legend.
labelTop	boolean	false	Renders the legend above the grid instead of below.
className	string	—	Additional class names applied to the root element.
onCellClick	(row, date, status) => void	—	Callback fired on every cell click.
onAction	(row, date, status) => void	—	Callback fired when a cell whose status has enableAction: true is clicked.
tooltip	boolean	false	Shows a tooltip on cell hover.
tooltipContent	(row, date, status, label) => ReactNode	—	Custom tooltip renderer.