Conversion Funnel

Installation

Variants

Props

Schema

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

interface FunnelStage {
  name: string
  value: number
}

interface HTMLElementTagNameMap {
    'uip-conversion-funnel': UipConversionFunnel
  }
}

Theming

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

Files installed (1)

• src/uip/blocks/conversion-funnel/conversion-funnel.ts3.4 kB

  Copy

  import { LitElement, css, html } from 'lit'
  import { cn } from '../../lib/utils'
  import { tailwind } from '../../lib/styles'
  import { ThemeController } from '../../lib/theme'
  // Side-effect import: registers <uip-smooth-funnel> for standalone use
  // (consumers who install only this block still get a working chart).
  import '../../components/charts/smooth-funnel'
  
  export interface FunnelStage {
    name: string
    value: number
  }
  
  /**
   * <uip-conversion-funnel> — the registry ConversionFunnel block as a web component.
   *
   * Class strings are React's verbatim; the funnel SVG is <uip-smooth-funnel>
   * (React's SmoothFunnel). `data` / `height` / `colors` are properties
   * (attribute: false for the arrays — set them from JS, like the demo does);
   * `hide-retention` is a boolean attribute. React's `format` function prop has
   * no HTML equivalent, so counts render with toLocaleString. No events.
   */
  export class UipConversionFunnel extends LitElement {
    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
    // :host display can't be a utility class (the host has no template of its own).
    static styles = [tailwind, css`:host { display: block; }`]
  
    static properties = {
      data: { attribute: false },
      height: {},
      colors: { attribute: false },
      hideRetention: { type: Boolean, attribute: 'hide-retention' },
    }
  
    data: FunnelStage[] = []
    height: number | string = 180
    colors?: string[]
    hideRetention = false
  
    constructor() {
      super()
      new ThemeController(this)
    }
  
    connectedCallback() {
      super.connectedCallback()
      this.setAttribute('data-uipkge', '')
      this.setAttribute('data-slot', 'conversion-funnel')
    }
  
    private 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 ?? 0) / prev) * 100)
    }
  
    render() {
      const stages = this.data ?? []
      return html`
        <div data-uipkge="" data-slot="conversion-funnel" class=${cn('space-y-2')}>
          <div class="grid px-2 text-center" style="grid-template-columns:repeat(${stages.length}, minmax(0, 1fr))">
            ${stages.map(
              (stage) => html`<div class="text-foreground text-base font-bold tabular-nums">
                ${(stage.value ?? 0).toLocaleString()}
              </div>`,
            )}
          </div>
  
          <uip-smooth-funnel
            .data=${stages.map((s) => ({ name: s.name, value: s.value }))}
            height=${this.height}
            .colors=${this.colors ??
            ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)']}
          ></uip-smooth-funnel>
  
          <div class="grid px-2 text-center" style="grid-template-columns:repeat(${stages.length}, minmax(0, 1fr))">
            ${stages.map(
              (stage, i) => html`<div class="space-y-0.5">
                <p class="text-muted-foreground text-xs">${stage.name}</p>
                ${!this.hideRetention && this.retention(i) !== null
                  ? html`<p class="text-info text-xs font-semibold tabular-nums">→ ${this.retention(i)}% retained</p>`
                  : html``}
              </div>`,
            )}
          </div>
        </div>
      `
    }
  }
  
  customElements.get('uip-conversion-funnel') || customElements.define('uip-conversion-funnel', UipConversionFunnel)
  
  declare global {
    interface HTMLElementTagNameMap {
      'uip-conversion-funnel': UipConversionFunnel
    }
  }
  

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