Component quick reference
Visual component quick reference
This portal runs Evidence Core (classic markdown components). Full catalog: Evidence components. Studio Markdoc ({% value %}) differs slightly from the tags below — use these Core forms in portal/pages/.
Doorware uses BigValue, LineChart, stacked BarChart, FunnelChart, DataTable, Alert, Details, and LastRefreshed. Prefer charts for trends/funnels; tables for drill-down.
Last refreshed 19 seconds ago
KPI & inline values
| Component | Use for | Example |
|---|---|---|
| BigValue | Hero KPIs | <BigValue data={kpis} value=total_revenue fmt=usd title="Total Revenue" /> |
| Value | Inline number in prose | Revenue was <Value data={kpis} column=total_revenue fmt=usd /> |
Formats: usd, num0, pct, ymd — see value formatting.
Charts
| Component | Use for | Key props |
|---|---|---|
| LineChart | Trends over time | x y yFmt series |
| AreaChart | Filled trends | same as line; type=stacked |
| BarChart | Categories or time | x y series type=stacked\|grouped |
| FunnelChart | Conversion stages | nameCol valueCol showPercent |
| Heatmap | Matrix intensity | x y value |
| ScatterPlot / BubbleChart | Correlations | x y size series |
| Histogram | Distributions | x |
| SankeyDiagram | Flow between stages | sourceCol targetCol valueCol |
Doorware pattern — stacked bars by date:
<BarChart data={funnel_steps} x=day y=count series=step type=stacked xFmt=ymd />Doorware pattern — funnel:
<FunnelChart data={funnel_totals} nameCol=step valueCol=count showPercent=true />Tables & layout
| Component | Use for |
|---|---|
| DataTable + Column | Sortable grids; fmt=usd on money cols |
| Details | Collapse long journey tables |
Alert (status=info\|warning\|positive\|negative) | Callouts / identity notes |
| Note | Small caption under a chart |
Group / div class="grid" | KPI row layout |
| LastRefreshed | Show when sources last ran |
Portal map
- Home — client list
- Doorware — commercial + identity rollup
- This reference
When adding a client page: copy Doorware structure, swap website_id in portal/sources/umami/*.sql (or add a client-specific source folder), sync with npm run env:bi, then npm run bi:build / Pages deploy.