# Deploy Heatmap

> bklit's calendar heatmap counting production deploys per day: quiet weekends, a visible change freeze, the busiest weekday up top, and a Less-to-More legend that dims in step with the cell you hover.

- Page: https://devl.dev/components/bklit-heatmap-chart
- Kind: component · Charts
- Install: `npx shadcn@latest add https://ui.bklit.com/r/heatmap-chart.json`
- By bklit (MIT): https://ui.bklit.com

## Usage

```tsx
import type { HeatmapColumn } from "@/components/charts/heatmap";
import { DeployHeatmapCard } from "@/components/bklit-heatmap-chart";

const FIRST_SUNDAY = new Date(2026, 4, 3);
const WEEKS = 25;

function noise(i: number) {
  const x = Math.sin(i * 39.425) * 43758.5453;
  return x - Math.floor(x);
}

const weeks: HeatmapColumn[] = Array.from({ length: WEEKS }, (_, week) => ({
  bin: week,
  bins: Array.from({ length: 7 }, (_, day) => {
    const date = new Date(FIRST_SUNDAY);
    date.setDate(FIRST_SUNDAY.getDate() + week * 7 + day);
    const n = week * 7 + day;
    const weekend = day === 0 || day === 6;
    const freeze = week >= 11 && week <= 12;
    const r = noise(n);
    const count = weekend || freeze ? (r > 0.9 ? 1 : 0) : r < 0.12 ? 0 : Math.round(r * 5);
    return { bin: day, count, date };
  }),
}));

export default function BklitHeatmapChartDemo() {
  return <DeployHeatmapCard weeks={weeks} />;
}
```