Sextant
← Catalog
Block · support

Response Time Distribution

A first-response-time histogram with p50/p90 markers and the share of tickets breaching SLA — the tail that averages hide.

State
Size
Mode

First-Response Times

6h 12m

p90 first response · p50 46m

  • Tickets
  • Past SLA

Half of tickets get a first reply within 46m, but 20% breach the 3h SLA.

Support platform · updated hourly

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

How it computes

First-response-time histogram with interpolated percentiles and an SLA breach rate.

p(q) = sorted[lo] + (sorted[hi] − sorted[lo])·(pos − lo), pos = (n−1)q;  breach = #{s > slaMinutes} / n

Assumptions

  • Equal-width linear bins (Freedman–Diaconis is not applied).
  • Percentiles are computed from raw samples, not from the binned counts.
  • Any first response slower than the SLA minutes counts as a breach.

Honest about

  • Percentiles use proper linear interpolation, so p90 doesn't snap to a bin edge.
  • The hero number is p90, not the median — the tail is what burns SLAs.
  • Empty input degrades to zeros (p50 = p90 = breach = 0) rather than NaN; max ≤ 0 falls back to bin width 1.

Use it with your data

Data contract

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

FieldTypeRequired
slaMinutesnumberyes
samplesarrayyes

Static props

import { SupportResponseDistribution } from "@/components/blocks/support-response-distribution/support-response-distribution";

<SupportResponseDistribution data={myData} />

Client fetch (SWR)

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

Server component (RSC)

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

<SupportResponseDistribution data={data} />

Map arbitrary rows

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

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

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

Format numbers (currency / locale)

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

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

Replace or hide the narrative

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

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

Restyle any region

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

Drop the card chrome (headless plot)

import { SupportResponseDistributionPlot } from "@/components/blocks/support-response-distribution/support-response-distribution";

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