Component library

Dashboard

• <MaturityRadar>

  sharedChartContentDashboard

  Radar chart of dimensions (axes) vs. maturity score (radial). Optional target overlay.

  When to use: Use to show a multi-dimensional capability assessment, typically in 'current state' or 'executive summary' sections. Works for SEO maturity too (e.g. Technical, Content, Authority, Measurement, Governance as axes), where the pillar bars of <PillarScoreCard> would be too coarse.

  Preview

  Acme automation maturity — current vs. 6-month target

  Scores from 11 stakeholder interviews using the Lunnoa maturity framework (1 = ad hoc, 5 = optimised).

  Prop	Type	Notes
  dimensions	string[]	Required. Axis labels, in order.Example: ["Data", "Tooling", "Process", "Governance", "Skills"]
  current	number[]	Required. Current scores, same order as dimensions.Example: [3, 2, 3, 2, 2]
  target	number[]	Optional. Optional target scores, drawn as a dashed overlay.
  max	number	Optional. Default: 5. Maximum value on the radial axis.
  title	string	Optional. Chart title.
  description	string	Optional. Subtitle / methodology note.

  Examples

  <MaturityRadar
      dimensions={["Data quality", "Tooling", "Process clarity", "Governance", "Automation skills"]}
      current={[3, 2, 3, 2, 2]}
      target={[4, 4, 4, 4, 3]}
      title="Acme automation maturity — current vs. 6-month target"
      description="Scores from 11 stakeholder interviews using the Lunnoa maturity framework (1 = ad hoc, 5 = optimised)."
  />

• <MaturityHeatmap>

  sharedChartContentDataDashboard

  Stage-based maturity table (rows = dimensions, columns = levels). One highlighted cell per row.

  When to use: Use as an alternative to MaturityRadar when the maturity framework is stage-based (e.g. CMMI-style: ad hoc / repeatable / defined / managed / optimised).

  Preview

  Current vs 6-month target

  Dimension	Ad hoc	Repeatable	Defined	Managed	Optimised
  Data quality			●	○
  Tooling		●		○

  Prop	Type	Notes
  rows	string[]	Required. Row labels (dimensions).Example: ["Data quality", "Tooling", "Process clarity"]
  columns	string[]	Required. Column labels (maturity levels).Example: ["Ad hoc", "Repeatable", "Defined", "Managed", "Optimised"]
  current	boolean[][]	Required. 2D array [row][col]. Each row should have at most one true cell.
  target	boolean[][]	Optional. Optional target cells, drawn as a ring.
  title	string	Optional. Chart title.

  Examples

  <MaturityHeatmap
      rows={["Data quality", "Tooling"]}
      columns={["Ad hoc", "Repeatable", "Defined", "Managed", "Optimised"]}
      current={[[false, false, true, false, false], [false, true, false, false, false]]}
      target={[[false, false, false, true, false], [false, false, false, true, false]]}
      title="Current vs 6-month target"
  />

• <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

  Portfolio by function

  AllFinanceOperations

  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

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

• <UsageDonutCard>

  sharedChartDashboard

  Donut chart with centre headline figures, a breakdown list (avatar initials, title, subtitle, coloured dot and usage line), and an optional footer link.

  When to use: Use when a report needs a share-style visual (usage by vendor, cost by workstream, incidents by severity). Pass numeric `segments[].value` for slice proportions; `rows[].usageDisplay` is free-form text for the right column. Prefer 3–5 segments for legibility. In SEO reports, use it for traffic share by channel (organic, direct, paid, referral) or organic traffic share by site section.

  Preview

  API token usages

  13.5M

  2 450 keys

  • GP

    GPT

    2 API keys configured

    7M

    Tokens used

  • Ge

    Gemini

    1 API key configured

    2.5M

    Tokens used

  • xA

    xAI

    2 API keys configured

    4.5M

    Tokens used

  View all usage details

  Prop	Type	Notes
  title	string	Required. Card title.Example: API token usages
  centerValue	string	Required. Large text in the donut centre.Example: 13.5M
  centerSubtext	string	Optional. Muted line under the centre value.Example: 2 450 API keys
  segments	{ id: string; value: number; color: "brand"|"purple"|"sky"|"fuchsia"|"emerald" }[]	Required. Slice weights and semantic colours (maps to theme tokens).
  rows	{ segmentId: string; title: string; subtitle: string; usageDisplay: string; avatarText?: string; usageCaption?: string }[]	Required. One row per slice; `segmentId` must match a `segments[].id` for the dot colour.
  footerLabel	string	Optional. Link text below the list.
  footerHref	string	Optional. URL for the footer link (internal or external).
  showMenu	boolean	Optional. Default: true. Show the illustrative kebab button.

  Examples

  <UsageDonutCard
      title="API token usages"
      centerValue="13.5M"
      centerSubtext="2 450 keys"
      segments={[
          { id: "gpt", value: 7, color: "brand" },
          { id: "gemini", value: 2.5, color: "purple" },
          { id: "xai", value: 4.5, color: "sky" }
      ]}
      rows={[
          { segmentId: "gpt", avatarText: "GP", title: "GPT", subtitle: "2 API keys configured", usageDisplay: "7M" },
          { segmentId: "gemini", avatarText: "Ge", title: "Gemini", subtitle: "1 API key configured", usageDisplay: "2.5M" },
          { segmentId: "xai", avatarText: "xA", title: "xAI", subtitle: "2 API keys configured", usageDisplay: "4.5M" }
      ]}
      footerLabel="View all usage details"
      footerHref="#"
  />

• <TrendChart>

  sharedChartDashboard

  Multi-series line or combo bar-and-line chart over time for document reports, with optional dual Y-axes, grouped bars, and a source caption.

  When to use: Operational and analytical reports: trends over weeks or quarters, adoption curves, revenue vs margin. Set `type="bar"` on a series for columns; `yAxis="right"` for a secondary scale (e.g. £m bars + % line). Prefer `<TrafficTrendChart>` for SEO traffic area charts. For presentation slides use `<TrendLineChart>` (`kind: "presentation"`).

  Often with: TrafficTrendChartComparisonBarFinanceOverviewCardTrendLineChart

  Preview

  Manual hours per week

  Revenue and EBITDA margin

  Prop	Type	Notes
  title	string	Optional. Chart heading.
  description	string	Optional. Muted subheading under the title.
  labels	string[]	Required. X-axis labels in order (months, weeks, quarters).
  series	{ name: string; values: number[]; color?: "brand" | "sky" | "emerald" | "purple" | "slate" | "success" | "warning" | "error"; type?: "line" | "bar"; yAxis?: "left" | "right"; unit?: string }[]	Required. One or more series aligned to `labels`. Set `type="bar"` for columns; `yAxis="right"` for the secondary axis.
  unit	string	Optional. Default: "". Default unit suffix for the left axis and series without their own `unit`.
  yAxes	{ left?: { unit?: string; maxValue?: number; minValue?: number }; right?: { unit?: string; maxValue?: number; minValue?: number } }	Optional. Per-axis unit and scale overrides for dual-axis charts.
  sourceNote	string	Optional. Caption under the legend naming tool and date.Example: Source: ERP export, FY26 Q1–Q4

  Examples

  <TrendChart
    title="Manual hours per week"
    unit="h"
    labels={["Wk 1", "Wk 2", "Wk 3", "Wk 4", "Wk 5", "Wk 6"]}
    series={[
      { name: "Actual", values: [142, 138, 121, 98, 76, 60], color: "brand" },
      { name: "Target", values: [120, 115, 100, 80, 60, 45], color: "slate" }
    ]}
    sourceNote="Baseline measured in week 1"
  />

  <TrendChart
    title="Revenue and EBITDA margin"
    labels={["Q1", "Q2", "Q3", "Q4"]}
    yAxes={{ left: { unit: "m" }, right: { unit: "%", maxValue: 40 } }}
    series={[
      { name: "Revenue", type: "bar", values: [18, 22, 24, 26], color: "brand", unit: "m" },
      { name: "EBITDA margin", type: "line", yAxis: "right", values: [22, 24, 25, 27], color: "success", unit: "%" }
    ]}
    sourceNote="Source: management accounts, FY26"
  />