Report Template
All report components with dummy data · Use as reference
KPI Cards
Use KpiGrid with KpiCard children. The cols prop controls columns (default 3). Values, labels, and optional sub-text.
Charts
ChartCard wraps a Chart.js canvas. Each chart needs a unique chartId and a JSON chartConfig string. Wrap pairs in a report-chart-grid div.
Monthly Active Users
Unique sessions per month over the last 8 months.
Task Success Rate
Percentage of users completing core flows without error.
Device Distribution
Sessions by device type.
Errors by Category
Distribution of user-facing errors.
Satisfaction
Post-task survey (n=86)
Ease of Use
System Usability Scale
Would Recommend
Likelihood to recommend
Data Tables
DataTable wraps a standard HTML table. Optional caption prop. Use report-tag spans for inline badges and report-severity for dot scales.
Feature Adoption — First 90 Days
| Feature | Impressions | Activations | Adoption Rate | Retention (D30) | Status |
|---|---|---|---|---|---|
| Quick search | 18,200 | 9,400 | 51.6% | 72% | Strong |
| Bulk actions | 6,800 | 1,900 | 27.9% | 44% | Moderate |
| Saved filters | 4,100 | 820 | 20.0% | 61% | Moderate |
| Export CSV | 2,300 | 310 | 13.5% | 38% | Low |
Usability Issues — Ranked by Severity
| Rank | Area | Issue | Affected | Severity | Recommendation |
|---|---|---|---|---|---|
| 1st | Search | Users confuse the search field with a URL bar and paste full URLs instead of keywords. | 4/5 | 6 | Add URL detection with auto-strip. Show format hint on focus. |
| 2nd | Navigation | Secondary actions are buried in a kebab menu. Users don’t discover them without prompting. | 3/5 | 4 | Surface top 2 actions as visible buttons. Keep rest in overflow. |
| 3rd | Forms | Error messages appear only after submit. No inline validation or progress indication. | 2/5 | 2 | Add inline validation on blur. Show progress bar for multi-step flows. |
Callouts
Callout highlights key insights or quotes. Optional title prop. Supports markdown in the slot (bold, italic, etc).
The redesigned flow reduced error rates by 68% while maintaining the same task completion time. Users reported feeling more confident despite fewer on-screen instructions — proof that clarity beats volume.
“I kept looking for the transfer option in the sidebar. It never occurred to me to use the search bar for that — those feel like completely different actions.”
“The confirmation screen is too fast. I clicked and it was done before I could read what happened. I need a moment to verify before committing.”
A callout without a title works too — use it for general observations or transitional notes between sections.
Annotations
Annotation is for numbered cross-study connections or analytical notes. Each takes a number, title, and text prop.