UX Catalogue¶

Every component below is rendered from real Dazzle DSL through the real render pipeline — the same code that produces a running app's HTML. Each card shows the live component and the DSL that produced it.

List¶

The workhorse table. Here it carries the outlier_on decorator — the latency_ms cell flags the statistical outlier (⚠ high) vs the displayed rows.

Name	Team	Status	Latency Ms	Error Rate	Target Ms
alpha	platform	healthy	42	0.1	50
bravo	platform	healthy	38	0.2	50
charlie	payments	degraded	44	1.4	50
delta	payments	healthy	40	0.3	50
echo	growth	healthy	46	0.2	50
foxtrot	data	critical	380⚠ high	7.2	50

cat_list:
  source: Box
  display: list
  sort: name asc
  outlier_on: latency_ms
  outlier_method: iqr
  empty: "No boxes"

Metrics¶

KPI tiles — scalar aggregates over the scoped set.

Total

42

Critical

7

Avg Latency

41

cat_metrics:
  source: Box
  display: metrics
  aggregate:
    total: count(Box)
    critical: count(Box where status = critical)
    avg_latency: avg(latency_ms)

Bar Chart¶

Distribution by a category — one bar per group. One scope-aware GROUP BY.

Platform

8

Payments

8

Growth

8

Data

8

cat_bar_chart:
  source: Box
  display: bar_chart
  group_by: team
  aggregate:
    count: count(Box)
  empty: "No boxes"

Comparison¶

Ranked league — rows ranked by a metric with inline bars + automatic outlier flag.

1. platform

12.00

2. payments

11.00

3. growth

10.00

4. data

9.00

5. infra

9.00

6. ml

1.00

6 rows · scale 0–12

cat_comparison:
  source: Box
  display: comparison
  group_by: team
  aggregate:
    total: count(Box)
  rank_by: total
  order: desc
  outlier_method: iqr
  empty: "No boxes"

Heatmap¶

Matrix density — latency shaded across team × status.

	critical	degraded	healthy
data	380.0	0.0	0.0
growth	0.0	0.0	46.0
payments	0.0	44.0	40.0
platform	0.0	0.0	38.0

Showing 4 of 6

cat_heatmap:
  source: Box
  display: heatmap
  rows: team
  columns: status
  value: latency_ms
  empty: "No boxes"

Pivot Table¶

Cross-tab — counts across two dimensions (team × status).

Team	Status	Team	Status	Count
Platform	Healthy	platform	healthy	8
Platform	Critical	platform	critical	1
Payments	Healthy	payments	healthy	6
Payments	Degraded	payments	degraded	2

4 rows

cat_pivot:
  source: Box
  display: pivot_table
  group_by: [team, status]
  aggregate:
    count: count(Box)
  empty: "No boxes"

Bullet¶

Actual-vs-target rows — each box's latency against its target.

alpha

42 / 50

bravo

38 / 50

charlie

44 / 50

delta

40 / 50

echo

46 / 50

foxtrot

380 / 50

6 rows · scale 0–380

cat_bullet:
  source: Box
  display: bullet
  bullet_label: name
  bullet_actual: latency_ms
  bullet_target: target_ms
  empty: "No boxes"

Kanban¶

Board view — boxes grouped into status columns.

Healthy4

alpha

Team: platform

Latency Ms: 42

Error Rate: 0.1

Target Ms: 50

bravo

Team: platform

Latency Ms: 38

Error Rate: 0.2

Target Ms: 50

delta

Team: payments

Latency Ms: 40

Error Rate: 0.3

Target Ms: 50

echo

Team: growth

Latency Ms: 46

Error Rate: 0.2

Target Ms: 50

Degraded1

charlie

Team: payments

Latency Ms: 44

Error Rate: 1.4

Target Ms: 50

Critical1

foxtrot

Team: data

Latency Ms: 380

Error Rate: 7.2

Target Ms: 50

cat_kanban:
  source: Box
  display: kanban
  group_by: status
  empty: "No boxes"

Insight Summary¶

A grounded, deterministic narrative — scale + leader + outlier — over a grouped aggregate, with the underlying values cited so every claim is verifiable. No LLM (that's Slice 2).

Alert volume is concentrated in Platform, with ML unusually quiet — worth checking whether ML's pipeline is reporting.Based on: platform 20 · payments 19 · growth 18 · data 17 · infra 16 · ml 1confidence: mediumacross all team · as of 2026-06-25 14:00 UTC

cat_insight:
  source: Box
  display: insight_summary
  group_by: team
  aggregate:
    count: count(Box)

List¶

Fixed-band RAG decorator — error_rate cells are coloured green/amber/red against author thresholds (WCAG-safe tone + icon + label). The deterministic sibling of the outlier decorator.

Name	Team	Status	Latency Ms	Error Rate	Target Ms
alpha	platform	healthy	42	0.1● good	50
bravo	platform	healthy	38	0.2● good	50
charlie	payments	degraded	44	1.4● watch	50
delta	payments	healthy	40	0.3● good	50
echo	growth	healthy	46	0.2● good	50
foxtrot	data	critical	380	7.2● critical	50

cat_rag:
  source: Box
  display: list
  rag_on: error_rate
  tone_bands:
    - at: 5
      tone: destructive
    - at: 1
      tone: warning
    - at: 0
      tone: positive

Histogram¶

Continuous-axis distribution — latency_ms binned (Sturges' rule).

4 bins · 6 samples · peak 5

cat_histogram:
  source: Box
  display: histogram
  value: latency_ms
  bins: auto
  empty: "No boxes"

Box Plot¶

Quartile spread per team — Q1/median/Q3 + Tukey whiskers over latency_ms.

4 groups · 6 samples

cat_box_plot:
  source: Box
  display: box_plot
  group_by: team
  value: latency_ms
  show_outliers: true
  empty: "No boxes"

Funnel Chart¶

Stage funnel — boxes counted through the status lifecycle.

healthy (4)

degraded (1)

critical (1)

6 total

cat_funnel:
  source: Box
  display: funnel_chart
  group_by: status
  aggregate:
    count: count(Box)
  empty: "No boxes"

Line Chart¶

Time series — daily box volume. One date_trunc('day') GROUP BY.

5 buckets · peak 8

cat_line:
  source: Box
  display: line_chart
  group_by: bucket(opened_at, day)
  aggregate:
    count: count(Box)
  empty: "No boxes"

Sparkline¶

Compact trend tile — the same daily series as a headline + tiny SVG.

62026-06-25

cat_sparkline:
  source: Box
  display: sparkline
  group_by: bucket(opened_at, day)
  aggregate:
    count: count(Box)
  empty: "—"

Radar¶

Polar profile — one spoke per team, value = box count for that team.

4 spokes · 1 series · peak 12

cat_radar:
  source: Box
  display: radar
  group_by: team
  aggregate:
    count: count(Box)
  empty: "No boxes"

Area Chart¶

Filled area — daily box volume under a single series.

5 buckets · peak 8

cat_area:
  source: Box
  display: area_chart
  group_by: bucket(opened_at, day)
  aggregate:
    count: count(Box)
  empty: "No boxes"

Area Chart¶

Stacked area — weekly box volume split by team. Multi-dim time bucket (#1473): overlaid series, one per team, with a legend.

platform
payments

2 buckets · 2 series · peak 6

cat_area_stacked:
  source: Box
  display: area_chart
  group_by: [bucket(opened_at, week), team]
  aggregate:
    count: count(Box)
  empty: "No boxes"