Gantt Chart

کامپوننت x-gantt-chart یک کامپوننت قدرتمند Blade برای نمایش نمودار گانت (Gantt Chart) در قالب لاراول است که امکان نمایش و مدیریت پروژه‌ها و وظایف را به صورت بصری و تعاملی فراهم می‌کند.

---

ویژگی‌ها

• نمایش نمودار گانت با استفاده از کتابخانه Highcharts Gantt
• پشتیبانی از نمایش ماهانه و سالانه
• امکان تعریف وظایف با تاریخ شروع و پایان
• نمایش پیشرفت وظایف (Progress)
• پشتیبانی از نشان‌ها (Badges) برای هر آیتم
• قابل شخصی‌سازی رنگ و استایل
• پشتیبانی از تقویم شمسی (Jalali)

---

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
id	string	auto-generated	شناسه اختصاصی برای ظرف نمودار (در صورت عدم ارسال، به‌صورت خودکار تولید می‌شود)
items	array	[]	آرایه‌ای از وظایف برای نمایش در نمودار گانت. باید آرایه‌ای از آرایه‌ها باشد که هر آیتم طبق جدول «ساختار آیتم‌های items» تعریف شده و مقادیر start و end آن‌ها از نوع شیء Carbon باشند.
options	array|null	null	تنظیمات پیشرفته Highcharts Gantt (اختیاری)
range	string	monthly	نوع نمایش بازه زمانی (monthly برای ماهانه یا yearly برای سالانه)
class	string	null	کلاس‌های CSS اضافی برای ظرف نمودار

---

📋 ساختار آیتم‌های items

هر آیتم در آرایه items باید شامل ویژگی‌های زیر باشد:

نام پراپ	نوع داده	الزامی	توضیحات
name	string	بله	نام آیتم
start	Carbon	بله	زمان شروع آیتم به صورت شیء Carbon
end	Carbon	بله	زمان پایان آیتم به صورت شیء Carbon
order	number	خیر	موقعیت ردیف در نمودار
completed	array	خیر	اطلاعات پیشرفت آیتم - شامل amount (عدد بین 0 تا 1) که درصد تکمیل را نشان می‌دهد
color	string	خیر	رنگ آیتم (مقدار hex مانند #056ee9)
badges	array	خیر	آرایه‌ای از نشان‌ها برای نمایش در کنار آیتم

توجه: آرایه items باید به صورت آرایه‌ای از آرایه‌های PHP ارسال شود و مقادیر start و end هر آیتم باید از جنس شئ Carbon باشند. کامپوننت به صورت خودکار این مقادیر را به timestamp میلی‌ثانیه تبدیل می‌کند. اگر مقادیر معتبر ارسال نشوند، خطای InvalidArgumentException ایجاد خواهد شد.

ساختار badges

هر نشان در آرایه badges شامل:

نام پراپ	نوع داده	الزامی	توضیحات
value	string	بله	متن نشان
variant	string	بله	نوع نشان (primary، success، danger، warning و ...)
appearance	string	بله	ظاهر نشان (light, solid و...)

---

مثال‌ها

نمونه ۲: نمودار گانت با پیشرفت و نشان‌ها

<x-gantt-chart
    range="monthly"
    :items="[
        [
            'name' => 'برنامه‌ریزی',
            'start' => verta()->parse('1403-08-01')->toCarbon(),
            'end' => verta()->parse('1403-08-10')->toCarbon(),
            'completed' => [
                'amount' => 0.5,
            ],
            'color' => '#056ee9',
            'order' => 0,
            'badges' => [
                [
                    'value' => '6 روز',
                    'variant' => 'primary',
                    'appearance' => 'light',
                ],
                [
                    'value' => 'انجام شده',
                    'variant' => 'primary',
                    'appearance' => 'light',
                ],
            ],
        ],
        [
            'name' => 'طراحی',
            'start' => verta()->parse('1403-08-07')->toCarbon(),
            'end' => verta()->parse('1403-08-17')->toCarbon(),
            'order' => 1,
            'completed' => [
                'amount' => 0.9,
            ],
            'badges' => [
                [
                    'value' => '6 روز',
                    'variant' => 'primary',
                    'appearance' => 'light',
                ],
                [
                    'value' => 'انجام شده',
                    'variant' => 'success',
                    'appearance' => 'light',
                ],
            ],
        ],
        [
            'name' => 'بررسی',
            'start' => verta()->parse('1403-08-15')->toCarbon(),
            'end' => verta()->parse('1403-08-28')->toCarbon(),
            'order' => 1,
            'completed' => [
                'amount' => 0.5,
            ],
            'badges' => [
                [
                    'value' => '6 روز',
                    'variant' => 'primary',
                    'appearance' => 'light',
                ],
                [
                    'value' => 'انجام شده',
                    'variant' => 'success',
                    'appearance' => 'light',
                ],
            ],
        ],
        [
            'name' => 'توسعه',
            'start' => verta()->parse('1403-08-20')->toCarbon(),
            'end' => verta()->parse('1403-09-01')->toCarbon(),
            'completed' => [
                'amount' => 0.2,
            ],
            'badges' => [
                [
                    'value' => '6 روز',
                    'variant' => 'primary',
                    'appearance' => 'light',
                ],
                [
                    'value' => 'انجام شده',
                    'variant' => 'success',
                    'appearance' => 'light',
                ],
            ],
        ],
        [
            'completed' => [
                'amount' => 0.2,
            ],
            'name' => 'تست',
            'start' => verta()->parse('1403-08-27')->toCarbon(),
            'end' => verta()->parse('1403-09-05')->toCarbon(),
            'order' => 3,
            'color' => '#FF831C',
            'badges' => [
                [
                    'value' => 'انجام شده',
                    'variant' => 'danger',
                    'appearance' => 'light',
                ],
            ],
        ],
        [
            'completed' => [
                'amount' => 1,
            ],
            'name' => 'استقرار',
            'start' => verta()->parse('1403-09-01')->toCarbon(),
            'end' => verta()->parse('1403-10-10')->toCarbon(),
            'order' => 2,
        ],
    ]"
/>