HeatCalendar

1"use client";;
2// beui.dev/charts/heat-calendar
3 
4import { cn } from "@/lib/utils";
5import { HeatCalendarContext, useHeatCalendarModel } from "./heat-calendar/context";
6import { HeatCalendarGrid } from "./heat-calendar/grid";
7import { HeatCalendarLegend } from "./heat-calendar/legend";
8import { HeatCalendarTooltip } from "./heat-calendar/tooltip";
9 
10/** Compose Grid, Tooltip and Legend, or omit children for the complete chart. */
11export function HeatCalendar({ children, className, ...props }) {
12  const model = useHeatCalendarModel(props);
13  return (
14    <HeatCalendarContext.Provider value={model}>
15      <div className={cn("w-fit max-w-full", className)}>
16        {children === undefined ? (
17          <>
18            <HeatCalendarGrid>
19              <HeatCalendarTooltip />
20            </HeatCalendarGrid>
21            <HeatCalendarLegend />
22          </>
23        ) : (
24          children
25        )}
26      </div>
27    </HeatCalendarContext.Provider>
28  );
29}
30 
31export { useHeatCalendar } from "./heat-calendar/context";
32export { HeatCalendarGrid } from "./heat-calendar/grid";
33export { HeatCalendarLegend } from "./heat-calendar/legend";
34export { HeatCalendarTooltip } from "./heat-calendar/tooltip";
35 
36/* ═══════════════════════════════════════════════════════════════════════════
37   heat-calendar/utils.js — geometría y formatos.
38 
39   IMPORTANTE: toda la aritmética de fechas es en UTC (setUTCHours / setUTCDate
40   / getUTCDay). Si vas a leer datos que vienen en clave local "YYYY-MM-DD",
41   construye el ancla desde la CADENA, no desde `new Date()`:
42     new Date(todayKey + "T00:00:00Z")
43   Así el lunes que calcula el componente y tu clave local son el mismo día en
44   cualquier huso, y celda ↔ fecha hace round-trip exacto.
45   ═══════════════════════════════════════════════════════════════════════════ */
46 
47/** Five buckets: 0 is the neutral empty cell, 1 to 4 mix the one hue in harder. */
48export const STEPS = [0, 24, 46, 70, 94];
49 
50export const EMPTY = "color-mix(in srgb, var(--foreground) 6%, transparent)";
51 
52/** Cell size and gap; every position in the grid and the tooltip derive from these. */
53export const CELL = 16;
54 
55export const GAP = 4;
56 
57export const PITCH = CELL + GAP;
58 
59export const MONTH_ROW = 12;
60 
61export const DAYS = Array.from({ length: 7 }, (_, d) => ({ id: `d${d}`, d }));
62 
63/** How far a cell rises when it is the hovered one, its neighbour, or two away. */
64export const LIFT = [1.3, 1.08, 1.03];
65 
66export const startOfDay = (d) => {
67  const x = new Date(d);
68  x.setUTCHours(0, 0, 0, 0);
69  return x;
70};
71 
72export const addDays = (d, n) => {
73  const x = new Date(d);
74  x.setUTCDate(x.getUTCDate() + n);
75  return x;
76};
77 
78/** Monday on or before `d`, so every column reads Mon to Sun, top to bottom. */
79export const mondayOf = (d) => addDays(startOfDay(d), -((d.getUTCDay() + 6) % 7));
80 
81export const fmtDay = new Intl.DateTimeFormat("es-MX", {
82  timeZone: "UTC",
83  weekday: "short",
84  month: "short",
85  day: "numeric",
86});
87 
88export const fmtMonth = new Intl.DateTimeFormat("es-MX", { timeZone: "UTC", month: "short" });
89 
90export const fmtRange = new Intl.DateTimeFormat("es-MX", { timeZone: "UTC", month: "short", day: "numeric" });
91