Sextant
← Catalog
Block · engineering

PR Cycle Time

PR cycle time split into coding, review-wait, review and merge against benchmark, naming the phase that dominates the wait.

State
Size
Mode

Delivery Cycle Time

27h

median PR cycle · 19h benchmark

Review wait dominates — 14h of the 27h cycle, 52% of the wait.

Delivery Cycle Time — median hours per phase
PhaseHoursBenchmark
Coding6h5h
Review wait14h8h
Review4h4h
Merge wait3h2h
  • Coding 6h
  • Review wait 14h
  • Review 4h
  • Merge wait 3h

Engineering analytics · VCS + review metrics · updated hourly

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

How it computes

Median hours per PR phase as a stacked bar, with the dominant phase named as the bottleneck.

total = Σ phase.hours;  bottleneck = argmax(phase.hours);  dominance = worst.hours / total

Assumptions

  • Each phase carries a median-hours figure.
  • Phases are sequential, not parallel.
  • The benchmark is a reference line, not a gate.

Honest about

  • The bottleneck is the phase with the most absolute hours, not the biggest gap to its benchmark.
  • The benchmark line is purely visual — it doesn't affect the bar fill or the narrative.
  • Empty input shows an explicit empty state.

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.

FieldTypeRequired
phasestringyes
hoursnumberyes
benchmarknumberyes

Static props

import { EngPrCycleTime } from "@/components/blocks/eng-pr-cycle-time/eng-pr-cycle-time";

<EngPrCycleTime data={myData} />

Client fetch (SWR)

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

Server component (RSC)

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

<EngPrCycleTime data={data} />

Map arbitrary rows

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

const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <EngPrCycleTime 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 (phases)

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

Format numbers (currency / locale)

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

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

Replace or hide the narrative

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

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

Restyle any region

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

Drop the card chrome (headless plot)

import { EngPrCycleTimePlot } from "@/components/blocks/eng-pr-cycle-time/eng-pr-cycle-time";

// Just the chart body — bring your own card/layout:
<EngPrCycleTimePlot data={data} config={config} />