Heatmap

1import Heatmap, {
2  type HeatmapData
3} from "@/registry/8starlabs-ui/blocks/heatmap";
4import { useMemo } from "react";
5 
6function generateRandomHeatmapData(
7  startDate: Date,
8  endDate: Date,
9  minValue: number = 0,
10  maxValue: number = 30
11): HeatmapData {
12  const data: HeatmapData = [];
13  const current = new Date(startDate);
14 
15  while (current <= endDate) {
16    const dateString = current.toISOString().slice(0, 10);
17    const value =
18      Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue;
19    data.push({ date: dateString, value });
20    current.setDate(current.getDate() + 1);
21  }
22 
23  return data;
24}
25 
26export default function HeatmapDemo() {
27  const data = useMemo(
28    () =>
29      generateRandomHeatmapData(
30        new Date("2025-01-01"),
31        new Date("2025-06-30"),
32        0,
33        30
34      ),
35    []
36  );
37 
38  return (
39    <Heatmap
40      data={data}
41      startDate={new Date("2025-01-01")}
42      endDate={new Date("2025-06-30")}
43      colorMode="interpolate"
44    />
45  );
46}