Heatmap

1import Heatmap, {
2  type HeatmapData
3} from "@/registry/8starlabs-ui/blocks/heatmap";
4 
5const data: HeatmapData = [
6  { date: "2025-12-01", value: 5 },
7  { date: "2025-12-02", value: 0 },
8  { date: "2025-12-03", value: 120 },
9  { date: "2025-12-04", value: 10 },
10  { date: "2025-12-05", value: 45 },
11  { date: "2025-12-06", value: 80 },
12  { date: "2025-12-07", value: 15 },
13  { date: "2025-12-08", value: 0 },
14  { date: "2025-12-09", value: 200 },
15  { date: "2025-12-10", value: 350 },
16  { date: "2025-12-11", value: 25 },
17  { date: "2025-12-12", value: 8 },
18  { date: "2025-12-13", value: 150 },
19  { date: "2025-12-14", value: 0 },
20  { date: "2025-12-15", value: 30 },
21  { date: "2025-12-16", value: 180 },
22  { date: "2025-12-17", value: 95 },
23  { date: "2025-12-18", value: 220 },
24  { date: "2025-12-19", value: 0 },
25  { date: "2025-12-20", value: 12 },
26  { date: "2025-12-21", value: 60 },
27  { date: "2025-12-22", value: 140 },
28  { date: "2025-12-23", value: 0 },
29  { date: "2025-12-24", value: 20 },
30  { date: "2025-12-25", value: 280 },
31  { date: "2025-12-26", value: 35 },
32  { date: "2025-12-27", value: 0 },
33  { date: "2025-12-28", value: 110 },
34  { date: "2025-12-29", value: 240 },
35  { date: "2025-12-30", value: 50 },
36  { date: "2025-12-31", value: 18 }
37];
38 
39export default function HeatmapInterpolateDemo() {
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          Linear Interpolation
45        </p>
46        <Heatmap
47          data={data}
48          startDate={new Date("2025-12-01")}
49          endDate={new Date("2025-12-31")}
50          colorMode="interpolate"
51          interpolation="linear"
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          Square Root Interpolation
58        </p>
59        <Heatmap
60          data={data}
61          startDate={new Date("2025-12-01")}
62          endDate={new Date("2025-12-31")}
63          colorMode="interpolate"
64          interpolation="sqrt"
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          Logarithmic Interpolation
71        </p>
72        <Heatmap
73          data={data}
74          startDate={new Date("2025-12-01")}
75          endDate={new Date("2025-12-31")}
76          colorMode="interpolate"
77// … truncated