{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "social-proof-stat-counter-stream", "title": "Social Proof Stat Counter Stream", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/social-proof-stat-counter-stream/social-proof-stat-counter-stream.component.ts", "content": "// Live infrastructure telemetry and animated metric counter stream with real-time\n// global edge round-trip latency ticker. Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, OnInit, inject, signal } from '@angular/core'\nimport { Activity, ArrowRight, CheckCircle2, Cpu, Globe2, LucideAngularModule, Radio, Server } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport interface RegionLatency {\n city: string\n latencyMs: number\n}\n\nconst initialLatencies: RegionLatency[] = [\n { city: 'San Jose (SJC)', latencyMs: 8 },\n { city: 'Frankfurt (FRA)', latencyMs: 11 },\n { city: 'Tokyo (NRT)', latencyMs: 9 },\n { city: 'Singapore (SIN)', latencyMs: 12 },\n { city: 'London (LHR)', latencyMs: 10 },\n { city: 'Sydney (SYD)', latencyMs: 14 },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-social-proof-stat-counter-stream, [ui-social-proof-stat-counter-stream]',\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, UiCardComponent, UiCardContentComponent],\n template: `\n
\n
\n \n
\n \n \n Live Infrastructure Telemetry\n \n \n\n

{{ title }}

\n\n

{{ description }}

\n
\n\n \n
\n
\n
\n
\n Total Edge Invocations\n \n
\n
\n {{ invocations().toLocaleString() }}\n
\n
\n \n Streaming live\n
\n
\n
\n\n
\n
\n
\n Direct Registry Pulls\n \n
\n
\n {{ activeClones().toLocaleString() }}+\n
\n
Across shadcn & shadcn-vue
\n
\n
\n\n
\n
\n
\n Dual-Framework Parity\n \n
\n
{{ parityPercentage() }}%
\n
1:1 Vue & React token sync
\n
\n
\n\n
\n
\n
\n Global Edge Locations\n \n
\n
\n {{ edgeRegionsCount() }} PoPs\n
\n
Anycast routed worldwide
\n
\n
\n
\n\n \n
\n
\n
\n \n Real-time Global Edge Round-Trip Latency\n
\n\n
\n @for (reg of latencies(); track reg.city) {\n \n {{ reg.city }}:\n {{ reg.latencyMs }}ms\n
\n }\n
\n
\n
\n \n
\n `,\n})\nexport class UiSocialProofStatCounterStreamComponent implements OnInit {\n protected readonly Activity = Activity\n protected readonly ArrowRight = ArrowRight\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Cpu = Cpu\n protected readonly Globe2 = Globe2\n protected readonly Radio = Radio\n protected readonly Server = Server\n\n @Input() title = 'Real-time telemetry stream across global edge infrastructure.'\n @Input()\n description =\n 'Continuously aggregated metrics verifying zero-latency invocation throughput and multi-region synchronization.'\n @Input('class') className?: string\n\n readonly invocations = signal(48291040)\n readonly activeClones = signal(128450)\n readonly parityPercentage = signal(100)\n readonly edgeRegionsCount = signal(36)\n readonly latencies = signal(initialLatencies.map((l) => ({ ...l })))\n\n private timer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearInterval(this.timer))\n }\n\n ngOnInit(): void {\n this.timer = setInterval(() => this.tick(), 1200)\n }\n\n tick(): void {\n this.invocations.update((v) => v + Math.floor(Math.random() * 12) + 3)\n this.latencies.update((prev) => {\n const next = prev.map((l) => ({ ...l }))\n const idx = Math.floor(Math.random() * next.length)\n const current = next[idx]!.latencyMs\n const delta = Math.random() > 0.5 ? 1 : -1\n next[idx]!.latencyMs = Math.max(5, Math.min(22, current + delta))\n return next\n })\n }\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/social-proof-stat-counter-stream/social-proof-stat-counter-stream.component.ts" }, { "path": "packages/registry-angular/blocks/social-proof-stat-counter-stream/index.ts", "content": "export {\n UiSocialProofStatCounterStreamComponent,\n type RegionLatency,\n} from './social-proof-stat-counter-stream.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/social-proof-stat-counter-stream/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/card.json" ], "description": "Live infrastructure telemetry and animated metric counter stream with real-time global edge round-trip latency ticker.", "categories": [ "marketing", "feature" ] }