Block · people

Comp Bands

Salary bands per level with each person plotted on the range, flagging who sits out of band and where spread is widest.

State

Size

Mode

People · Salary Bands

81%

3 of 16 out of band

In band
Out of band

81% of 16 sit within band; 2 below min, 1 above max — L5 has the widest spread.

$87k$425k

HRIS export · Q2 2026 · updated 2026-06-04

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

How it computes

Per-level pay band [min, mid, max] with individual actuals overlaid; in-band vs out-of-band counts.

in-band = #{ min ≤ actual ≤ max };  out-of-band = below + above

Assumptions

Bands are non-overlapping (not enforced).
Actuals are point base-salaries, not distributions.

Honest about

The axis range comes from the band min/max with a fixed 5% visual pad — it is presentation, not a statistic.
"Widest spread" is simply the largest (max − min) level; there is no test of whether a band is correctly sized.
Out-of-band is a literal count against the band edges, so a single outlier is visible rather than averaged away.

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
level	string	yes
min	number	yes
mid	number	yes
max	number	yes
actuals	array	yes

Static props

import { PeopleCompBands } from "@/components/blocks/people-comp-bands/people-comp-bands";

<PeopleCompBands data={myData} />

Client fetch (SWR)

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

Server component (RSC)

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

<PeopleCompBands data={data} />

Map arbitrary rows

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

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

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

Format numbers (currency / locale)

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

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

Replace or hide the narrative

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

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

Restyle any region

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

Level	Min	Mid	Max
L3	$102k	$118k	$135k
L4	$135k	$158k	$182k
L5	$175k	$215k	$265k
L6	$240k	$280k	$325k
L7	$320k	$365k	$410k