Heatmap

1import Heatmap, {
2  type HeatmapData
3} from "@/registry/8starlabs-ui/blocks/heatmap";
4 
5const data: HeatmapData = [
6  { date: "2025-12-01", value: 2 },
7  { date: "2025-12-02", value: 0 },
8  { date: "2025-12-03", value: 5 },
9  { date: "2025-12-04", value: 1 },
10  { date: "2025-12-05", value: 3 },
11  { date: "2025-12-06", value: 4 },
12  { date: "2025-12-07", value: 2 },
13  { date: "2025-12-08", value: 0 },
14  { date: "2025-12-09", value: 3 },
15  { date: "2025-12-10", value: 6 },
16  { date: "2025-12-11", value: 2 },
17  { date: "2025-12-12", value: 1 },
18  { date: "2025-12-13", value: 4 },
19  { date: "2025-12-14", value: 0 },
20  { date: "2025-12-15", value: 2 },
21  { date: "2025-12-16", value: 5 },
22  { date: "2025-12-17", value: 3 },
23  { date: "2025-12-18", value: 4 },
24  { date: "2025-12-19", value: 0 },
25  { date: "2025-12-20", value: 1 },
26  { date: "2025-12-21", value: 2 },
27  { date: "2025-12-22", value: 3 },
28  { date: "2025-12-23", value: 0 },
29  { date: "2025-12-24", value: 2 },
30  { date: "2025-12-25", value: 5 },
31  { date: "2025-12-26", value: 1 },
32  { date: "2025-12-27", value: 0 },
33  { date: "2025-12-28", value: 3 },
34  { date: "2025-12-29", value: 4 },
35  { date: "2025-12-30", value: 2 },
36  { date: "2025-12-31", value: 1 }
37];
38 
39export default function HeatmapDaysOfWeekDemo() {
40  return (
41    <div className="space-y-8">
42      <div className="flex flex-col items-center">
43        <p className="font-semibold text-sm text-muted-foreground mb-2">
44          All Days
45        </p>
46        <Heatmap
47          data={data}
48          startDate={new Date("2025-12-01")}
49          endDate={new Date("2025-12-31")}
50          colorMode="discrete"
51          daysOfTheWeek="all"
52        />
53      </div>
54 
55      <div className="flex flex-col items-center">
56        <p className="font-semibold text-sm text-muted-foreground mb-2">
57          Mon/Wed/Fri (Default)
58        </p>
59        <Heatmap
60          data={data}
61          startDate={new Date("2025-12-01")}
62          endDate={new Date("2025-12-31")}
63          colorMode="discrete"
64          daysOfTheWeek="MWF"
65        />
66      </div>
67 
68      <div className="flex flex-col items-center">
69        <p className="font-semibold text-sm text-muted-foreground mb-2">
70          Single Letter
71        </p>
72        <Heatmap
73          data={data}
74          startDate={new Date("2025-12-01")}
75          endDate={new Date("2025-12-31")}
76          colorMode="discrete"
77          daysOfTheWeek="single letter"
78        />
79      </div>
80 
81// … truncated