Funnel Chart

import { Component } from '@angular/core';
import { WrFunnelChart } from 'ngwr/charts/funnel-chart';

@Component({ imports: [WrFunnelChart] })
export class MyComponent {}

<wr-funnel-chart
  ariaLabel="Sign-up funnel"
  [stages]="[
    { label: 'Visited', value: 12000 },
    { label: 'Signed up', value: 4800 },
    { label: 'Activated', value: 2880 },
    { label: 'Paid', value: 720 }
  ]"
/>

<wr-funnel-chart ariaLabel="Sign-up funnel" [stages]="signups" [conversion]="conversion()" />

conversion = signal<WrFunnelConversion>('both'); // 'previous' | 'first' | 'none'

<wr-funnel-chart ariaLabel="Email campaign" [stages]="campaign" />

campaign: WrFunnelStage[] = [
  { label: 'Emailed', value: 5000 },
  { label: 'Opened', value: 2100 },
  // More than the stage before: drawn wider, 123.8% of previous.
  { label: 'Shared', value: 2600 },
  // Not measured: no bar, no band, no conversion to or from it.
  { label: 'Clicked', value: NaN },
  // A real zero: a hairline.
  { label: 'Converted', value: 0 },
];

<!-- One full width for both: the larger funnel's top stage -->
<wr-funnel-chart ariaLabel="Web" [stages]="web" [max]="9000" />
<wr-funnel-chart ariaLabel="Mobile" [stages]="mobile" [max]="9000" />

<wr-funnel-chart ariaLabel="Orders by value" [stages]="orders" [valueFormat]="money" [percentFormat]="percent" />

usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', notation: 'compact' });
money = (value: number) => this.usd.format(value);

// A ratio in, as Intl's percent style takes it: 0.25 is a quarter.
percents = new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 2 });
percent = (ratio: number) => this.percents.format(ratio);

<wr-funnel-chart [stages]="signups" ariaLabel="Sign-up funnel" dataTable />

interface WrFunnelStage {
  label: string;
  value: number;
  color?: string;
}

type WrFunnelConversion = 'both' | 'previous' | 'first' | 'none';