Heatmap

"use client";

import { Heatmap } from "@/components/beautiful-charts/themes/instrument/heatmap";

// One row per day, as "YYYY-MM-DD". Days with no row are drawn as empty outlines, never as zero.
const days = Array.from({ length: 120 }, (_, i) => ({
  day: new Date(Date.UTC(2026, 5, 1) + i * 86_400_000).toISOString().slice(0, 10),
  deploys: (i * 7) % 5,
}));

export function DeployCalendar() {
  return (
    <Heatmap
      data={days}
      layout="calendar"
      dateKey="day"
      valueKey="deploys"
      config={{ deploys: { label: "Deploys", color: "var(--chart-2)" } }}
      title="Deploys per day"
      onSelectedChange={(selection) => console.log(selection?.datum.day)}
    />
  );
}

export type Selection<TDatum> = {
  /** Index into the data you passed in, even when a brush shows a subset. */
  dataIndex: number;
  datum: TDatum;
  seriesKey: string | null;
  source: "pointer" | "keyboard" | "table";
  /** For a grouped segment (a donut's "Other"): the indexes of every row it stands for. `dataIndex` is the largest. */
  members?: number[] | undefined;
};

export type TooltipContext<TDatum> = {
  datum: TDatum;
  /** Index into the data you passed in. */
  dataIndex: number;
  /** Visible series at this index. `value` is your raw value; `share` is its part of the row in 100% mode. */
  series: { key: string; label: ReactNode; value: number | null; share?: number | null | undefined; color: string; selected: boolean }[];
};