HeatmapPro

• Cohort retention, activity by hour and day, any grid of magnitudes.

• A single row: use a bar chart.

Import it from @/components/ui/heatmap after installing.

import { Heatmap } from "@/components/ui/heatmap";

export function Retention({ rows }: { rows: { label: string; values: (number | null)[] }[] }) {
  return <Heatmap rows={rows} columns={["M0", "M1", "M2"]} max={100} />;
}

• A real <table>; each cell's value is printed, so color isn't the only signal.

• Cells pop in along the diagonal; hover highlights the row and column.

• Scrolls horizontally inside its container on narrow screens.

• One cell per value; fine up to a few hundred cells.

• Use null, not 0, for periods that haven't happened yet.