حلقه‌ی پیشرفت و گیج
radial-chartنمودارحلقههای هم‌مرکز برای پیشرفت چند هدف و یک گیج نیم‌دایره که از راست به چپ پر میشه، با بازه‌های رنگی و عقربه.
اهداف فصل
- فروش۸۲٪
- مشتری جدید۶۸٪
- رضایت۹۲٪
| مقدار | سقف | درصد | |
|---|---|---|---|
| فروش | ۸۲ | ۱۰۰ | ۸۲٪ |
| مشتری جدید | ۳۴۰ | ۵۰۰ | ۶۸٪ |
| رضایت | ۴٫۶ | ۵ | ۹۲٪ |
امتیاز رضایت مشتری
| مقدار | |
|---|---|
| امتیاز رضایت مشتری | ۷۲ |
| کمینه | ۰ |
| بیشینه | ۱۰۰ |
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add radial-chartنصب دستی
محتوای تب «کد» را در
components/charts/radial-chart.tsxبگذارید. پیش‌نیاز: chart-core.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { RadialChart, GaugeChart } from "@/components/charts/radial-chart"23<RadialChart4 title="اهداف فصل"5 data={[6 { label: "فروش", value: 82 },7 { label: "مشتری جدید", value: 340, max: 500 },8 { label: "رضایت", value: 4.6, max: 5 },9 ]}10 centerValue="۷۴٪"11 centerLabel="میانگین"12/>1314<GaugeChart15 title="امتیاز رضایت"16 value={72}17 bands={[18 { to: 40, color: "var(--destructive)", label: "ضعیف" },19 { to: 70, color: "var(--warning)", label: "متوسط" },20 { to: 100, color: "var(--success)", label: "خوب" },21 ]}22/>پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| data[].max | number | 100 | سقف هر حلقه جداست، پس واحدهای مختلف کنار هم می‌شینن. |
| sweep | number | 360 | ۲۷۰ یک حلقه‌ی باز «C» شکل می‌سازه. |
| GaugeChart bands | { to, color, label }[] | - | بازه‌های رنگی بیرون گیج. برچسب بازه‌ی فعلی زیر عدد میاد. |
| GaugeChart min / max | number | 0 / 100 | کمینه سمت راست و بیشینه سمت چپه. |
نکته‌ها
- گیج مثل بقیه‌ی نمودارها از راست شروع میشه، پس عقربه با بیشتر شدن عدد به چپ می‌چرخه.