DateHeatmap

1import type { Locale } from "date-fns";
2import { format } from "date-fns";
3import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
4import { createContext, Fragment, use, useMemo } from "react";
5import { cn } from "@/lib/utils";
6 
7function formatDateWithWeekday(
8  date: Date | string,
9  dateFormat: string = "EEE, MMM dd, yyyy",
10  locale?: Locale,
11): string {
12  const d = typeof date === "string" ? new Date(date) : date;
13  return format(d, dateFormat, locale ? { locale } : undefined);
14}
15 
16export type DateHour =
17  | 0
18  | 1
19  | 2
20  | 3
21  | 4
22  | 5
23  | 6
24  | 7
25  | 8
26  | 9
27  | 10
28  | 11
29  | 12
30  | 13
31  | 14
32  | 15
33  | 16
34  | 17
35  | 18
36  | 19
37  | 20
38  | 21
39  | 22
40  | 23;
41 
42export type DateHourlyActivity = {
43  date: string; // YYYY-MM-DD
44  hour: number; // 0–23
45  value: number;
46};
47 
48type DateHourlyActivityWithLevel = DateHourlyActivity & {
49  level: number;
50};
51 
52export type DateExtraRowSpec = {
53  label: ReactNode;
54  compute: (data: DateHourlyActivity[]) => number[]; // length 24
55};
56 
57export type DateExtraColumnSpec = {
58  label: ReactNode;
59  compute: (data: DateHourlyActivity[], dates: string[]) => number[]; // length = dates.length
60};
61 
62type ResolvedDateExtraRow = {
63  label: ReactNode;
64  values: { hour: number; value: number; level: number }[];
65};
66 
67type ResolvedDateExtraColumn = {
68  label: ReactNode;
69  values: { date: string; value: number; level: number }[];
70};
71 
72type DateHeatmapContextType = {
73  data: DateHourlyActivityWithLevel[];
74  dates: string[]; // Sorted list of unique dates
75  extraRow: ResolvedDateExtraRow | null;
76  extraColumn: ResolvedDateExtraColumn | null;
77  blockMargin: number;
78  blockRadius: number;
79  blockSize: number;
80  blockAspectRatio: number;
81  blockWidth: number;
82  fontSize: number;
83  labels: DateHeatmapLabels;
84  labelWidth: number;
85  labelHeight: number;
86  levels: number;
87  isNormalized: boolean;
88  totalCount: number;
89  width: number;
90  height: number;
91  dateFormat: string;
92  locale?: Locale;
93  colors?: ColorConfig;
94};
95 
96export type DateHeatmapLabels = {
97  hours?: string[];
98  endHour?: string | null; // null = hide the end hour label
99  stat?: string; // Stat text template. Placeholder: {{value}}
100  cellLabel?: string; // aria-label template. Placeholders: {{date}}, {{hour}}, {{value}}
101  heatmapLabel?: string; // aria-label for the heatmap SVG
102  legendLabel?: string; // aria-label for the legend fieldset
103  legendLevelLabel?: string; // aria-label template for legend swatches. Placeholder: {{level}}
104};
105 
106export type ColorConfig = {
107// … truncated