​
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

NameTypeDefaultDescription
mainValuestring | number'?'Primary metric value
mainLabelstring'Value'Label under primary value
mainUnitstring'x'Unit displayed next to value
highValuestring | number'?'Optimistic estimate
lowValuestring | number'?'Pessimistic estimate
summaryTitlestring'Daily Summary'Heading for narrative text
summaryTextstring'No data yet'Narrative description
mainColorstring'#16AA6B'Colour of primary value & border
tourStepsTourStep[][]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} />;