WeekdayHeatmap

1import type { Locale, Day as WeekDay } 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 
7export type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
8 
9export type WeekdayHour =
10  | 0
11  | 1
12  | 2
13  | 3
14  | 4
15  | 5
16  | 6
17  | 7
18  | 8
19  | 9
20  | 10
21  | 11
22  | 12
23  | 13
24  | 14
25  | 15
26  | 16
27  | 17
28  | 18
29  | 19
30  | 20
31  | 21
32  | 22
33  | 23;
34 
35export type WeekdayHourlyActivity = {
36  weekday: number; // 0–6 (Sun–Sat)
37  hour: number; // 0–23
38  value: number;
39};
40 
41type WeekdayHourlyActivityWithLevel = WeekdayHourlyActivity & {
42  level: number;
43};
44 
45export type WeekdayExtraRowSpec = {
46  label: ReactNode;
47  compute: (data: WeekdayHourlyActivity[]) => number[]; // length 24
48};
49 
50export type WeekdayExtraColumnSpec = {
51  label: ReactNode;
52  compute: (data: WeekdayHourlyActivity[]) => number[]; // length 7, indexed by weekday 0–6
53};
54 
55type ResolvedExtraRow = {
56  label: ReactNode;
57  values: { hour: number; value: number; level: number }[];
58};
59 
60type ResolvedExtraColumn = {
61  label: ReactNode;
62  values: { weekday: number; value: number; level: number }[];
63};
64 
65type WeekdayHeatmapContextType = {
66  data: WeekdayHourlyActivityWithLevel[];
67  extraRow: ResolvedExtraRow | null;
68  extraColumn: ResolvedExtraColumn | null;
69  blockMargin: number;
70  blockRadius: number;
71  blockSize: number;
72  blockAspectRatio: number;
73  blockWidth: number;
74  fontSize: number;
75  labels: WeekdayHeatmapLabels;
76  labelWidth: number;
77  labelHeight: number;
78  levels: number;
79  isNormalized: boolean;
80  totalCount: number;
81  width: number;
82  height: number;
83  weekStart: WeekDay;
84  colors?: ColorConfig;
85};
86 
87export type WeekdayHeatmapLabels = {
88  hours?: string[];
89  endHour?: string | null;
90  weekdays?: string[];
91  stat?: string; // Stat text template. Placeholder: {{value}}
92  cellLabel?: string; // aria-label template. Placeholders: {{weekday}}, {{hour}}, {{value}}
93  heatmapLabel?: string; // aria-label for the heatmap SVG
94  legendLabel?: string; // aria-label for the legend fieldset
95  legendLevelLabel?: string; // aria-label template for legend swatches. Placeholder: {{level}}
96};
97 
98export type ColorConfig = {
99  empty?: string;
100  scale?: string;
101};
102 
103// Non-normalized: 1 empty + (levels-1) colored steps. Normalized: levels colored steps, no empty.
104const colorStepCount = (levels: number, isNormalized: boolean) =>
105// … truncated