Chart Presetsv1.0.0
روندِ یک یا چند مقدار در طولِ زمان، با ناحیهٔ پرشده زیرِ خط. حجم را بهتر از نمودارِ خطی نشان می‌دهد و با stacked جمعِ سری‌ها را هم. نمونهٔ بالا تعاملی است: بازهٔ زمانی را با برگه‌ها عوض کنید.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای 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 { AreaChart } from "@/components/ui/chart-presets"
const data = [
{ month: "فروردین", online: 420, inStore: 310 },
{ month: "اردیبهشت", online: 515, inStore: 298 },
]
<AreaChart
data={data}
categoryKey="month"
series={[{ key: "online", label: "فروشِ آنلاین" }]}
curve="smooth"
/>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
AreaChart همان ورودیِ بقیهٔ نمودارهای محوردار را می‌گیرد: data، categoryKey و series. شکلِ خط با curve عوض می‌شود: smooth برای روندِ پیوسته، linear وقتی بینِ نقطه‌ها معنایی ندارد و step برای مقدارهایی که یک‌باره عوض می‌شوند (نرخ، قیمتِ پلن).
با stacked ناحیه‌ها روی هم می‌نشینند و با expand هر ستون جمعاً ۱۰۰٪ می‌شود تا سهمِ هر سری دیده شود نه مقدارش. gradient پرشدگی را به رنگِ پس‌زمینه محو می‌کند، نه به شفاف، پس روی کارت و در حالتِ تیره هم درست می‌ماند.
برای انتخابِ بازهٔ زمانی، داده را خودتان برش بزنید (data.slice(-30)) و با Tabs بینِ بازه‌ها جابه‌جا شوید؛ نمودار با دادهٔ تازه دوباره انیمیت می‌شود.
دسترس‌پذیری
- نمودار روی canvas رندر می‌شود؛ کنارش عددِ کلیدی (مثلاً جمعِ بازه) را متنی بنویسید یا جدولِ همان داده را بدهید.
- برگه‌های بازهٔ زمانی با صفحه‌کلید کار می‌کنند و aria-label دارند؛ عنوانِ کارت بازهٔ انتخاب‌شده را هم بگوید.
- در ناحیه‌های انباشته رنگ تنها تمایزدهنده نباشد: راهنما را روشن نگه دارید یا سری‌ها را با آیکون بدهید.
مرجع API
داده
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| data | ChartRow[] | — | آرایهٔ ردیف‌ها؛ همان شکلی که از API می‌آید. |
| categoryKey | string | — | فیلدی که روی محورِ دسته‌ها می‌نشیند (مثلاً ماه). |
| series | { key, label?, color?, icon? }[] | — | فیلدهایی که رسم می‌شوند. color پیش‌فرض --chart-N است؛ icon در تولتیپ می‌نشیند و راهنما را HTML می‌کند. |
AreaChart
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| curve | "smooth" | "linear" | "step" | "smooth" | شکلِ خط. |
| stacked | boolean | false | ناحیه‌ها روی هم؛ وقتی جمعشان معنا دارد. |
| expand | boolean | false | انباشتهٔ صددرصدی؛ محور به درصد می‌رود. |
| gradient | boolean | false | پرشدگی از رنگِ سری به پس‌زمینه. |
| showPoints | boolean | false | نقطه روی هر داده. |
| pointShape | "circle" | "diamond" | "rect" | … | "circle" | شکلِ نقطه‌ها. |
مشترک
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| showLegend | boolean | بیش از یک سری | راهنمای رنگ‌ها؛ اولین سری سمتِ راست. |
| showGrid | boolean | true | خطوطِ شبکه در امتدادِ محورِ مقدار. |
| hideValueAxis | boolean | false | عددهای محورِ مقدار پنهان؛ وقتی برچسب یا تولتیپ کافی است. |
| valueFormatter | (value: number) => string | عددِ فارسی | روی محور، برچسب و تولتیپ هر سه اثر می‌کند. |
| cursor | "line" | "band" | "none" | "line" | نشانگرِ دستهٔ زیرِ ماوس؛ band نوارِ پرِ پشتِ میله‌هاست. |
| 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 پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| نمودار ناحیه‌ای | فروشِ آنلاینِ شش ماهِ اول |
| ناحیه‌ای، خطِ شکسته | بی‌انحنا؛ برای داده‌ای که میانِ نقطه‌ها معنا ندارد |
| ناحیه‌ای پله‌ای | برای مقدارهایی که یک‌باره عوض می‌شوند، مثلِ نرخ یا قیمت |
| ناحیه‌ای با راهنما | فروشِ آنلاین و حضوری، روی هم |
| ناحیه‌ای انباشته | جمعِ فروشِ دو کانال در هر ماه |
| انباشتهٔ صددرصدی | سهمِ هر روشِ پرداخت از فروشِ ماه |
| ناحیه‌ای با آیکون | آیکونِ هر کانال در راهنما و تولتیپ |
| ناحیه‌ای گرادیانی | پرشدگی که به پس‌زمینه محو می‌شود |
| ناحیه‌ای با محورها | محورِ مقدار و خطوطِ شبکه پیدا |
دستورالعمل استفاده
سهم یا مقدار
انجام بده
وقتی سؤال «سهمِ هر روشِ پرداخت چقدر است» است، expand همه را هم‌قد می‌کند و سهم را مقایسه‌پذیر.
انجام نده
برای همان سؤال، انباشتهٔ معمولی سهم را با تغییرِ کل قاطی می‌کند.
چند سری، راهنما روشن
انجام بده
با دو سری یا بیشتر راهنما را نشان دهید تا رنگ‌ها خوانا باشند.
انجام نده
دو ناحیهٔ بی‌راهنما: خواننده باید حدس بزند کدام رنگ کدام است.