{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "hero-saas-metrics-dashboard", "title": "Hero Saas Metrics Dashboard", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/hero-saas-metrics-dashboard/hero-saas-metrics-dashboard.component.ts", "content": "// High-impact SaaS hero with interactive timeframe filtering, live revenue and\n// workload KPIs, and a dynamic telemetry area chart. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowRight, CheckCircle2, LucideAngularModule, Play, ShieldCheck, TrendingUp } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\n\nexport type SaasMetricsTimeframe = 'live' | '24h' | '7d' | '30d'\n\nexport interface SaasMetricData {\n mrr: string\n growth: string\n activeUsers: string\n requests: string\n chartPoints: number[]\n}\n\nconst metricsByTimeframe: Record = {\n live: {\n mrr: '$148,920',\n growth: '+24.6%',\n activeUsers: '14,280',\n requests: '1.42M/min',\n chartPoints: [28, 42, 36, 54, 48, 62, 78, 70, 85, 92, 88, 98],\n },\n '24h': {\n mrr: '$146,800',\n growth: '+18.2%',\n activeUsers: '42,100',\n requests: '84.6M',\n chartPoints: [35, 38, 45, 52, 50, 68, 64, 75, 82, 80, 89, 94],\n },\n '7d': {\n mrr: '$139,400',\n growth: '+31.4%',\n activeUsers: '185,400',\n requests: '592M',\n chartPoints: [20, 28, 35, 42, 55, 60, 72, 68, 80, 85, 90, 100],\n },\n '30d': {\n mrr: '$124,100',\n growth: '+44.1%',\n activeUsers: '490,000',\n requests: '2.4B',\n chartPoints: [15, 22, 30, 38, 48, 58, 65, 74, 82, 88, 94, 105],\n },\n}\n\nconst timeframes: SaasMetricsTimeframe[] = ['live', '24h', '7d', '30d']\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-hero-saas-metrics-dashboard, [ui-hero-saas-metrics-dashboard]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent],\n template: `\n
\n \n \n\n
\n \n
\n \n \n Enterprise Revenue & Event Intelligence\n \n\n

\n Real-time telemetry for modern engineering teams.\n

\n\n

\n Monitor revenue acceleration, API transaction throughput, and compute workloads with sub-millisecond\n precision.\n

\n\n \n
\n \n Start Free Sandbox\n \n \n\n \n \n Interactive Demo\n \n
\n\n
\n \n SOC2 Type II Certified\n \n \n 99.95% SLA Uptime\n \n
\n
\n\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n console.uipkge.dev/production\n
\n\n \n
\n @for (tf of timeframeList; track tf) {\n \n }\n
\n
\n\n \n
\n
\n \n
\n
\n Recurring Revenue\n \n {{ activeMetric().growth }}\n \n
\n

{{ activeMetric().mrr }}

\n

Calculated across active subscriptions

\n
\n\n \n
\n
\n Active Nodes & Pods\n \n
\n

{{ activeMetric().activeUsers }}

\n

Distributed across 8 global regions

\n
\n\n \n
\n
\n Throughput\n \n
\n

{{ activeMetric().requests }}

\n

Edge cached queries & websocket streams

\n
\n
\n\n \n
\n
\n
\n

Transaction Velocity & Event Stream

\n

Global Ingestion Rate

\n
\n 99.998% Success\n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n
\n `,\n})\nexport class UiHeroSaasMetricsDashboardComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Play = Play\n protected readonly ShieldCheck = ShieldCheck\n protected readonly TrendingUp = TrendingUp\n\n protected readonly timeframeList = timeframes\n\n @Input('class') className?: string\n\n readonly activeTimeframe = signal('live')\n\n readonly activeMetric = computed(() => metricsByTimeframe[this.activeTimeframe()])\n\n readonly chartSvgPath = computed(() => {\n const points = this.activeMetric().chartPoints\n const width = 500\n const height = 120\n const max = Math.max(...points)\n const min = Math.min(...points)\n const range = max - min || 1\n\n return points\n .map((val, idx) => {\n const x = (idx / (points.length - 1)) * width\n const y = height - ((val - min) / range) * (height - 20) - 10\n return `${idx === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`\n })\n .join(' ')\n })\n\n readonly chartAreaPath = computed(() => `${this.chartSvgPath()} L 500 120 L 0 120 Z`)\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)\n }\n\n timeframeTabClass(tf: SaasMetricsTimeframe): string {\n return cn(\n 'rounded-md px-2.5 py-1 font-mono text-xs uppercase transition-[color,background-color,transform] duration-150 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',\n this.activeTimeframe() === tf\n ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n setTimeframe(tf: SaasMetricsTimeframe): void {\n this.activeTimeframe.set(tf)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-saas-metrics-dashboard/hero-saas-metrics-dashboard.component.ts" }, { "path": "packages/registry-angular/blocks/hero-saas-metrics-dashboard/index.ts", "content": "export {\n UiHeroSaasMetricsDashboardComponent,\n type SaasMetricsTimeframe,\n type SaasMetricData,\n} from './hero-saas-metrics-dashboard.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-saas-metrics-dashboard/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "High-impact SaaS hero section with interactive timeframe filtering, live revenue and workload KPIs, and dynamic telemetry area chart.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "hero" }