اجزاء
اختصار عددلینک عملکارت سازگارپیوستبررسی اختیارنمایش تقویمنمودارپنجره تاییدظرفورودی قالب سفارشیجدول دادهورودی تاخیریتصویر دو رودکمه نقطه چیننمودار گانتمقدار رشد و کاهشمتن آیکونگالری تصاویربارگذاریماسونیاستخلال رسانهتغییر ناوبریورودی عددیورودی OTPورودی رمز عبورورودی الگونقشه منطقهویرایشگر متن غنیگزینه آیتم قطعه پیشتنظیمپاورقی چسبندهبرجستهسازی دستورگروه آواتار کاربران
نمودار گانت (GanttChart)
این کامپوننت نسخهای گسترشیافته از کتابخانه gantt-task-react است. ایدهآل برای نمایش زمانبندی پروژهها، وظایف، و نقاط عطف با گزینههای سفارشیسازی پیشرفته.
مثال (Example)
مثال استفاده.
نام
API
نمودار گانت (GanttChart)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| tasks | آرایهای از وظایف که در نمودار گانت نمایش داده میشوند. هر وظیفه شامل ویژگیهایی مانند شناسه، نام، شروع، پایان و پیشرفت است. | ExtendedTask | [] |
| viewMode | حالت نمایش نمودار گانت. میتواند به ساعت، ربع روز، نیمروز، روز، هفته، ماه یا سال تنظیم شود. | ViewMode | ViewMode.Day |
| extraColumns | آرایهای از اشیاء که ستونهای اضافی برای نمایش در لیست وظایف را تعریف میکنند. هر شیء شامل یک عنوان و یک رندرکننده سلول است. | { header: ExtraHeader; cell: ExtraCell }[] | [] |
| colorsMap | نقشهای از رنگهای سفارشی برای انواع وظایف یا وظایف خاص. این ویژگی امکان سبکدهی پویا را بر اساس نوع وظیفه یا پروژه فراهم میکند. | Object{string, string} | {} |
| showArrow | یک پرچم برای تعیین نمایش یا عدم نمایش پیکانهای وابستگی بین وظایف. وقتی false باشد، پیکانها مخفی میشوند. | boolean | true |
| headerHeight | ارتفاع سربرگ در نمودار گانت، بر حسب پیکسل. | number | 50 |
| columnWidth | عرض هر ستون در نمودار گانت، بر حسب پیکسل. | number | 65 |
| rowHeight | ارتفاع هر سطر در نمودار گانت، بر حسب پیکسل. | number | 50 |
| barCornerRadius | شعاع گوشههای میلههای وظایف در نمودار گانت. | number | 6 |
| TaskListHeader | کامپوننت سربرگ سفارشی برای لیست وظایف. امکان افزودن سربرگهای اضافی تعریفشده در extraColumns را فراهم میکند. | { headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string; } | TaskListHeader |
| TaskListTable | کامپوننت جدول سفارشی برای لیست وظایف که امکان افزودن سلولهای اضافی تعریفشده در extraColumns را فراهم میکند. | { rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; onExpanderClick: (task: Task) => void; } | TaskListTable |
| TooltipContent | کامپوننت راهنمای سفارشی برای نمایش جزئیات وظایف. | { task: Task; fontSize: string; fontFamily: string; } | TooltipContent |
| todayColor | رنگی که برای برجستهکردن روز جاری در نمودار گانت استفاده میشود. | string | url(#horzLines) |
| arrowColor | رنگ پیکانهای وابستگی بین وظایف. | string | #3380fa |
| onSelect | تابعی که هنگام انتخاب یا عدم انتخاب یک وظیفه فراخوانی میشود. | (task: Task, isSelected: boolean) => void | undefined |
| onDoubleClick | تابعی که هنگام دوبار کلیک روی یک وظیفه فراخوانی میشود. | (task: Task) => void | undefined |
| onClick | تابعی که هنگام کلیک روی یک وظیفه فراخوانی میشود. | (task: Task) => void | undefined |
| onDateChange | تابعی که هنگام تغییر تاریخ شروع یا پایان وظیفه فراخوانی میشود. بازگرداندن false یا خطا عملیات را لغو میکند. | (task: Task, children: Task[]) => void | boolean | Promise | undefined |
| onProgressChange | تابعی که هنگام تغییر پیشرفت وظیفه فراخوانی میشود. بازگرداندن false یا خطا عملیات را لغو میکند. | (task: Task, children: Task[]) => void | boolean | Promise | undefined |
| onDelete | تابعی که هنگام حذف یک وظیفه فراخوانی میشود. بازگرداندن false یا خطا عملیات را لغو میکند. | (task: Task) => void | boolean | Promise | undefined |
| onExpanderClick | تابعی که هنگام کلیک روی آیکون بازکننده در لیست وظایف فراخوانی میشود. | (task: Task) => void | undefined |