Component library

Showing 2 components in the shared kit with role compare.

Dashboard

<OpportunityMatrix>

sharedChartCompareContentDashboard

Effort × impact scatter plot (effort increases left to right, impact increases bottom to top). Top-left (low effort, high impact) is the usual quick-win zone. Optional category (or name) tabs match the DataTable filter pattern.

When to use: Use to visualise a portfolio of candidate use cases / opportunities scored on two dimensions. Typically immediately before the recommended use case grid. Also fits SEO analyses: plot keyword clusters or content opportunities as effort × impact, with categories like Technical, Content, and Authority as tabs.

Preview

Twelve use cases scored on effort and impact

FinanceOperationsPeople

Portfolio by function

FinanceOperations

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. Chart title.
description	string	Optional. Subtitle.
tabs	{ id: string; label: string }[]	Optional. Optional filter tabs (same pattern as DataTable). Include `{ id: "all", label: "All" }` first. Other tab ids slug-match `tabFilterKey` on each item (default: category names, e.g. `finance` for Finance).
tabFilterKey	"category" \| "name"	Optional. Default: `category`. Which item field tab ids match after slugify.Values: category, name

Examples

<OpportunityMatrix
    title="Twelve use cases scored on effort and impact"
    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" }
    ]}
/>

<OpportunityMatrix
    title="Portfolio by function"
    tabs={[
        { id: "all", label: "All" },
        { id: "finance", label: "Finance" },
        { id: "operations", label: "Operations" }
    ]}
    items={[
        { name: "Invoice intake", effort: 2, impact: 5, category: "Finance" },
        { name: "Order acknowledgements", effort: 2, impact: 4, category: "Operations" }
    ]}
/>

<ComparisonBar>

sharedChartCompareDashboard

Horizontal grouped bar chart: one row per process, with a grey Before bar and a coloured After bar. Before/After legend is rendered automatically below the chart.

When to use: Use to project the impact of a wave of automation across multiple processes. Most useful immediately after a use case grid. Put the process or use-case name in each row's `label` (Y-axis). Do not use Before/After wording such as "Manual today" or "After automation" in `label`; those states are already shown by bar colour and the chart legend. In SEO reports, use it to benchmark against a competitor per metric or to project measured baseline vs target (e.g. clicks per topic cluster).

Often with: UseCaseGridBeforeAfter

Preview

Manual hours per month — before vs. projected after Wave 1

BeforeAfter

Prop	Type	Notes
rows	{ label: string; before: number; after: number }[]	Required. One object per process being compared. Each row renders once on the Y-axis with two grouped bars (before, then after).
rows[].label	string	Required. Process or use-case name shown on the Y axis (e.g. "Supplier invoice intake"). Not the Before/After state.Example: `Order acknowledgements`
rows[].before	number	Required. Current / baseline numeric value. Rendered as the grey bar.Example: `280`
rows[].after	number	Required. Projected / proposed numeric value. Rendered as the coloured After bar.Example: `60`
unit	string	Optional. Default: `""`. Suffix for tick labels and tooltips.Example: `hrs`
isPositiveDirection	"higher" \| "lower"	Optional. Default: `lower`. Whether smaller numbers are better. Drives the After bar colour.Values: higher, lowerExample: `lower`
title	string	Optional. Chart title.
description	string	Optional. Subtitle / methodology note.

Examples

<ComparisonBar
    title="Manual hours per month — before vs. projected after Wave 1"
    unit=" hrs"
    isPositiveDirection="lower"
    rows={[
        { label: "Supplier invoice intake", before: 280, after: 60 },
        { label: "Order acknowledgements", before: 110, after: 20 }
    ]}
/>