نمودار قیف

نصب

1. با CLI

   اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

   $ npx vibefarsi add funnel-chart

2. نصب دستی

   محتوای تب «کد» را در components/charts/funnel-chart.tsx بگذارید. پیش‌نیاز: chart-core.

   $ npm i lucide-react
   کپی کل فایلregistry json

استفاده

1import { FunnelChart } from "@/components/charts/funnel-chart"23<FunnelChart4  title="قیف خرید"5  data={[6    { label: "بازدید محصول", value: 48_200 },7    { label: "افزودن به سبد", value: 9_640 },8    { label: "شروع پرداخت", value: 4_120 },9    { label: "پرداخت موفق", value: 3_010 },10  ]}11/>

پراپ‌ها

نکته‌ها

• برچسب مرحله سمت راست، عدد و درصد سمت چپ و نرخ تبدیل بین دو ردیف نوشته میشه.