Conversion Funnel

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface ConversionFunnelStage {
  name: string
  value: number
}

Theming

CSS custom properties referenced in this item. Override any of them in your :root or per-element to retheme.

Files installed (2)

• src/app/components/blocks/conversion-funnel/conversion-funnel.component.ts3.6 kB

  Copy

  /**
   * Conversion funnel: SmoothFunnel chart with count strip above and
   * stage-name + retention-from-previous strip below.
   *
   * Works for any drop-off flow with 3-6 stages: hiring (applied ->
   * hired), e-commerce (sessions -> purchases), onboarding (signed up
   * -> activated), etc. Reads as a single horizontal "flow":
   *
   *   72K        38.2K       16.8K       5.6K
   *   ╔══════╗╔════════╗╔══════════╗╔══════════╗
   *   ║ 100% ║║  53%   ║║   23%    ║║    8%    ║
   *   ╚══════╝╚════════╝╚══════════╝╚══════════╝
   *   Views      Cart        Checkout    Purchase
   *              -> 53%       -> 44%      -> 33%
   *
   * The middle pill (inside each band) shows the share OF THE TOP
   * stage (100%, 53%, 23%, ...). The bottom retention number shows the
   * stage-to-stage conversion -- usually the more actionable signal.
   */
  import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
  import { cn } from '@/lib/utils'
  import { UiSmoothFunnelComponent } from '@/ui/charts/smooth-funnel/smooth-funnel.component'
  
  export interface ConversionFunnelStage {
    name: string
    value: number
  }
  
  const DEFAULT_PALETTE = [
    'var(--chart-1)',
    'var(--chart-2)',
    'var(--chart-3)',
    'var(--chart-4)',
    'var(--chart-5)',
    'var(--chart-1)',
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-conversion-funnel, [ui-conversion-funnel]',
    standalone: true,
    imports: [UiSmoothFunnelComponent],
    host: {
      'data-uipkge': '',
      'data-slot': 'conversion-funnel',
      '[class]': 'hostClass',
    },
    template: `
      <!-- Top: per-stage count -->
      <div class="grid px-2 text-center" [style.grid-template-columns]="gridColumns">
        @for (stage of data; track 'top-' + stage.name) {
          <div class="text-foreground text-base font-bold tabular-nums">{{ fmt(stage.value) }}</div>
        }
      </div>
  
      <!-- Funnel SVG -->
      <ui-smooth-funnel [data]="data" [height]="height" [colors]="palette" />
  
      <!-- Bottom: stage name + retention from previous -->
      <div class="grid px-2 text-center" [style.grid-template-columns]="gridColumns">
        @for (stage of data; track 'bot-' + stage.name; let i = $index) {
          <div class="space-y-0.5">
            <p class="text-muted-foreground text-xs">{{ stage.name }}</p>
            @if (!hideRetention && retention(i) !== null) {
              <p class="text-info text-xs font-semibold tabular-nums">→ {{ retention(i) }}% retained</p>
            }
          </div>
        }
      </div>
    `,
  })
  export class UiConversionFunnelComponent {
    @Input() data: ConversionFunnelStage[] = []
    /** SmoothFunnel container height. Defaults to 180. */
    @Input() height: number | string = 180
    /** Override colour palette. Defaults to the registry's chart-1..N
     *  OKLCH tokens via CSS variables (so light/dark + theme-customizer
     *  flips ripple through without any JS). Pass a literal hex array to
     *  override. */
    @Input() colors?: string[]
    /** Compact number formatter for the count strip (default toLocaleString). */
    @Input() format?: (n: number) => string
    /** Hide the retention-from-previous footer on each non-first stage. */
    @Input() hideRetention = false
    @Input('class') className?: string
  
    get hostClass(): string {
      return cn('block space-y-2', this.className)
    }
  
    get palette(): string[] {
      return this.colors ?? DEFAULT_PALETTE
    }
  
    get gridColumns(): string {
      return `repeat(${this.data.length}, minmax(0, 1fr))`
    }
  
    fmt(v: number): string {
      return this.format ? this.format(v) : v.toLocaleString()
    }
  
    retention(i: number): number | null {
      if (i === 0) return null
      const prev = this.data[i - 1]?.value ?? 1
      return Math.round((this.data[i]!.value / prev) * 100)
    }
  }
  

• src/app/components/blocks/conversion-funnel/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/conversion-funnel.json