Chart Presetsv1.0.0
میله‌هایی روی کمان: برای پیشرفت به سوی یک یا چند هدف (حلقه‌های هم‌مرکز) یا سهمِ چند بخش روی یک کمان. عددِ کلیدی وسط می‌نشیند. برای یک مقدارِ تکی روی بازه، Meter ساده‌تر است.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { RadialChart } from "@/components/ui/chart-presets"
<RadialChart
data={[{ name: "هدفِ فروش", value: 72 }]}
nameKey="name"
valueKey="value"
max={100}
showTrack
centerLabel={{ value: "٪۷۲", label: "از هدفِ فصل" }}
/>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
هر ردیف یک حلقه است و اولین ردیف بیرونی‌ترین. کمان از بالا شروع می‌شود و پادساعت‌گرد می‌رود، همان جهتِ خواندنِ راست‌به‌چپ. sweep زاویهٔ کمان را تعیین می‌کند: ۳۶۰ دایرهٔ کامل، ۲۵۰ شبیهِ عقربه، ۱۸۰ نیم‌دایره.
برای پیشرفت حتماً max بدهید؛ وگرنه بزرگ‌ترین حلقه همیشه کامل دیده می‌شود. showTrack ریلِ پس‌زمینه را می‌کشد تا جای خالیِ تا سقف دیده شود. stacked همهٔ ردیف‌ها را پشتِ هم روی یک کمان می‌گذارد؛ برای سهمِ چند بخش از یک کل.
دسترس‌پذیری
- عددِ وسط (centerLabel) HTML است و خوانده می‌شود؛ مقدارِ کلیدی را همیشه آنجا بنویسید.
- حلقه‌های هم‌مرکز را با showLabels یا راهنما نام‌گذاری کنید؛ رنگ تنها نشانه نباشد.
مرجع API
RadialChart
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| data | ChartRow[] | — | هر ردیف یک حلقه (یا یک تکه در stacked). |
| nameKey | string | — | فیلدِ نام. |
| valueKey | string | — | فیلدِ مقدار. |
| max | number | بیشینهٔ داده | سقفِ هر حلقه؛ برای پیشرفت حتماً بدهید. |
| sweep | number | 360 | زاویهٔ کمانِ پر به درجه. |
| showTrack | boolean | false | ریلِ پس‌زمینه. |
| showLabels | boolean | false | فهرستِ نام و مقدارِ حلقه‌ها کنارِ نمودار، هم‌رنگِ هر حلقه. |
| centerLabel | { value, label? } | — | عدد و توضیحِ وسط. |
| stacked | boolean | false | همهٔ ردیف‌ها روی یک کمان. |
| thickness | number | 0.6 (انباشته 0.28) | ضخامتِ حلقه‌ها نسبت به شعاع. |
| showLegend | boolean | false | راهنما زیرِ نمودار. |
| valueFormatter | (value: number) => string | عددِ فارسی | قالبِ مقدار. |
مشترک
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| tooltip | ChartTooltipOptions | — | ظاهرِ تولتیپ: indicator، hideLabel، labelFormatter، formatValue و showTotal. جزئیات در برگهٔ «تولتیپ». |
| defaultTooltipIndex | number | — | تولتیپِ این اندیس از اول باز باشد؛ مثلاً مقدارِ امروز. |
| className | string | h-72 w-full | ارتفاع را از همین‌جا بدهید؛ نمودار ارتفاعِ ذاتی ندارد. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
شعاعی با برچسب
نام و مقدارِ هر حلقه در فهرستِ کنارِ نمودار
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
شعاعی با ریل
ریلِ پس‌زمینه جای خالی تا سقف را نشان می‌دهد
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
شعاعی با عددِ وسط
پیشرفت به سوی هدفِ فروشِ فصل
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
شعاعیِ کمانی
کمانِ ۲۵۰ درجه، مثلِ عقربه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
شعاعیِ انباشته
سهمِ آنلاین و حضوری روی یک کمان
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| شعاعی با برچسب | نام و مقدارِ هر حلقه در فهرستِ کنارِ نمودار |
| شعاعی با ریل | ریلِ پس‌زمینه جای خالی تا سقف را نشان می‌دهد |
| شعاعی با عددِ وسط | پیشرفت به سوی هدفِ فروشِ فصل |
| شعاعیِ کمانی | کمانِ ۲۵۰ درجه، مثلِ عقربه |
| شعاعیِ انباشته | سهمِ آنلاین و حضوری روی یک کمان |
دستورالعمل استفاده
پیشرفت با سقف و ریل
انجام بده
max و showTrack: معلوم است چقدر مانده.
انجام نده
بی‌سقف، بزرگ‌ترین مقدار همیشه کامل است و پیشرفت معنا ندارد.
چند هدف
انجام بده
حلقه‌های هم‌مرکز با ریل و سقفِ مشترک.
انجام نده
چند حلقه بی‌نام و بی‌سقف: مقایسه ممکن نیست.