Component library · Lunnoa Reports

<OpportunityMatrix>

coreChartCompareContentPresentation

Effort × impact scatter with quadrant guides and optional category tabs; chart fades in on slide enter (client).

When to use: Use-case portfolio slide before a UseCaseGrid or roadmap. Top-left (low effort, high impact) is the quick-win zone. Keep to 6–12 dots for readability.

Often with: MaturityRadarComparisonTilesUseCaseGridStatBarChart

Preview

Twelve use cases scored on effort and impact

Workshop prioritisation, 1 = low and 5 = high on each axis.

FinanceOperationsPeopleSales

Prop	Type	Notes
items	{ name: string; effort: number; impact: number; category?: string }[]	Required. Each item is plotted as a dot. effort and impact are 1–5.
title	string	Optional. Slide heading.
description	string	Optional. Subtitle or scoring note.
tabs	{ id: string; label: string }[]	Optional. Optional filter tabs. Include `{ id: "all", label: "All" }` first. Other tab ids slug-match `tabFilterKey` on each item.
tabFilterKey	"category" \| "name"	Optional. Default: `category`. Which item field tab ids match after slugify.Values: category, name
tween	object	Optional. Optional GSAP vars for chart entrance.

Examples

<OpportunityMatrix
  title="Twelve use cases scored on effort and impact"
  description="Workshop prioritisation, 1 = low and 5 = high on each axis."
  items={[
    { name: "Supplier invoice intake", effort: 2, impact: 5, category: "Finance" },
    { name: "Order acknowledgements", effort: 2, impact: 4, category: "Operations" },
    { name: "HR ticket triage", effort: 1, impact: 3, category: "People" },
    { name: "Contract renewal alerts", effort: 3, impact: 4, category: "Sales" }
  ]}
/>

<ComparisonTiles>

coreComparePresentation

Two to four side-by-side comparison tiles (plan vs actual, Q vs Q, base vs stress); tiles stagger in on slide enter (client).

When to use: Use when each metric needs a paired primary and secondary value with an optional delta. Keep copy short; this is a slide, not a table.

Preview

Q3 vs plan

Revenue

Plan

£24m

Actual

£26.4m

+10%

EBITDA

Plan

£4.8m

Actual

£4.2m

-12%

Prop	Type	Notes
title	string	Optional. Optional slide heading above the tiles.
items	{ label: string; primaryValue: string; primaryLabel?: string; secondaryValue: string; secondaryLabel?: string; deltaValue?: string; deltaTone?: "up" \| "down" \| "flat" }[]	Required. Two to four comparison tiles. Each tile shows a primary and secondary value plus an optional delta chip.
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<ComparisonTiles
  title="Q3 vs plan"
  items={[
    { label: "Revenue", primaryLabel: "Plan", primaryValue: "£24m", secondaryLabel: "Actual", secondaryValue: "£26.4m", deltaValue: "+10%", deltaTone: "up" },
    { label: "EBITDA", primaryLabel: "Plan", primaryValue: "£4.8m", secondaryLabel: "Actual", secondaryValue: "£4.2m", deltaValue: "-12%", deltaTone: "down" }
  ]}
/>