Dithered funnel charts for React

import { FunnelChart } from "@/components/dithercharts/funnel-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { stage: "Visits", users: 12000 },
  { stage: "Sign-ups", users: 4800 },
  { stage: "Activated", users: 2900 },
  { stage: "Trials", users: 1300 },
  { stage: "Paid", users: 410 },
]

const chartConfig = {
  users: { label: "Users" },
} satisfies ChartConfig

export function ChartFunnel() {
  return (
    <FunnelChart
      data={chartData}
      config={chartConfig}
      nameKey="stage"
      dataKey="users"
      label="Sign-up funnel"
    />
  )
}

import { FunnelChart } from "@/components/dithercharts/funnel-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { stage: "Impressions", people: 50000 },
  { stage: "Clicks", people: 21000 },
  { stage: "Visits", people: 12000 },
  { stage: "Carts", people: 4100 },
  { stage: "Checkouts", people: 1900 },
  { stage: "Orders", people: 1200 },
  { stage: "Repeats", people: 380 },
  { stage: "Referrals", people: 90 },
]

const chartConfig = {
  people: { label: "People" },
} satisfies ChartConfig

export function ChartFunnelLongTail() {
  return (
    <FunnelChart
      data={chartData}
      config={chartConfig}
      nameKey="stage"
      dataKey="people"
      label="Store funnel"
      height={360}
    />
  )
}

import { FunnelChart } from "@/components/dithercharts/funnel-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { stage: "Visits", users: 12000 },
  { stage: "Sign-ups", users: 4800 },
  { stage: "Activated", users: 2900 },
  { stage: "Trials", users: 1300 },
  { stage: "Paid", users: 410 },
]

const chartConfig = {
  users: { label: "Users" },
} satisfies ChartConfig

export function ChartFunnelNoLabels() {
  return (
    <FunnelChart
      data={chartData}
      config={chartConfig}
      nameKey="stage"
      dataKey="users"
      label="Sign-up funnel"
      labels={false}
    />
  )
}

import { FunnelChart } from "@/components/dithercharts/funnel-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { stage: "Visits", users: 12000 },
  { stage: "Sign-ups", users: 4800 },
  { stage: "Activated", users: 2900 },
  { stage: "Trials", users: 1300 },
  { stage: "Paid", users: 410 },
]

const chartConfig = {
  users: { label: "Users" },
} satisfies ChartConfig

export function ChartFunnelHalftone() {
  return (
    <FunnelChart
      data={chartData}
      config={chartConfig}
      nameKey="stage"
      dataKey="users"
      label="Sign-up funnel"
      style="halftone"
    />
  )
}