Metric Detail Drilldown
Drill-in view for a KPI click showing a headline metric, period context, and a segment breakdown table with share bars.
Drill-in view for a KPI click showing a headline metric, period context, and a segment breakdown table with share bars.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Metric Detail Drilldown is the drill-in view after clicking a dashboard KPI, showing MRR at $48,210 up $1,890 vs May 2026 in the headline card, with the honest framing: Acme workspace, billing period Jun 1 to Jun 13, revenue recognised on the first day of each period. Below it, a Breakdown by segment table lists Enterprise Annual at 64.6% share, Pro Annual at 24.9%, Pro Monthly at 8.0% down $960, and Starter Monthly at 2.5% down $150, each with a proportional share bar.
Segments are a typed array with an explicit badge union so the table renders without TS errors. The share bar makes proportional weight scannable without a chart; the Export CSV button is the one action analytics users always reach for first.
Reach for this block on the detail route behind a KPI click, wired to your metrics and segment API. The back link should navigate to the overview dashboard.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the MRR segment breakdown. Other drilldowns:
Tip: the context sentence under the headline metric (billing period, recognition rule) stops the first stakeholder email asking what the number actually means.