Block · sales

Win/Loss Reasons

Diverging win/loss bars by reason with the overall win rate and the objection costing the most deals.

State

Size

Mode

Sales · Win/Loss Reasons

38%

87 won · 140 lost

Won
Lost

Win rate grew +59.7% QoQ to 38.3% — driven by losing on Price.

Sales ops · updated every 6 hours

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

How it computes

Win rate = won / (won + lost), with a per-reason won-vs-lost decomposition.

winRate = Σwon / (Σwon + Σlost);  QoQ = (winRate − priorWinRate) / priorWinRate

Assumptions

Each closed deal carries a mutually-exclusive win/loss reason.
A prior win rate is supplied for the quarter-over-quarter delta.
Reasons rank by total volume (won + lost).

Honest about

Win rate is 0 when there are no closed deals.
The "top loss reason" is the largest loss bucket by volume — a descriptive attribution, not a causal one.
The diverging bars negate lost counts for visual symmetry, but the stored data stays truthful.

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.

Field	Type	Required
priorWinRate	number	yes
reasons	array	yes

Static props

import { SalesWinLoss } from "@/components/blocks/sales-win-loss/sales-win-loss";

<SalesWinLoss data={myData} />

Client fetch (SWR)

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

Server component (RSC)

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

<SalesWinLoss data={data} />

Map arbitrary rows

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

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

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

Format numbers (currency / locale)

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

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

Replace or hide the narrative

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

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

Restyle any region

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

Drop the card chrome (headless plot)

import { SalesWinLossPlot } from "@/components/blocks/sales-win-loss/sales-win-loss";

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