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 
39const customPurpleScale = [
40  "#faf5ff", // purple-50
41  "#e9d5ff", // purple-200
42  "#c084fc", // purple-400
43  "#9333ea", // purple-600
44  "#581c87" // purple-900
45];
46 
47const redToGreenScale = [
48  "#991b1b", // red-800
49  "#dc2626", // red-600
50  "#ea580c", // orange-600
51  "#f59e0b", // amber-500
52  "#eab308", // yellow-500
53  "#84cc16", // lime-500
54  "#22c55e", // green-500
55  "#15803d" // green-700
56];
57 
58export default function HeatmapCustomColorsDemo() {
59  return (
60    <div className="space-y-8">
61      <div className="flex flex-col items-center">
62        <p className="font-semibold text-sm text-muted-foreground mb-2">
63          Purple Color Scale
64        </p>
65        <Heatmap
66          data={data}
67          startDate={new Date("2025-12-01")}
68          endDate={new Date("2025-12-31")}
69          colorMode="discrete"
70          colorScale={customPurpleScale}
71        />
72      </div>
73 
74      <div className="flex flex-col items-center">
75        <p className="font-semibold text-sm text-muted-foreground mb-2">
76          Red to Green Color Scale
77        </p>
78        <Heatmap
79          data={data}
80          startDate={new Date("2025-12-01")}
81          endDate={new Date("2025-12-31")}
82          colorMode="discrete"
83          colorScale={redToGreenScale}
84        />
85// … truncated