Heatmap Chart

1"use client";
2 
3import { ParentSize } from "@visx/responsive";
4import { scaleLinear, scaleTime } from "@visx/scale";
5import type { Transition } from "motion/react";
6import { useReducedMotion } from "motion/react";
7import {
8  type ReactNode,
9  useCallback,
10  useEffect,
11  useLayoutEffect,
12  useMemo,
13  useRef,
14  useState,
15} from "react";
16import { cn } from "@/lib/utils";
17import type { Margin } from "../chart-context";
18import { ChartLoadingLabel } from "../chart-loading-label";
19import {
20  type ChartPhase,
21  type ChartStatus,
22  DEFAULT_CHART_STATUS,
23  resolveRestingChartPhase,
24} from "../chart-phase";
25import {
26  HEATMAP_DEFAULT_ENTER_DURATION_MS,
27  HEATMAP_DEFAULT_ENTER_TRANSITION,
28  HEATMAP_DEFAULT_LOADING_CELL_MAX_OPACITY,
29  HEATMAP_DEFAULT_LOADING_CELL_RANDOMNESS,
30  HEATMAP_LOADING_CHART_OPACITY,
31  HEATMAP_LOADING_CONCEAL_MS,
32} from "./heatmap-animation";
33import type { HeatmapLevelColors, HeatmapLevelStyles } from "./heatmap-colors";
34import {
35  buildHeatmapColorScaleFromStyles,
36  buildHeatmapFillScale,
37  resolveHeatmapLevelStyles,
38} from "./heatmap-colors";
39import {
40  type HeatmapColumn,
41  type HeatmapContextValue,
42  HeatmapInteractionRoot,
43  HeatmapProvider,
44  type HeatmapRevealMode,
45  useHeatmap,
46  useHeatmapInteraction,
47} from "./heatmap-context";
48import { HeatmapPatternDefs } from "./heatmap-pattern-defs";
49import { resolveHeatmapSeparatorConfigWithData } from "./heatmap-resolve-separator";
50import {
51  filterHeatmapColumns,
52  getHeatmapColumnXOffset,
53  getHeatmapPlotInnerWidth,
54  getHeatmapSeparatorCount,
55  getHeatmapTimeExtent,
56  type HeatmapSeparatorLayout,
57  type HeatmapSeparatorParsedConfig,
58  type HeatmapWeekStartDay,
59  rotateHeatmapColumnBins,
60} from "./heatmap-utils";
61 
62export type HeatmapLayout = "fluid" | "fill";
63 
64export interface HeatmapChartProps {
65  /** Column data — one entry per week (or category) with row bins inside. */
66  data: HeatmapColumn[];
67  /** Visible time range — filters week columns that overlap the domain. */
68  xDomain?: [Date, Date];
69  /**
70   * Week columns used for cell sizing when `xDomain` is set. Keeps bin height
71   * stable while scrubbing (filtered columns can vary by ±1 at boundaries).
72   */
73  sizingColumnCount?: number;
74  /**
75   * `fluid` — width drives square cells; chart height hugs the grid (GitHub-style).
76   * `fill` — expands cells to fill the parent.
77   */
78  layout?: HeatmapLayout;
79  /** Chart margins */
80  margin?: Partial<Margin>;
81// … truncated