Heatmap

1import Heatmap, {
2  type HeatmapData
3} from "@/registry/8starlabs-ui/blocks/heatmap";
4 
5const data: HeatmapData = [
6  { date: "2025-12-01", value: 120 },
7  { date: "2025-12-02", value: 0 },
8  { date: "2025-12-03", value: 250 },
9  { date: "2025-12-04", value: 80 },
10  { date: "2025-12-05", value: 150 },
11  { date: "2025-12-06", value: 200 },
12  { date: "2025-12-07", value: 90 },
13  { date: "2025-12-08", value: 0 },
14  { date: "2025-12-09", value: 180 },
15  { date: "2025-12-10", value: 300 },
16  { date: "2025-12-11", value: 110 },
17  { date: "2025-12-12", value: 60 },
18  { date: "2025-12-13", value: 220 },
19  { date: "2025-12-14", value: 0 },
20  { date: "2025-12-15", value: 130 },
21  { date: "2025-12-16", value: 270 },
22  { date: "2025-12-17", value: 160 },
23  { date: "2025-12-18", value: 210 },
24  { date: "2025-12-19", value: 0 },
25  { date: "2025-12-20", value: 95 },
26  { date: "2025-12-21", value: 140 },
27  { date: "2025-12-22", value: 190 },
28  { date: "2025-12-23", value: 0 },
29  { date: "2025-12-24", value: 100 },
30  { date: "2025-12-25", value: 280 },
31  { date: "2025-12-26", value: 75 },
32  { date: "2025-12-27", value: 0 },
33  { date: "2025-12-28", value: 170 },
34  { date: "2025-12-29", value: 230 },
35  { date: "2025-12-30", value: 120 },
36  { date: "2025-12-31", value: 85 }
37];
38 
39export default function HeatmapCustomDisplayDemo() {
40  return (
41    <Heatmap
42      data={data}
43      startDate={new Date("2025-12-01")}
44      endDate={new Date("2025-12-31")}
45      colorMode="discrete"
46      dateDisplayFunction={(date) => (
47        <span className="font-semibold">
48          {date.toLocaleDateString("en-US", {
49            month: "short",
50            day: "numeric",
51            year: "numeric"
52          })}
53        </span>
54      )}
55      valueDisplayFunction={(value) => (
56        <span className="text-yellow-500">
57          {value > 0 ? `Activity level: ${value}` : "No activity"}
58        </span>
59      )}
60    />
61  );
62}