Sextant
← Catalog
Block · support

SLA Attainment

First-response SLA attainment by priority against target, with the priority most at risk of breaching.

State
Size
Mode

First-Response SLA Attainment

98%

within SLA · 95% target

  • Within SLA
  • Breached

P1 first response has a 84% chance of missing the 95% SLA by month end.

First-Response SLA Attainment — first-response SLA attainment by priority
PriorityWithin %Breached %
P192%8%
P297%3%
P398%2%
P499%1%

Support analytics · updated every 4 hours

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

How it computes

Per-priority within-SLA share (100%-stacked), plus a Gaussian P(miss target by month-end) from the recent trend.

withinPct = within / (within + breached);  overall = Σwithin / Σ(within+breached)

Assumptions

  • Every ticket is classified as either within-SLA or breached.
  • The risk model treats the recent within-% series as Normal(mean, std).

Honest about

  • Each priority is normalized to 100% independently — read the volumes too, since a tiny P1 bucket can look identical to a huge P3 one.
  • The overall figure is volume-weighted across priorities, unlike the per-bar percentages.
  • The SLA target is a reference line; the month-end-miss probability is an explicit, separate estimate.

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
targetPctnumberyes
prioritiesarrayyes

Static props

import { SupportSlaAttainment } from "@/components/blocks/support-sla-attainment/support-sla-attainment";

<SupportSlaAttainment data={myData} />

Client fetch (SWR)

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

Server component (RSC)

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

<SupportSlaAttainment data={data} />

Map arbitrary rows

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

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

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

Format numbers (currency / locale)

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

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

Replace or hide the narrative

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

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

Restyle any region

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

Drop the card chrome (headless plot)

import { SupportSlaAttainmentPlot } from "@/components/blocks/support-sla-attainment/support-sla-attainment";

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