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

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:

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} />;