Chart Presetsv1.0.0
مقایسهٔ چند معیار (سرعت، کیفیت، قیمت، …) روی یک شکل؛ برای دیدنِ نقاطِ قوت و ضعف در یک نگاه. هر ردیفِ داده یک رأس است. تولتیپ همهٔ رأس‌های سری را با نامشان نشان می‌دهد.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای 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 { RadarChart } from "@/components/ui/chart-presets"
const data = [
{ skill: "سرعت", team: 80 },
{ skill: "کیفیت", team: 92 },
{ skill: "هزینه", team: 61 },
]
<RadarChart data={data} categoryKey="skill" series={[{ key: "team", label: "تیم" }]} />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
ورودی مثلِ بقیهٔ نمودارهای دیگ است: categoryKey نامِ هر رأس و series سری‌ها. رأسِ اول بالا می‌نشیند و بقیه ساعت‌گرد، همان جهتی که چشم در متنِ فارسی دور می‌زند.
ظاهرِ شبکه با چند پراپ ساخته می‌شود: gridShape (polygon یا circle)، gridFill برای حلقه‌های یک‌درمیان رنگی، showSpokes برای خطوطِ شعاعی و showGrid برای خودِ حلقه‌ها. fill=false فقط خط می‌کشد که برای مقایسهٔ دو سری خواناتر است.
showValues مقدار را بالای نامِ هر رأس می‌نویسد و showScale عددهای مقیاس را روی محورِ اول. سقف با max ثابت می‌شود؛ وگرنه کمی بالاتر از بیشینهٔ داده گرد می‌شود.
دسترس‌پذیری
- مقایسهٔ مساحت با چشم دقیق نیست؛ برای عددِ دقیق showValues را روشن کنید یا جدول بدهید.
- بیش از سه سری روی هم ناخواناست؛ چند رادارِ کوچک کنارِ هم بگذارید.
مرجع API
داده
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| data | ChartRow[] | — | آرایهٔ ردیف‌ها؛ همان شکلی که از API می‌آید. |
| categoryKey | string | — | فیلدی که روی محورِ دسته‌ها می‌نشیند (مثلاً ماه). |
| series | { key, label?, color?, icon? }[] | — | فیلدهایی که رسم می‌شوند. color پیش‌فرض --chart-N است؛ icon در تولتیپ می‌نشیند و راهنما را HTML می‌کند. |
RadarChart
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| gridShape | "polygon" | "circle" | "polygon" | شکلِ حلقه‌های شبکه. |
| gridFill | boolean | false | حلقه‌ها یک‌درمیان رنگ می‌گیرند. |
| showGrid | boolean | true | حلقه‌های شبکه. |
| showSpokes | boolean | true | خطوطِ مرکز تا هر رأس. |
| fill | boolean | true | پرشدگیِ سری؛ false یعنی فقط خط. |
| showPoints | boolean | false | نقطه روی هر رأس. |
| showValues | boolean | false | مقدارِ سریِ اول بالای نامِ رأس. |
| showScale | boolean | false | عددهای مقیاس روی محورِ اول. |
| max | number | — | سقفِ مقیاس. |
| showLegend | boolean | بیش از یک سری | راهنما زیرِ نمودار. |
| 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 پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
شبکهٔ دایره‌ای
حلقه‌های گرد به‌جای چندضلعی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
دایره‌ای بی‌پره
حلقه‌های گرد، بی‌خطِ شعاعی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
دایره‌ای با پرشدگی
حلقه‌ها یک‌درمیان رنگ می‌گیرند
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
چندضلعی با پرشدگی
حلقه‌های چندضلعی یک‌درمیان رنگی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
راداریِ چندسری
ما و میانگینِ بازار روی هم
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
راداری با راهنما
راهنما زیرِ نمودار
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
راداری با آیکون
آیکونِ هر سری در راهنما و تولتیپ
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
راداری با مقیاس
عددهای مقیاس روی محورِ اول
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| راداری با نقطه | نقطه روی هر رأس |
| راداری فقط خط | ما و بازار، بی‌پرشدگی |
| راداری با مقدار | امتیازِ هر معیار بالای نامش |
| شبکهٔ بی‌پره | فقط حلقه‌های چندضلعی، بی‌خطِ شعاعی |
| راداری بی‌شبکه | فقط خودِ شکلِ داده |
| شبکهٔ دایره‌ای | حلقه‌های گرد به‌جای چندضلعی |
| دایره‌ای بی‌پره | حلقه‌های گرد، بی‌خطِ شعاعی |
| دایره‌ای با پرشدگی | حلقه‌ها یک‌درمیان رنگ می‌گیرند |
| چندضلعی با پرشدگی | حلقه‌های چندضلعی یک‌درمیان رنگی |
| راداریِ چندسری | ما و میانگینِ بازار روی هم |
| راداری با راهنما | راهنما زیرِ نمودار |
| راداری با آیکون | آیکونِ هر سری در راهنما و تولتیپ |
| راداری با مقیاس | عددهای مقیاس روی محورِ اول |
دستورالعمل استفاده
دو سری، فقط خط
انجام بده
بی‌پرشدگی، هر دو شکل کامل دیده می‌شوند.
انجام نده
دو ناحیهٔ پر روی هم بخشی از سریِ زیرین را می‌پوشانند.
مقدار کنارِ نام
انجام بده
عددِ هر رأس پیداست.
انجام نده
بی‌شبکه و بی‌عدد، فقط یک شکل می‌ماند که اندازه‌اش معلوم نیست.