{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "ab-test-variant-results", "title": "Ab Test Variant Results", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/ab-test-variant-results/ab-test-variant-results.component.ts", "content": "import { Component, Input, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n Activity,\n CheckCheck,\n CheckCircle2,\n Clock,\n CreditCard,\n DollarSign,\n LucideAngularModule,\n Pause,\n Play,\n ShieldCheck,\n ShoppingCart,\n TrendingUp,\n Trophy,\n Truck,\n Users,\n Zap,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent, type BadgeVariant } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface AbTestPrimaryMetric {\n id: string\n label: string\n value: string\n unit: string\n badge: string\n badgeVariant: BadgeVariant\n badgeIcon: LucideIconData\n description: string\n highlight: boolean\n}\n\nexport interface AbTestVariant {\n id: string\n code: string\n type: string\n title: string\n description: string\n split: string\n visitors: string\n conversions: string\n conversionLabel: string\n conversionRate: string\n rateBadge: string\n rateBadgeVariant: BadgeVariant\n revenuePerVisitor: string\n revenueDelta?: string\n totalRevenue: string\n verdict: string\n verdictVariant: BadgeVariant\n isWinner: boolean\n}\n\nexport interface AbTestFunnelArm {\n count: string\n rate: string\n progress: number\n retention: string\n}\n\nexport interface AbTestFunnelStep {\n id: string\n stepNumber: string\n name: string\n description: string\n icon: LucideIconData\n control: AbTestFunnelArm\n challenger: AbTestFunnelArm\n delta: string\n isPositive: boolean | null\n insight: string\n}\n\nexport interface AbTestGuardrail {\n id: string\n title: string\n status: string\n badgeVariant: BadgeVariant\n value: string\n description: string\n icon: LucideIconData\n}\n\nconst primaryMetrics: AbTestPrimaryMetric[] = [\n {\n id: 'conversion-lift',\n label: 'Overall Conversion Lift',\n value: '+24.8%',\n unit: 'relative',\n badge: '+1.27% Absolute',\n badgeVariant: 'success',\n badgeIcon: TrendingUp,\n description: 'Challenger (6.41%) vs Baseline Control (5.14%)',\n highlight: true,\n },\n {\n id: 'sample-size',\n label: 'Total Sample Size',\n value: '48,290',\n unit: 'unique visitors',\n badge: '50 / 50 Split',\n badgeVariant: 'secondary',\n badgeIcon: Users,\n description: '24,145 unique visitors per variant group',\n highlight: false,\n },\n {\n id: 'statistical-confidence',\n label: 'Statistical Confidence',\n value: '99.2%',\n unit: 'confidence',\n badge: 'p = 0.008',\n badgeVariant: 'outline',\n badgeIcon: Activity,\n description: 'Exceeds 95.0% significance threshold (α = 0.05)',\n highlight: false,\n },\n {\n id: 'revenue-impact',\n label: 'Est. Annual Revenue Impact',\n value: '+$142,000',\n unit: 'ARR',\n badge: '+$1.08 / visitor',\n badgeVariant: 'success',\n badgeIcon: DollarSign,\n description: 'Based on 131,500 annual checkouts ($5.28 vs $4.20 RPV)',\n highlight: true,\n },\n]\n\nconst variants: AbTestVariant[] = [\n {\n id: 'variant-a',\n code: 'Variant A',\n type: 'Control',\n title: 'Multi-Step Wizard',\n description: '3-step segmented checkout flow with separate shipping, billing, and review steps.',\n split: '50%',\n visitors: '24,145',\n conversions: '1,240',\n conversionLabel: '1,240 checkouts',\n conversionRate: '5.14%',\n rateBadge: 'Baseline',\n rateBadgeVariant: 'secondary',\n revenuePerVisitor: '$4.20',\n totalRevenue: '$101,409.00',\n verdict: 'Baseline Control Group',\n verdictVariant: 'outline',\n isWinner: false,\n },\n {\n id: 'variant-b',\n code: 'Variant B',\n type: 'Challenger',\n title: 'Single-Page with Accordion',\n description: 'Unified single-page layout with collapsible accordion sections and sticky order summary.',\n split: '50%',\n visitors: '24,145',\n conversions: '1,548',\n conversionLabel: '1,548 checkouts (+308)',\n conversionRate: '6.41%',\n rateBadge: '+24.8% relative lift',\n rateBadgeVariant: 'success',\n revenuePerVisitor: '$5.28',\n revenueDelta: '+$1.08 / visitor',\n totalRevenue: '$127,485.60',\n verdict: 'Winner · 99.2% probability to beat control',\n verdictVariant: 'success',\n isWinner: true,\n },\n]\n\nconst funnelSteps: AbTestFunnelStep[] = [\n {\n id: 'step-1',\n stepNumber: '01',\n name: 'Cart Review',\n description: 'Initial checkout landing and cart items validation',\n icon: ShoppingCart,\n control: {\n count: '24,145',\n rate: '100.0%',\n progress: 100,\n retention: '100% of traffic',\n },\n challenger: {\n count: '24,145',\n rate: '100.0%',\n progress: 100,\n retention: '100% of traffic',\n },\n delta: '0.0%',\n isPositive: null,\n insight: 'Uniform 50/50 randomized traffic partition without sample ratio bias.',\n },\n {\n id: 'step-2',\n stepNumber: '02',\n name: 'Shipping Address',\n description: 'Delivery destination selection & shipping method',\n icon: Truck,\n control: {\n count: '18,350',\n rate: '76.0%',\n progress: 76,\n retention: '76.0% retained',\n },\n challenger: {\n count: '20,523',\n rate: '85.0%',\n progress: 85,\n retention: '85.0% retained',\n },\n delta: '+11.8% stage lift',\n isPositive: true,\n insight: 'Auto-fill and inline address validation lowered initial drop-off by 9.0 percentage points.',\n },\n {\n id: 'step-3',\n stepNumber: '03',\n name: 'Payment Details',\n description: 'Credit card input, digital wallet, or invoice terms',\n icon: CreditCard,\n control: {\n count: '8,450',\n rate: '35.0%',\n progress: 35,\n retention: '46.0% retained',\n },\n challenger: {\n count: '11,831',\n rate: '49.0%',\n progress: 49,\n retention: '57.6% retained',\n },\n delta: '+40.0% stage lift',\n isPositive: true,\n insight: 'Accordion structure preserved visible cart totals, reducing payment abandonment substantially.',\n },\n {\n id: 'step-4',\n stepNumber: '04',\n name: 'Checkout Completed',\n description: 'Payment authorized & order confirmation rendered',\n icon: CheckCheck,\n control: {\n count: '1,240',\n rate: '5.14%',\n progress: 5.14,\n retention: '14.7% of payment step',\n },\n challenger: {\n count: '1,548',\n rate: '6.41%',\n progress: 6.41,\n retention: '13.1% of payment step',\n },\n delta: '+24.8% final lift',\n isPositive: true,\n insight: 'Yielded 308 net incremental checkouts with statistical significance (p = 0.008).',\n },\n]\n\nconst guardrails: AbTestGuardrail[] = [\n {\n id: 'srm',\n title: 'Sample Ratio Mismatch (SRM)',\n status: 'Passed',\n badgeVariant: 'success',\n value: 'p = 0.982',\n description: 'Chi-square goodness of fit verifies balanced 50.0% / 50.0% traffic delivery.',\n icon: ShieldCheck,\n },\n {\n id: 'mde',\n title: 'Minimum Detectable Effect',\n status: 'Achieved',\n badgeVariant: 'success',\n value: 'Observed +24.8% vs MDE 5.0%',\n description: 'Statistical power exceeds 99% for primary conversion rate metric.',\n icon: Zap,\n },\n {\n id: 'perf',\n title: 'Performance Guardrail',\n status: 'Healthy',\n badgeVariant: 'secondary',\n value: '1.1s vs 1.3s LCP',\n description: 'Single-page architecture improved largest contentful paint by 180ms.',\n icon: Clock,\n },\n]\n\n/**\n * AbTestVariantResults -- the React block, 1:1: an A/B experiment scorecard with a status\n * header (pause / declare winner), four primary metric cards, a variants comparison table,\n * a per-step funnel drop-off comparison and a guardrails footer. Pass `title`,\n * `experimentId` and `duration` to relabel it; edit the data arrays above to change the rest.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-ab-test-variant-results, [ui-ab-test-variant-results]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout, `class` goes to the root\n // and the `title` input never becomes a native tooltip on the host.\n host: { '[attr.class]': '\"contents\"', '[attr.title]': 'null' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCardDescriptionComponent,\n UiCardContentComponent,\n UiTableComponent,\n UiTableHeaderComponent,\n UiTableBodyComponent,\n UiTableRowComponent,\n UiTableHeadComponent,\n UiTableCellComponent,\n ],\n template: `\n
\n \n @if (isWinnerDeclared()) {\n \n
\n
\n \n
\n
\n

Variant B (Single-Page Accordion) Declared Winner

\n

\n 100% traffic rollout initiated. Estimated annual revenue increase of +$142,000 ARR in effect.\n

\n
\n
\n 100% Traffic Live\n
\n }\n\n \n
\n
\n
\n

{{ title }}

\n {{ experimentId }}\n \n \n Statistically Significant · 99.2% Confidence\n \n @if (isPaused()) {\n \n \n Paused\n \n }\n
\n

\n {{ duration }} · Primary Goal: Completed Checkout Rate\n

\n
\n\n \n
\n \n \n \n {{ isWinnerDeclared() ? 'Winner Rolled Out 100%' : 'Declare Winner & Roll Out 100%' }}\n \n
\n
\n\n \n
\n @for (metric of primaryMetrics; track metric.id) {\n
\n
\n
\n

\n {{ metric.label }}\n

\n \n \n {{ metric.badge }}\n \n
\n
\n
\n
\n {{ metric.value }}\n @if (metric.unit) {\n {{ metric.unit }}\n }\n
\n

{{ metric.description }}

\n
\n
\n }\n
\n\n \n
\n
\n
\n
\n
\n

\n Variants Comparison & Statistical Significance\n

\n Statsig / Optimizely Model\n
\n

\n Frequentist two-tailed Z-test with continuous monitoring and sample ratio correction.\n

\n
\n \n Significance Alpha:\n α = 0.05\n
\n
\n
\n
\n
\n
\n \n \n Variant & Layout\n Traffic Split\n Conversions\n Conversion Rate\n Revenue / Visitor\n Statistical Verdict\n \n \n \n @for (variant of variants; track variant.id) {\n \n \n \n
\n
{{ variant.code === 'Variant A' ? 'A' : 'B' }}
\n
\n
\n {{ variant.code }}\n \n {{ variant.type }}\n \n
\n

{{ variant.title }}

\n

{{ variant.description }}

\n
\n
\n \n\n \n \n
\n
\n {{ variant.split }}\n allocation\n
\n

{{ variant.visitors }} visitors

\n
\n \n\n \n \n
\n {{ variant.conversions }}\n

completed checkouts

\n
\n \n\n \n \n
\n {{ variant.conversionRate }}\n \n @if (variant.isWinner) {\n \n }\n {{ variant.rateBadge }}\n \n
\n \n\n \n \n
\n {{ variant.revenuePerVisitor }}\n @if (variant.revenueDelta) {\n

\n {{ variant.revenueDelta }}\n

\n } @else {\n

{{ variant.totalRevenue }}

\n }\n
\n \n\n \n \n
\n \n @if (variant.isWinner) {\n \n } @else {\n \n }\n {{ variant.verdict }}\n \n
\n \n \n }\n \n
\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n

\n Conversion Funnel Step Drop-off Comparison\n

\n 4-Stage Funnel\n
\n

\n Direct comparison of drop-off, progression, and conversion retention between Control and Challenger at\n each step.\n

\n
\n\n \n
\n
\n \n Variant A (Control)\n
\n
\n \n Variant B (Challenger)\n
\n
\n
\n
\n\n
\n
\n @for (step of funnelSteps; track step.id) {\n
\n
\n \n
\n \n \n
\n
\n
\n STEP {{ step.stepNumber }}\n {{ step.name }}\n
\n

{{ step.description }}

\n
\n
\n\n \n
\n \n
\n
\n \n Control:\n {{ step.control.count }} visitors\n \n {{ step.control.rate }}\n
\n
\n
\n
\n
\n\n \n
\n
\n \n Challenger:\n {{ step.challenger.count }} visitors\n \n \n {{ step.challenger.rate }}\n \n
\n
\n
\n
\n
\n
\n\n \n
\n \n @if (step.isPositive) {\n \n }\n {{ step.delta }}\n \n \n {{ step.challenger.retention }}\n \n
\n
\n\n \n \n Stage Note:\n {{ step.insight }}\n
\n \n }\n \n \n \n\n \n
\n
\n
\n

\n Statistical Guardrails & Health Checks\n

\n Integrity Verified\n
\n

\n Automatic telemetry assertions verifying sample validity, statistical power, and site performance.\n

\n
\n
\n
\n @for (guard of guardrails; track guard.id) {\n \n
\n
\n \n \n
\n {{ guard.status }}\n
\n
\n

{{ guard.title }}

\n

\n {{ guard.value }}\n

\n

{{ guard.description }}

\n
\n
\n
\n }\n
\n \n \n \n `,\n})\nexport class UiAbTestVariantResultsComponent {\n @Input() title = 'Checkout Flow: Multi-Step vs Single-Page'\n @Input() experimentId = 'EXP-1082'\n @Input() duration = 'Running for 14 days · 48,290 visitors'\n @Input('class') className?: string\n\n readonly isPaused = signal(false)\n readonly isWinnerDeclared = signal(false)\n\n protected readonly primaryMetrics = primaryMetrics\n protected readonly variants = variants\n protected readonly funnelSteps = funnelSteps\n protected readonly guardrails = guardrails\n\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Pause = Pause\n protected readonly Play = Play\n protected readonly TrendingUp = TrendingUp\n protected readonly Trophy = Trophy\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n handleDeclareWinner(): void {\n this.isWinnerDeclared.set(true)\n this.isPaused.set(true)\n }\n\n togglePause(): void {\n this.isPaused.update((prev) => !prev)\n }\n\n protected metricCardClass(metric: AbTestPrimaryMetric): string {\n return cn(\n 'border-border bg-card hover:border-border/80 shadow-xs transition-colors',\n metric.highlight && 'border-success/30 bg-success/[0.02] dark:bg-success/10]',\n )\n }\n\n protected metricValueClass(metric: AbTestPrimaryMetric): string {\n return cn(\n 'text-2xl font-bold tracking-tight tabular-nums sm:text-3xl',\n metric.highlight ? 'text-success' : 'text-foreground',\n )\n }\n\n protected variantRowClass(variant: AbTestVariant): string {\n return cn(\n 'border-border transition-colors',\n variant.isWinner ? 'bg-success/[0.04] hover:bg-success/[0.08] bg-success/[0.07]' : 'hover:bg-muted/30',\n )\n }\n\n protected variantMarkClass(variant: AbTestVariant): string {\n return cn(\n 'flex size-7 shrink-0 items-center justify-center rounded-md text-xs font-bold shadow-xs',\n variant.isWinner ? 'bg-success text-white' : 'border-border bg-muted text-muted-foreground border',\n )\n }\n\n protected conversionRateClass(variant: AbTestVariant): string {\n return cn('text-sm font-bold tabular-nums', variant.isWinner ? 'text-success text-base' : 'text-foreground')\n }\n\n protected revenueClass(variant: AbTestVariant): string {\n return cn('text-sm font-bold tabular-nums', variant.isWinner ? 'text-success' : 'text-foreground')\n }\n\n protected verdictBadgeClass(variant: AbTestVariant): string {\n return cn(\n 'gap-1.5 py-1 text-xs font-semibold tabular-nums',\n variant.isWinner && 'border-success/30 bg-success/15 text-success',\n )\n }\n\n protected stepDeltaClass(step: AbTestFunnelStep): string {\n return cn(\n 'gap-1 text-xs font-semibold tabular-nums',\n step.isPositive && 'border-success/30 bg-success/15 text-success',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/ab-test-variant-results/ab-test-variant-results.component.ts" }, { "path": "packages/registry-angular/blocks/ab-test-variant-results/index.ts", "content": "export {\n UiAbTestVariantResultsComponent,\n type AbTestPrimaryMetric,\n type AbTestVariant,\n type AbTestFunnelArm,\n type AbTestFunnelStep,\n type AbTestGuardrail,\n} from './ab-test-variant-results.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/ab-test-variant-results/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", "https://uipkge.dev/r/angular/table.json" ], "description": "Optimizely and Statsig style A/B test statistical significance scorecard and conversion delta comparison. Features experiment status header, 4 primary experiment metrics cards, variants comparison table with statistical verdicts, and conversion funnel step drop-off comparison.", "categories": [ "analytics", "marketing", "dashboard" ] }