Heatmap

1import { cn } from "@/lib/utils";
2import {
3  Tooltip,
4  TooltipContent,
5  TooltipProvider,
6  TooltipTrigger
7} from "@/registry/8starlabs-ui/ui/tooltip";
8import { HTMLAttributes, ReactNode } from "react";
9 
10export type HeatmapValue = {
11  date: string; // YYYY-MM-DD
12  value: number;
13};
14 
15export type HeatmapData = HeatmapValue[];
16 
17type InterpolationModes = "linear" | "sqrt" | "log";
18 
19type ColorOptions =
20  | {
21      colorMode: "discrete";
22      colorScale?: string[];
23      customColorMap?: (
24        value: number,
25        max: number,
26        colorCount: number
27      ) => number;
28    }
29  | {
30      colorMode: "interpolate";
31      maxColor?: string;
32      minColor?: string;
33      interpolation?: InterpolationModes;
34    };
35 
36type HeatmapProps = HTMLAttributes<HTMLDivElement> &
37  ColorOptions & {
38    data: HeatmapData;
39    startDate: Date;
40    endDate: Date;
41    cellSize?: number;
42    gap?: number;
43    daysOfTheWeek?: "all" | "MWF" | "none" | "single letter";
44    displayStyle?: "squares" | "bubbles";
45    dateDisplayFunction?: (date: Date) => ReactNode;
46    valueDisplayFunction?: (value: number) => ReactNode;
47  };
48 
49function getAllDays(start: string, end: string): string[] {
50  // Generate all days between start and end dates (inclusive)
51  const days: string[] = [];
52  let curr = new Date(start + "T00:00:00");
53 
54  const endDate = new Date(end + "T00:00:00");
55 
56  while (curr <= endDate) {
57    days.push(formatLocalDate(curr));
58    curr.setDate(curr.getDate() + 1);
59  }
60 
61  return days;
62}
63 
64function padToWeekStart(days: string[]): (string | null)[] {
65  // Pad the start of the days array with nulls to align to week start (Sunday)
66  // eg. if first day is Wednesday (3), add 3 nulls at start
67  const firstDay = new Date(days[0] + "T00:00:00").getDay();
68  const padding = new Array(firstDay).fill(null);
69  return [...padding, ...days];
70}
71 
72function chunkByWeek(days: (string | null)[]): (string | null)[][] {
73  // Chunk the days into weeks (arrays of 7 days)
74  const weeks: (string | null)[][] = [];
75  for (let i = 0; i < days.length; i += 7) {
76    weeks.push(days.slice(i, i + 7));
77  }
78  return weeks;
79}
80 
81function getMonthLabel(week: (string | null)[]) {
82  // Get month label for the week (based on last non-null day)
83  const lastDay = [...week].reverse().find(Boolean);
84  return !lastDay
85    ? null
86    : new Date(lastDay + "T00:00:00").toLocaleString("default", {
87        month: "short"
88      });
89}
90 
91function defaultColourMap(value: number, max: number, colorCount: number) {
92// … truncated