KPI Strip — Stat Cards Component

The primary unit for surfacing metrics at the top of any dashboard or report page. Each card shows a single number, a label, and an optional delta indicator.

Vertical Bar Chart Component

Used for comparing discrete categories or time-series values. Bar fill uses --chart-1 (Alpine) by default; a second series uses --chart-2 (Wasatch).

Grouped Bar Chart Component

Two series side-by-side per category. Use for period-over-period comparisons. First series=--chart-1, second=--chart-2.

Stacked Bar Chart Component

Shows part-to-whole relationships within each category. Up to 4 segments per bar using --chart-1 through --chart-4.

Horizontal Bar Chart Component

Best for ranked lists with long category labels. Bars grow left to right; track uses --chart-grid as background.

Line Chart Component

Time-series trends. Up to 3 lines using --chart-1, --chart-2, --chart-3. Dots on data points. Area fill is the series color at 8% opacity.

Data Detail Table Component

The primary structure for drilling into row-level data. Extends the base table with numeric alignment, trend indicators, inline mini-bars, and status chips. Sortable headers use Alpine on hover.

Donut / Proportion Chart Component

For part-to-whole proportions with ≤5 segments. Center shows the primary metric. Legend on the right with exact values.

Chart Color Palette & Usage Rules

Top Assets by Starts Component

Compact ranked list of the top N assets by a primary metric. Each row is a filled pill bar — the asset name sits inside the fill, the count floats to the right of the track. A different series color per row helps fast visual scanning without needing a legend. Use in dashboard summary panels.

Trending Assets List Component

A scannable list of recently high-momentum content. Each row shows asset type icon, asset name, and a right-aligned completion rate badge color-coded to performance tier. No bars — the badge alone communicates quality. "View more" links to the full report. Use in sidebar widgets and dashboard summary cards.

Variant — Trending Survey Questions

Survey question variant of the Trending List. Each row carries two information layers: the question text and a sub-row with survey frequency, sentiment direction, and response volume direction. The right-aligned trend icon synthesises both signals into a single overall momentum read — the same icon language as the asset variant. Includes a time-range filter in the card header.

Assets Needing Attention Component

Surfaces underperforming or at-risk content with clear severity tiering. Each row shows a title with colored diagnostic subtext (starts + completion rate) and a slim action button on the right. Two severity levels: Warning (Arches) for moderate risk, Critical (Canyonlands) for severe. Rows are separated by a simple gray rule — no background containers — keeping the list light and scannable.

<div class="bsn-attention-list-mount" data-bsn-attention-list='{
  "title": "Videos Needing Attention",
  "subtitle": "High starts but low completion — review content",
  "badge": "2 critical · 1 warning",
  "badgeSeverity": "critical",
  "items": [
    {"label":"Advanced Pivot Tables",         "meta":"1,247 starts · 23% completion", "severity":"warning",  "action":"Review"},
    {"label":"PowerPoint Animations Deep Dive","meta":"892 starts · 31% completion",   "severity":"warning",  "action":"Review"},
    {"label":"SharePoint Site Architecture",  "meta":"756 starts · 18% completion",   "severity":"critical", "action":"Review"}
  ]
}'></div>

Emerging Trends Component

Week-over-week performance shifts surfaced by BrainStorm AI. Each metric shows the comparison period, a large delta value with direction icon, and an optional count of assets driving the trend. Positive momentum uses Uinta green; negative uses Canyonlands. A "Surging assets" count shows how many assets are driving the trend. Use in summary dashboards and AI insight reports.

Bullet Chart — Industry Benchmark Component

The recommended chart type for benchmarking an organization's metric against reference values (industry average, top performers, target). Three information layers read left-to-right: qualitative range bands in the background show performance zones, a primary measure bar shows the organization's current value, and a thin comparative marker shows the target or benchmark. Cleaner and more information-dense than side-by-side bar charts for this use case.

Top Themes Across Surveys Component

Top Themes Across Surveys is an AI-generated synthesis of recurring patterns found across all survey responses — not a single survey, question, or moment in time. It answers the question: "What are users consistently telling us across many surveys?" This is not a sentiment score and not a count of responses. It's a pattern-detection layer built on top of raw survey data, designed to surface recurring signals and directional themes while avoiding over-claiming statistical precision.

Sentiment Breakdown — Horizontal Bar Variant Component

A variant of the horizontal bar chart for displaying sentiment distribution. Uses the same row structure as the standard hbar — label column, pill track, right-aligned percentage value — with a face icon added at the far right as an at-a-glance emotional signal. The percentage and face icon share the same color as the bar fill.

What Users Are Saying Component

A simple verbatim quote list surfacing representative user responses from surveys. No scores, no categorization — raw voice of the user. Pairs naturally with the Sentiment Breakdown chart and the Top Themes component to complete the "How Users Feel" cluster. Quotes use italic body text to signal verbatim content. Opening quotation marks are decorative and oversized to anchor the visual rhythm.