دایره‌ای و دونات
pie-chartنمودارسهم هر بخش از کل، با جمع یا درصد بخش فعال وسط دونات، کنار رفتن برش زیر نشانگر و ادغام برش‌های کوچک در «سایر».
روش پرداخت (دونات)
- درگاه بانکی۶۲٪
- کیف پول۲۱٪
- پرداخت در محل۹٪
- اقساطی۶٪
- سایر۲٪
| مقدار | سهم | |
|---|---|---|
| درگاه بانکی | ۶٬۴۲۰ | ۶۲٫۱٪ |
| کیف پول | ۲٬۱۸۰ | ۲۱٫۱٪ |
| پرداخت در محل | ۹۴۰ | ۹٫۱٪ |
| اقساطی | ۶۱۰ | ۵٫۹٪ |
| سایر | ۱۸۰ | ۱٫۷٪ |
روش پرداخت (دایره)
- درگاه بانکی۶۲٪
- کیف پول۲۱٪
- پرداخت در محل۹٪
- اقساطی۶٪
- سایر۲٪
| مقدار | سهم | |
|---|---|---|
| درگاه بانکی | ۶٬۴۲۰ | ۶۲٫۱٪ |
| کیف پول | ۲٬۱۸۰ | ۲۱٫۱٪ |
| پرداخت در محل | ۹۴۰ | ۹٫۱٪ |
| اقساطی | ۶۱۰ | ۵٫۹٪ |
| سایر | ۱۸۰ | ۱٫۷٪ |
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add pie-chartنصب دستی
محتوای تب «کد» را در
components/charts/pie-chart.tsxبگذارید. پیش‌نیاز: chart-core.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { PieChart } from "@/components/charts/pie-chart"23<PieChart4 title="روش پرداخت"5 data={[6 { label: "درگاه بانکی", value: 6420 },7 { label: "کیف پول", value: 2180 },8 { label: "پرداخت در محل", value: 940 },9 ]}10 centerLabel="سفارش"11 minShare={3}12/>پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| variant | "donut" | "pie" | "donut" | دونات جای جمع کل را وسطش داره. |
| minShare | number | 0 | برش‌های کمتر از این درصد یکی میشن و اسمشون «سایر» میشه. |
| centerLabel / centerValue | string | - | متن زیر عدد وسط و خود عدد. پیش‌فرض جمع کل هست. |
| showPercent | boolean | - | درصد روی برش‌هایی که جا دارن نوشته میشه. |
| sort | boolean | true | بزرگ‌ترین برش اول، از ساعت ۱۲. |
نکته‌ها
- بیشتر از شش برش خوانا نیست. اگه داده‌تون بیشتره minShare بدید یا نمودار میله‌ای افقی را امتحان کنید.