{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "subscription-churn-analytics", "title": "Subscription Churn Analytics", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/subscription-churn-analytics/subscription-churn-analytics.component.ts", "content": "import { Component, Input, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n AlertCircle,\n ArrowDownRight,\n ArrowUpRight,\n Calendar,\n CheckCircle2,\n DollarSign,\n Download,\n LucideAngularModule,\n PhoneCall,\n RefreshCw,\n RotateCcw,\n TrendingDown,\n TrendingUp,\n UserMinus,\n UserPlus,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent, type BadgeVariant } from '@/ui/badge/badge.component'\nimport { UiButtonComponent, type ButtonVariant } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface ChurnPrimaryMetric {\n id: string\n label: string\n value: string\n unit: string\n badge: string\n badgeVariant: Extract\n badgeIcon: LucideIconData\n description: string\n}\n\nexport interface MrrMovement {\n id: string\n label: string\n amount: string\n impact: 'positive' | 'warning' | 'negative' | 'info'\n share: string\n count: string\n colorClass: string\n badgeClass: string\n barClass: string\n icon: LucideIconData\n}\n\nexport interface ChurnReason {\n id: string\n reason: string\n category: string\n share: number\n lostArr: string\n accounts: number\n trend: 'Increasing' | 'Decreasing'\n trendDelta: string\n trendVariant: Extract\n}\n\nexport interface ChurnQuickAction {\n id: string\n title: string\n description: string\n impactBadge: string\n buttonText: string\n buttonVariant: Extract\n icon: LucideIconData\n}\n\nconst primaryMetrics: ChurnPrimaryMetric[] = [\n {\n id: 'net-mrr',\n label: 'Net MRR Growth',\n value: '+$12,480',\n unit: '/ mo',\n badge: '+8.4%',\n badgeVariant: 'success',\n badgeIcon: TrendingUp,\n description: 'Gross additions outpacing cancellations by 6.8x',\n },\n {\n id: 'user-churn',\n label: 'User Churn Rate',\n value: '1.8%',\n unit: '/ mo',\n badge: 'Below 2% benchmark',\n badgeVariant: 'success',\n badgeIcon: CheckCircle2,\n description: 'Logo churn down 0.4% from previous quarter',\n },\n {\n id: 'revenue-churn',\n label: 'Revenue Churn Rate',\n value: '0.9%',\n unit: '/ mo',\n badge: 'Negative Net Churn',\n badgeVariant: 'outline',\n badgeIcon: TrendingDown,\n description: 'Expansion ($6,450) exceeds total churn ($2,170)',\n },\n {\n id: 'ltv',\n label: 'Customer Lifetime Value',\n value: '$4,850.00',\n unit: '',\n badge: 'CAC Payback 4.2 mo',\n badgeVariant: 'secondary',\n badgeIcon: DollarSign,\n description: '3.4x LTV to CAC ratio across active cohort',\n },\n]\n\nconst mrrWaterfall: MrrMovement[] = [\n {\n id: 'new',\n label: 'New Subscriptions',\n amount: '+$8,200.00',\n impact: 'positive',\n share: '52.9%',\n count: '38 new accounts',\n colorClass: 'text-success',\n badgeClass: 'bg-success/10 text-success border-success/20',\n barClass: 'bg-success',\n icon: UserPlus,\n },\n {\n id: 'expansion',\n label: 'Expansion / Upgrades',\n amount: '+$6,450.00',\n impact: 'positive',\n share: '41.6%',\n count: '24 accounts expanded',\n colorClass: 'text-success',\n badgeClass: 'bg-success/10 text-success border-success/20',\n barClass: 'bg-success/80',\n icon: ArrowUpRight,\n },\n {\n id: 'contraction',\n label: 'Contraction / Downgrades',\n amount: '-$1,120.00',\n impact: 'warning',\n share: '7.2%',\n count: '9 tier downgrades',\n colorClass: 'text-warning',\n badgeClass: 'bg-warning/10 text-warning border-warning/20',\n barClass: 'bg-warning',\n icon: ArrowDownRight,\n },\n {\n id: 'churn',\n label: 'Churn / Cancellations',\n amount: '-$1,050.00',\n impact: 'negative',\n share: '6.8%',\n count: '7 accounts lost',\n colorClass: 'text-destructive',\n badgeClass: 'bg-destructive/10 text-destructive border-destructive/20',\n barClass: 'bg-destructive',\n icon: UserMinus,\n },\n {\n id: 'reactivations',\n label: 'Reactivations',\n amount: '+$850.00',\n impact: 'info',\n share: '5.5%',\n count: '4 win-back returns',\n colorClass: 'text-info',\n badgeClass: 'bg-info/10 text-info border-info/20',\n barClass: 'bg-info bg-info',\n icon: RefreshCw,\n },\n]\n\nconst churnReasons: ChurnReason[] = [\n {\n id: 'competitor',\n reason: 'Switched to competitor',\n category: 'Product Fit / Competition',\n share: 38,\n lostArr: '-$24,800.00',\n accounts: 19,\n trend: 'Increasing',\n trendDelta: '+12% QoQ',\n trendVariant: 'destructive',\n },\n {\n id: 'budget',\n reason: 'Budget constraints',\n category: 'Economic / Spend Freeze',\n share: 28,\n lostArr: '-$18,300.00',\n accounts: 14,\n trend: 'Decreasing',\n trendDelta: '-8% QoQ',\n trendVariant: 'success',\n },\n {\n id: 'missing-sso',\n reason: 'Missing feature: SAML SSO',\n category: 'Security / Compliance',\n share: 21,\n lostArr: '-$13,750.00',\n accounts: 8,\n trend: 'Decreasing',\n trendDelta: '-15% QoQ',\n trendVariant: 'success',\n },\n {\n id: 'project-ended',\n reason: 'Project ended',\n category: 'Seasonal / Lifecycle',\n share: 13,\n lostArr: '-$8,500.00',\n accounts: 6,\n trend: 'Increasing',\n trendDelta: '+4% QoQ',\n trendVariant: 'warning',\n },\n]\n\nconst quickActions: ChurnQuickAction[] = [\n {\n id: 'winback',\n title: 'Trigger Discount Win-Back Campaign',\n description: 'Dispatch automated 20% annual renewal incentives to 25 accounts canceled within the last 45 days.',\n impactBadge: 'Est. $4,800 MRR recovered',\n buttonText: 'Trigger Win-Back',\n buttonVariant: 'default',\n icon: RotateCcw,\n },\n {\n id: 'interviews',\n title: 'Schedule Exit Discovery Interviews',\n description:\n 'Book 15-minute product alignment calls with churned enterprise accounts ($10k+ ARR) for feature feedback.',\n impactBadge: '3 enterprise accounts flagged',\n buttonText: 'Schedule Interviews',\n buttonVariant: 'outline',\n icon: PhoneCall,\n },\n {\n id: 'health-alerts',\n title: 'Configure Churn Risk Telemetry Alerts',\n description: 'Automate high-priority notifications when weekly active seat engagement drops below 40% threshold.',\n impactBadge: '12 accounts in risk zone',\n buttonText: 'Configure Triggers',\n buttonVariant: 'outline',\n icon: AlertCircle,\n },\n]\n\n/**\n * ChartMogul / Baremetrics style SaaS subscription churn and MRR analytics dashboard: four\n * SaaS metric cards, the MRR movement waterfall bridge, the churn reason / lost ARR table and\n * the churn prevention playbooks. Angular port of the React `SubscriptionChurnAnalytics`\n * block (same markup, classes, copy and sample data).\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-subscription-churn-analytics, [ui-subscription-churn-analytics]',\n standalone: true,\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"subscription-churn-analytics\"',\n '[class]': 'hostClass',\n },\n template: `\n \n
\n
\n
\n

\n Subscription Churn & MRR Analytics\n

\n
\n

\n Track recurring revenue dynamics, logo retention cohorts, and cancellation root causes.\n

\n
\n\n
\n
\n \n \n \n Last 30 Days\n Last 90 Days\n Last 12 Months\n Year to Date\n \n \n
\n\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 \n {{ metric.value }}\n \n @if (metric.unit) {\n {{ metric.unit }}\n }\n
\n

{{ metric.description }}

\n \n \n }\n
\n\n \n \n \n
\n
\n
\n MRR Movement Waterfall Breakdown\n \n ChartMogul Bridge\n \n
\n \n Decomposition of new customer revenue, expansion, contractions, logo churn, and reactivations.\n \n
\n \n Net MRR Change:\n +$13,330.00\n +9.3%\n
\n \n \n\n \n \n
\n
\n Starting MRR: $142,500.00 \n Ending MRR: $155,830.00 \n
\n
\n
\n
\n
\n \n \n \n
\n
\n \n New (+$8.2k)\n
\n
\n \n Expansion (+$6.45k)\n
\n
\n \n Reactivation (+$850)\n
\n
\n \n Contraction (-$1.12k)\n
\n
\n \n Churn (-$1.05k)\n
\n
\n \n\n \n\n \n
\n @for (item of mrrWaterfall; track item.id) {\n \n
\n \n \n
\n
\n

{{ item.label }}

\n

{{ item.count }}

\n
\n
\n
\n

{{ item.amount }}

\n {{ item.share }} gross\n
\n \n }\n\n \n \n
\n \n \n
\n
\n

Net MRR Movement

\n

All streams combined

\n
\n \n
\n

+$13,330.00

\n Net Positive\n
\n \n \n \n \n\n \n \n \n
\n
\n \n Churn Reason Distribution & Lost ARR Attribution\n \n \n Primary cancellation drivers captured via post-cancellation exit surveys and customer success logs.\n \n
\n
\n Total Lost ARR:\n -$65,350.00\n
\n
\n \n \n
\n
\n \n \n Cancellation Reason\n Distribution Share\n Lost ARR ($)\n Impacted Accounts\n Quarterly Trend\n \n \n \n @for (row of churnReasons; track row.id) {\n \n \n
{{ row.reason }}
\n
{{ row.category }}
\n \n \n
\n
\n {{ row.share }}%\n of total churn\n
\n \n
\n \n \n {{ row.lostArr }}\n \n \n {{ row.accounts }} accounts\n \n \n \n {{ row.trend === 'Increasing' ? '↑' : '↓' }}\n {{ row.trend }}\n ({{ row.trendDelta }})\n \n \n \n }\n \n
\n
\n \n \n\n \n \n \n
\n \n Churn Prevention & Win-Back Quick Actions\n \n Playbooks\n
\n \n High-leverage intervention workflows to stem revenue loss and re-engage churned customer cohorts.\n \n \n \n
\n @for (action of quickActions; track action.id) {\n \n
\n
\n \n \n
\n \n {{ action.impactBadge }}\n \n
\n
\n

{{ action.title }}

\n

{{ action.description }}

\n
\n
\n\n
\n \n
\n \n }\n \n \n \n `,\n})\nexport class UiSubscriptionChurnAnalyticsComponent {\n @Input('class') className?: string\n\n protected readonly cn = cn\n protected readonly primaryMetrics = primaryMetrics\n protected readonly mrrWaterfall = mrrWaterfall\n protected readonly churnReasons = churnReasons\n protected readonly quickActions = quickActions\n\n protected readonly Calendar = Calendar\n protected readonly Download = Download\n protected readonly TrendingUp = TrendingUp\n\n readonly selectedRange = signal('90d')\n\n get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/subscription-churn-analytics/subscription-churn-analytics.component.ts" }, { "path": "packages/registry-angular/blocks/subscription-churn-analytics/index.ts", "content": "export {\n UiSubscriptionChurnAnalyticsComponent,\n type ChurnPrimaryMetric,\n type ChurnQuickAction,\n type ChurnReason,\n type MrrMovement,\n} from './subscription-churn-analytics.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/subscription-churn-analytics/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/progress.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json" ], "description": "ChartMogul and Baremetrics style SaaS subscription churn and MRR analytics dashboard. Features 4 key SaaS metrics cards (Net MRR growth, logo churn rate, net revenue churn, and LTV/CAC), an MRR movement waterfall decomposition bridge, a churn reasons distribution table with lost ARR attribution and trend indicators, and automated churn prevention playbook quick actions.", "categories": [ "analytics", "fintech", "dashboard" ] }