Block · engineering

Deploy Calendar

A GitHub-style calendar heatmap of deploy frequency — surfacing cadence, the busiest day, and week-over-week momentum.

State

Size

Mode

Production deployments

279

deploys · 12 weeks · busiest Thu

Deploys grew +22.7% WoW to 27 — driven by Thu pushes.

lessmore

GitHub Actions · last 12 weeks

Demo data is illustrative. Replace with your own typed data prop.

How it computes

Daily deploy-count heatmap with fixed intensity buckets (0, 1, 2–3, 4–5, 6+).

bucket: 0 | 1 | ≤3 | ≤5 | >5 → opacity [0, 22, 44, 68, 100]%

Assumptions

Deploys are bare counts — no severity, duration, or success metadata.
Calendar is week-columns, Mon→Sun.
The busiest weekday is by total volume across the window.

Honest about

Bucket thresholds (1, 3, 5) are hardcoded, not data-driven — another team's cadence may want different cutoffs.
Week-over-week momentum needs ≥14 days of history before it's surfaced.
Missing days aren't interpolated; only days present in the data are drawn.

Use it with your data

Data contract

Passed via the data prop — an array of objects: validated at runtime, so a bad shape degrades to the error state rather than crashing.

Field	Type	Required
date	string	yes
count	number	yes

Static props

import { EngDeployCalendar } from "@/components/blocks/eng-deploy-calendar/eng-deploy-calendar";

<EngDeployCalendar data={myData} />

Client fetch (SWR)

const { data, isLoading, error } = useSWR("/api/metric", fetcher);
// route isLoading/error through <ChartStates>, then:
<EngDeployCalendar data={data} />

Server component (RSC)

const data = await fetch(url, {
  next: { revalidate: 3600 },
}).then((r) => r.json());

<EngDeployCalendar data={data} />

Map arbitrary rows

import { mapRows } from "@/lib/sextant/column-map";

const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <EngDeployCalendar data={out.data} />;

Make it yours

Every customization below is an optional prop — omit them all and you get the defaults shown above. Recolor, reformat, restyle, or drop the card chrome without forking the component.

Recolor or rename a series (deploys)

<EngDeployCalendar
  series={{ deploys: { color: "var(--chart-3)", label: "…" } }}
/>

Format numbers (currency / locale)

const eur = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
  notation: "compact",
});

<EngDeployCalendar valueFormatter={(n) => eur.format(n)} />

Replace or hide the narrative

<EngDeployCalendar narrative="Your own one-liner." />

// …or hide it entirely:
<EngDeployCalendar narrative={false} />

Restyle any region

<EngDeployCalendar
  className="max-w-xl"
  classNames={{ body: "bg-muted/20" }}
/>