{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ab-test-variant-results", "title": "Ab Test Variant Results", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/ab-test-variant-results/AbTestVariantResults.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n CheckCheck,\n CheckCircle2,\n Clock,\n CreditCard,\n DollarSign,\n Pause,\n Play,\n ShieldCheck,\n ShoppingCart,\n TrendingUp,\n Trophy,\n Truck,\n Users,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface AbTestVariantResultsProps {\n title?: string\n experimentId?: string\n duration?: string\n className?: string\n}\n\nconst primaryMetrics = [\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' as const,\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' as const,\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' as const,\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' as const,\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 = [\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' as const,\n revenuePerVisitor: '$4.20',\n totalRevenue: '$101,409.00',\n verdict: 'Baseline Control Group',\n verdictVariant: 'outline' as const,\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' as const,\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' as const,\n isWinner: true,\n },\n]\n\nconst funnelSteps = [\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 = [\n {\n id: 'srm',\n title: 'Sample Ratio Mismatch (SRM)',\n status: 'Passed',\n badgeVariant: 'success' as const,\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' as const,\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' as const,\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\nexport function AbTestVariantResults({\n title = 'Checkout Flow: Multi-Step vs Single-Page',\n experimentId = 'EXP-1082',\n duration = 'Running for 14 days · 48,290 visitors',\n className,\n}: AbTestVariantResultsProps) {\n const [isPaused, setIsPaused] = React.useState(false)\n const [isWinnerDeclared, setIsWinnerDeclared] = React.useState(false)\n\n const handleDeclareWinner = () => {\n setIsWinnerDeclared(true)\n setIsPaused(true)\n }\n\n const togglePause = () => {\n setIsPaused((prev) => !prev)\n }\n\n return (\n
\n {/* Winner Rollout Banner (if declared) */}\n {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 \n 100% Traffic Live\n \n
\n )}\n\n {/* Header Section */}\n
\n
\n
\n

{title}

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

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

\n
\n\n {/* Action Buttons */}\n
\n \n \n \n {isWinnerDeclared ? 'Winner Rolled Out 100%' : 'Declare Winner & Roll Out 100%'}\n \n
\n
\n\n {/* 4 Primary Experiment Metrics Cards */}\n
\n {primaryMetrics.map((metric) => {\n const BadgeIcon = metric.badgeIcon\n return (\n \n \n
\n \n {metric.label}\n \n \n \n {metric.badge}\n \n
\n \n \n
\n \n {metric.value}\n \n {metric.unit && {metric.unit}}\n
\n

{metric.description}

\n \n \n )\n })}\n
\n\n {/* Variants Comparison Table Card */}\n \n \n
\n
\n
\n \n Variants Comparison & Statistical Significance\n \n \n Statsig / Optimizely Model\n \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 \n Statistical Verdict\n \n \n \n \n {variants.map((variant) => (\n \n {/* Variant Name & Description */}\n \n
\n \n {variant.code === 'Variant A' ? 'A' : 'B'}\n
\n
\n
\n {variant.code}\n \n {variant.type}\n \n
\n

{variant.title}

\n

{variant.description}

\n
\n \n \n\n {/* Traffic Split */}\n \n
\n
\n {variant.split}\n allocation\n
\n

{variant.visitors} visitors

\n
\n \n\n {/* Conversions */}\n \n
\n {variant.conversions}\n

completed checkouts

\n
\n \n\n {/* Conversion Rate */}\n \n
\n \n {variant.conversionRate}\n \n \n {variant.isWinner && }\n {variant.rateBadge}\n \n
\n \n\n {/* Revenue per Visitor */}\n \n
\n \n {variant.revenuePerVisitor}\n \n {variant.revenueDelta ? (\n

\n {variant.revenueDelta}\n

\n ) : (\n

{variant.totalRevenue}

\n )}\n
\n \n\n {/* Statistical Verdict */}\n \n
\n \n {variant.isWinner ? (\n \n ) : (\n \n )}\n {variant.verdict}\n \n
\n \n \n ))}\n \n
\n
\n \n \n\n {/* Conversion Funnel Step Drop-off Comparison Card */}\n \n \n
\n
\n
\n \n Conversion Funnel Step Drop-off Comparison\n \n \n 4-Stage Funnel\n \n
\n \n Direct comparison of drop-off, progression, and conversion retention between Control and Challenger at\n each step.\n \n
\n\n {/* Legend */}\n
\n
\n \n Variant A (Control)\n
\n
\n \n Variant B (Challenger)\n
\n
\n
\n \n\n \n
\n {funnelSteps.map((step) => {\n const StepIcon = step.icon\n return (\n \n
\n {/* Step Meta */}\n
\n
\n \n
\n
\n
\n \n STEP {step.stepNumber}\n \n {step.name}\n
\n

{step.description}

\n
\n
\n\n {/* Comparative Bars */}\n
\n {/* Variant A (Control) Bar */}\n
\n
\n \n Control:\n {step.control.count} visitors\n \n {step.control.rate}\n
\n
\n \n
\n
\n\n {/* Variant B (Challenger) Bar */}\n
\n
\n \n Challenger:\n \n {step.challenger.count} visitors\n \n \n \n {step.challenger.rate}\n \n
\n
\n \n
\n
\n
\n\n {/* Step Lift Badge & Insight */}\n
\n \n {step.isPositive && }\n {step.delta}\n \n \n {step.challenger.retention}\n \n
\n
\n\n {/* Bottom micro insight */}\n
\n Stage Note:\n {step.insight}\n
\n
\n )\n })}\n
\n \n \n\n {/* Guardrails & Quality Verification Footer */}\n \n \n
\n \n Statistical Guardrails & Health Checks\n \n \n Integrity Verified\n \n
\n \n Automatic telemetry assertions verifying sample validity, statistical power, and site performance.\n \n \n \n
\n {guardrails.map((guard) => {\n const GuardIcon = guard.icon\n return (\n \n
\n
\n
\n \n
\n \n {guard.status}\n \n
\n
\n

{guard.title}

\n

\n {guard.value}\n

\n

{guard.description}

\n
\n
\n
\n )\n })}\n \n \n \n \n )\n}\n\nexport default AbTestVariantResults\n", "type": "registry:block", "target": "~/components/blocks/AbTestVariantResults.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/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" ] }