StatusHeatmap

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 
7// Status values. 0 is reserved for no-data. Defaults: 1=critical, 2=degraded, 3=healthy.
8// Extend by passing `colors` / `labels.statuses` keyed by the numeric value.
9export type StatusValue = number;
10 
11export type StatusActivity = {
12  date: string; // YYYY-MM-DD
13  value: StatusValue;
14};
15 
16type StatusHeatmapContextType = {
17  data: StatusActivity[];
18  dates: string[];
19  blockMargin: number;
20  blockRadius: number;
21  blockSize: number;
22  blockAspectRatio: number;
23  blockWidth: number;
24  fontSize: number;
25  labels: StatusHeatmapLabels;
26  statusValues: StatusValue[];
27  healthyValue: StatusValue;
28  width: number;
29  height: number;
30  dateFormat: string;
31  locale?: Locale;
32  colors?: StatusColorConfig;
33};
34 
35export type StatusHeatmapLabels = {
36  statuses?: Record<number, string> & {
37    noData?: string;
38    critical?: string;
39    degraded?: string;
40    healthy?: string;
41  };
42  stat?: string; // Stat text template. Placeholder: {{value}}
43  cellLabel?: string; // aria-label template. Placeholders: {{date}}, {{status}}
44  heatmapLabel?: string; // aria-label for the heatmap SVG
45  legendLabel?: string; // aria-label for the legend fieldset
46};
47 
48export type StatusColorConfig = Record<number, string> & {
49  noData?: string;
50  critical?: string;
51  degraded?: string;
52  healthy?: string;
53};
54 
55const DEFAULT_COLORS: Record<number, string> = {
56  0: "var(--color-secondary)",
57  1: "oklch(57.7% 0.245 27.325)", // red-600 (critical)
58  2: "oklch(82.8% 0.189 84.429)", // amber-400 (degraded)
59  3: "oklch(72.3% 0.219 149.579)", // green-500 (healthy)
60};
61 
62const SEMANTIC_KEYS: Record<
63  number,
64  "noData" | "critical" | "degraded" | "healthy"
65> = {
66  0: "noData",
67  1: "critical",
68  2: "degraded",
69  3: "healthy",
70};
71 
72const resolveColor = (
73  value: StatusValue,
74  colors?: StatusColorConfig,
75): string => {
76  const semanticKey = SEMANTIC_KEYS[value];
77  if (colors) {
78    const numeric = colors[value];
79    if (typeof numeric === "string") return numeric;
80    if (semanticKey) {
81      const semantic = colors[semanticKey];
82      if (typeof semantic === "string") return semantic;
83    }
84  }
85  return DEFAULT_COLORS[value] ?? DEFAULT_COLORS[0];
86};
87 
88const resolveStatusLabel = (
89  value: StatusValue,
90  labels?: StatusHeatmapLabels["statuses"],
91): string => {
92// … truncated