Patterns
Data & Charts
Production data-presentation patterns from the Entangle dashboard. Metric cards, badges, Recharts compositions, stat lists, and headline-finding callouts.
KPI Metric Cards
At-a-glance performance indicators. Accent variant highlights the primary KPI; icons add scanability across a dense dashboard.
Comparison Cards
Status & Category Badges
Mono-uppercase pill badges for status signalling, categorisation, and inline metadata. Six semantic variants map to the dashboard colour system.
Pill shape · mono uppercase · semantic border + background tint
Revenue Seasonality
ComposedChart with gradient bars for revenue and a dashed line for meta spend. Dual Y-axes, custom tooltip, and Recharts dark-mode overrides.
ComposedChart · gradient bars · dashed line · dual Y-axis · custom tooltip
Top Performers
Ranked stat rows with horizontal progress bars. The top performer gets the gradient accent; remaining rows use a muted fill to maintain hierarchy.
- 01142 orders$64,780
- 02118 orders$53,660
- 0397 orders$44,140
- 0474 orders$33,670
- 0556 orders$25,480
Headline Finding
Amber-tinted callout card for surfacing the single most important insight from a data set. Pairs an icon, warning badge, and editorial commentary.
December drove 27% of annual revenue in a single month — but MER efficiency held flat. The business is scaling revenue without degrading unit economics.
This matters because most businesses see diminishing returns as they scale spend. Here, the closed-loop system is feeding conversion data back into targeting, keeping lead quality stable even as volume increases.
Channel Revenue Breakdown
Stacked area chart showing revenue contribution by acquisition channel over time. Each channel gets its own gradient fill for clear visual separation.
AreaChart · 4 stacked series · individual gradients · monotone interpolation
Revenue by Source
Donut chart with custom percentage labels on each slice, centre total, and a paired legend list showing value and share breakdown.
KPI Gauges
Half-circle radial bar gauges showing progress toward a target. Each gauge uses a muted background track with an overlaid coloured arc and centred value label.
Performance Profile
Multi-axis radar chart comparing actual performance against benchmark values. The filled polygon shows current performance while the dashed outline marks the benchmark.
Spend vs Revenue by Campaign
Glass-effect scatter with overlapping translucent circles for multi-dimensional data. Circle radius maps to ROAS, translucent fills create layered depth where campaigns overlap, and the diagonal reference line marks the 5.0x ROAS threshold.
ScatterChart · glass-effect circles (r 20-60) · translucent overlap · ROAS-mapped radius · 5x reference line
Campaign Performance Ranked
Horizontal bar chart ranking campaigns by revenue. Individual fill colours encode campaign type. Rounded right edges and mono axis labels maintain the Entangle aesthetic.
BarChart layout=vertical · per-bar Cell colours · rounded-right radius
Conversion Funnel
Reusable FunnelChart component from @entangle-hq/ui. Pure CSS/SVG trapezoid bars narrow proportionally as values decrease, with conversion rate annotations between each step.
Mini Dashboard
A composed dashboard preview showing how metric cards, area charts, donut breakdowns, and stat lists combine into a production-ready view. This is the target layout for real client dashboards.
- 017.9x ROAS$95,000
- 025.1x ROAS$72,000
- 035.4x ROAS$68,000
- 049.0x ROAS$54,000
- 053.0x ROAS$38,000
Attribution flow
Visualise how budget flows from channels through campaigns to conversion outcomes.
Sankey · 3-column flow · custom node colours · proportional link widths
Ad Format Anatomy
Marketing ad format displays for client reporting. Each format shows the creative structure alongside live performance metrics and actionable insights.