> ## Documentation Index
> Fetch the complete documentation index at: https://docs.jtbdos.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Summary PRAWN

> Compact metric summary component with optimistic & pessimistic ranges

# Summary PRAWN

**PRAWN** = *Predictive, Real‑time, Automatic, Workflow Navigator*.  While the D3js PRAWN chart focuses on trends, the **Summary PRAWN** component distils the current state of a metric into a single, glanceable card – perfect for dashboard headers or sidebars.

It emphasises:

* **Main value** – the central metric the user cares about.
* **High / Low estimates** – optimistic and pessimistic bounds that set expectations.
* **Narrative summary** – short natural‑language insight explaining the change.

By explicitly showing the range *and* the narrative, users understand both *what* is happening and *why* – a key tenet of the Jobs‑to‑Be‑Done approach.

## Example

```tsx
import { SummaryPrawn } from '@repo/design-system/components/summary-prawn';

export default function Example() {
  return (
    <SummaryPrawn
      mainValue="5.2"
      mainLabel="Equity Multiple"
      mainUnit="x"
      highValue="7.1"
      highLabel="High estimate"
      highUnit="x"
      lowValue="3.6"
      lowLabel="Low estimate"
      lowUnit="x"
      summaryTitle="Daily Summary"
      summaryText="Equity multiplier increased by 0.3x today"
    />
  );
}
```

## Props

| Name           | Type               | Default           | Description                      |
| -------------- | ------------------ | ----------------- | -------------------------------- |
| `mainValue`    | `string \| number` | `'?'`             | Primary metric value             |
| `mainLabel`    | `string`           | `'Value'`         | Label under primary value        |
| `mainUnit`     | `string`           | `'x'`             | Unit displayed next to value     |
| `highValue`    | `string \| number` | `'?'`             | Optimistic estimate              |
| `lowValue`     | `string \| number` | `'?'`             | Pessimistic estimate             |
| `summaryTitle` | `string`           | `'Daily Summary'` | Heading for narrative text       |
| `summaryText`  | `string`           | `'No data yet'`   | Narrative description            |
| `mainColor`    | `string`           | `'#16AA6B'`       | Colour of primary value & border |
| `tourSteps`    | `TourStep[]`       | `[]`              | Optional guided tour steps       |

## Tour integration

Just like the chart, the summary supports contextual onboarding:

```tsx
const steps = [
  { id: 'summary-prawn-main-value', title: 'Equity multiple', description: 'Current equity multiple' },
  { id: 'summary-prawn-low-value', title: 'Worst case', description: 'Pessimistic bound' },
];

<SummaryPrawn mainValue={5.2} lowValue={3.6} tourSteps={steps} />;
```