Hero Metric
render_hero_metricRender interactive hero metrics to convey key insights: value and trend, progress, status, comparisons, rankings, countdowns, thresholds, breakdowns, satisfaction scores, and premium indicators.
Instructions
Render a purpose-driven hero metric widget. Pick the variant that answers your question:
big_number: 'How much? Which direction?' Default hero metric - clean, professional, works in any context. Large value + trend arrow + optional sparkline. Params: value, unit, change, changePeriod, sparkline[]
progress_ring: 'How close to goal?' Animated ring or half-gauge. Params: value, unit, label, progress (0-100), style ('ring'|'gauge'), size, color
status: 'Good or bad?' Pulsing dot + subsystem badges. Params: label, statusLevel ('good'|'warn'|'bad'), subsystems[{name,status}], count, peak
comparison: 'How do we compare?' Before/after + improvement. Params: before, after, improvement, beforeLabel, afterLabel
rank: 'Where do I stand?' Badge + percentile. Params: rank, total, percentile, rankChange
countdown: 'How long left?' Time segment boxes. Params: segments[{value,label}] OR deadline (ISO date)
threshold: 'Above or below limit?' Gradient bar + marker. Params: value, max, threshold, unit, zones[{label,from,to,color}]
breakdown: 'What is the split?' Stacked bar + legend. Params: items[{label,value,color?}]
nps: 'How satisfied?' Score + rating scale. Params: value, max (default 100), rating ('good'|'neutral'|'bad')
orb: 'What is the headline?' Dramatic glowing sphere. Use golden orb for resumes/portfolios. For tech meetings use only black, white, or crystal-colored orbs as subtle flair. Best with dark themes (tokyo-midnight, ops-control, startup). Avoid for formal contexts (boardroom, clinical, consultant). Params: value, unit, label, color
gem: 'Premium gem metric' Faceted/spherical gem - for wealth, fintech, trading, crypto, luxury contexts ONLY. Best with golden-treasury, tokyo-midnight themes. Do NOT use for corporate, clinical, consultant, or boardroom dashboards - use big_number instead. Params: value, unit, label, gemType. gemTypes: crystal='Future' (forecasts, projections) | black_pearl='Rare find' (alt investments, crypto) | golden_pearl='Treasure' (gold, commodities) | white_pearl='Clean total' (savings) diamond='Crown number' (net worth, total revenue) | ruby='What's critical' (urgent, burn rate) | sapphire='Foundation' (stability, uptime) | emerald='Growth' (YoY, appreciation)
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| max | No | Maximum value for threshold/nps | |
| peak | No | Peak count | |
| rank | No | Current rank | |
| size | No | Size: sm/md/lg/xl | |
| unit | No | Unit label (e.g. 'grams', '%', 'USD') | |
| after | No | After value | |
| color | No | Override accent color (hex) | |
| count | No | Live count | |
| items | No | Breakdown items | |
| label | No | Sub-label | |
| style | No | progress_ring style | |
| theme | No | Theme preset: boardroom, corporate, sales-floor, golden-treasury, clinical, startup, ops-control, tokyo-midnight, zen-garden, consultant, black-tron, black-elegance, black-matrix, forest-amber, forest-earth, sky-light, sky-ocean, sky-twilight, gray-hf, gray-copilot, office-red | |
| title | Yes | Chart title | |
| total | No | Total in ranking | |
| value | No | Main metric value | |
| zones | No | Color zones | |
| before | No | Before value | |
| change | No | Percentage change | |
| rating | No | NPS rating override | |
| effects | No | Override effects: none, subtle, shimmer, neon, energetic | |
| gemType | No | Gem type for variant=gem: diamond, ruby, sapphire, emerald, golden_pearl, white_pearl, black_pearl, crystal | |
| palette | No | Override palette only (mix-and-match) | |
| variant | No | Widget variant (default: big_number) | |
| deadline | No | ISO deadline date | |
| progress | No | Ring fill 0-100 | |
| segments | No | Time segments | |
| sparkline | No | Mini bar sparkline data | |
| threshold | No | Threshold limit line | |
| afterLabel | No | After column label | |
| percentile | No | Percentile | |
| rankChange | No | Positions moved | |
| subsystems | No | Subsystem badges | |
| typography | No | Override typography: professional, luxury, cyberpunk, editorial, mono, bold, system, techno | |
| beforeLabel | No | Before column label | |
| improvement | No | Improvement label | |
| statusLevel | No | Status level | |
| changePeriod | No | Period label for change (e.g. 'vs last month') |